/* ============================================================
   why-choose — "Why choose Coplus"
   Figma: Windscreen desktop 1407:65533, tablet 1407:75046,
   mobile 1407:69119.

   Same full-width grid as feature-overview and eligibility. Desktop:
   the heading and reviews strip top-left, the photo bottom-left out to
   the page edge, and the three cards down the right; the two halves
   are 48px apart (24 either side of the middle). Tablet and mobile
   stack the photo first, still bleeding left.

   The template owns the vertical padding.
   ============================================================ */

.why-choose__inner {
    display: grid;
    grid-template-columns:
        [page-start] minmax(var(--space-gutter), 1fr)
        [content-start] minmax(0, calc(var(--layout-content-max-w) * var(--why-left, 0.5)))
        [middle] minmax(0, calc(var(--layout-content-max-w) * (1 - var(--why-left, 0.5))))
        [content-end] minmax(var(--space-gutter), 1fr) [page-end];
    grid-template-rows: auto 1fr;
    row-gap: 46px;          /* the frame's space between the strip and the photo */
}

/* ── Heading and reviews strip (top-left) ─────────────────── */
.why-choose__head {
    grid-column: content-start / middle;
    grid-row: 1;
    padding-right: var(--why-gap-l, 24px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.why-choose__titles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.why-choose__titles .eyebrow { margin: 0; }

/* The eyebrow and the Trustpilot button on one line (Alex, 21 Oct): the eyebrow
   left, the button right; on a narrow screen the button drops under it */
.why-choose__eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}
/* With the outline cropped away the button's own padding (9px left, 7px right) is the only thing between the text and the column's edges, so the strip is pulled out by it and the text sits flush */
.why-choose__eyebrow-row .reviews-strip { margin: 0 -7px 0 -9px; }
/* The widget's box is 240 wide with 28px of margin that is only empty space; at the right it ran past the page's gutter and made the page 15px wider than a phone's screen (a gap down the right side). The row clips it, and nothing visible: the button is cropped to the text */
.why-choose__eyebrow-row { overflow: hidden; }

/* H2 is Title Case in the Figma ("TITLE" text case) */
.why-choose__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);
    text-transform: capitalize;
}

/* ── Photo (bottom-left, out to the page edge) ────────────── */
.why-choose__media {
    grid-column: page-start / middle;
    grid-row: 2;
    /* align-self: end;        bottom-aligned with the cards */
    margin-right: var(--why-gap-l, 24px);
}
.why-choose__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: var(--why-photo-h, 398px);   /* the frame's height: 696x398 at 1440 */
    object-fit: cover;
    border-radius: 0 12px 12px 0;
}

