/* ============================================================
   feature-overview
   Figma: Windscreen "Product Section" — desktop 1407:65430,
   tablet 1407:74910, mobile 1407:69016.

   Fluid, not the frame's fixed sizes (Alex, 29 Sep). __inner is a
   full-width grid: a gutter column either side of two half-container
   columns. The copy fills the right half; the image spans the left
   gutter and the left half, so it always reaches the page edge.

   The template owns the section's vertical padding (the neighbouring-
   background rule), so there is none here. The frame's feature
   dividers are white at 15% on white, so invisible: not built.
   ============================================================ */

.feature-overview__inner {
    display: grid;
    grid-template-columns:
        [page-start] minmax(var(--space-gutter), 1fr)
        [content-start] minmax(0, calc(var(--layout-content-max-w) / 2))
        [middle] minmax(0, calc(var(--layout-content-max-w) / 2))
        [content-end] minmax(var(--space-gutter), 1fr) [page-end];
    grid-template-rows: auto auto;
    row-gap: 16px;
}

/* ── Copy (right half) ────────────────────────────────────── */
.feature-overview__head,
.feature-overview__features,
.feature-overview__more {
    grid-column: middle / content-end;
}
.feature-overview__head {
    grid-row: 1;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.feature-overview__features,
.feature-overview__more {
    grid-row: 2;
    align-self: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Figma sets the H2 in Title Case ("TITLE" text case) */
.feature-overview__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--fo-text, var(--color-text));
    text-transform: capitalize;
}
.feature-overview__body {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--fo-text, var(--color-text));
}
.feature-overview__body > p + p { margin-top: 1lh; }   /* a blank line between paragraphs, as the frames */

/* Each feature: 12px above and below, a 4px accent bar, 20px, then the text */
.feature-overview__feature {
    display: flex;
    gap: 20px;
    padding: 12px 0;
}
.feature-overview__feature::before {
    content: "";
    flex: 0 0 4px;
    border-radius: 2px;
    background: var(--color-accent);
}
.feature-overview__feature-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.feature-overview__feature-title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    color: var(--fo-text, var(--color-text));
}
.feature-overview__feature-body {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--fo-text, var(--color-text));
}

/* ── Image (left half, out to the page edge) ──────────────── */
.feature-overview__media {
    grid-column: page-start / middle;
    grid-row: 1 / 3;
    align-self: center;     /* the frame centres the image against the copy */
    margin-right: 84px;     /* the frame's gap between image and copy */
}
.feature-overview__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;    /* Alex, 2 Oct: 4/3 (was 16/9 with min and max heights) */
    object-fit: cover;
    border-radius: 0 16px 16px 0;
}

/* ── Tablet (1407:74910) ──────────────────────────────────────
   The heading and intro run across the top; the image then sits
   beside the features, as tall as they are.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .feature-overview__head {
        grid-column: content-start / content-end;
        gap: 8px;
    }
    .feature-overview__media {
        grid-row: 2;
        align-self: start;
        margin-right: 24px;
    }
    .feature-overview__image { border-radius: 0 12px 12px 0; }   /* 4/3 from the base rule */

    .feature-overview__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .feature-overview__body {   /* Mobile/Body small, which is set in Futura */
        font-family: var(--font-heading);
        font-size: var(--text-mobile-body-small);
        line-height: var(--leading-mobile-body-small);
    }
    .feature-overview__feature-title {
        font-size: var(--text-h4);
        line-height: var(--leading-h4);
    }
}

/* ── Mobile (1407:69016) ──────────────────────────────────────
   One column: the copy, then the image, 24px below, from the page
   edge to 20px short of the right.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .feature-overview__inner { grid-template-rows: auto auto auto; row-gap: 0; }
    .feature-overview__head,
    .feature-overview__features,
    .feature-overview__more { grid-column: content-start / content-end; }
    .feature-overview__head {
        margin-bottom: 16px;
    }
    .feature-overview__media {
        grid-column: page-start / content-end;
        grid-row: 3;
        margin: 8px 0 0;     /* 16 row gap + 8 = the frame's 24 */
    }

    /* 30px: the frame's heading has no text style (flagged) */
    .feature-overview__heading {
        font-size: 30px;
        line-height: 1;
    }
}

