/* Stages — page-scoped visual parity with https://ashaeiynn.com/stages/
 *
 * Root cause this file exists to fix: the source composes three distinct
 * typographic roles — section heading, item number, item title — but the
 * builder emits all three as `h2.pb-heading`, which the shared stylesheet
 * sets to 42px. Every item number and item title on the page therefore
 * rendered at display size, which is what inflated the document by ~28% on
 * desktop and ~42–49% on tablet/mobile.
 *
 * Every selector below is scoped beneath `.page-stages`. Nothing here can
 * reach another public page, and `site.css` is not touched.
 *
 * Values are measured from the source with `document.fonts.ready` resolved,
 * WebKit, DPR 1, at the viewport noted against each block.
 */

/* ---- Content measure -------------------------------------------------- */
/* The shared builder caps content at --builder-width (1382px), which is right
   at 1440 but leaves ~460px of dead margin at 1920. The source instead runs a
   ~2% gutter at every width: 1382/1440 and 1843/1920 both measure 96%. */
.page-stages .pb-root > .pb-section {
    padding-inline: 2%;
}

/* ---- Hero / title band ------------------------------------------------ */
/* Source-measured at 1440: a 473px band carrying breadcrumb-bgd.png over the
   brand sand, cover-positioned. The asset is already in staging Media with an
   identical SHA-256 to the source's copy, so it is served through the Media
   delivery URL — never hotlinked, and no duplicate file added. */
.page-stages .pb-root > .pb-section:first-child {
    min-height: 473px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--sand);
    background-image: url('/media/01M0DGH9NC16R1YH2F0VS6NGPW?v=1');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.page-stages .pb-root > .pb-section:first-child .pb-heading {
    text-align: center;
    font-size: 42px;
    line-height: 50.4px;
}

/* ---- Stage section headings ------------------------------------------- */
/* Source: Elsie 42/50.4, centred. Ours inherited the shared left alignment. */
.page-stages .pb-root > .pb-section > .pb-heading {
    text-align: center;
    font-size: 42px;
    line-height: 50.4px;
    margin-block: 0 2.2rem;
}

/* ---- Numbered item rows ------------------------------------------------ */
/* An item row is the only `.pb-columns` that sits *inside* a `.pb-column`;
   the stage's own image/copy row is a direct child of the stage section. That
   distinction is what lets these rules target items without also catching the
   outer composition, whose ratio classes overlap. */
.page-stages .pb-column .pb-columns.pb-cols-2 {
    /* Source: the number sits in a 77px capsule and the copy takes the rest.
       The shared `wide-right` ratio was giving the number 213–313px and
       squeezing every item title into an unnecessary wrap. */
    grid-template-columns: 77px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* The number itself: source-measured 24/28.8, centred inside a 77x41 capsule
   with a 1px muted hairline and a 20px radius. */
.page-stages .pb-column .pb-columns.pb-cols-2 > .pb-column:first-child .pb-heading {
    font-size: 24px;
    line-height: 28.8px;
    text-align: center;
    margin: 0;
    width: 77px;
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--muted);
    border-radius: 20px;
}

/* The item title: source-measured 32/38.4, left-aligned — not the 42/50.4 the
   shared rule was giving it. */
.page-stages .pb-column .pb-columns.pb-cols-2 > .pb-column:last-child .pb-heading {
    font-size: 32px;
    line-height: 38.4px;
    text-align: left;
    margin-block: 0 .5rem;
}
.page-stages .pb-column .pb-columns.pb-cols-2 > .pb-column:last-child .pb-text {
    font-size: 16px;
    line-height: 22.4px;
}

/* Restored lists sit inside the item copy column. */
.page-stages .pb-column .pb-icon-list {
    margin-block: .35rem .5rem;
    padding-inline-start: 0;
}
.page-stages .pb-column .pb-icon-list-item {
    font-size: 16px;
    line-height: 22.4px;
    gap: .5rem;
}

/* ---- Stage artwork ----------------------------------------------------- */
/* Source arches the top of every stage image. Ultra Pro is the one exception:
   its lower corners are square. */
.page-stages .pb-root > .pb-section .pb-image img {
    border-radius: 350px 350px 20px 20px;
    object-fit: cover;
}
.page-stages .pb-root > .pb-section:nth-child(6) .pb-image img {
    border-radius: 350px 350px 0 0;
}

/* Source-measured desktop artwork boxes at 1440. The tall pair keep a 410/1024
   ratio; the square pair are sized to their own source dimensions. */
@media (min-width: 64.0625rem) {
    /* Intermediate + Ultra — the tall arched pair. */
    .page-stages .pb-root > .pb-section:nth-child(3) .pb-image img,
    .page-stages .pb-root > .pb-section:nth-child(5) .pb-image img {
        width: 410px;
        aspect-ratio: 410 / 1024;
        height: auto;
        margin-inline: auto;
        display: block;
    }
    /* Advanced — larger square, and centred against its longer copy rather
       than pinned to the top of the row. */
    .page-stages .pb-root > .pb-section:nth-child(4) .pb-image img {
        width: 658px;
        aspect-ratio: 1;
        height: auto;
        margin-inline: auto;
        display: block;
    }
    .page-stages .pb-root > .pb-section:nth-child(4) > .pb-section > .pb-columns {
        align-items: center;
    }
    /* Ultra Pro — 500px square. */
    .page-stages .pb-root > .pb-section:nth-child(6) .pb-image img {
        width: 500px;
        aspect-ratio: 1;
        height: auto;
        margin-inline: auto;
        display: block;
    }
}

