/*
  Industries We Transform section.
  Source: Figma node 3:103 (desktop 1440 × 443).

  8-card grid (4 × 2 on desktop) wrapped in a single rounded container.
  Adjacent card borders are simulated with grid `gap: 1px` over a
  border-coloured background — same recipe used in why-infleqtion.

  Card hover follows the project pattern set in why-infleqtion:
  white → navy + the arrow fades + slides in. The last card ("Case
  Studies") is the always-dark CTA, so it uses the hover-state look
  permanently via .heading-linked-card-grid-with-icon-text__card--cta.
*/

.heading-linked-card-grid-with-icon-text {
  padding-block: var(--section-padding-block);
}

.heading-linked-card-grid-with-icon-text__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* ---------------------------------------------------------------
   Header — eyebrow + heading + subtitle
   --------------------------------------------------------------- */
.heading-linked-card-grid-with-icon-text__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.heading-linked-card-grid-with-icon-text__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;
}

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

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

.heading-linked-card-grid-with-icon-text__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);
}

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

.heading-linked-card-grid-with-icon-text__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;
}

/* Side-by-side header (title left, subtitle right) at ≥900px. Genuine
   layout change rather than a value swap, so it's a real breakpoint.
   Split evenly so a max-length subheading (115 chars per Content Doc) still
   fits its 2-line limit at midrange desktop widths (~1366–1440). */
@media (min-width: 900px) {
  .heading-linked-card-grid-with-icon-text__heading-row {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(var(--space-7), 5vw, 147px);
    align-items: center;
  }
}

/* ---------------------------------------------------------------
   Cards grid
   --------------------------------------------------------------- */
.heading-linked-card-grid-with-icon-text__cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* Mobile: 1 column. */
  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 × 4 rows */
@media (min-width: 600px) {
  .heading-linked-card-grid-with-icon-text__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 4 columns × 2 rows — Figma desktop layout */
@media (min-width: 1100px) {
  .heading-linked-card-grid-with-icon-text__cards {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Exactly 4 cards → 2×2 instead of a single 1×4 row. Content-driven via
     :has, so a 4-card instance (e.g. the product page's "Why Choose This
     Product?") lays out 2×2 automatically without affecting the 8-card
     home grid. */
  .heading-linked-card-grid-with-icon-text__cards:has(> li:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.heading-linked-card-grid-with-icon-text__cards > li {
  display: flex; /* lets the inner <a> fill the cell evenly */
}

/* ---------------------------------------------------------------
   Card
   --------------------------------------------------------------- */
.heading-linked-card-grid-with-icon-text__card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4_5);
  padding: var(--space-7_5);
  background-color: var(--color-background);
  color: var(--color-text-body);
  text-decoration: none;
  width: 100%;
  min-height: 148px;
}

a.heading-linked-card-grid-with-icon-text__card {
  transition: background-color 0.2s ease, color 0.2s ease;
}

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

.heading-linked-card-grid-with-icon-text__card-icon {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.heading-linked-card-grid-with-icon-text__card-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.heading-linked-card-grid-with-icon-text__card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.heading-linked-card-grid-with-icon-text__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;
  color: var(--color-text-heading);
  transition: color 0.2s ease;
}

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

/* Arrow is hidden in the default state and slides in left → right on
   hover (16px offset, ease-out, slight delay so it follows the card
   bg transition instead of fighting it). */
.heading-linked-card-grid-with-icon-text__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.heading-linked-card-grid-with-icon-text__card:hover .heading-linked-card-grid-with-icon-text__card-arrow,
a.heading-linked-card-grid-with-icon-text__card:focus-visible .heading-linked-card-grid-with-icon-text__card-arrow {
  opacity: 1;
  transform: translateX(0);
}

.heading-linked-card-grid-with-icon-text__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 (gray default, white on hover/cta) */
}

/* ---------------------------------------------------------------
   Scroll-driven reveal
   The whole section reveals as one unit: the header (.reveal) fades up
   first, then the cards ul (.reveal) fades + slides up with all its
   cards together (no per-card stagger — the <li>s are not individually
   .reveal).
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   With-decor variant (Case Study page — Figma 772:546)
   The 8th grid slot is a decorative navy dot-pattern panel instead of
   an icon card. Only visible at ≥1100px (the 4×2 desktop grid); on
   smaller layouts the decor slot collapses out so real cards fill the
   available space.
   --------------------------------------------------------------- */

.heading-linked-card-grid-with-icon-text__decor {
  display: none;
}

@media (min-width: 1100px) {
  .heading-linked-card-grid-with-icon-text--with-decor .heading-linked-card-grid-with-icon-text__decor {
    display: block;
    position: relative;
    overflow: hidden; /* clip the arcs that overhang the panel */
    background-color: var(--color-navy-blue);
    min-height: 148px;
    /* Fill the parent <li>, which is display:flex. Without these, the
       empty __decor collapses to 0 × 0 in the flex container and the
       absolutely-positioned arcs have nothing to anchor to. */
    flex: 1 1 auto;
    align-self: stretch;
  }

  /* Figma 772:608 — two copies of the dotted-circle PNG placed at fixed
     pixel positions relative to the cell corners. Fixed px (not %) so
     the arcs render identically at desktop and widescreen. */
  .heading-linked-card-grid-with-icon-text--with-decor .heading-linked-card-grid-with-icon-text__decor::before,
  .heading-linked-card-grid-with-icon-text--with-decor .heading-linked-card-grid-with-icon-text__decor::after {
    content: "";
    position: absolute;
    background-image: url('../../images/case-study/industries-decor.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }

  /* Top-right arc — bleeds off top-right corner. */
  .heading-linked-card-grid-with-icon-text--with-decor .heading-linked-card-grid-with-icon-text__decor::after {
    right: -80px;
    top: -90px;
    width: 220px;
    height: 220px;
  }

  /* Bottom-left arc — same size as the top-right, rotated 180° and mirrored
     to the opposite corner. */
  .heading-linked-card-grid-with-icon-text--with-decor .heading-linked-card-grid-with-icon-text__decor::before {
    left: -80px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    transform: rotate(180deg);
  }
}