/* industries.css — #industriesBento (industries bento carousel).
   Every value ported from giga's own rules in reference/raw/css/2.css + 3.css and the
   measurements in reference/TOKENS.md §4 "Industries bento cell". Scoped entirely under
   #industriesBento. Nothing here redefines tokens.css / base.css.

   INVERTED DEFAULT (deliberate, see BUILDER-BRIEF "JS off must still show the content"):
   giga's SSR default is the hidden desktop overlay and compact is the override. Ours is the
   other way round — the resting state is the VISIBLE static band (identical to giga's compact
   band), and js/industries.js adds .is-overlay to opt into the hidden pinned overlay once it
   has actually mounted the section into #hero .sticky. No JS, no hero, no overlay: the band
   simply renders in flow under the hero. */

#industriesBento {
  /* giga: --home-gutter 20 / 44 @810 / 20 @1680 (raw/css/3.css). Uses the shared var when the
     page defines it, otherwise falls back to the same measured ladder. */
  --ib-gutter: var(--home-gutter, 20px);
  --ib-z: var(--fit-z, 1);
  /* giga --text-console-h (raw/css/2.css) — 28px @1440, 26 @1300, 20.48 @1024 */
  --ib-title-size: clamp(1.25rem, 2vw, 1.75rem);
  /* per-cell inks, re-pointed by the sibling-dim rule */
  --ib-plate: var(--cell);
  --ib-ink: #fff;
  --ib-ink-2: rgba(255, 255, 255, .55);
  --ib-t: .1s;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  position: relative;
  padding: 40px 0 56px;
  /* header.html anchors 16 nav links here. On compact the band is in normal flow, so the browser
     aligns its top with the viewport top and the fixed chrome covers the eyebrow — keep it clear. */
  scroll-margin-top: calc(var(--chrome-offset, 86px) + 16px);
}
@media (min-width: 810px) {
  #industriesBento { --ib-gutter: var(--home-gutter, 44px); }
}
@media (min-width: 1680px) {
  #industriesBento { --ib-gutter: var(--home-gutter, 20px); }
}

/* ── pinned overlay (desktop, mounted into #hero .sticky by industries.js) ───────────── */
#industriesBento.is-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 0 0 100px;
  opacity: 0;                      /* driven per frame by setProgress() */
  transform: translateY(36px);     /* giga's SSR resting offset, before the first write */
  pointer-events: none;
  will-change: opacity, transform;
}
#industriesBento.is-overlay.is-live { pointer-events: auto; }
/* giga: html[data-hero-layout=desktop] #industriesBento .ib-head{transform:translateZ(0)} —
   promotes the head so bare text over the #heroFoldFade backdrop bands keeps its tiles. */
#industriesBento.is-overlay .ib-head { transform: translateZ(0); }

#industriesBento .ib-inner { display: flex; flex-direction: column; gap: 20px; width: 100%; }

/* ── head ───────────────────────────────────────────────────────────────────────────── */
#industriesBento .ib-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 0 var(--ib-gutter);
}
#industriesBento .ib-head-copy { min-width: 0; }

#industriesBento .ib-eye {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: calc(var(--text-eyebrow) / var(--ib-z));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .1px;
  text-transform: uppercase;
  color: var(--accent);
}
#industriesBento .ib-eye::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
  --pulse-color: var(--pulse-accent);
  animation: 2s ease-out infinite pulse-dot-colored;
}

#industriesBento .ib-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 4.5vw, 2rem);   /* compact/static band — giga's compact override */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: var(--tracking-headline);
  color: #fff;
}
#industriesBento.is-overlay .ib-title { font-size: calc(var(--ib-title-size) / var(--ib-z)); }

#industriesBento .ib-sub {
  max-width: 36em;
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-size: calc(.9375rem / var(--ib-z));
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, .55);
}

/* ── arrows ─────────────────────────────────────────────────────────────────────────── */
#industriesBento .ib-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: calc(1.125rem + 8px);   /* aligns the pair with the title row */
}
#industriesBento .ib-arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: background .15s, color .15s, opacity .15s;
}
#industriesBento .ib-arrow:hover { background: rgba(255, 255, 255, .102); color: #fff; }
#industriesBento .ib-arrow:disabled,
#industriesBento .ib-arrow.is-disabled { opacity: .28; cursor: default; pointer-events: none; }
#industriesBento .ib-arrow svg { display: block; }

/* ── carousel ───────────────────────────────────────────────────────────────────────── */
#industriesBento .ib-carousel {
  --ib-fade-l: 0px;
  --ib-fade-r: 0px;
  overflow: auto hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ib-gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ib-fade-l), #000 calc(100% - var(--ib-fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--ib-fade-l), #000 calc(100% - var(--ib-fade-r)), transparent 100%);
}
#industriesBento .ib-carousel.can-scroll-l { --ib-fade-l: 56px; }
#industriesBento .ib-carousel.can-scroll-r { --ib-fade-r: 56px; }
#industriesBento .ib-carousel::-webkit-scrollbar { display: none; }

#industriesBento .ib-track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 4px var(--ib-gutter) 8px;
}

/* ── cell ───────────────────────────────────────────────────────────────────────────── */
#industriesBento .ib-cell {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  overflow: hidden;
  width: min(260px, 78vw);        /* compact/static band */
  height: 180px;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--ib-plate);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .08);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color var(--ib-t) linear;
}
#industriesBento.is-overlay .ib-cell { width: min(280px, 72vw); height: 200px; }

/* hover/focus: the NON-hovered siblings dim (giga's mechanism — the hovered cell keeps its
   resting plate + inks, so it reads as lifting out of a darkened row). */
#industriesBento .ib-track:has(.ib-cell:hover, .ib-cell:focus-visible) .ib-cell:not(:hover, :focus-visible) {
  --ib-plate: #17181b;
  --ib-ink: rgba(255, 255, 255, .55);
  --ib-ink-2: rgba(255, 255, 255, .3);
}

#industriesBento .ib-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: calc(1.125rem / var(--ib-z));
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ib-ink);
  transition: color var(--ib-t) linear;
}
#industriesBento .ib-caret {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, .8);
}
#industriesBento .ib-caret svg {
  display: block;
  transform: translateX(-100%);
  transition: transform calc(var(--ib-t) * 1.5) linear;
}
#industriesBento .ib-cell:hover .ib-caret svg,
#industriesBento .ib-cell:focus-visible .ib-caret svg { transform: translateX(0); }

#industriesBento .ib-copy {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: calc(.875rem / var(--ib-z));
  font-weight: 400;
  line-height: 1.45;
  color: var(--ib-ink-2);
  transition: color var(--ib-t) linear;
}

/* ── reduced motion (JS-RECON §7.6 + giga's own two @media blocks in raw/css/2.css) ──── */
@media (prefers-reduced-motion: reduce) {
  #industriesBento .ib-eye::before { animation: none; }
  #industriesBento .ib-cell,
  #industriesBento .ib-label,
  #industriesBento .ib-copy,
  #industriesBento .ib-caret svg { transition: none; }
}

/* ── failsafe — core.js hangs html.is-failsafe on at 20s unconditionally, so this only
      un-hides a section whose module never booted (industries.js sets .is-bound on load). */
html.is-failsafe #industriesBento:not(.is-bound) {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}