/* ── Landing page: /educators/ ──
   The partner-teacher pitch. Rendered from inc/page-educators.php.

   ONE GRID, and it is the whole layout idea. `.pp-ed-grid` is 1120px, centred.
   Text (`.pp-ed-col`) hangs off its LEFT edge at a 68ch measure; media spans
   the grid's full width. Everything therefore shares one left edge, so a
   paragraph's ragged right sits inside a defined column rather than floating
   in the middle of the theme's ~1600px content area.

   That last point is the entire reason this file was rewritten: the first
   build capped the measure without narrowing the container, which does not
   read as a column, it reads as a half-empty page.

   Values follow STYLING.md. Two are flagged in the build report and noted
   inline. Selectors are this page's own — values are shared across the system,
   selectors never are (> Component Selectors). */

/* ── The grid ──
   The root carries `alignfull`, so it fills the content area and the theme's
   constrained-layout padding no longer applies. The gutter therefore belongs
   here: without it, copy would touch the viewport edge on a phone. `16px` is
   the documented side-gutter step, and it applies to every section equally,
   banded or not, so all content sits on one column. */
.pp-ed-grid {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 68ch at the theme's 19px body is ~640px, inside a 1120px grid. Under 80
   characters per the measure rule, and left-aligned: a teacher is scanning for
   facts, and centred paragraphs are harder to scan than a hard left edge. */
.pp-ed-col {
    max-width: 68ch;
}

.pp-ed-col > p {
    margin: 0 0 16px;
}

.pp-ed-col > p:last-child {
    margin-bottom: 0;
}

/* ── Section rhythm ──
   The documented outer breathing-room clamp. A band gets a tint and its own
   padding so the page reads as three movements rather than one white sheet. */
.pp-ed-section {
    padding: clamp(32px, 5vw, 64px) 0 0;
}

/* The hero takes the same top padding as every other section, NOT zero. The
   page sits directly under the site header and carries Blocksy's
   `content_area_spacing: none`, so nothing else supplies that gap and an h1 at
   padding-top 0 sits flush against the menu. */

/* A full-width tinted band whose CONTENT is contained: the tint runs the width
   of the content area while the copy inside sits on the same 1120px grid as
   every unbanded section, so nothing bulges past its neighbours.

   VERTICAL PADDING ONLY. Horizontal padding here would inset the band's copy
   past the grid's own gutter and put the Teacher Link column on a different
   left edge from the sections above and below it — which, in the other
   direction, was the same misalignment as the bulge. The grid is the only thing
   that insets content on this page.

   No radius either: a rounded corner on a band that reaches the container's
   edge reads as a panel that failed to fit rather than as a band. */
.pp-ed-section--band {
    margin-top: clamp(32px, 5vw, 64px);
    padding: clamp(32px, 5vw, 64px) 0;
    background: var(--pp-steel-1);
}

/* ── Hero ──
   No eyebrow, no tinted box, no cap on the headline. The library shot beside
   the words is what gives this section presence; a label and a panel around
   the copy were doing that job badly.

   Its own class rather than `.pp-ed-pair` below: same idea, different
   proportions and different vertical alignment, and one class encodes exactly
   one treatment (STYLING.md > Component Selectors).

   The image column is the wider of the two. A landscape screenshot in a side
   column is already fighting its own shape, so what width there is goes to it;
   the copy is three short blocks and reads fine at ~500px. */
.pp-ed-hero__text > :last-child {
    margin-bottom: 0;
}

.pp-ed-title {
    margin: 0 0 16px;
}

.pp-ed-lead {
    margin: 0 0 28px;
}

@media (min-width: 769px) {
    .pp-ed-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        column-gap: 32px; /* the wide-surface step */
        align-items: center;
    }

    .pp-ed-hero .pp-ed-figure {
        margin: 0;
    }
}

/* Accent fill, #fff mark (STYLING.md rule 7), 8px control radius, Resting
   shadow -> Hover lift with translateY(-1px).

   FLAGGED: padding 12px 24px. The documented button pair is `10px 16px`, and
   all three of its consumers are controls inside a panel or a dialog. A hero
   CTA that owns a page is a different context and reads as undersized at that
   figure. Both values are on the 4px scale. */
