/* ---------- Industries (dark punctuation 1) ---------- */
.industries { background: var(--ink-deep); color: var(--bg); padding-block: var(--section-pad-block); }
/* Same <p> max-width: 68ch trap as the Services eyebrow (see css/sections/services.css)
   - reset it here too, plus center both the eyebrow and the headline block itself. */
.industries .eyebrow {
  color: color-mix(in srgb, var(--bg) 70%, transparent);
  max-width: none;
  text-align: center;
}
.industries h2 {
  font-size: var(--h2);
  color: var(--bg);
  max-width: 24ch;
  letter-spacing: -0.005em;
  line-height: 1.08;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--section-header-gap);
}
.industry-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(10rem, auto);
  gap: clamp(1rem, 2vw, 1.5rem);
  /* Sparse (default) placement leaves gaps whenever a later, smaller card
     could have backfilled an earlier row's leftover columns — visible at the
     900px/6-col breakpoint, where the client's own span choices can leave
     every row using half its columns. Dense re-flows later cards into those
     gaps; it can place a card ahead of its DOM order, an acceptable tradeoff
     for a decorative image grid with no reading-order requirement. */
  grid-auto-flow: dense;
}
/* --span is a per-card custom property (1-12) set inline by the block —
   see blocks/industry-card/render.php. Replaces the old fixed set of
   position-dependent modifier classes (--large/--tall/--row2-side/etc, one
   per DOM position), which broke the moment a card was added, removed, or
   reordered — precisely the power the block editor hands the client. Height
   is derived from span so wider cards still read as more prominent, without
   pinning exact legacy values to specific grid positions. */
.industry-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  grid-column: span var(--span, 4);
  /* Re-tuned with the static prototype's 2026-08-06 pass, which raised every
     card's floor by ~2rem for a taller, near-square bento. Derived from
     --span: 3 -> 18rem, 4 -> 20rem, 5 -> 22rem, 6 -> 24rem.

     This deliberately does NOT match the static prototype exactly, and it
     can't. The static assigns a height per grid POSITION, not per width, so
     two cards of the same span get different heights there (--large and
     --tall are both span 6, at 24rem and 22rem; --row2-side is span 3 at
     20rem while --row3-small is span 3 at 18rem). No function of span alone
     reproduces that.

     Measured consequence at 1440px, 8 cards: rows come out 384 / 384 / 352
     where the static gives roughly 384 / 352 / 288. Same maximum, same
     floor, but the grid tapers less down the page. That is the price of a
     bento the client can reorder in the editor without the layout breaking,
     which is why the position-based classes were dropped in the first place.
     If exact parity ever matters more than reorderability, the fix is a
     per-card height override attribute rather than bringing the positional
     classes back. */
  min-height: clamp(18rem, calc(12rem + var(--span, 4) * 2rem), 24rem);
  background: rgba(255,255,255,0.05);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
/* position: absolute takes the image out of normal flow entirely - without this,
   a percentage-height image inside an auto-sized grid row makes the browser fall
   back to the image's own natural aspect ratio to size that row, so a real photo
   (unlike the old placeholder) inflated cards far past their intended min-height.
   This only became visible once real photography replaced the placeholder. */
.industry-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
/* Linear scrim so the label stays legible regardless of the photo's own
   brightness (the text-shadow alone wasn't enough over lighter photos like the
   textile shot) - same bottom-heavy gradient technique already used on the
   hero, footer showcase, and services panels. */
.industry-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(15, 12, 10, 0.85) 100%);
  pointer-events: none;
}
.industry-card h3 {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  margin: 0;
  color: var(--bg);
  font-size: var(--h3);
  line-height: 1.1;
  text-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.industry-card:hover,
.industry-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
}
.industry-card:hover img,
.industry-card:focus-visible img {
  transform: scale(1.08);
}

/* Staged reveal: one card at a time in DOM order, same fade-up technique and
   rhythm as every other section (see initScrollReveal in chrome.js). Delay is
   capped at the 6th card rather than climbing to the 8th, so an 8-card grid
   doesn't read as noticeably slower to finish than a 3-item one. */
.industries [data-reveal] {
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.industries .is-pre-reveal { opacity: 0; transform: translateY(16px); }
.industries .is-pre-reveal.is-visible { opacity: 1; transform: translateY(0); }
.industry-card:nth-child(2) { transition-delay: 0.05s; }
.industry-card:nth-child(3) { transition-delay: 0.1s; }
.industry-card:nth-child(4) { transition-delay: 0.15s; }
.industry-card:nth-child(5) { transition-delay: 0.2s; }
.industry-card:nth-child(n+6) { transition-delay: 0.25s; }

@media (max-width: 900px) {
  .industry-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* min() keeps grid-column an integer (calc()-division risks a fractional
     span, which is invalid) — a card that spanned all 12 cols on desktop
     simply becomes full-width here instead of overflowing the row. */
  .industry-card { grid-column: span min(var(--span, 4), 6); }
}

@media (max-width: 640px) {
  .industry-grid { grid-template-columns: 1fr; }
  .industry-card { grid-column: auto; }
}