/* ──────────────────────────────────────
   CASE STUDIES — shared CSS module
   Extracted from index.html so reference.html
   can use the same interactive grid + modals.
────────────────────────────────────── */

/* Container section */
#cases { padding: 100px var(--pad-x) 160px }
.cases-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 28px; border-bottom: 1px solid var(--border);
  margin-bottom: 52px;
}

/* Grid — reel lives inside (overflow:hidden clips it) */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1px;
  row-gap: 0;
  background: var(--border);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* Background photo reel spanning the full grid */
.cs-reel {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .65s ease;
}
.cs-reel.reel-visible { opacity: 1; }
.cs-reel-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;
}

/* Cards */
.cs-card {
  position: relative; z-index: 1;
  min-height: 230px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy);
  overflow: hidden; cursor: pointer;
  transition: background .45s ease;
}

/* Glass overlay — one div inside each card */
.cs-card-overlay {
  position: absolute; inset: 0;
  background: transparent;
  transition: background .45s ease;
  pointer-events: none;
  z-index: 0;
}

/* When reel/video active: ALL cards go transparent → video shines through everywhere */
.cs-grid.reel-on .cs-card { background: transparent; }

/* Non-focused cells: overlay dims the video — frosted tint */
.cs-grid.reel-on .cs-card:not(.reel-focus) .cs-card-overlay {
  background: rgba(4, 4, 12, 0.70);
}
.cs-logo-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 48px;
  z-index: 1;
  transition: opacity .4s ease;
}
.cs-logo {
  width: auto; height: 44px;
  max-width: 175px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .38; transition: opacity .4s ease, filter .4s ease;
}
.cs-name-fallback {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: -.02em;
  color: rgba(255,255,255,.38); text-align: center;
  transition: opacity .4s ease;
}

/* Hover: rozsvítí logo + brand barvy */
.cs-grid:not(.reel-on) .cs-card:hover .cs-logo { filter: none; opacity: 1; }
.cs-grid:not(.reel-on) .cs-card:hover .cs-name-fallback { opacity: 1; color: #fff; }

/* Non-focused: logo stays visible but very dim behind the overlay */
.cs-grid.reel-on .cs-card:not(.reel-focus) .cs-logo { opacity: .14; }
.cs-grid.reel-on .cs-card:not(.reel-focus) .cs-name-fallback { opacity: .15; }


/* Focused: logo is bright and prominent — filter:none odkryje brand barvy */
.cs-grid.reel-on .cs-card.reel-focus .cs-logo { opacity: 1; filter: none; }
.cs-grid.reel-on .cs-card.reel-focus .cs-name-fallback { opacity: 1; color: #fff; }
/* Focused card vignette */
.cs-grid.reel-on .cs-card.reel-focus .cs-card-overlay {
  background:
    linear-gradient(to top,    rgba(4,4,12,.72) 0%, transparent 52%),
    linear-gradient(to bottom, rgba(4,4,12,.46) 0%, transparent 44%);
}

/* TOP strip — category tag, slides from above */
.cs-hover-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  padding: 14px 0 18px;
  overflow: hidden;
  transform: translateY(-100%);
  transition: transform .52s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.10) 0%, transparent 100%);
}
@keyframes cs-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cs-ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: cs-ticker 18s linear infinite;
  gap: 0;
}
.cs-ticker-item {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--purple-lg);
  padding: 0 18px;
}
.cs-ticker-sep {
  color: rgba(91,94,255,.40);
  font-size: 9px; font-weight: 400;
  flex-shrink: 0;
}

/* BOTTOM strip — name + sub, slides from below */
.cs-hover-bot {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 20px 22px 24px;
  text-align: center;
  transform: translateY(100%);
  transition: transform .52s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  background: linear-gradient(to top, rgba(4,4,12,.72) 0%, transparent 100%);
}
.cs-hover-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(15px,1.4vw,20px); font-weight: 700;
  letter-spacing: -.02em; color: #fff;
  line-height: 1.15; margin-bottom: 6px;
}
.cs-hover-sub {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.52);
}

.cs-grid.reel-on .cs-card.reel-focus .cs-hover-top { transform: translateY(0); }
.cs-grid.reel-on .cs-card.reel-focus .cs-hover-bot  { transform: translateY(0); }

.cs-grid.reel-on {
  gap: 0;
  border-color: transparent;
  background: transparent;
}

