/*
 * home-v2.css — redesigned homepage (draft)
 * Loaded only on the page-home-v2.php template (see functions.php).
 *
 * Learning Notes
 * --------------
 * Everything here is scoped under `.home-v2` (a body class added in
 * functions.php for this template only). That scoping is what lets this page
 * run a WIDER grid than the rest of the site without touching shared CSS.
 *
 * DIVERGENCE FLAG: MARKETING-DESIGN-RULES.md §1 says "two widths only"
 * (--container-max 1200px and --col-prose 720px). This page intentionally
 * breaks that with a third, wider container because the supplied design runs
 * full-bleed and wider than our other marketing pages. It is scoped to home
 * only on purpose. If we later decide to widen the whole marketing system,
 * fold this into the global rule + the doc and delete this scope. Tracked as
 * the "marketing-page width recon" follow-up.
 *
 * No new colours or fonts — every value below comes from variables.css tokens.
 */

/* ----------------------------------------------------------- WIDTH SCOPE */

.home-v2 {
    /* The one new width. Header, footer and every section on this page widen
       to this because they all wrap their content in `.container`. Set to match
       the canonical design's content column (~1550px), which is wider than our
       other marketing pages by intent. */
    --container-wide: 1550px;

    /* Homepage-only blueberry. H.264 shifts the hero clip's flattened purple
       slightly on playback, so the page purple is nudged to match the clip as
       it actually renders (#474e95) — killing the seam between the band and the
       video without re-encoding. Scoped to .home-v2, so every other page keeps
       the canonical --color-blueberry. Cascades to the derived band/arc colours
       (the color-mix() shades) automatically. */
    --color-blueberry: #474e95;
}

.home-v2 .container {
    max-width: var(--container-wide);
}

/* Kill the default gap the theme leaves above .public-main so the hero's
   purple bleeds straight up to the header. */
.home-v2 .public-main {
    margin-top: 0;
}


/* --------------------------------------------------------- SHARED PIECES */

/* Section titles. Light variant for the purple bands, default (Blueberry ink)
   for the white sections. Sizing follows the design-rules Display role. */
.hv2-section-title {
    font-size: clamp(var(--font-size-2xl), 3.5vw, var(--font-size-4xl));
    line-height: var(--lh-display);
    font-weight: var(--font-weight-bold);
    color: var(--color-blueberry);
    text-align: center;
    margin: 0;
}

.hv2-section-title--light {
    color: var(--color-white);
}

.hv2-section-head {
    text-align: center;
    margin-bottom: var(--space-12);
}

.hv2-section-lead {
    font-size: var(--font-size-lg);
    line-height: var(--lh-lead);
    color: var(--color-slate);
    margin: var(--space-4) auto 0;
    max-width: var(--col-prose);
}

.hv2-section-lead a { color: var(--color-adriatic); }

/* Left-aligned section header (canonical "Explore our toolkit"). Only the
   toolkit header uses this; the other bands stay centred. */
.hv2-section-head--left {
    text-align: left;
    max-width: var(--container-wide);
}

.hv2-section-head--left .hv2-section-title { text-align: left; }
.hv2-section-head--left .hv2-section-lead { margin-left: 0; }

/* Full-bleed purple band shared by hero / how-it-works / tools-in-action / cta.
   Padding follows the one section rhythm token. */
.hv2-band {
    padding-block: var(--section-y);
}


/* ---------------------------------------------------------------- HERO */

.hv2-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--color-blueberry);
    color: var(--color-white);
    padding-bottom: var(--section-y);
}

/* Decorative navy arc bleeding off the top-left corner (canonical hero). A
   large circle in a darker shade of the brand purple — derived via color-mix,
   not a new hex. Sits behind the eyebrow + content (z-index 0 vs 1). */
.hv2-hero::before {
    content: "";
    position: absolute;
    top: -430px;
    left: -280px;
    width: 780px;
    height: 780px;
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, var(--color-blueberry) 58%, #000000);
    z-index: 0;
}