.pp-ed-cta {
    display: inline-block;
    padding: 12px 24px;
    border: 0;
    border-radius: 8px;
    background: var(--theme-palette-color-5);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(var(--pp-steel-7-rgb), 0.08);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.pp-ed-cta:hover,
.pp-ed-cta:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-ed-cta:focus-visible {
    outline: 2px solid var(--pp-focus-ring);
    outline-offset: 2px;
}

/* ── Headings ──
   In-content headings: they inherit their type from the theme's cascade.

   The hairline under them is a structural device, not decoration: it separates
   the section's label from its content and gives each section a visible top
   edge. It used to arrive by accident, as the counters row's own border-top;
   now it belongs to the heading, so every section has one. */
.pp-ed-h2 {
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

/* The heading rule spans the grid, not just the 68ch text measure. */
.pp-ed-grid > .pp-ed-col:first-child {
    max-width: none;
}

/* ── Text paired with its screenshot ──
   A picture and its paragraphs as two halves of one statement, not a caption
   under an image.

   The figure sits on the LEFT on desktop while the markup puts the text first.
   That split is deliberate: source order is the phone order and the order a
   screen reader announces, and the text is what should lead in both. The desktop
   arrangement is done by placing each half in a named column rather than with
   `order`, so the visual swap never desynchronises from the reading order. */
.pp-ed-pair {
    margin-top: 32px; /* the wide-surface step */
}

.pp-ed-pair__text > p {
    margin: 0 0 16px;
}

.pp-ed-pair__text > p:last-child {
    margin-bottom: 0;
}

/* ── Steps ── */
.pp-ed-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-ed-step {
    min-width: 0;
}

/* Numbered because the content genuinely is a sequence: nothing can be sent
   before a student connects, and nothing is read before it is sent. A circular
   disc, the documented 50% radius, accent fill with a #fff mark. */
.pp-ed-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--theme-palette-color-5);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}

.pp-ed-step__title {
    margin: 0 0 8px;
    font-size: 1.1rem; /* the documented panel/section heading step */
    font-weight: 600;
    color: var(--pp-steel-7);
}

/* 0.85rem rather than inherited, and the same call the instructional panel
   makes for the same reason: the theme's body size is 19px, and a column this
   width would run far too short a line at that size. --pp-steel-7 rather than
   a muted tone: this is copy to be read, not a caption. */
.pp-ed-step__body {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--pp-steel-7);
}

/* ── What it costs ──
   Promoted out of small print. These are the two facts a teacher weighs, and
   they were previously the quietest thing on the page. */
.pp-ed-cost {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-ed-cost__lead,
.pp-ed-cost__body {
    max-width: 68ch;
}

.pp-ed-cost__lead {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--pp-steel-7);
}

.pp-ed-cost__body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--pp-steel-5);
}

/* ── Screen recording ──
   Values from STYLING.md > Instructional panels > Screen recordings inside the
   panel; the selectors are this page's own. Sits below the whole step row
   rather than under one step, which left the three columns visibly lopsided. */
/* On the page's own left edge, like everything else. Centring it inside the
   grid parked it under the middle column, which read both as belonging to step 2
   and as misaligned with the rest of the page. Its label names what it shows
   instead, so one toggle under a three-step row is not ambiguous. */
.pp-ed-clip {
    margin-top: 16px;
}

/* 12px vertical on a 0.85rem/1.5 label is a 44px hit area exactly —
   affordable because nothing beside it is tappable. */
.pp-ed-clip__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-palette-color-5);
}

.pp-ed-clip__toggle::-webkit-details-marker {
    display: none;
}

/* Not a darker tone on hover: there is no step below the accent, and an
   underline is the web's own affordance for a text control. */
.pp-ed-clip__toggle:hover,
.pp-ed-clip__toggle:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pp-ed-clip__toggle:focus-visible {
    outline: 2px solid var(--pp-focus-ring);
    outline-offset: 2px;
}

