/* ══════════════════════════════════════════════════════════════
   Shared case-studies section — expanding triptych panels.
   ONE template for every page that shows case studies: markup is
   injected by js/case-studies-section.js from each page's
   window.CASE_STUDIES config. Edit layout/behavior here and every
   page picks it up. Lineage: sandbox 01·Triptych → index.html
   "06 — MADE REAL" → global component.

   Section bg is dark (#161719) by default; a page sets
   theme: 'gray' in its config for #202124 so the section follows
   that page's dark/gray rhythm.
   ══════════════════════════════════════════════════════════════ */

.cs-section {
  background: #161719;
  padding: clamp(72px, 9vw, 124px) 0;
}
.cs-section--gray { background: #202124; }

/* Section-headline scale, not CTA scale. This was clamp(40px, 6vw, 84px)
   — the size the *closing CTA* headlines use (clamp(42px, 6vw, 92px)) —
   which made the triptych head shout over every other section head on
   the page. Now on the shared service-page section standard used by
   .atc-*__h2, .aac-outcomes__h2 and .sac-cta__h2. */
.cs-section__h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1;
  text-transform: uppercase;
  color: #F4F4F4;
  margin: 0 0 clamp(28px, 4vw, 48px);
}
.cs-section__h2 em { color: #00BDFF; font-style: normal; }

/* ── Triptych: full-bleed expanding panels. The text block is
      locked to the width of a SHRUNK panel (via cqw) so copy never
      rewraps while panels expand/contract. ─────────────────────── */
.cs-cases {
  display: flex; gap: 10px;
  height: clamp(440px, 62vh, 580px);
  container-type: inline-size;
}
.cs-case {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(244,244,244,0.1);
  transition: flex-grow 0.6s cubic-bezier(0.22, 0.9, 0.32, 1), border-color 0.35s;
}
.cs-case:is(:hover, :focus-visible) {
  flex-grow: 1.6;
  border-color: rgba(0,189,255,0.4);
}
.cs-case:focus-visible { outline: 2px solid #00BDFF; outline-offset: 3px; }
.cs-case__bg {
  position: absolute; inset: 0;
  /* cases without a photo fall back to a plain dark panel */
  background-image: var(--img, linear-gradient(150deg, #26282d 0%, #1a1b1f 70%));
  background-size: cover; background-position: center;
  filter: grayscale(60%) brightness(0.68);
  transform: scale(1.05);
  transition: filter 0.5s, transform 0.9s cubic-bezier(0.22, 0.9, 0.32, 1);
}
.cs-case:is(:hover, :focus-visible) .cs-case__bg { filter: none; transform: scale(1); }
/* spotlight: when one panel is active, the others recede */
.cs-cases:has(.cs-case:is(:hover, :focus-visible))
  .cs-case:not(:is(:hover, :focus-visible)) .cs-case__bg {
  filter: grayscale(90%) brightness(0.45);
}
.cs-case::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(22,23,25,0.96) 10%, rgba(22,23,25,0.42) 46%, transparent 74%),
    linear-gradient(to bottom, rgba(22,23,25,0.65), transparent 26%);
}
.cs-case__idx {
  position: absolute;
  top: clamp(19px, 2.4vw, 29px); left: clamp(19px, 2.4vw, 29px);
  z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em;
  color: #F4F4F4;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(244,244,244,0.25);
  transition: color 0.3s, border-color 0.3s;
}
.cs-case:is(:hover, :focus-visible) .cs-case__idx { color: #00BDFF; border-color: #00BDFF; }
.cs-case__content {
  position: absolute; left: 0; bottom: 0;
  width: calc((100cqw - 26px) / 3.6);
  padding: clamp(19px, 2.4vw, 29px);
  z-index: 1;
}
/* tag sits below the title, last in the bottom-anchored content box —
   so it stays pinned to the card bottom while __more expands above it */
.cs-case__tag {
  display: block;
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #00BDFF;
}
.cs-case__h {
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(17px, 1.6vw, 23px); line-height: 1.14;
  color: #F4F4F4;
  margin: 0;
  text-wrap: balance;
}
.cs-case__more {
  max-height: 0; opacity: 0; overflow: hidden;
  transform: translateY(8px);
  transition: max-height 0.5s cubic-bezier(0.22, 0.9, 0.32, 1),
              opacity 0.4s 0.1s, transform 0.4s 0.1s;
}
.cs-case:is(:hover, :focus-visible) .cs-case__more { max-height: 340px; opacity: 1; transform: none; }
.cs-case__stat {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 14px;
}
.cs-case__num {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px); line-height: 1;
  color: #00BDFF;
}
.cs-case__slbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #F4F4F4;
}
.cs-case__desc {
  /* typography comes from .prose (styles.css) */
  margin: 11px 0 0;
  max-width: 42ch;
}
/* link anchors to the card's bottom-right, on the same padding line as
   the tag; hover-revealed like __more. Content column is narrow enough
   (≈28cqw vs ≥43cqw hovered panel) that the two never meet. */
.cs-case__link {
  position: absolute;
  right: clamp(19px, 2.4vw, 29px); bottom: clamp(19px, 2.4vw, 29px);
  z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #00BDFF;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s 0.1s, transform 0.4s 0.1s;
}
.cs-case:is(:hover, :focus-visible) .cs-case__link { opacity: 1; transform: none; }
.cs-case__link svg { width: 14px; height: 14px; flex-shrink: 0; }
.cs-section__cta { text-align: center; margin-top: clamp(32px, 4vw, 48px); }

@media (max-width: 720px) {
  .cs-cases { flex-direction: column; height: auto; }
  .cs-case {
    flex: 0 0 auto;                  /* size from content — flex-basis 0 collapses stacked panels */
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: 150px;              /* guaranteed image window above the text */
  }
  .cs-case__content { position: relative; left: auto; bottom: auto; width: 100%; }
  .cs-case__more { max-height: none; opacity: 1; transform: none; }
  .cs-case__link { opacity: 1; transform: none; }             /* no hover on touch */
  .cs-case__tag { max-width: calc(100% - 160px); }            /* clear of the link */
}
@media (prefers-reduced-motion: reduce) {
  .cs-case, .cs-case__bg, .cs-case__more, .cs-case__link { transition: none; }
}