/* ═══════════════════════════════════════════════════
   HOME V2 — staging/comparison homepage variant
   Loaded ALONGSIDE home.css (page-home-v2.php only): this file only
   holds what's actually different — the new hero, and background
   recolors for Mission (→ yellow), Services (→ white) and
   Journey (→ light). Everything else (stats, audience cards, process
   steps, stories carousel, contact CTA, location finder, journey
   cards) is visually identical and inherited from home.css as-is.
   Mobile-first.
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   HERO V2 — photo mechanism from page-how-it-works.css's
   .vhiw-hero (rendered directly with object-fit, real
   placeholder box, no CSS-drawn shape — a decorative
   backdrop, if wanted, is baked into the uploaded image
   itself). Layout differs from How It Works on purpose:
   no .victor-container around .victor-hero-v2__inner, so
   the photo's column reaches the section's real right edge,
   and a negative margin-bottom on the photo (same trick as
   .vhiw-hero__photo--blob) cancels the section's own bottom
   padding so it reaches the bottom edge too. Only the text
   column carries the container's side padding.
   ═══════════════════════════════════════ */
.victor-hero-v2 {
    background: var(--victor-bg);
    padding: var(--victor-space-2xl) 0 0;
    overflow: hidden; /* safety against sub-pixel bleed rounding */
}
.victor-hero-v2__inner {
    display: grid;
    grid-template-columns: 1fr;
}
.victor-hero-v2__text {
    padding: 0 var(--victor-container-pad) var(--victor-space-2xl);
}
.victor-hero-v2__title {
    /* Same floor and ceiling as the live homepage's .victor-hero__title
       (2.75rem → 5.5rem). Only the middle scalar is lower: the homepage
       title is centred across the full container, this one lives in a
       half-width column, so 9vw would overflow it at mid widths. */
    font-size: clamp(2.75rem, 6vw, 5.5rem);
    font-weight: var(--victor-fw-black);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 0.95;
    color: var(--victor-primary);
    margin: 0 0 var(--victor-space-lg);
}
.victor-hero-v2__body {
    font-size: var(--victor-fs-md);
    color: var(--victor-text-light);
    line-height: var(--victor-lh-relaxed);
    max-width: 480px;
    margin: 0 0 var(--victor-space-xl);
}
.victor-hero-v2__actions {
    display: flex;
    gap: var(--victor-space-md);
    flex-wrap: wrap;
}

.victor-hero-v2__photo {
    order: 1; /* photo below text on mobile */
}
.victor-hero-v2__photo img {
    width: 100%;
    height: auto;
    display: block;
    /* No object-fit crop and no max-height, same as
       .vhiw-hero__photo--blob img in page-how-it-works.css: the yellow
       circle is part of the uploaded artwork, so any cropping clips it. */
}
.victor-hero-v2__photo-placeholder {
    width: 100%;
    min-height: 240px;
    background: rgba(1, 34, 85, 0.06);
}

/* ═══════════════════════════════════════
   RESPONSIVE — Desktop (1024px+)
   ═══════════════════════════════════════ */
@media (min-width: 64rem) {
    .victor-hero-v2 {
        padding: var(--victor-space-4xl) 0;
    }
    .victor-hero-v2__inner {
        /* Proportional, NOT a fixed max: the text column also carries the
           container inset as padding, so a capped column (e.g.
           minmax(0,560px)) leaves almost no room for the text itself once
           that inset is subtracted. */
        grid-template-columns: 1.25fr 1fr;
        align-items: center;
    }
    .victor-hero-v2__text {
        /* Left edge lines up with .victor-container's inset even though
           this section skips the container; right side just needs
           breathing room before the photo. */
        padding-left: max(var(--victor-space-2xl), calc((100vw - var(--victor-container-max)) / 2));
        padding-right: var(--victor-space-2xl);
        padding-bottom: 0;
    }
    .victor-hero-v2__photo {
        order: 0; /* reset to natural DOM order: text left, photo right */
        align-self: end;
        margin-bottom: calc(-1 * var(--victor-space-4xl)); /* cancels the
            section's own bottom padding (set above) so the photo reaches
            the section's true bottom edge, same trick as
            .vhiw-hero__photo--blob's margin-bottom in page-how-it-works.css */
    }
    .victor-hero-v2__photo-placeholder {
        min-height: 420px;
    }
}

/* ═══════════════════════════════════════
   SECTION RECOLORS
   ═══════════════════════════════════════ */

/* Mission + Stats: white → yellow. Text is already navy throughout
   (quote, body copy, eyebrow), so it stays readable — only the
   background changes. */
.victor-mission--v2 {
    background: var(--victor-bg-yellow);
}

/* Services / audience cards: yellow → white. Existing card and
   eyebrow colors already resolve to navy (--victor-text-on-yellow
   IS navy), so nothing but the background needs to change here either. */
.victor-services-home--v2 {
    background: var(--victor-bg);
}

/* Journey: navy → light. This one needs real color flips since the
   base styles assume white text on navy. */
.victor-journey--v2 {
    background: var(--victor-bg);
    color: var(--victor-text);
}
.victor-journey--v2 .victor-journey__title {
    color: var(--victor-primary);
}
.victor-journey--v2 .victor-journey__intro {
    color: var(--victor-text-light);
}
.victor-journey--v2 .victor-journey__social-label {
    color: var(--victor-text);
}

/* ═══════════════════════════════════════
   STAT BOXES — yellow Mission section fix
   ═══════════════════════════════════════ */

/* On the live homepage the Mission section is white, so is-yellow
   stat boxes (yellow bg, navy text) contrast well. On V2 the Mission
   is yellow, making is-yellow stats disappear (yellow on yellow).
   Override them to white so they pop against the yellow background.
   The text color (var(--victor-primary) navy) is inherited from
   .victor-stat.is-yellow's existing rule and stays correct. */
.victor-mission--v2 .victor-stat.is-yellow {
    background: #fff;
}
.victor-mission--v2 .victor-stat.is-yellow .victor-stat__number,
.victor-mission--v2 .victor-stat.is-yellow .victor-stat__label {
    color: var(--victor-primary);
}

/* Same reason as the is-yellow stat fix above: --victor-text-muted is
   tuned for a white section background and goes muddy on yellow. */
.victor-mission--v2 .victor-mission__stats-fy {
    color: var(--victor-primary);
    opacity: 0.65;
}