/* Announcement eyebrow — left-aligned within the container, over the arc.
   No background bar; the arc is the darker backdrop. */
.hv2-hero__eyebrow {
    position: relative;
    z-index: 1;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) 0;
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.hv2-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--space-8);
}

.hv2-hero__title {
    font-size: clamp(var(--font-size-3xl), 4.5vw, var(--font-size-5xl));
    line-height: var(--lh-display);
    font-weight: var(--font-weight-bold);
    /* Explicit, because base.css `h1 { color: var(--color-secondary) }` (an
       element selector) otherwise beats the white we inherit from .hv2-hero,
       leaving the headline blueberry-on-blueberry = invisible. */
    color: var(--color-white);
    margin: 0;
}

.hv2-hero__subtitle {
    font-size: var(--font-size-lg);
    line-height: var(--lh-lead);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    margin: var(--space-4) 0 0;
}

.hv2-hero__actions {
    margin-top: var(--space-8);
}

.hv2-hero__signin {
    margin: var(--space-4) 0 0;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.85);
}

.hv2-hero__signin a {
    color: var(--color-white);
    text-decoration: underline;
}

/* Media slot — the clip sits directly on the purple band (no card frame), so
   the monitor illustration reads as floating, matching the canonical hero. The
   clip is flattened onto the hero purple, so its padding is invisible. */
.hv2-hero__device {
    position: relative;
}

.hv2-hero__media img,
.hv2-hero__media video {
    display: block;
    width: 100%;
    height: auto;
}


/* --------------------------------------------------------- HOW IT WORKS */

.hv2-how {
    /* A shade darker than the hero so the band reads as its own step. Derived
       from the brand token rather than a new hex. */
    background-color: color-mix(in srgb, var(--color-blueberry) 82%, #000000);
    color: var(--color-white);
}

.hv2-steps {
    list-style: none;
    margin: var(--space-12) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    text-align: center;
}

.hv2-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* Leaf shape — opposite corners rounded — not a circle. */
    border-radius: 4px 0 4px 0;
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}

.hv2-step__title {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    /* Explicit white — same base.css h3 fight as the hero title. */
    color: var(--color-white);
}

.hv2-step__text {
    margin: 0 auto;
    max-width: 32ch;
    color: rgba(255, 255, 255, 0.85);
    line-height: var(--lh-body);
}


/* ----------------------------------------------------------- STATS STRIP */

.hv2-stats {
    /* Same purple as the surrounding bands (not a separate dark bar). */
    background-color: var(--color-blueberry);
    color: var(--color-white);
    padding-block: var(--space-6);
}

.hv2-stats__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) 0;
    text-align: center;
}

.hv2-stats__item {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-white);
}

/* Heavy pipe between items. */
.hv2-stats__item:not(:first-child)::before {
    content: "|";
    margin: 0 var(--space-3);
    color: rgba(255, 255, 255, 0.45);
    font-weight: var(--font-weight-bold);
}


/* --------------------------------------------------------------- TOOLKIT */

.hv2-toolkit {
    background-color: var(--color-white);
}

.hv2-toolgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

/* Tool card. Static info card (not a link) — no hover lift, so it never reads
   as clickable. Reuses the marketing card feel (white, bordered). */
.hv2-toolcard {
    display: block;
    padding: var(--space-6);
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-ice);
    border-radius: var(--radius-lg);
    color: inherit;
}

.hv2-toolcard__icon {
    display: inline-flex;
    font-size: 24px;
    color: var(--color-adriatic);
}

.hv2-toolcard__title {
    margin: var(--space-3) 0 var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-blueberry);
}

.hv2-toolcard__text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--lh-body);
    color: var(--color-slate);
}


/* ------------------------------------------------------- TOOLS IN ACTION */

.hv2-action {
    background-color: var(--color-blueberry);
    color: var(--color-white);
}

/* Static grid of tool demos — rows of 3. No slider: the first row shows on
   load, "Show more" reveals the rest below. Drops to 2-up / 1-up on smaller
   screens in the responsive block. */