/* ============================================================
   Extensions (B2 queue, 1 Oct): eyebrow, logo, CTA, award badge
   and the variants. Modifiers go on the template's <section>.
   ============================================================ */

/* ── Eyebrow, logo, CTA ───────────────────────────────────── */
.feature-overview__eyebrow {
    margin-bottom: 0;                       /* 8 to the heading inside the 16 head gap */
    color: var(--fo-eyebrow, var(--color-primary));
}
.feature-overview__logo {
    display: block;
    width: 339px;                            /* AncillaryHUB logo, 339x61 */
    max-width: 100%;
    height: auto;
}
.feature-overview__more > .feature-overview__cta-wrap { margin-top: 8px; }
.feature-overview__more > .feature-overview__features + .feature-overview__cta-wrap { margin-top: 12px; }
.feature-overview__cta-wrap { display: flex; }

/* ── Award badge (Careers "Who we are", 1331:150863) ──────── */
.feature-overview__badge {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;                         /* 24 below the body */
    padding: 24px;
    border-radius: 12px;
    background: var(--color-card-navy);      /* the frame's #03283c */
    color: var(--color-text-inverse);
}
.feature-overview__badge-logo {
    flex: 0 0 auto;
    width: 128px;
    height: auto;
}
.feature-overview__badge-text { display: flex; flex-direction: column; gap: 4px; }
.feature-overview__badge-label,
.feature-overview__badge-title { margin: 0; color: var(--color-text-inverse); }
.feature-overview__badge-label {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
}
.feature-overview__badge-title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
}

/* ── Backgrounds ──────────────────────────────────────────── */
.feature-overview--cream    { background: var(--color-surface-warm); }
.feature-overview--hub-pale { background: var(--color-surface-hub); }
.feature-overview--tint     { background: var(--color-surface-tint); }
.feature-overview--hub-dark { background: var(--color-hub); }
.feature-overview--navy     { background: var(--gradient-dark-reverse); }
.feature-overview--hub-dark,
.feature-overview--navy {
    --fo-text: var(--color-text-inverse);
    --fo-eyebrow: var(--color-accent);
}
.feature-overview--navy { --fo-eyebrow: var(--color-accent); }   /* Careers: Tertiary */

/* AncillaryHUB: an H3-size heading (1331:136762), H4 on mobile */
.feature-overview--hub-dark .feature-overview__heading {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    text-transform: none;                    /* the frame's sentence-case copy */
}

/* ── Story (Careers 1331:150863, Team 1331:152600) ────────── */
.feature-overview--story .feature-overview__media { margin-right: 80px; }
.feature-overview--story .feature-overview__image {
    aspect-ratio: 4 / 3;    /* Alex, 2 Oct: 4/3 at every width (was 16/9, min 365 tall); the 500px cap at the foot still applies */
    border-radius: 0 12px 12px 0;
}
.feature-overview--story .feature-overview__head { gap: 8px; }
/* The copy and button sit together, centred against the image, with the button
   24 under the copy as the frame has it (the spacer rows take the image's extra
   height, so the two never spread apart). */
.feature-overview--story .feature-overview__inner {
    grid-template-rows: 1fr auto auto 1fr;
    row-gap: 0;
}
.feature-overview--story .feature-overview__media { grid-row: 1 / 5; }
.feature-overview--story .feature-overview__head { grid-row: 2; align-self: end; }
.feature-overview--story .feature-overview__features,
.feature-overview--story .feature-overview__more { grid-row: 3; }
.feature-overview--story .feature-overview__more { margin-top: 16px; }   /* 16 + the 8 on the button = 24 */

/* ── Image on the right ───────────────────────────────────── */
.feature-overview--reverse .feature-overview__head,
.feature-overview--reverse .feature-overview__features,
.feature-overview--reverse .feature-overview__more { grid-column: content-start / middle; }
.feature-overview--reverse .feature-overview__media {
    grid-column: middle / page-end;
    margin-right: 0;
    margin-left: 84px;
}
.feature-overview--reverse .feature-overview__image { border-radius: 16px 0 0 16px; }

