/*
  Why Infleqtion section.
  Source: Figma node 3:45 (desktop 1440 × 766).

  Layout uses the fluid pattern from CLAUDE.md — type, gap, and padding
  all clamp() between mobile/desktop targets. Cards grid is fluid via
  grid-template-columns auto-fit. One real layout switch at 900px where
  the header row stops side-by-side and stacks.
*/

.icon-card-grid-with-header-cta {
  padding-block: var(--section-padding-block);
}

.icon-card-grid-with-header-cta__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
  display: flex;
  flex-direction: column;
  /* Header→cards gap: 32px under 1600, grows fluidly to 64px at 2500
     (Figma wide-screen design). Section-local because no other section
     currently doubles this gap at wide widths. */
  gap: clamp(var(--space-7), 16px + 1.92vw, 64px);
}

/* ---------------------------------------------------------------
   Header row — eyebrow + heading + intro
   --------------------------------------------------------------- */
.icon-card-grid-with-header-cta__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.icon-card-grid-with-header-cta__eyebrow {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-heading);
  margin: 0;
}

.icon-card-grid-with-header-cta__eyebrow-slash {
  color: var(--color-green-2);
  margin-right: 0.25em;
}

.icon-card-grid-with-header-cta__heading-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}

.icon-card-grid-with-header-cta__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  margin: 0;
  color: var(--color-text-heading);
}

.icon-card-grid-with-header-cta__heading-accent {
  color: var(--color-green-2);
  font-weight: var(--font-weight-semibold);
}

.icon-card-grid-with-header-cta__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  align-items: flex-start;
}

/* When the optional CTA is omitted (empty in the CMS), reserve the space
   it would have occupied — the intro gap + the button height — so the
   section keeps the same height and the card grid doesn't shift up. */
.icon-card-grid-with-header-cta__intro:not(:has(.btn)) {
  padding-bottom: calc(var(--space-7) + var(--btn-height));
}

/* Below the layout breakpoint the intro stacks tightly — tighten the
   heading→subheading→CTA gap (and the matching reserved space when the CTA
   is omitted) so the block reads as one compact unit on small screens. */
@media (max-width: 767px) {
  /* Tighten the eyebrow→heading gap so the header reads as one compact unit
     on small screens (24px → 14px). */
  .icon-card-grid-with-header-cta__header {
    gap: var(--space-4);
  }
  /* Pull the header block tighter on small screens: halve the space below the
     title (heading-row) and below the para (inner → cards), 32px → 16px. */
  .icon-card-grid-with-header-cta__heading-row {
    gap: var(--space-4_5);
  }
  .icon-card-grid-with-header-cta__inner {
    gap: var(--space-4_5);
  }
  .icon-card-grid-with-header-cta__intro {
    gap: 0;
  }
  .icon-card-grid-with-header-cta__intro:not(:has(.btn)) {
    padding-bottom: var(--btn-height);
  }
}

.icon-card-grid-with-header-cta__subheading {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  color: var(--color-text-body);
  margin: 0;
}

/* ---------------------------------------------------------------
   Cards grid
   --------------------------------------------------------------- */
.icon-card-grid-with-header-cta__cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* Mobile: 1 column (6 rows). Balanced layouts only — never partial rows. */
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--color-card-border);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  overflow: hidden;
}

/* 2 columns × 3 rows */
@media (min-width: 600px) {
  .icon-card-grid-with-header-cta__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 columns × 2 rows — matches Figma design intent, holds at any wider width */
@media (min-width: 900px) {
  .icon-card-grid-with-header-cta__cards {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Content-driven 2×2: exactly 4 cards get a two-column grid instead of
     3+1 so cards don't orphan on the second row and each card gets ~50%
     of the row width — enough room for the description to fit its
     documented 3-line limit at desktop. */
  .icon-card-grid-with-header-cta__cards:has(> li:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------- 5-up variant (Careers "How We Show Up", Figma 822:4112) ---------
   Five icon cards in a single row at ≥1024px. Below that, stack straight
   to 1 column — 5 doesn't divide cleanly into 2 or 3, and the section-
   wide convention is balanced layouts only (no partial rows). The header
   in this variant never has a CTA, so the intro's reserved CTA-space
   padding is also removed. */
.icon-card-grid-with-header-cta--5up .icon-card-grid-with-header-cta__cards {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .icon-card-grid-with-header-cta--5up .icon-card-grid-with-header-cta__cards {
    grid-template-columns: repeat(5, 1fr);
  }
}

.icon-card-grid-with-header-cta--5up .icon-card-grid-with-header-cta__intro:not(:has(.btn)) {
  padding-bottom: 0;
}

/* Cards in the --5up variant are static value tiles (not links) — suppress
   the base section's white→navy hover flip and the arrow reveal since
   there's nowhere to navigate to. */
.icon-card-grid-with-header-cta--5up .icon-card-grid-with-header-cta__card:hover,
.icon-card-grid-with-header-cta--5up .icon-card-grid-with-header-cta__card:focus-visible {
  background-color: var(--color-background);
  color: var(--color-text-body);
}

.icon-card-grid-with-header-cta--5up .icon-card-grid-with-header-cta__card:hover .icon-card-grid-with-header-cta__card-title,
.icon-card-grid-with-header-cta--5up .icon-card-grid-with-header-cta__card:focus-visible .icon-card-grid-with-header-cta__card-title {
  color: var(--color-text-heading);
}

.icon-card-grid-with-header-cta--5up .icon-card-grid-with-header-cta__card-arrow {
  display: none;
}

.icon-card-grid-with-header-cta__cards > li {
  display: flex; /* makes the inner <a> fill the cell evenly */
}

/* Default card: white background, navy title, gray body. On hover (or
   keyboard focus) the whole card flips to the navy-on-white treatment
   that used to be the --featured modifier, and the arrow fades + slides
   into view. The card sets its own `color` so descendants can inherit. */
.icon-card-grid-with-header-cta__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 57px; /* icon → title gap: fixed so titles align across all cards in a row */
  padding: var(--space-7_5);
  background-color: var(--color-background);
  color: var(--color-text-body);
  text-decoration: none;
  min-height: 280px;
  width: 100%;
}

a.icon-card-grid-with-header-cta__card {
  transition: background-color 0.2s ease, color 0.2s ease;
}

a.icon-card-grid-with-header-cta__card:hover,
a.icon-card-grid-with-header-cta__card:focus-visible {
  background-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
}

.icon-card-grid-with-header-cta__card-icon {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.icon-card-grid-with-header-cta__card-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-card-grid-with-header-cta__card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4_5);
}

.icon-card-grid-with-header-cta__card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-card-title);
  margin: 0;
  /* Explicit so the default state stays navy even though the card's
     `color` is body-gray. On hover the rule below switches to white. */
  color: var(--color-text-heading);
  transition: color 0.2s ease;
}