/* YouTube hover overlay — full-grid background layer */
#cs-yt {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease-out;
  overflow: hidden;
  background: #000;
}
#cs-yt.yt-visible { opacity: 1; }
#cs-yt::before {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  background: #000;
  opacity: 1;
  transition: opacity .65s .1s ease-out;
  pointer-events: none;
}
#cs-yt.yt-visible::before { opacity: 0; }
#cs-yt-block {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
}
#cs-yt iframe, #cs-yt video {
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.cs-card-featured {
  grid-column: 1 / -1;
  min-height: 160px;
}
.cs-card-featured .cs-logo { height: 60px; max-width: 250px; }

/* Detail view YouTube facade */
#cs-det-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
  z-index: 1;
}
#cs-det-play {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 3;
  cursor: pointer;
  background: transparent;
}
#cs-det-play > svg {
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  padding: 18px;
  width: 76px; height: 76px;
  box-sizing: border-box;
  backdrop-filter: blur(6px);
  transition: background .2s, transform .2s;
}
#cs-det-play:hover > svg {
  background: rgba(255,255,255,.28);
  transform: scale(1.08);
}
#cs-det-thumb.facade-on,
#cs-det-play.facade-on  { display: flex; }
#cs-det-thumb.facade-on  { display: block; }

#cs-detail-frame {
  position: absolute;
  top: -11%; left: -11%;
  width: 122%; height: 122%;
  border: 0;
  display: none;
  pointer-events: none;
}
#cs-det-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}

/* Corner brackets */
.cs-card::before, .cs-card::after {
  content: ''; position: absolute; z-index: 2;
  width: 12px; height: 12px;
  border-style: solid; border-color: transparent;
  transition: border-color .35s, width .35s, height .35s;
}
.cs-card::before { top: -1px; left: -1px; border-width: 1px 0 0 1px }
.cs-card::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0 }
.cs-grid.reel-on .cs-card.reel-focus::before,
.cs-grid.reel-on .cs-card.reel-focus::after {
  border-color: rgba(255,255,255,.75); width: 20px; height: 20px;
}

/* Backdrop */
#cs-detail-backdrop {
  position: fixed; inset: 0; z-index: 940;
  background: rgba(4,4,10,.42);
  backdrop-filter: blur(20px) saturate(.75);
  -webkit-backdrop-filter: blur(20px) saturate(.75);
  opacity: 0; pointer-events: none;
  transition: opacity .48s ease;
}
#cs-detail-backdrop.cs-open { opacity: 1; pointer-events: auto; }

/* Floating panel — Tetris shape */
#cs-detail {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) translateY(28px);
  z-index: 950;
  width: min(92vw, 1240px);
  display: flex;
  align-items: flex-start;
  opacity: 0; pointer-events: none;
  transition: opacity .42s ease, transform .52s cubic-bezier(.16,1,.3,1);
  overflow: visible;
}
#cs-detail.cs-open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%,-50%) translateY(0);
}
#cs-detail.cs-open #cs-glow-svg {
  animation: cs-breathe 3.2s ease-in-out infinite;
  animation-fill-mode: both;
}
@keyframes cs-breathe {
  0%,100% { opacity: 0.55; }
  50%      { opacity: 1.0; }
}

/* Left media panel */
#cs-detail-media {
  flex: 0 0 50%;
  aspect-ratio: 16 / 9;
  position: relative; overflow: hidden; background: #000;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 3px 0 0 3px;
}
.cs-d-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
}
#cs-det-ytblock {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
}
#cs-det-loading {
  position: absolute; inset: 0; z-index: 4;
  background: #000;
  opacity: 0;
  transition: opacity .65s ease;
  pointer-events: none;
}
#cs-det-loading.ld-on { opacity: 1; }

/* Inline gallery viewer */
#cs-det-iv {
  position: absolute; inset: 0; z-index: 6;
  background: rgba(4,4,12,.96);
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .28s ease;
  cursor: pointer;
}
#cs-det-iv.iv-on  { display: flex; }
#cs-det-iv.iv-vis { opacity: 1; }
#cs-det-iv-img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  cursor: default; user-select: none; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#cs-det-iv-img.iv-sw { opacity: 0; transform: scale(.97); }
.cs-det-iv-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s; z-index: 2;
}
.cs-det-iv-arr:hover { background: rgba(255,255,255,.20); }
.cs-det-iv-arr.iv-hide { opacity: 0; pointer-events: none; }
#cs-det-iv-prev { left: 14px; }
#cs-det-iv-next { right: 14px; }
#cs-det-iv-back {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 11px;
  font-weight: 500; letter-spacing: .06em;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 6px 12px; cursor: pointer;
  transition: background .18s, color .18s;
}
#cs-det-iv-back:hover { background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
#cs-det-iv-cntr {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .1em; color: rgba(255,255,255,.30);
}