.hv2-videos {
    margin-top: var(--space-12);
}

.hv2-videos__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.hv2-videos__item {
    min-width: 0;
}

/* Poster button — the click-to-play surface. A 16:9 box (matches the 1920×1080
   clips) holding the poster, a play badge and a caption. The <video> is built
   and swapped in on click (home-v2.js), so only posters load on first paint. */
.hv2-video {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background-color: var(--color-blueberry);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16 / 9;
}

.hv2-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play badge — the customer-supplied icon (images/home-v2/play-icon.svg): a
   Blueberry rounded-square with a white triangle. Rendered as a background so
   the markup stays a bare presentational span and the icon lives in exactly one
   place — swap the SVG file to rebrand it. A soft drop-shadow lifts it off busy
   posters. */
.hv2-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: url("../images/home-v2/play-icon.svg") center / contain no-repeat;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
    transition: transform 0.15s ease;
}

.hv2-video:hover .hv2-video__play,
.hv2-video:focus-visible .hv2-video__play {
    transform: translate(-50%, -50%) scale(1.08);
}

/* Caption band across the foot of the poster. A soft gradient keeps the text
   legible over any poster. */
.hv2-video__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-6) var(--space-4) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

/* The <video> JS swaps in — fills the same 16:9 box, black letterbox behind. */
.hv2-video__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    background-color: #000000;
    object-fit: contain;
}

/* Rows past the first are hidden ONLY when JS has collapsed the grid. No JS →
   no .is-collapsed → every tool shows. */
.hv2-videos.is-collapsed .hv2-videos__item--extra {
    display: none;
}

/* "Show more" — hidden until JS confirms it's alive (never a dead control), and
   removed once the grid is expanded. */
.hv2-videos__more {
    margin-top: var(--space-8);
    text-align: center;
}

.hv2-videos__more-btn { display: none; }
.hv2-videos.is-enhanced.is-collapsed ~ .hv2-videos__more .hv2-videos__more-btn {
    display: inline-flex;
}


/* --------------------------------------------------------------- PRICING */

.hv2-pricing {
    background-color: var(--color-white);
    padding-block: var(--section-y);
}

.hv2-plan-grid {
    margin-top: var(--space-12);
    align-items: start; /* cards size to their own content as they expand */
    gap: var(--space-4); /* tighter than pricing.css default — canonical cards sit close */
}

/* Accordion plumbing. The card header is the toggle (whole bar is the tap
   target); the chevron sits centred at its foot; body + footer live in the
   collapsible panel, which JS shows by clearing [hidden].

   The reused .pricing__card-* parts are <span>s here (valid inside a <button>,
   unlike <div>s), so we force them to lay out as blocks — otherwise their
   pricing.css padding/borders read as inline and collapse. */
.hv2-plan__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    /* Buttons default to centred text — the canonical card header is left-set. */
    text-align: left;
}

.hv2-plan__toggle .pricing__card-header {
    flex: 1 1 auto;
}

.hv2-plan__toggle .pricing__card-header,
.hv2-plan__toggle .pricing__card-title,
.hv2-plan__toggle .pricing__card-subhead {
    display: block;
}

/* Chevron sits inline at the right of the header row, vertically centred with
   the price — not a full-width row beneath it. */
.hv2-plan__chevron {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding-right: var(--space-6);
    font-size: 22px;
    color: var(--color-slate);
    transition: transform 0.2s ease;
}

.hv2-plan__toggle[aria-expanded="true"] .hv2-plan__chevron {
    transform: rotate(180deg);
}

/* Canonical homepage cards, scoped to .hv2-plan (homepage accordion cards only)
   so the /pricing page keeps pricing.css's own treatment untouched:
   - left-aligned header + price
   - blueberry (not dark) titles AND prices, bold — the accordion uses <span>s
     rather than the <h3> /pricing uses, so they'd otherwise inherit body-dark
   - no header divider line (pricing.css draws a 2px border-bottom; canonical is
     one clean bordered box)
   - a little more header padding so the card reads as tall as the canonical */
