/* ===============================================================
   ToolDuck — Resume Tools landing page
   ===============================================================
   Loaded only on /resume-tools/. The section rhythm, the bands, the
   light field, the eyebrow and the reading measure all come from
   main.css; this file only owns what is specific to this page — the
   hero, the live showcase, and the three content grids.

   The resume sheets themselves are styled by section 9 of this file and
   are deliberately NOT themed: they are a document, and they must look
   the same here as in the builder and in the exported PDF.
   =============================================================== */

/* ---------------------------------------------------------------
   1. Hero
   --------------------------------------------------------------- */
.rsm-hero {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    /* Top-aligned, not centred. The sheet is a full A4 page, so centring the
       copy against it left the heading, the lede and both buttons floating
       in the middle of a very tall row with a band of empty space above
       them. The two columns now start on the same line. */
    align-items: start;
}

/* The copy gets the first column and the sheet the wider second one —
   the product is the point, so it gets the room. */
@media (min-width: 980px) {
    .rsm-hero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}

.rsm-hero__copy { max-width: 46ch; }

.rsm-hero__copy h1 {
    margin: 0 0 .75rem;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.05rem);
    line-height: 1.08;
    letter-spacing: -.028em;
    text-wrap: balance;
}

.rsm-hero__lede {
    margin: 0 0 1.4rem;
    color: var(--ink-2);
    font-size: clamp(1rem, .95rem + .3vw, 1.13rem);
    line-height: 1.6;
}

.rsm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-bottom: 1.35rem;
}

/* A hero CTA earns a little more presence than a form button. */
.rsm-hero__actions .btn {
    padding: .8rem 1.4rem;
    font-size: 1rem;
}

/* ---------------------------------------------------------------
   2. The live showcase
   ---------------------------------------------------------------
   One large sheet, plus a strip of thumbnails that swaps it. Every
   sheet is a real render scaled with a transform, so the frame owns
   the size and clips whatever the untransformed 794px sheet would
   otherwise overflow.
   --------------------------------------------------------------- */
.rsm-show {
    display: grid;
    gap: .85rem;
    min-width: 0;
}

.rsm-show__stage {
    display: grid;
    gap: .6rem;
    min-width: 0;
}

/* The frame the large sheet is scaled into. Its height is set by the
   sheet's own aspect ratio once scaled, so the box grows with the
   width rather than being a guessed fixed number. */
.rsm-show__sheet {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 90% at 50% 0%,
            color-mix(in srgb, var(--brand) 9%, transparent) 0%,
            transparent 68%),
        var(--bg-muted);
    box-shadow: var(--shadow-md);
}
/* The stage is the scroll/clip box; the sheet inside keeps its A4 size
   and is scaled down to fit. */
.rsm-show__sheet .rsm-doc { padding: clamp(.6rem, 2vw, 1.1rem); }
.rsm-show__sheet .rsm-pages { gap: 0; }
.rsm-show__sheet .rsm-page { box-shadow: 0 1px 3px rgba(16, 24, 40, .14); }

/* Height comes from fit() in showcase.js, which sets it explicitly.
   Deliberately NOT `aspect-ratio` here: an explicit height together with
   an aspect ratio makes the browser derive the WIDTH from the height, so
   after a desktop-to-mobile resize the sheet stayed 582px wide inside a
   390px viewport and the page scrolled sideways by 208px. `min-height: 0`
   is what lets the explicit height win over the content, which is two
   pages of A4. The frame is empty until the script draws into it, so
   there is no pre-JS height to fall back to.
   `.rsm-show-card__preview` and `.rsm-show__tab-frame` keep their
   aspect-ratio: nothing sets a height on those. */
.rsm-show__sheet { min-height: 0; }

/* The gallery cards get the same treatment, for the same reason plus one
   more: a grid of cards with different page counts is a ragged grid. */
.rsm-show-card__preview { aspect-ratio: 210 / 297; min-height: 0; }

.rsm-show__caption {
    margin: 0;
    color: var(--ink-3);
    font-size: .82rem;
    line-height: 1.5;
}

/* --- Template strip --------------------------------------------
   Leads the showcase now, so it reads as the control it is: a row of
   sheets you pick from, with the chosen one marked.
   The columns share the width evenly until they would get too narrow to
   read, then the strip scrolls rather than squeezing the previews. */
