/* ============================================================
   values — "Make a Difference"
   Figma: About Us desktop 1407:88057, mobile 1407:88501 (no tablet
   frame: tablet follows mobile). Also Careers 1331:150925 and Team
   1331:152610.

   The navy gradient. Desktop: the cards (three across, 196 wide, 20
   apart) on the left, 77 from the heading and photo, which bleeds off
   the right edge. Mobile: the photo first, then the heading, then the
   cards two across.

   The card fill is #03283c, the card navy token. The frame's card rows are uneven heights; built equal
   across the whole grid (Alex, 2 Oct). The template owns the vertical padding.
   ============================================================ */

.values {
    background: var(--gradient-dark-reverse);   /* "gradient 1" */
    color: var(--color-text-inverse);
    overflow: hidden;
}
.values__inner {
    display: grid;
    grid-template-columns:
        [page-start] minmax(var(--space-gutter), 1fr)
        [content-start] minmax(0, calc(var(--layout-content-max-w) * 0.5216))
        [cards-end] 77px
        [aside-start] minmax(0, calc(var(--layout-content-max-w) * 0.4144))
        [content-end] minmax(var(--space-gutter), 1fr) [page-end];
    align-items: center;
}

/* ── Heading and photo (right) ────────────────────────────── */
/* A subgrid of the two columns it crosses: the content column and the right
   gutter. The copy stays in the content column, so it keeps its gutter on
   the right at any width (Alex, 2 Oct); the photo takes both and bleeds. */
.values__aside {
    grid-column: aside-start / page-end;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    row-gap: 40px;
}
.values__head {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.values__media { grid-column: 1 / -1; }
.values__head .eyebrow { margin: 0; }

/* H2 is Title Case in the Figma ("TITLE" text case) */
.values__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    text-transform: capitalize;
}
.values__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;   /* Alex, 2 Oct (was 328 tall) */
    object-fit: cover;
    border-radius: 12px 0 0 12px;
}

/* ── Cards (left) ─────────────────────────────────────────── */
.values__cards {
    grid-column: content-start / cards-end;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;    /* every card the height of the tallest, across the whole grid (Alex, 2 Oct) */
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 1250px) {
    .values__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.values__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 16px;
    background: var(--color-card-navy);
}
.values__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    border-radius: 24px;
    background: var(--color-accent-tint);
    color: var(--color-accent);
}
.values__icon svg {
    display: block;
    width: 24px;
    height: 24px;
}
.values__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.values__title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
}
.values__body {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
}

/* ── Tablet and mobile (1407:88501) ───────────────────────────
   The photo first (204 tall, bleeding right), then the heading, then
   two columns of centred cards, 14 apart across and 16 down. */
@media (max-width: 1024px) {
    .values__inner {
        grid-template-columns:
            [page-start] var(--space-gutter)
            [content-start] minmax(0, 1fr)
            [content-end] var(--space-gutter) [page-end];
        row-gap: 20px;
        align-items: start;
    }
    .values__aside,
    .values__cards { grid-column: content-start / content-end; }
    .values__aside { grid-row: 1; display: flex; flex-direction: column; gap: 20px; }
    .values__cards { grid-row: 2; column-gap: 14px; row-gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .values__media {
        order: -1;
        margin-right: calc(var(--space-gutter) * -1);   /* bleeds off the right */
    }
    .values__image { border-radius: 16px 0 0 16px; }   /* 16:9 from the base rule */
    .values__card { align-items: center; text-align: center; }
    .values__text { gap: 8px; }
    .values__title {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
}
@media (max-width: 767px) {
    .values__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
}

/* ── Wide screens (Alex, 2 Oct): over 1800px the photo stops bleeding off the
   right and sits in the content column at 4/3, rounded all round ── */
@media (min-width: 1801px) {
    .values__media { grid-column: 1; }
    .values .values__image {
        aspect-ratio: 4 / 3;
        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) {
    .values .values__image { max-height: 500px; }
}