.pp-ed-clip__glyph {
    display: inline-flex;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.pp-ed-clip__glyph svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* The label names an ACTION, so it changes with state. Two spans and two
   glyphs swapped on [open], no JavaScript. */
.pp-ed-clip__glyph--open,
.pp-ed-clip__label--open {
    display: none;
}

.pp-ed-clip[open] .pp-ed-clip__glyph--closed,
.pp-ed-clip[open] .pp-ed-clip__label--closed {
    display: none;
}

.pp-ed-clip[open] .pp-ed-clip__glyph--open {
    display: inline-flex;
}

.pp-ed-clip[open] .pp-ed-clip__label--open {
    display: inline;
}

/* 8px is the nested-media radius: a step DOWN from the 14px surface, never a
   match. --pp-steel-2 is its documented image-placeholder role, the ground the
   box shows while the clip loads.

   aspect-ratio is not optional: preload="none" means nothing is fetched until
   the reveal, so without a reserved box the copy below jumps when it lands. */
.pp-ed-clip__video {
    display: block;
    width: 100%;
    max-width: 720px;
    margin: 4px 0 0;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
    border-radius: 8px;
    background: var(--pp-steel-2);
}

/* ── Screenshots ──
   No `width` declaration, deliberately: with the intrinsic width/height on the
   <img> and `max-width: 100%`, each shot renders at its own natural size and
   shrinks only where the column is narrower. A UI capture upscaled past life
   size stops reading as "this is your screen" and starts reading as a poster. */
.pp-ed-figure {
    margin: 32px 0 0;
}

.pp-ed-figure__img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(var(--pp-steel-7-rgb), 0.10); /* Card tier */
}

/* Inside the pair the figure is the right-hand half and carries no top margin
   of its own — the grid's gap is the separation. */
.pp-ed-pair .pp-ed-figure {
    margin: 24px 0 0;
}

/* ── Card row ──
   The showcase element brings its own styling; this only sets its rhythm. */
.pp-ed-grid .pp-showcase-paths {
    margin-top: 24px;
}

/* ── Apply ── */
/* ── Apply ──
   No container. The form sits on the page's own left edge with the illustration
   beside it; a panel around a form is what made it read as an island, and
   sizing a panel to the form only moved the problem.

   The graphic is decorative, so on a phone it is REMOVED rather than stacked:
   above the form it would push the only thing that matters below the fold, and
   below it, nobody scrolls past a submit button to look at a picture. */
.pp-ed-apply__form {
    max-width: 560px;
}

.pp-ed-apply__form > p {
    margin: 0 0 24px;
}

@media (min-width: 769px) {
    .pp-ed-apply {
        display: grid;
        grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
        column-gap: 32px;
        align-items: center;
    }

    .pp-ed-apply .pp-ed-figure {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .pp-ed-apply .pp-ed-figure {
        display: none;
    }
}

/* The illustration is line art, not a screenshot: no frame, no shadow, no
   radius. Those belong to the two UI captures, where the border is what stops a
   pale interface dissolving into the page.

   Capped well under its column so it has room around it. Line art at the
   column's full width crowds the form it is meant to sit beside. */
.pp-ed-apply .pp-ed-figure__img {
    max-width: 420px;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ── Two columns from the phone boundary up ── */
@media (min-width: 769px) {
    .pp-ed-pair {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 32px;
        align-items: start;
    }

    .pp-ed-pair .pp-ed-figure {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }

    .pp-ed-pair__text {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 768px) {
    .pp-ed-steps {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pp-ed-cta {
        display: block;
        text-align: center;
    }
}

/* Under reduced motion the clip is not started by the script and gets native
   controls instead (see js/page-educators.js) — the information stays, it just
   no longer moves unbidden. The CTA's lift is decoration and is killed. */
@media (prefers-reduced-motion: reduce) {
    .pp-ed-cta {
        transition: none;
    }

    .pp-ed-cta:hover,
    .pp-ed-cta:focus {
        transform: none;
    }
}