/* ── The closing call to action, and what it stands on ──
   One source for the homepage's closing CTA (`pp_home_close()` in
   inc/page-home.php), shared by every page that ends with it: the front page
   and /about/. Enqueued through `pp_home_enqueue_closing_cta()`, before each
   page's own stylesheet, so a page's later rules still override these.

   It carries what the closing band needs to look the same wherever it is
   used: the section band and its grid, the page CTA and its on-dark
   modifier, and the closing block itself. The class names stay the
   homepage's, so its markup is unchanged. STYLING.md > A closing call to
   action. */

/* The root fills the content area, so the theme's constrained-layout padding
   no longer applies and the gutter belongs to the grid: `16px`, the documented
   side gutter. */
.pp-home-grid {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
}

/* The documented outer breathing-room clamp, top and bottom, so a band that
   takes a fill later carries its own room inside it. The page carries
   Blocksy's `content_area_spacing: none`, so nothing else spaces the first
   section from the header. */
.pp-home-section {
    padding: clamp(32px, 5vw, 64px) 0;
}

/* ── Call to action ──
   The /educators/ hero CTA's values, under this page's own class: accent fill,
   #fff label (rule 7), 8px control radius, the provisional `12px 24px` for a
   CTA that owns a page (STYLING.md > Spacing), and the Resting / Hover lift
   shadow tiers. */
.pp-home-cta {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    background: var(--theme-palette-color-5);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    /* A sign-up, so caps: the same action as the header's JOIN NOW and the
       plan cards' START FREE (STYLING.md > A page CTA on a light ground). */
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(var(--pp-steel-7-rgb), 0.08);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

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

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

/* The same CTA on a dark ground (the hero). No shadow: every tier is a
   steel-7 shadow, invisible there, so the fill does the separating and hover
   is the lift alone. The standard ring is all but invisible too: a 2px stroke
   in the ground's prominent tone instead (STYLING.md > Native surfaces on a
   dark ground). */
.pp-home-cta--on-dark,
.pp-home-cta--on-dark:hover,
.pp-home-cta--on-dark:focus {
    box-shadow: none;
}

.pp-home-cta--on-dark:focus-visible {
    outline-color: var(--theme-palette-color-8);
}

/* Full width up to the tablet breakpoint, the label centred: the hero's CTA
   and the closing one alike. */
@media (max-width: 1024px) {
    .pp-home-cta {
        display: block;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-home-cta {
        transition: none;
    }
}

/* ── Closing call to action ──
   The hero's ground and text set (STYLING.md > A hero over a looping video):
   `--theme-palette-color-4`, title `#fff` with `text-wrap: balance`, the lead
   `rgba(255, 255, 255, 0.9)`, the on-dark CTA. Centred, ending the page, with
   the lead at the `480px` panel measure. Full-width CTA on a phone, as in the
   hero (the shared `.pp-home-cta` rule). */
.pp-home-section--close {
    background: var(--theme-palette-color-4);
}

.pp-home-close {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}

.pp-home-close__title {
    margin: 0 0 16px;
    color: #fff;
    text-wrap: balance;
}

.pp-home-close__lead {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.9);
    text-wrap: balance;
}

.pp-home-close__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
}

.pp-home-close__note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1024px) {
    .pp-home-close__actions {
        flex-direction: column;
        align-items: stretch;
    }
}