.rsm-show__tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78px, 1fr);
    gap: .5rem;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-width: thin;
    /* Dragging on a narrow screen is expected; a scrollbar is not. */
    overscroll-behavior-x: contain;
}

.rsm-show__tab {
    display: grid;
    gap: .35rem;
    justify-items: center;
    padding: .4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.rsm-show__tab:hover { border-color: var(--brand-border); background: var(--brand-soft); }

.rsm-show__tab.is-current {
    border-color: var(--accent);
    background: var(--brand-soft);
    box-shadow: 0 0 0 1px var(--accent);
}

/* A check, so the selected state is not signalled by colour alone. */
.rsm-show__tab.is-current .rsm-show__tab-name::before {
    content: "\2713  ";
    color: var(--accent);
    font-weight: 800;
}

.rsm-show__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.rsm-show__tab-frame {
    display: block;
    width: 100%;
    /* The frame sizes itself, so a thumbnail never depends on when the
       grid finished laying out. */
    aspect-ratio: 210 / 297;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: #ffffff;
}

.rsm-show__tab-mount { display: block; }

/* The miniature is a real A4 render; pointer events belong to the button
   around it, not to the sheet. */
.rsm-show__tab-mount .rsm-pages { transform-origin: top left; pointer-events: none; }
.rsm-show__tab-mount .rsm-doc { --rsm-page-w: 210mm; }

.rsm-show__tab-name {
    color: var(--ink-2);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.25;
}

/* ---------------------------------------------------------------
   3. Template gallery
   --------------------------------------------------------------- */
.rsm-show-gallery {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
}

.rsm-show-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: border-color .16s, box-shadow .16s;
}

.rsm-show-card:hover { border-color: var(--brand-border); box-shadow: var(--shadow-md); }

.rsm-show-card__preview {
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--bg-muted);
}

.rsm-show-card__mount { display: block; }
.rsm-show-card__mount .rsm-pages { transform-origin: top left; }

.rsm-show-card__body { display: grid; gap: .5rem; padding: 1rem; }

.rsm-show-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
}

.rsm-show-card__name { margin: 0; font-size: 1.02rem; letter-spacing: -.01em; }

.rsm-show-card__ats {
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--ink-3);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rsm-show-card__ats[data-level="best"] {
    border-color: var(--brand-border);
    color: var(--brand-strong);
    background: var(--brand-soft);
}

.rsm-show-card__desc {
    margin: 0;
    color: var(--ink-2);
    font-size: .86rem;
    line-height: 1.55;
}

.rsm-show-card__actions { margin-top: auto; }

.rsm-show-gallery__more { margin: 1.5rem 0 0; text-align: center; }

/* ---------------------------------------------------------------
   4. Six steps
   --------------------------------------------------------------- */
.rsm-steps {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rsm-step;
}

.rsm-step {
    display: grid;
    gap: .4rem;
    align-content: start;
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.rsm-step__num {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: .82rem;
    font-weight: 800;
}

.rsm-step__title { margin: .35rem 0 0; font-size: 1rem; }

.rsm-step__text {
    margin: 0;
    color: var(--ink-2);
    font-size: .87rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------------
   5. Feature cards
   --------------------------------------------------------------- */
.rsm-features {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsm-feature {
    display: grid;
    gap: .5rem;
    align-content: start;
    padding: 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.rsm-feature__title { margin: .5rem 0 0; font-size: 1rem; }

.rsm-feature__text {
    margin: 0;
    color: var(--ink-2);
    font-size: .87rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------------
   6. Responsive
   --------------------------------------------------------------- */
@media (max-width: 979px) {
    .rsm-hero__copy { max-width: none; }
    /* Copy first on a phone: the heading explains what the sheet is. */
    .rsm-hero__copy { order: 1; }
    .rsm-show { order: 2; }
}

@media (max-width: 560px) {
    .rsm-hero__actions .btn { width: 100%; }
    .rsm-show__tabs { grid-auto-columns: 31%; }
}

/* ---------------------------------------------------------------
   7. Reduced motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rsm-show__tab,
    .rsm-show-card { transition: none; }
}