/* ---- Responsive image variants ---------------------------------------- */
/* The source publishes a separate mobile composition for the two tall images
   (Intermediate and Ultra), swapping them for square crops of the same
   originals. Both variants are real blocks in the tree, authored in order
   desktop-then-mobile; exactly one is ever displayed, so the hidden one adds
   no height and leaves no gap. Selected positionally because the builder has
   no arbitrary-class setting — and deliberately so: a class slot would be an
   opening for author-supplied markup. */
.page-stages .pb-root > .pb-section:nth-child(3) .pb-image + .pb-image,
.page-stages .pb-root > .pb-section:nth-child(5) .pb-image + .pb-image {
    display: none;
}
@media (max-width: 47.9375rem) {
    .page-stages .pb-root > .pb-section:nth-child(3) .pb-image:first-of-type,
    .page-stages .pb-root > .pb-section:nth-child(5) .pb-image:first-of-type {
        display: none;
    }
    .page-stages .pb-root > .pb-section:nth-child(3) .pb-image + .pb-image,
    .page-stages .pb-root > .pb-section:nth-child(5) .pb-image + .pb-image {
        display: block;
    }
}

/* ---- Tablet ------------------------------------------------------------ */
/* The source keeps the alternating two-column composition here — it must not
   collapse early — and keeps desktop display sizes, dropping only the body to
   15/21. Source-measured artwork at 1024: tall pair ~347w, Advanced 450,
   Ultra Pro 416; at 768: ~247w, 322 and 298. Expressed as a share of the
   column so both ends land without a third breakpoint. */
@media (min-width: 48rem) and (max-width: 64rem) {
    .page-stages .pb-root > .pb-section > .pb-section > .pb-columns {
        grid-template-columns: 1fr 1fr;
    }
    .page-stages .pb-column .pb-columns.pb-cols-2 > .pb-column:last-child .pb-text,
    .page-stages .pb-column .pb-icon-list-item {
        font-size: 15px;
        line-height: 21px;
    }
    /* Source-measured: the band is 423px at 1024 / 392px at 768, but it sits
       partly under the header, so the content below it starts at ~279–320.
       That visible span is what the height has to reproduce. */
    .page-stages .pb-root > .pb-section:first-child { min-height: 280px; }
    /* Tall arched pair keep their ratio, scaled to the column. */
    .page-stages .pb-root > .pb-section:nth-child(3) .pb-image img,
    .page-stages .pb-root > .pb-section:nth-child(5) .pb-image img {
        width: 70%;
        aspect-ratio: 410 / 1024;
        height: auto;
        margin-inline: auto;
        display: block;
    }
    /* Squares fill most of their column. */
    .page-stages .pb-root > .pb-section:nth-child(2) .pb-image img,
    .page-stages .pb-root > .pb-section:nth-child(4) .pb-image img,
    .page-stages .pb-root > .pb-section:nth-child(6) .pb-image img {
        width: 90%;
        aspect-ratio: 1;
        height: auto;
        margin-inline: auto;
        display: block;
    }
}

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
    /* Source-measured at 390: title 34/40.8, numbers and item titles 34/40.8
       and centred, body 14/19.6, band 323px. */
    .page-stages .pb-root > .pb-section:first-child {
        min-height: 323px;
    }
    .page-stages .pb-root > .pb-section:first-child .pb-heading,
    .page-stages .pb-root > .pb-section > .pb-heading {
        font-size: 34px;
        line-height: 40.8px;
    }
    .page-stages .pb-column .pb-columns.pb-cols-2 {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: .6rem;
    }
    .page-stages .pb-column .pb-columns.pb-cols-2 > .pb-column:first-child .pb-heading {
        font-size: 34px;
        line-height: 40.8px;
        width: auto;
        height: auto;
        border: 0;
        padding: 0;
    }
    .page-stages .pb-column .pb-columns.pb-cols-2 > .pb-column:last-child .pb-heading {
        font-size: 34px;
        line-height: 40.8px;
        text-align: center;
    }
    .page-stages .pb-column .pb-columns.pb-cols-2 > .pb-column:last-child .pb-text,
    .page-stages .pb-column .pb-icon-list-item {
        font-size: 14px;
        line-height: 19.6px;
    }
    .page-stages .pb-column .pb-columns.pb-cols-2 > .pb-column:last-child .pb-text {
        text-align: center;
    }
    /* The source leads every stage with its artwork. Fundamental (2nd section)
       and Advanced (4th) author the copy column first, so only those two need
       their image lifted above it — the others already lead with the image. */
    .page-stages .pb-root > .pb-section:nth-child(2) > .pb-section > .pb-columns > .pb-column:last-child,
    .page-stages .pb-root > .pb-section:nth-child(4) > .pb-section > .pb-columns > .pb-column:last-child {
        order: -1;
    }
    .page-stages .pb-root > .pb-section .pb-image img {
        width: 346px;
        max-width: 100%;
        aspect-ratio: 1;
        margin-inline: auto;
        display: block;
    }
}

/* ---- Navigation ------------------------------------------------------- */
/* The source marks the current section in the menu. Scoped here so the shared
   header is untouched for every other page. */
.page-stages .site-nav a[href="/pages/stages"] {
    color: var(--accent);
    font-weight: 600;
}

/* ---- Footer ------------------------------------------------------------ */
/* The source's Stages footer runs straight out of the closing band with no
   wave divider; ours was carrying the shared 144px wave. */
.page-stages .site-footer-wave { display: none; }