/* ============================================================
   eligibility — "Who is covered"
   Figma: Windscreen desktop 1407:65522, tablet 1407:75038,
   mobile 1407:69112.

   The navy "gradient 1" section. Same fluid grid as
   feature-overview: gutter columns either side of two half-container
   columns; the copy fills the right half and the image the left half
   out to the page edge. Tablet and mobile stack the image first,
   still bleeding left (Alex, 30 Sep).

   The template owns the vertical padding: --space-section-alt, as
   the navy differs from its neighbours.
   ============================================================ */

.eligibility {
    background: var(--gradient-dark-reverse);
}

.eligibility__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];
}

/* ── Image (left half, out to the page edge) ──────────────── */
.eligibility__media {
    grid-column: page-start / middle;
    grid-row: 1;
    align-self: center;
    margin-right: 84px;     /* as feature-overview */
}
.eligibility__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 365px;      /* the frame's height: 636x365 at 1440 */
    object-fit: cover;
    border-radius: 0 12px 12px 0;
}

/* An embedded map in the image's slot (Contact): the same box as the photo, so every rule above and below applies. The photo, if any, is the fallback until the map is drawn. */
.eligibility__map {
    position: relative;
    overflow: hidden;
    background: var(--color-surface-tint);
}
.eligibility__map-fallback,
.eligibility__map-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.eligibility__map-fallback { object-fit: cover; }

/* ── Copy (right half) ────────────────────────────────────── */
.eligibility__content {
    grid-column: middle / content-end;
    grid-row: 1;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.eligibility__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eligibility__text .eyebrow {
    margin: 0;
    color: var(--color-accent);
}

/* H2 is Title Case in the Figma ("TITLE" text case) */
.eligibility__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text-inverse);
    text-transform: capitalize;
}

.eligibility__body {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text-inverse);
}
.eligibility__body > * { margin: 0; }
.eligibility__body > * + * { margin-top: 8px; }
.eligibility__body ul {
    padding-left: 24px;     /* the frame's list indent */
    list-style: disc;
}

/* Boxed (product template, 6 of the 17: Motor Accident Injury Protection, Home Emergency,
   Tenant's Liability, Home Excess, Key, Gadget; 1407:70431): each heading and its paragraph in a
   Secondary box, radius 12, 24 padding, 16 between boxes, H3 over Body 12 apart. */
.eligibility__body--boxed .eligibility__item {
    margin-top: 16px;
    padding: 24px;
    background: var(--color-secondary);
    border-radius: 12px;
}
.eligibility__body--boxed .eligibility__item > * { margin: 0; }
.eligibility__body--boxed .eligibility__item > * + * { margin-top: 12px; }
.eligibility__body--boxed h3 {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
}

/* The boxed frames draw a taller photo (599 x 574 on four of the six; 533 and 531 on the others) */
@media (min-width: 1025px) {
    .eligibility--boxed .eligibility__image { min-height: 574px; }
}

/* ── Tablet (1407:75038) ──────────────────────────────────────
   The image across the top (page edge to the right gutter), then
   the copy.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .eligibility__inner { row-gap: 32px; }
    .eligibility__media {
        grid-column: page-start / content-end;
        margin-right: 0;
    }
    .eligibility__image {
        min-height: 400px;
        border-radius: 0 16px 16px 0;
    }
    .eligibility__content {
        grid-column: content-start / content-end;
        grid-row: 2;
    }

    .eligibility__text .eyebrow {
        font-size: var(--text-mobile-overline);
        line-height: var(--leading-mobile-overline);
    }
    .eligibility__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .eligibility__body {   /* the frame's unstyled 14px list, built as Body (Alex, 30 Sep) */
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }
    .eligibility__body--boxed h3 {   /* mobile frame 1407:67646: 24px / 100% in the same 24-padded box */
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
}

/* ── Mobile (1407:69112) ──────────────────────────────────────
   A shorter image, a 20px gap, and a full-width button.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .eligibility__inner { row-gap: 20px; }
    .eligibility__image { min-height: 204px; }

    .eligibility__body {   /* Mobile/Body, set in Futura */
        font-family: var(--font-heading);
        font-size: var(--text-mobile-body);
        line-height: var(--leading-mobile-body);
    }
    .eligibility__content { align-items: stretch; }
    .eligibility__cta { width: 100%; }
}

/* ============================================================
   Light variants (B2 queue, 1 Oct): About "who we are"
   (1407:87846, white) and Contact location (1398:47222, tint).
   Modifiers on the <section>. Same desktop grid as the navy.
   ============================================================ */
.eligibility--light { background: var(--color-surface); }
.eligibility--tint  { background: var(--color-surface-tint); }

.eligibility--light .eligibility__heading,
.eligibility--light .eligibility__body {
    color: var(--color-secondary);
}
.eligibility--light .eligibility__text .eyebrow { color: var(--color-primary); }
.eligibility--light .eligibility__image { min-height: 365px; }
.eligibility--light .eligibility__media { margin-right: 80px; }

/* About "who we are": a 4/3 image (Alex, 2 Oct). The map keeps its own crop. */
.eligibility--light:not(.eligibility--tint) .eligibility__image {
    aspect-ratio: 4 / 3;
    min-height: 0;
}

@media (max-width: 1024px) {
    /* Text, then image, then button: the content wrapper steps aside */
    .eligibility--light .eligibility__content { display: contents; }
    .eligibility--light .eligibility__text { grid-column: content-start / content-end; grid-row: 1; }
    .eligibility--light .eligibility__media {
        grid-column: page-start / content-end;
        grid-row: 2;
        margin-right: 0;
    }
    .eligibility--light .eligibility__cta { grid-column: content-start / content-end; grid-row: 3; width: 100%; }
    .eligibility--light .eligibility__image { min-height: 300px; border-radius: 0 12px 12px 0; }

    /* About "who we are": text, then the button, then the image (Alex, 2 Oct) */
    .eligibility--light:not(.eligibility--tint) .eligibility__cta { grid-row: 2; }
    .eligibility--light:not(.eligibility--tint) .eligibility__media { grid-row: 3; }
    .eligibility--light:not(.eligibility--tint) .eligibility__image { min-height: 0; aspect-ratio: 16/9; }

}

@media (max-width: 767px) {
    .eligibility--light .eligibility__inner { row-gap: 12px; }
    .eligibility--light .eligibility__cta { margin-top: 14px; }   /* 26 after the image */
    .eligibility--light .eligibility__image { min-height: 216px; }

    .eligibility--light:not(.eligibility--tint) .eligibility__inner { row-gap: 24px; }   /* the button 24 under the text, the image 24 under the button */
    .eligibility--light:not(.eligibility--tint) .eligibility__cta { margin-top: 0; }
    .eligibility--light:not(.eligibility--tint) .eligibility__image { min-height: 0; }
}

/* ── 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) {
    .eligibility__media { grid-column: content-start / middle; }
    .eligibility .eligibility__image {
        aspect-ratio: 4 / 3;
        min-height: 0;
        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) {
    .eligibility .eligibility__image { max-height: 500px; }
}