/* Beat 14 #cases, "Case studies" (spec r3 7.5): the camera cranes to the
   roofs and one billboard lights per step; its card flies in from that
   billboard (sh-show.js) and stays, so the four cards build up. A giant
   outlined marquee drifts behind them with scroll. Phone portrait: a snap
   row with a counter. */
.sh-beat--cases { --b-step-h: 36svh; }
.sh-beat--cases .b-frame { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; grid-template-areas: "head tag" "steps steps" "foot count"; column-gap: 32px; }
.sh-beat--cases .b-head { grid-area: head; }
.sh-beat--cases .b-tag { grid-area: tag; align-self: start; margin-top: 64px; }
.sh-beat--cases .b-steps { grid-area: steps; }
.sh-beat--cases .b-count { grid-area: count; align-self: end; }
.sh-beat--cases .b-foot { grid-area: foot; max-width: min(64%, 900px); }

.b-marquee { position: absolute; left: 0; right: 0; top: 50%; z-index: -1; margin: 0; overflow: hidden; transform: translateY(-58%); pointer-events: none; }
.b-marquee > span { display: block; width: max-content; padding-left: 4vw; color: transparent; -webkit-text-stroke: 1px rgb(243 242 238 / 9%); font: 700 clamp(96px, 15vw, 260px)/1 var(--sh-font-sans); letter-spacing: -.04em; white-space: nowrap; transform: translate3d(var(--b-drift, 0%), 0, 0); will-change: transform; }
html:not(.b-live) .b-marquee { display: none; }

.b-case { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 20px 18px; border: 1px solid var(--b-panel-line); border-radius: 16px; background: rgb(9 11 15 / 70%); box-shadow: 0 30px 70px -40px rgb(0 0 0 / 90%); }
html[data-tier="full"] .b-case { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgb(9 11 15 / 55%); }
.b-case::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid transparent; pointer-events: none; transition: border-color .5s ease, box-shadow .5s ease; }
.b-case__kicker { color: var(--sh-gold-hi); font: 600 10.5px/1.3 var(--sh-font-mono); letter-spacing: .2em; }
.b-case__stat { margin-top: 16px; font: 400 clamp(44px, 4.2vw, 72px)/.95 var(--sh-font-num); letter-spacing: -.035em; color: var(--sh-fg); white-space: nowrap; }
.b-case__text { flex: 1; margin-top: 12px; color: var(--sh-fg-2); font-size: 14.5px; line-height: 1.5; }
.b-case .sh-src { font-size: 9.5px; }
.b-endcard { position: relative; max-width: 44em; padding-left: 18px; color: var(--sh-fg); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }
.b-endcard::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(var(--sh-gold-hi), transparent); }
html:not(.b-live) .sh-beat--cases .b-count { display: none; }

/* Flow: a responsive grid of cards. */
.b-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.b-cases > .b-step { margin: 0; }

/* Deck: the four slots stay laid out; each card appears on its step. */
html.b-live .sh-beat--cases .b-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-self: end; margin-bottom: 26px; }
html.b-live .sh-beat--cases .b-steps > .b-step { grid-area: auto; transform: none; }
html.b-live .sh-beat--cases .b-steps > .b-step.is-past { opacity: .74; pointer-events: auto; transform: none; }
html.b-live .sh-beat--cases .b-steps > .b-step.is-active { opacity: 1; transform: translateY(-10px); }
html.b-live .sh-beat--cases .b-step.is-active::before { border-color: rgb(229 198 92 / 60%); box-shadow: 0 0 0 1px rgb(229 198 92 / 18%), 0 0 44px -6px rgb(229 198 92 / 40%); }

@media (max-width: 1100px) {
  html.b-live .sh-beat--cases .b-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-case__text { font-size: 13.5px; }
}
@media (max-width: 767px) {
  .sh-beat--cases .b-frame { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag count" "head head" "steps steps" "foot foot"; row-gap: 12px; }
  .sh-beat--cases .b-count { align-self: center; }
  .sh-beat--cases .b-tag { justify-self: start; margin-top: 0; font-size: 9.5px; }
  .sh-beat--cases .b-foot { max-width: none; }
  .b-case__stat { font-size: 52px; }
  .b-endcard { font-size: 14.5px; }
}
@media (max-width: 767px) and (orientation: portrait) {
  html.b-live .sh-beat--cases[data-b-deck] { height: auto; }
  html.b-live .sh-beat--cases[data-b-deck] > .b-frame { position: relative; height: auto; min-height: 100svh; overflow: visible; }
  html.b-live .sh-beat--cases .b-steps { display: flex; gap: 10px; margin: 0 calc(var(--sh-gutter) * -1); padding: 12px var(--sh-gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  html.b-live .sh-beat--cases .b-steps::-webkit-scrollbar { display: none; }
  html.b-live .sh-beat--cases .b-steps > .b-step, html.b-live .sh-beat--cases .b-steps > .b-step.is-past { flex: 0 0 82%; opacity: .55; pointer-events: auto; transform: scale(.96); scroll-snap-align: center; }
  html.b-live .sh-beat--cases .b-steps > .b-step.is-active { opacity: 1; transform: none; }
  html.b-live .sh-beat--cases [data-b-from] { opacity: 1; transform: none; }
  .b-marquee > span { font-size: 34vw; }
}
@media (max-height: 559px) and (orientation: landscape) {
  .b-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}