#cs-detail-close {
  position: absolute; top: 18px; left: 18px; z-index: 7;
  width: 30px; height: 30px; border-radius: 1px;
  background: var(--purple);
  border: none;
  color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .18s;
}
#cs-detail-close:hover { background: var(--purple-dk); }

/* Sound toggle */
#cs-det-sound {
  position: absolute; bottom: 22px; right: 22px; z-index: 7;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(10,10,22,.55);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .18s, border-color .18s;
  padding: 0;
}
#cs-det-sound.snd-on { display: flex; }
#cs-det-sound:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.36); }
#cs-det-sound svg { display: block; flex-shrink: 0; }

#cs-det-gradient {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top,    rgba(4,4,12,.82) 0%, transparent 52%),
    linear-gradient(to bottom, rgba(4,4,12,.52) 0%, transparent 44%),
    radial-gradient(ellipse at center, transparent 28%, rgba(4,4,12,.38) 100%);
}
#cs-detail-badge {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  text-align: center;
  padding: 28px 48px;
  pointer-events: none;
  gap: 10px;
}
#cs-detail-badge-img {
  max-width: 160px; max-height: 64px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .92;
}
#cs-detail-badge-txt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(20px,2.4vw,34px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1;
  color: #fff;
}

/* Right info panel — scrollable, taller than video */
#cs-detail-info {
  flex: 1;
  min-width: 0;
  background: var(--navy);
  border: 1px solid rgba(255,255,255,.10);
  border-left: none;
  border-radius: 0 3px 3px 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 32px 36px 48px;
  display: flex; flex-direction: column; justify-content: flex-start;
  max-height: min(82vh, 620px);
  scrollbar-width: thin;
  scrollbar-color: rgba(91,94,255,.45) var(--navy);
}
#cs-detail-info::-webkit-scrollbar { width: 4px; }
#cs-detail-info::-webkit-scrollbar-track { background: var(--navy); }
#cs-detail-info::-webkit-scrollbar-thumb {
  background: rgba(91,94,255,.45);
  border-radius: 2px;
}
#cs-detail-info::-webkit-scrollbar-thumb:hover {
  background: var(--purple);
}

.cs-d-gallery-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
  margin-bottom: 10px;
}
#cs-detail-gallery {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin-bottom: 32px;
}
.cs-d-thumb {
  aspect-ratio: 16/9;
  width: 100%; object-fit: cover;
  border-radius: 2px;
  opacity: .76;
  transition: opacity .25s, transform .25s;
  cursor: zoom-in;
}
.cs-d-thumb:hover { opacity: 1; transform: scale(1.02); }

/* Gallery lightbox */
#cs-lightbox {
  position: fixed; inset: 0; z-index: 960;
  background: rgba(4,4,12,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .28s ease;
}
#cs-lightbox.lb-open { display: flex; }
#cs-lightbox.lb-visible { opacity: 1; }
#cs-lb-img {
  max-width: 90vw; max-height: 88vh;
  object-fit: contain;
  border-radius: 3px;
  transition: opacity .22s ease, transform .22s ease;
  user-select: none;
}
#cs-lb-img.lb-switching { opacity: 0; transform: scale(.96); }
#cs-lb-close {
  position: absolute; top: 24px; right: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
#cs-lb-close:hover { background: rgba(255,255,255,.22); }
.cs-lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .18s, opacity .18s;
}
.cs-lb-arrow:hover { background: rgba(255,255,255,.20); }
.cs-lb-arrow.lb-hidden { opacity: 0; pointer-events: none; }
#cs-lb-prev { left: 24px; }
#cs-lb-next { right: 24px; }
#cs-lb-counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .1em; color: rgba(255,255,255,.4);
}

#cs-detail-tag {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--purple-lg); margin-bottom: 14px;
}
#cs-detail-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(24px,2.6vw,40px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.0;
  color: var(--ghost); margin-bottom: 8px;
}
#cs-detail-industry {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 400;
  color: rgba(255,255,255,.42);
  letter-spacing: .01em;
  margin-bottom: 28px;
}
.cs-d-svc {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.80);
}
.cs-d-svc:first-child { border-top: 1px solid rgba(255,255,255,.07); }
.cs-d-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--purple-lg); flex-shrink: 0; }
#cs-detail-desc {
  margin-top: 28px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.88; color: rgba(255,255,255,.36);
}

