/* ---- Card grid ----
   Generic, reusable "intro + rows of cards" section pattern. Demonstrated by
   six Figma references (Cover Highlights, Your Specialist Insurer, Insurance
   Renewal, Claim Facts, Claims Philosophy, Nautilus Marine Partnership) that
   are all the SAME underlying pattern with different content/row counts —
   not six separate components. See card-sections-demo.html for all six
   configurations reproduced with this one pattern.

   Structure:
     .card-grid > .card-grid__inner
       > .card-grid__intro            (eyebrow / heading / optional subcopy)
       > .card-grid__group             (optional pre-heading + rows)
           > .card-grid__pre-heading   (optional, e.g. "Before you get started:")
           > .card-grid__rows
               > .card-grid__row--cols-{2,3,4}   (one or more, independently configurable)
                   > .card-grid__card--icon|stat|text-only (per-card variant)

   Row column count is set explicitly per row via a modifier class, so a
   5-card section can be row 1 = 3 cols / row 2 = 2 cols, a 6-card section
   3 + 3, etc., without relying on wrapping or nth-child selectors. */

.card-grid {
  width: 100%;
  padding: var(--space-section-l) 0; /* 144px top/bottom, matches .accordion-tabs-section/.text-columns */
  background: var(--colour-white);
  box-sizing: border-box;
}

.card-grid__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6xl); /* 64px */
  /* Container + gutter: the CONTENT box still resolves to exactly 1280px
     on desktop, and the section keeps a proper side gutter at every width
     below that — see --page-container-outer, css/variables.css. */
  max-width: var(--page-container-outer);
  padding-inline: var(--page-gutter);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---- Intro ---- */

.card-grid__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl); /* 24px */
  width: 100%;
}

.card-grid__intro-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Eyebrow chip — same shape/typography as .eyebrow (css/style.css), but
   this section sits on a white background so it needs the grey-101 chip
   instead of .eyebrow's white default (same reasoning as
   .self-service__eyebrow, css/home.css). */
.card-grid__eyebrow {
  background: var(--colour-grey-101);
}

/* Typography comes from .text-h2 (css/typography.css). */
.card-grid__heading {
  text-align: center;
}

.card-grid__heading-dark {
  color: var(--colour-header-grey);
}

.card-grid__heading-accent {
  color: var(--colour-brand-teal);
}

/* Typography comes from .text-body-xl (css/typography.css). */
.card-grid__subcopy {
  margin: 0;
  max-width: 100%;
  color: var(--colour-body-grey);
  text-align: center;
}

/* ---- Optional pre-grid heading + rows ---- */

.card-grid__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl); /* 32px, e.g. "Before you get started:" to the row below it */
  width: 100%;
}

/* Typography comes from .text-h4 (css/typography.css). */
.card-grid__pre-heading {
  margin: 0;
  text-align: center;
}

.card-grid__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl); /* 24px between stacked rows */
  width: 100%;
}

/* ---- Rows ---- */
/* Explicit per-row column count — deliberately not a single grid that wraps,
   so a trailing row (e.g. 2 cards after a row of 3) genuinely widens to fill
   the row rather than retaining the previous row's card width. */

.card-grid__row {
  display: grid;
  gap: var(--space-2xl); /* 24px */
  align-items: stretch; /* equal card height within a row */
  width: 100%;
  /* Every existing usage is a plain <div> (already 0/none by default) —
     these three only matter when a row is marked up as a <ul> instead
     (e.g. the Article template's related-articles row, css/article-page.css),
     so a list doesn't pick up the browser's default margin/padding/
     bullets. No-op everywhere else. */
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-grid__row--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card-grid__row--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.card-grid__row--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ---- Card ---- */
/* One shared card shell for all three content variants (icon / stat /
   text-only) — the icon and stat elements are simply omitted from the
   markup when not needed, rather than styled empty, so there is never a
   reserved icon height on text-only or stat cards. */

.card-grid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l); /* 16px */
  padding: var(--space-3xl) var(--space-3xl) var(--space-5xl); /* 32px 32px 42px */
  background: var(--colour-grey-101);
  border: 1px solid var(--colour-light-grey);
  border-radius: 12px;
  box-sizing: border-box;
  text-align: center;
}

/* Icon variant — 96px white circular holder, glyph centred within it. */
.card-grid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  padding: var(--space-s); /* 10px-ish visual padding around the glyph, matches Figma's Icon - Circle */
  background: var(--colour-white);
  border-radius: var(--space-full);
  box-sizing: border-box;
}

.card-grid__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Stat variant — same scale as the site H2, in brand teal. */
.card-grid__stat {
  color: var(--colour-brand-teal);
}