a.icon-card-grid-with-header-cta__card:hover .icon-card-grid-with-header-cta__card-title,
a.icon-card-grid-with-header-cta__card:focus-visible .icon-card-grid-with-header-cta__card-title {
  color: var(--color-text-on-dark);
}

/* Arrow is hidden in the default state and slides in left → right on
   hover. The 16px start offset is big enough to read as motion (rather
   than a fade); ease-out + a tiny delay sequences it behind the card
   bg transition so the moves don't trip over each other. */
.icon-card-grid-with-header-cta__card-arrow {
  flex-shrink: 0;
  fill: var(--color-accent);
  display: block;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.25s ease-out 0.05s, transform 0.25s ease-out 0.05s;
}

a.icon-card-grid-with-header-cta__card:hover .icon-card-grid-with-header-cta__card-arrow,
a.icon-card-grid-with-header-cta__card:focus-visible .icon-card-grid-with-header-cta__card-arrow {
  opacity: 1;
  transform: translateX(0);
}

.icon-card-grid-with-header-cta__card-description {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  margin: 0;
  color: inherit; /* follows the card's `color` (body-gray, white on hover) */
}

/* ---------------------------------------------------------------
   Header layout: side-by-side on wider, stacked below ~900px.
   Real layout change (genuine column rearrangement), not a value swap.
   --------------------------------------------------------------- */
@media (min-width: 900px) {
  .icon-card-grid-with-header-cta__heading-row {
    grid-template-columns: 706fr 585fr;
    /* Upper cap extended from 150 → 196 to match the Figma wide-screen
       gap (1980-wide frame: 891+196+893 = 1980). The 8vw growth rate
       is unchanged below 1600; the cap only takes effect above ~2450. */
    column-gap: clamp(var(--space-7), 8vw, 196px);
  }
}

/* ---------------------------------------------------------------
   Scroll-driven reveal
   The whole card grid reveals as one unit: the .reveal lives on the
   `__cards` <ul>, so all cards fade + slide up together when the grid
   enters the viewport (no per-card stagger). The cards themselves are
   not individually .reveal, so they can't trigger row-by-row.
   --------------------------------------------------------------- */

/* ===============================================================
   Two-up variant — larger cards (Figma 646:1535 "Our approach").
   The base grid is 3-up at ≥900px, which renders a 2-card instance
   as narrow thirds. This variant lays the two cards out 2-up so each
   fills half the row (wider), with roomier padding and a taller
   min-height to match the 646 card size. Additive: the base class
   and its other usages are untouched; only instances that also carry
   `--two-up` change.
   NOTE: card height/padding estimated from the design screenshot —
   the Figma token pull was rate-limited; tune if exact specs differ.
   =============================================================== */
@media (min-width: 900px) {
  .icon-card-grid-with-header-cta--two-up .icon-card-grid-with-header-cta__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .icon-card-grid-with-header-cta--two-up .icon-card-grid-with-header-cta__card {
    padding: var(--space-10);
  }
}

/* Group the icon + content at the top with a controlled gap instead of the
   base's `space-between` (which stretched a large empty band below the icon).
   The card keeps its min-height, so the "Read More" link sits toward the
   bottom of the flow. */
.icon-card-grid-with-header-cta--two-up .icon-card-grid-with-header-cta__card {
  justify-content: flex-start;
  gap: var(--space-10);
}

/* The "Read More" cta-link is the affordance in this variant, so the
   hover arrow on the title is redundant — suppress it. */
.icon-card-grid-with-header-cta--two-up .icon-card-grid-with-header-cta__card-arrow {
  display: none;
}