/* Rich case-study story layout */
#cs-detail-info.story-mode #cs-detail-tag { display: none !important; }
#cs-detail-info.story-mode #cs-detail-industry {
  font-style: italic; font-size: 14px; font-weight: 500;
  color: var(--purple-lg); letter-spacing: .01em; margin-bottom: 10px;
}
#cs-detail-website {
  display: none;
  margin-bottom: 22px;
}
#cs-detail-info.story-mode #cs-detail-website {
  display: block;
}
#cs-detail-website a {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
  text-decoration: none;
  transition: color .18s;
}
#cs-detail-website a:hover { color: rgba(255,255,255,.65); }
.cs-story-rule {
  border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 22px 0;
}
.cs-story-about-label {
  font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--purple-lg); margin-bottom: 10px;
}
.cs-story-about {
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.75;
  color: rgba(255,255,255,.48);
}
.cs-story-section { margin-bottom: 0; }
.cs-story-section-head {
  display: grid; grid-template-columns: 20px 1fr 28px;
  gap: 10px; align-items: center;
  cursor: pointer; padding: 6px 0;
  user-select: none;
  transition: opacity .15s;
}
.cs-story-section-head:hover { opacity: .85; }
.cs-story-letter {
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; color: var(--purple-lg); padding-top: 1px;
}
.cs-story-stitle {
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.82); letter-spacing: -.02em; line-height: 1.25;
  transition: color .2s;
}
.cs-story-section-head:hover .cs-story-stitle,
.cs-story-section.open .cs-story-stitle { color: rgba(255,255,255,.98); }
.cs-story-toggle {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 300; line-height: 1;
  color: rgba(255,255,255,.45);
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .2s, color .2s;
  flex-shrink: 0;
}
.cs-story-section.open .cs-story-toggle {
  transform: rotate(45deg);
  border-color: var(--purple-lg);
  color: var(--purple-lg);
}
.cs-story-body-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.16,1,.3,1);
}
.cs-story-section.open .cs-story-body-wrap { grid-template-rows: 1fr; }
.cs-story-body-inner {
  overflow: hidden;
  padding-bottom: 0;
  transition: padding-bottom .38s cubic-bezier(.16,1,.3,1);
}
.cs-story-section.open .cs-story-body-inner { padding-bottom: 10px; }
.cs-story-body {
  font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.78;
  color: rgba(255,255,255,.44); padding-left: 30px; padding-top: 10px;
}
.cs-story-items { padding-left: 30px; margin-top: 10px; }
.cs-story-item {
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.cs-story-item:last-child { border-bottom: none; }
.cs-story-item-name {
  font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.82); margin-bottom: 4px;
}
.cs-story-item-text {
  font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.7;
  color: rgba(255,255,255,.40);
}
.cs-story-gallery-label {
  font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--purple-lg); margin-bottom: 10px; margin-top: 4px;
}
.cs-story-gallery {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 4px;
}
.cs-story-gall-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 2px; cursor: pointer;
  opacity: .75; transition: opacity .2s ease;
}
.cs-story-gall-img:hover { opacity: 1; }

/* Responsive */
@media (max-width: 900px) {
  .cs-grid { grid-template-columns: repeat(2,1fr); }
  #cs-detail {
    flex-direction: column;
    width: min(94vw, 540px);
    align-items: stretch;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
  }
  #cs-detail.cs-open {
    animation: cs-breathe-mob 3.2s ease-in-out infinite;
    animation-fill-mode: both;
  }
  @keyframes cs-breathe-mob {
    0%,100% { box-shadow: 0 0 22px  6px rgba(75,77,234,.25), 0 0 55px 18px rgba(91,94,255,.12); }
    50%      { box-shadow: 0 0 38px 14px rgba(75,77,234,.55), 0 0 85px 34px rgba(91,94,255,.25); }
  }
  #cs-detail-media {
    flex: 0 0 auto;
    width: 100%;
    border: none;
    border-radius: 0;
  }
  #cs-detail-info {
    max-height: 52vh;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 0;
    padding: 24px 22px 36px;
  }
}
@media (max-width: 640px) {
  /* Complete grid mesh via per-card right+bottom borders (NO nth-child — the
     absolutely-positioned .cs-reel first child would offset any count). Grid drops
     its own right+bottom border so outer edges aren't doubled. .13 = decent on hi-DPR. */
  .cs-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0; row-gap: 0;
    border-right-width: 0; border-bottom-width: 0;
    border-color: rgba(255,255,255,.13);
  }
  .cs-card { border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
  .cs-card  { min-height: 110px; }
  .cs-logo-wrap { padding: 14px 10px; }
  .cs-logo  { height: 34px; max-width: 130px; }
  .cs-name-fallback { font-size: 10px; }
  .cs-hover-top { padding: 7px 0 8px; }
  .cs-hover-bot { padding: 8px 10px 10px; }
  .cs-hover-name { font-size: 11px; margin-bottom: 2px; }
  .cs-hover-sub  { font-size: 8px; }
  #cs-detail { width: 96vw; }
  #cs-detail-info { padding: 22px 18px 36px; }
}