.hv2-plan .pricing__card-header {
    text-align: left;
    border-bottom: none;
    padding: var(--space-8) var(--space-6) var(--space-6);
}

.hv2-plan .pricing__card-price { justify-content: flex-start; }

.hv2-plan .pricing__card-title {
    color: var(--color-blueberry);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-2xl);
}

.hv2-plan .pricing__price-amount {
    color: var(--color-blueberry);
}

/* Canonical price captions ("No charge today", "One payment until…") read navy,
   not the muted grey pricing.css uses. */
.hv2-plan .pricing__price-period {
    color: var(--color-blueberry);
}

/* "Limited spots" tag, top-right of the Season Pass card (canonical). A small
   muted pill; pointer-events off so it never intercepts the accordion toggle. */
.hv2-plan__limited {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    z-index: 2;
    pointer-events: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--color-off-white);
    color: var(--color-slate);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The panel's inner padding comes from .pricing__card-body / __footer. */

.hv2-pricing__note {
    margin: var(--space-12) auto 0;
    max-width: var(--col-prose);
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-charcoal);
}

.hv2-pricing__note a { color: var(--color-adriatic); }


/* ----------------------------------------------------------------- CTA */

/* Contained rounded CTA card on white (canonical), not a full-bleed band. */
.hv2-cta {
    background-color: var(--color-white);
    padding-block: var(--section-y);
}

.hv2-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
    background-color: var(--color-blueberry);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-12);
}

.hv2-cta__text {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}


/* -------------------------------------------------------- RESPONSIVE */

@media (max-width: 900px) {
    .hv2-toolgrid { grid-template-columns: repeat(2, 1fr); }
    .hv2-videos__grid { grid-template-columns: repeat(2, 1fr); } /* two-up */
}

@media (max-width: 768px) {
    /* Mobile is the desktop layout stacked into one column. Per the mobile
       design, the device/screenshot sits ABOVE the headline (DOM order keeps
       the <h1> first for SR/SEO; `order` only changes the visual stack). */
    .hv2-hero__inner { grid-template-columns: 1fr; gap: var(--space-12); }
    .hv2-hero__device { order: -1; }
    /* Eyebrow centres on mobile (canonical) — the left-set desktop version only
       makes sense next to the arc. */
    .hv2-hero__eyebrow { text-align: center; }
    .hv2-steps { grid-template-columns: 1fr; gap: var(--space-12); }
    .hv2-plan-grid { grid-template-columns: 1fr; }
    /* Homepage keeps natural card order on mobile (canonical: Free Trial →
       Season Pass → Individual Monthly). pricing.css promotes Season Pass to
       the top at ≤600px; this scoped, higher-specificity rule restores DOM
       order for the homepage only — /pricing's promotion stays intact. */
    .hv2-plan-grid .pricing__card[data-tier] { order: 0; }
    .hv2-videos__grid { grid-template-columns: 1fr; } /* one-up */

    /* CTA is an inset card on mobile (canonical), not full-bleed: the section
       gives it side margin, and the inner padding drops from the wide desktop
       value so it isn't cramped on a phone. */
    .hv2-cta { padding-inline: var(--space-4); }
    .hv2-cta__inner {
        flex-direction: column;
        text-align: center;
        padding: var(--space-6);
    }

    /* Stats stack one-per-line on mobile (canonical) — the inline pipes only
       make sense on a single row. */
    .hv2-stats__list { flex-direction: column; }
    .hv2-stats__item:not(:first-child)::before { display: none; }
}

/* Toolkit stays 2-up through phone widths (canonical); only the very smallest
   viewports drop to a single column. */
@media (max-width: 400px) {
    .hv2-toolgrid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------- REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .hv2-toolcard,
    .hv2-plan__chevron,
    .hv2-video__play {
        transition: none;
    }
}