/* Typography comes from .text-h5 (css/typography.css). */
.card-grid__card-heading {
  margin: 0;
  color: var(--colour-header-grey);
}

/* Typography comes from .text-body (css/typography.css). */
.card-grid__card-body {
  margin: 0;
  color: var(--colour-body-grey);
}

.card-grid__card-body a {
  color: var(--colour-orange);
  text-decoration: underline;
}

/* Inline link inside the intro/subcopy paragraph (e.g. Boat Quotes'
   "…contact your local office on 1300 780 533…") — brand teal rather than
   the browser default blue it would otherwise fall back to. */
.card-grid__subcopy a {
  color: var(--colour-cta-orange);
  text-decoration: underline;
}

/* Optional CTA button, e.g. Boat Quotes' "Get a quote" per card
   (boat-quotes.html). Cards in a row are equal-height (.card-grid__row's
   align-items: stretch) but description length varies, so this pushes the
   button to the same bottom edge across a row instead of letting it sit
   wherever the text happens to end. Generic to the card shell — not a
   boat-quotes-specific rule — so any future card-grid usage needing a CTA
   can reuse it as-is. */
.card-grid__card-cta {
  margin-top: auto;
}

/* ---- Responsive ----
   Column counts step down by row width rather than collapsing straight to
   one: a 4-up row of icon cards still reads well two-up on a tablet, and
   a 2-up row has plenty of width to stay two-up right down to tablet
   portrait. Everything becomes a single column on phones. Card padding
   eases off with it — the desktop 32px/42px is a lot of a 300px-wide
   card. Section vertical padding follows the same rhythm the Home page
   uses (144px desktop → 64px mobile). */

@media (max-width: 1279px) {
  .card-grid {
    padding: var(--space-section-s) 0; /* 96px, down from 144px */
  }

  /* 4-up is the only count that genuinely runs out of room before the
     desktop container width — 3-up still has ~300px per card at 1024px. */
  .card-grid__row--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1023px) {
  .card-grid__inner {
    gap: var(--space-5xl); /* 42px */
  }

  .card-grid__row--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .card-grid {
    padding: var(--space-section-xxs) 0; /* 64px */
  }

  .card-grid__inner {
    gap: var(--space-3xl); /* 32px */
  }

  .card-grid__row--cols-2,
  .card-grid__row--cols-3,
  .card-grid__row--cols-4 {
    grid-template-columns: 1fr;
  }

  .card-grid__row {
    gap: var(--space-l); /* 16px */
  }

  .card-grid__card {
    padding: var(--space-2xl); /* 24px all round */
  }

  .card-grid__icon {
    width: 72px;
    height: 72px;
  }
}

/* ---- Surface variant: grey section, white cards ---- */
/* Inverse of the default surface relationship (white section / grey-101
   cards / white icon circles). For where two card-grid sections stack
   directly on top of each other and need to read as separate bands — the
   Claims Philosophy page's second section (Figma 18604:12893) is the first
   instance. Same two tokens as the default, simply swapped, so the border
   tone, radius, padding and all responsive behaviour stay shared.

   The eyebrow chip reverts to .eyebrow's white default (css/style.css):
   .card-grid__eyebrow only forces grey-101 because the base component sits
   on white, and a grey-101 section background is exactly what the white
   chip is designed to contrast against — same convention as
   .testimonials__eyebrow / .stories__eyebrow (css/home.css). */
.card-grid--grey {
  background: var(--colour-grey-101);
}

.card-grid--grey .card-grid__eyebrow {
  background: var(--colour-white);
}

.card-grid--grey .card-grid__card {
  background: var(--colour-white);
}

.card-grid--grey .card-grid__icon {
  background: var(--colour-grey-101);
}

/* ---- Surface variant: grey-200 section ---- */
/* Same idea as --grey (grey-101), for a section that needs the slightly
   darker grey-200 background instead — e.g. two grey card-grid sections
   stacking with a visible seam between them (Customer Stories' "More
   customer stories" section, Figma 18614:14552). Only the background/chip
   swap; this variant doesn't use the icon/stat card styling. */
.card-grid--grey-200 {
  background: var(--colour-grey-200);
}

.card-grid--grey-200 .card-grid__eyebrow {
  background: var(--colour-white);
}

/* ---- Desktop top-padding modifier ---- */
/* Opt-in shorter top padding for a card-grid that opens a page directly
   below a hero wave, where the wave already supplies the separation and
   Figma steps down to the 96px section value instead of the default 144px
   (Claims Philosophy's first section, Figma 18604:12725). Desktop-only on
   purpose — below 1280px the shared responsive rhythm above already takes
   the section padding down, and this must not fight it. */
@media (min-width: 1280px) {
  .card-grid--pad-top-s {
    padding-top: var(--space-section-s); /* 96px */
  }
}