/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .feature-overview--hub-dark .feature-overview__heading {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    /* Story: tablet follows mobile (Alex, 2 Oct): the image first, bleeding right,
       then the copy and a full-width button 24 under it */
    .feature-overview--story .feature-overview__inner {
        grid-template-rows: auto auto auto;
        row-gap: 20px;
    }
    .feature-overview--story .feature-overview__head,
    .feature-overview--story .feature-overview__features,
    .feature-overview--story .feature-overview__more { grid-column: content-start / content-end; }
    .feature-overview--story .feature-overview__media {
        grid-column: content-start / page-end;
        grid-row: 1;
        margin: 0;
    }
    .feature-overview--story .feature-overview__image { border-radius: 16px 0 0 16px; aspect-ratio: 16 / 9; }
    .feature-overview--story .feature-overview__head { grid-row: 2; align-self: start; }
    .feature-overview--story .feature-overview__more,
    .feature-overview--story .feature-overview__features { grid-row: 3; margin-top: 0; }
    .feature-overview--story .feature-overview__more > .feature-overview__cta-wrap { margin-top: 4px; }   /* 20 + 4 = 24 */
    .feature-overview__badge-title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }

    .feature-overview--reverse .feature-overview__head { grid-column: content-start / content-end; }
    .feature-overview--reverse .feature-overview__features,
    .feature-overview--reverse .feature-overview__more { grid-column: content-start / middle; }
    .feature-overview--reverse .feature-overview__media { margin-left: 24px; }
    .feature-overview--reverse .feature-overview__image { border-radius: 12px 0 0 12px; }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .feature-overview__logo { width: 280px; }
    .feature-overview__cta-wrap > .btn,
    .feature-overview__cta { width: 100%; }

    /* The platform frames (cream, HUB) use the Mobile styles throughout */
    .feature-overview--cream .feature-overview__heading,
    .feature-overview--hub-pale .feature-overview__heading,
    .feature-overview--tint .feature-overview__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .feature-overview--hub-dark .feature-overview__heading {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
    .feature-overview--cream .feature-overview__feature-title,
    .feature-overview--hub-pale .feature-overview__feature-title,
    .feature-overview--hub-dark .feature-overview__feature-title {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
    .feature-overview--cream .feature-overview__body,
    .feature-overview--hub-pale .feature-overview__body,
    .feature-overview--hub-dark .feature-overview__body {
        font-family: var(--font-body);
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }

    .feature-overview--no-media-mobile .feature-overview__media { display: none; }

    .feature-overview__badge { flex-direction: column; align-items: flex-start; gap: 12px; }
    .feature-overview__badge-title { font-size: var(--text-mobile-h3); }

    .feature-overview--reverse .feature-overview__head,
    .feature-overview--reverse .feature-overview__features,
    .feature-overview--reverse .feature-overview__more { grid-column: content-start / content-end; }
    .feature-overview--reverse .feature-overview__media {
        grid-column: content-start / page-end;
        margin: 8px 0 0;
    }
    .feature-overview--reverse .feature-overview__image { border-radius: 12px 0 0 12px; }
}

/* ── Wide screens (Alex, 2 Oct): over 1800px the image stops bleeding to the
   page edge and sits in the content container at 4/3, rounded all round ── */
@media (min-width: 1801px) {
    .feature-overview__media { grid-column: content-start / middle; }
    .feature-overview--reverse .feature-overview__media { grid-column: middle / content-end; }
    .feature-overview .feature-overview__image {
        aspect-ratio: 4 / 3;
        min-height: 0;
        border-radius: 16px;
    }
    .feature-overview--story .feature-overview__image { border-radius: 12px; }
}

/* ── Photo height cap (Alex, 2 Oct): on desktop and tablet (768 up) the photo
   is never taller than 500px; it stays full width and crops sideways. Mobile
   has no cap. ── */
@media (min-width: 768px) {
    .feature-overview .feature-overview__image { max-height: 500px; }
}