/* ── Cards (right) ────────────────────────────────────────── */
.why-choose__cards {
    grid-column: middle / content-end;
    grid-row: 1 / 3;
    padding-left: var(--why-gap-r, 24px);
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    list-style: none;
}
.why-choose__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: 12px;
    background: var(--gradient-dark-reverse);   /* the frame's "oter" style, identical to "gradient 1" */
    color: var(--color-text-inverse);
}
.why-choose__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: var(--color-accent-tint);
    color: var(--color-accent);
}
.why-choose__icon svg { width: 24px; height: 24px; }
.why-choose__card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.why-choose__card-title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: 1;   /* the frames' card-title box is 28 tall, not the H3 style's 36 */
}
.why-choose__body,
.why-choose__card-body {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

/* ── Tablet (1407:75046) ──────────────────────────────────────
   Photo, heading and strip, then the three cards in a row.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .why-choose__inner {
        grid-template-rows: none;
        row-gap: 32px;
    }
    .why-choose__media {
        grid-column: page-start / content-end;
        grid-row: 1;
        margin-right: 0;
    }
    .why-choose__image {
        min-height: 400px;
        border-radius: 0 16px 16px 0;
    }
    .why-choose__head {
        grid-column: content-start / content-end;
        grid-row: 2;
        padding-right: 0;
        gap: 24px;
    }
    .why-choose__cards {
        grid-column: content-start / content-end;
        grid-row: 3;
        padding-left: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
    .why-choose__card { padding: 20px; }

    .why-choose__titles .eyebrow {
        font-size: var(--text-mobile-overline);
        line-height: var(--leading-mobile-overline);
    }
    .why-choose__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .why-choose__card-title {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
}

/* ── Mobile (1407:69119) ──────────────────────────────────────
   One column: photo, heading, strip (the link under the rating),
   then the cards stacked.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .why-choose__inner { row-gap: 20px; }
    .why-choose__image { min-height: 204px; }

    .why-choose__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .why-choose__card { gap: 16px; }
    .why-choose__icon {
        width: 35px;
        height: 35px;
    }
    .why-choose__icon svg { width: 20px; height: 20px; }
    .why-choose__card-title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
}

/* ── Light variant (FNOL 1407:100857, mobile 1407:102198) ─────
   The claims services: cream, white cards with dark copy, solid
   gold icons with a navy glyph, a 440 photo, and "Talk To Our
   Team" 24 under the reviews strip. No tablet frame, so from 1024
   down it follows mobile: the photo bleeding off the right edge,
   heading and strip, the cards stacked, then the button full width.
   ───────────────────────────────────────────────────────────── */
.why-choose--light { background: var(--color-surface-warm); }
.why-choose--light { --why-photo-h: 440px; }   /* 696x440 at 1440 */
.why-choose--light .why-choose__card {
    background: var(--color-surface);
    color: var(--color-text);
}
.why-choose--light .why-choose__icon {
    background: var(--color-accent);
    color: var(--color-secondary);
}
/* The intro (Compliance & Governance 1962:25272): 12 under the heading */
.why-choose--light .why-choose__body { margin-top: 4px; }

@media (max-width: 1024px) {
    .why-choose--light .why-choose__body { margin-top: 16px; }   /* 24 on mobile (1964:25400) */
    .why-choose--light .why-choose__media {   /* bleeds off the right, not the left */
        grid-column: content-start / page-end;
    }
    .why-choose--light .why-choose__image {
        min-height: 204px;
        border-radius: 16px 0 0 16px;
    }
    .why-choose--light .why-choose__cards {
        grid-row: 3;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .why-choose--light .why-choose__card { gap: 16px; }
    .why-choose--light .why-choose__icon {
        width: 35px;
        height: 35px;
    }
    .why-choose--light .why-choose__icon svg { width: 20px; height: 20px; }
    .why-choose--light .why-choose__card-title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .why-choose--light .why-choose__inner:has(.why-choose__action) .why-choose__action { grid-row: 4; }   /* after the cards */
}

/* ── CTA (every variant) ──────────────────────────────────────
   The button sits under the heading block: 24 below the strip or
   copy, then the photo (24 light, 40 split). A row of its own only
   when there is a button. On tablet and mobile it follows the copy;
   light puts it after the cards.
   ───────────────────────────────────────────────────────────── */
.why-choose__action {
    grid-column: content-start / middle;
    grid-row: 2;
    padding-right: var(--why-gap-l, 24px);
    margin-bottom: calc(var(--why-media-gap, 24px) - 24px);
}
.why-choose__inner:has(.why-choose__action) {
    grid-template-rows: auto auto 1fr;
    row-gap: 24px;
}
.why-choose__inner:has(.why-choose__action) .why-choose__media { grid-row: 3; }
.why-choose__inner:has(.why-choose__action) .why-choose__cards { grid-row: 1 / 4; }

@media (max-width: 1024px) {
    .why-choose__inner:has(.why-choose__action) {
        grid-template-rows: none;
        row-gap: 20px;
    }
    .why-choose__inner:has(.why-choose__action) .why-choose__media { grid-row: 1; }
    .why-choose__inner:has(.why-choose__action) .why-choose__action {
        grid-column: content-start / content-end;
        grid-row: 3;
        padding-right: 0;
        margin: 4px 0 0;        /* 20 row gap + 4 = 24 */
    }
    .why-choose__inner:has(.why-choose__action) .why-choose__cards { grid-row: 4; }
    .why-choose--light .why-choose__inner:has(.why-choose__action) .why-choose__cards { grid-row: 3; }
  
}

/* ── Body paragraph (Home, hubs, About, Careers) ──────────── */
.why-choose__body {
    margin: 0;
    color: var(--color-text);
}

/* ── Split columns: 745 photo / 500 cards at 1440 (Claims hub
   1407:101439, About 1407:87963). The left track holds the 77
   gap, so the copy is 627 wide and the photo ends at 745. ──── */
.why-choose--split {
    --why-left: 0.5847;
    --why-gap-l: 77px;
    --why-gap-r: 0px;
    --why-media-gap: 40px;
}

/* ── Dark: the section on gradient 1, light copy, navy cards
   (Home 1407:99124, Claims hub, Partners 1407:89779). Cards are
   the card navy (#03283c / #032a42 in the frames). ─────── */
.why-choose--dark { background: var(--gradient-1); }
.why-choose--dark .why-choose__titles .eyebrow { color: var(--color-accent); }
.why-choose--dark .why-choose__heading,
.why-choose--dark .why-choose__body { color: var(--color-text-inverse); }
.why-choose--dark .why-choose__card { background: var(--color-card-navy); }
/* The Trustpilot link shown while consent is denied: gold on the dark section, as the Home frame draws "Read our reviews →" */
.why-choose--dark .reviews-strip__rating > a { color: var(--color-accent); }
.why-choose--dark .reviews-strip__rating > a:hover { color: var(--color-text-inverse); }

/* ── HUB skin: gradient 3 cards (AncillaryHUB 1331:138097) ──── */
.why-choose--hub .why-choose__card { background: var(--gradient-hub); }

/* ── Home: the photo rounds its top-right corner only ───────── */
.why-choose--corner-top .why-choose__image { border-radius: 0 12px 12px 0; }

/* ── Row cards: the icon left of the text (About, Careers,
   Partners). row-lg is Partners' 61px circle with a 30 glyph. ── */
.why-choose--row .why-choose__card,
.why-choose--row-lg .why-choose__card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.why-choose--row .why-choose__icon,
.why-choose--row-lg .why-choose__icon { flex-shrink: 0; }
.why-choose--row-lg .why-choose__card { gap: 20px; }
.why-choose--row-lg .why-choose__icon {
    width: 61px;
    height: 61px;
    border-radius: 50%;
}
.why-choose--row-lg .why-choose__icon svg { width: 30px; height: 30px; }

@media (max-width: 1024px) {
    .why-choose--corner-top .why-choose__image { border-radius: 0 16px 16px 0; }
    .why-choose--row .why-choose__cards,
    .why-choose--row-lg .why-choose__cards { grid-template-columns: minmax(0, 1fr); }
    .why-choose--row .why-choose__card,
    .why-choose--row-lg .why-choose__card { padding: 24px; }
}

@media (max-width: 767px) {
    .why-choose--row-lg .why-choose__card {   /* Partners mobile stacks the icon over the text */
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }
    .why-choose__action .btn { width: 100%; }
    .why-choose--row-lg .why-choose__icon { width: 35px; height: 35px; }
    .why-choose--row-lg .why-choose__icon svg { width: 20px; height: 20px; }
    .why-choose--row .why-choose__icon { width: 35px; height: 35px; }
    .why-choose--row .why-choose__icon svg { width: 18px; height: 18px; }
    .why-choose--row .why-choose__card { gap: 12px; }

    /* Photo bleeds off the right edge (hubs, Careers, HUB); light always does */
    .why-choose--bleed-right .why-choose__media { grid-column: content-start / page-end; }
    .why-choose--bleed-right .why-choose__image { border-radius: 16px 0 0 16px; }
}

/* ── Frame-accurate rules for the variants (verified 1 Oct) ──────
   Only the new modifiers: the navy default and light are untouched.
   ───────────────────────────────────────────────────────────── */

/* The photo is 16:9 at every width (Alex, 2 Oct), so no fixed heights: the
   per-frame photo_height and the 400 / 204 tablet and mobile heights are gone. */
:is(.why-choose--dark, .why-choose--hub, .why-choose--row, .why-choose--row-lg, .why-choose--split, .why-choose--shade) .why-choose__image {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
}

/* Desktop: the cards sit centred beside the copy and photo, and the
   space above the photo is what the frames leave (Home 39, HUB 33,
   Partners and Careers 31). */
@media (min-width: 1025px) {
    :is(.why-choose--dark, .why-choose--hub, .why-choose--row, .why-choose--row-lg, .why-choose--split, .why-choose--shade) .why-choose__cards {
        justify-content: center;
    }
    .why-choose--shade .why-choose__inner { row-gap: 39px; }
    .why-choose--hub .why-choose__inner { row-gap: 33px; }
    .why-choose--row-lg .why-choose__inner { row-gap: 31px; }
    .why-choose--row-lg .why-choose__inner:has(.why-choose__action) { row-gap: 24px; }
    .why-choose--row-lg { --why-media-gap: 31px; }
}

/* Home: cards are Secondary Accent (black at 10%), and keep their
   desktop size on mobile (48 icon, 28 title, 12 gaps). */
.why-choose--shade .why-choose__card { background: var(--color-surface-shade); }
@media (max-width: 767px) {
    .why-choose--shade .why-choose__inner { row-gap: 32px; }
    .why-choose--shade .why-choose__cards { gap: 12px; }
    .why-choose--shade .why-choose__card { padding: 24px; gap: 12px; }
    .why-choose--shade .why-choose__icon { width: 48px; height: 48px; }
    .why-choose--shade .why-choose__icon svg { width: 24px; height: 24px; }
    .why-choose--shade .why-choose__card-title {
        font-size: var(--text-h3);
        line-height: 1;
    }
}

/* Claims hub: 16 inside the cards on desktop */
.why-choose--dark.why-choose--split .why-choose__card { gap: 16px; }

/* Row cards (About, Careers, Partners): icon and text start at the top */
.why-choose--row .why-choose__card,
.why-choose--row-lg .why-choose__card { align-items: flex-start; }

/* About: Secondary copy, and the frame's crop of the photo */
.why-choose--split.why-choose--row .why-choose__heading,
.why-choose--split.why-choose--row .why-choose__body { color: var(--color-secondary); }
.why-choose--split.why-choose--row .why-choose__image { object-position: 50% 38%; }

/* Intro paragraph in Mobile body (small) from tablet down: Futura 14
   (Home, About, Careers and the claims services; the Claims hub keeps Body). */
@media (max-width: 1024px) {
    .why-choose--body-sm .why-choose__body {
        font-family: var(--font-heading);
        font-size: var(--text-mobile-body-small);
        line-height: 1.4;
    }
}
@media (max-width: 767px) {
    .why-choose--split.why-choose--row .why-choose__heading { color: var(--color-text); }
    /* About's cards set their copy in Mobile body (Futura 16) */
    .why-choose--split.why-choose--row .why-choose__card-body {
        font-family: var(--font-heading);
        font-size: var(--text-mobile-body);
        line-height: var(--leading-mobile-body);
    }
    /* Careers puts 24 between the heading and the paragraph */
    .why-choose--row-lg .why-choose__body { margin-top: 16px; }
    /* HUB: 16 between the cards */
    .why-choose--hub .why-choose__cards { gap: 16px; }
}

/* The CTA keeps its own width on mobile in these frames (light goes full width) */
@media (max-width: 1024px) {
    :is(.why-choose--dark, .why-choose--hub, .why-choose--row, .why-choose--row-lg, .why-choose--split, .why-choose--shade) .why-choose__action .btn { width: auto; }
}

/* ── Wide screens (Alex, 2 Oct): over 1800px the photo stops bleeding to the
   page edge and sits in the content container at 4/3, rounded all round
   (every variant) ── */
@media (min-width: 1801px) {
    .why-choose__media { grid-column: content-start / middle; }
    .why-choose .why-choose__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) {
    .why-choose .why-choose__image { max-height: 500px; }
}