/* ========================================
   TOOL UPGRADE CTA — free-vs-paid panel on public /tools pages
   ========================================

   Rendered by Client/Components/Tools/ToolUpgradeCta.razor on the hand-built tool pages that
   carried no upgrade path. Those pages are uniformly dark (phase-one-tools.css uses #07111f on
   slate; prism-maker-template-gallery.css uses the same slate family), so this panel is written
   for a dark surround and sets every colour explicitly rather than inheriting one — the hosts do
   not share a token set, and an inherited colour is how a panel ends up invisible on one of them.

   Self-contained on purpose: it is mounted into six different host stylesheets with six different
   class prefixes, and matching each would multiply the surface that can regress.
   ======================================== */

.tool-upgrade {
    --tuc-surface: rgba(15, 23, 42, .62);
    --tuc-surface-raised: rgba(15, 23, 42, .86);
    --tuc-border: rgba(148, 163, 184, .22);
    --tuc-title: #f8fafc;
    --tuc-text: #cbd5e1;
    --tuc-muted: #94a3b8;
    --tuc-accent: #34d399;
    --tuc-accent-ink: #052e1f;

    margin: 2rem 0 0;
    padding: 1.5rem;
    border: 1px solid var(--tuc-border);
    border-radius: 17px;
    background: var(--tuc-surface);
    color: var(--tuc-text);
}

.tool-upgrade__eyebrow {
    margin: 0;
    color: var(--tuc-accent);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.tool-upgrade > h2.tool-upgrade__title,
.tool-upgrade > h2 {
    margin: .4rem 0 1.2rem;
    color: var(--tuc-title);
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.tool-upgrade__compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    /* Equal heights: the two sides are a comparison, and a stunted free card reads as an
       afterthought rather than half of a pair. tool-upgrade__tag carries margin-top:auto so it
       still settles to the bottom of the shorter side. */
    align-items: stretch;
}

@media (max-width: 720px) {
    .tool-upgrade__compare { grid-template-columns: 1fr; }
}

.tool-upgrade__side {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.1rem;
    border: 1px solid var(--tuc-border);
    border-radius: 13px;
    background: rgba(2, 8, 23, .34);
}

.tool-upgrade__side--paid {
    background: var(--tuc-surface-raised);
    border-color: rgba(52, 211, 153, .34);
}

.tool-upgrade .tool-upgrade__side h3 {
    margin: 0;
    color: var(--tuc-title);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.tool-upgrade .tool-upgrade__side p {
    margin: 0;
    color: var(--tuc-text);
    font-size: .95rem;
    line-height: 1.6;
}

/* Specificity, not !important — the hosts style their own descendants and this has to win
   without becoming unoverridable (see the standing no-!important rule). */
.tool-upgrade .tool-upgrade__side p.tool-upgrade__tag {
    margin-top: auto;
    color: var(--tuc-muted);
    font-size: .76rem;
    letter-spacing: .04em;
}

.tool-upgrade__sample {
    margin: .35rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* The samples are real product output and their aspect ratios differ wildly — the Prism
   infographic is 1080x1978 portrait, a Lumen slide is landscape. Left to height:auto the portrait
   one rendered ~700px tall and dwarfed the free column. Crop to a consistent banner anchored at
   the top, which is where the headline and first module sit. */
.tool-upgrade .tool-upgrade__sample img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--tuc-border);
    border-radius: 9px;
    background: rgba(2, 8, 23, .5);
}

.tool-upgrade .tool-upgrade__sample figcaption {
    color: var(--tuc-muted);
    font-size: .72rem;
    letter-spacing: .03em;
}

.tool-upgrade a.tool-upgrade__cta {
    display: inline-block;
    margin-top: 1.2rem;
    min-height: 42px;
    padding: .68rem 1.1rem;
    border-radius: 9px;
    border: 1px solid transparent;
    background: var(--tuc-accent);
    color: var(--tuc-accent-ink);
    font-weight: 800;
    font-size: .95rem;
    text-decoration: none;
}

.tool-upgrade a.tool-upgrade__cta:hover,
.tool-upgrade a.tool-upgrade__cta:focus-visible {
    background: #6ee7b7;
    color: var(--tuc-accent-ink);
    text-decoration: none;
}

.tool-upgrade a.tool-upgrade__cta:focus-visible {
    outline: 2px solid #a7f3d0;
    outline-offset: 3px;
}