/* ════════════════════════════════════════════════════════════
   CUSTOM SHOWCASE  ·  cyron-showcase.css
   Editorial case-study layout built from the supplied wireframe.
   Theme-aware (dark / light / immersive) via the site's own tokens.
════════════════════════════════════════════════════════════ */

.cs-head{padding:clamp(28px,5vw,64px) var(--mv-pad) clamp(18px,2.4vw,30px);}
.cs-intro{margin-top:16px;max-width:62ch;color:var(--mv-cream-2);
  font-family:var(--mv-grotesk);font-size:clamp(14px,1.2vw,17px);line-height:1.65;}

.cs-sheet{padding:0 var(--mv-pad) clamp(50px,8vw,110px);}

/* ── block = one wireframe band, separated by a rule ── */
.cs-block{padding:clamp(34px,4.4vw,64px) 0;border-top:1px solid var(--mv-line-2);}
.cs-block:first-child{border-top:0;padding-top:clamp(10px,1.6vw,22px);}
.cs-title{
  font-family:var(--mv-display);font-weight:700;
  font-size:clamp(26px,3.4vw,44px);line-height:1.02;letter-spacing:-.03em;
  color:var(--mv-cream);margin:0 0 clamp(20px,2.6vw,34px);max-width:14ch;
}

/* ── a row: copy column on the left, media grid on the right ── */
.cs-row{display:grid;grid-template-columns:minmax(210px,266px) 1fr;
  gap:clamp(18px,2.4vw,38px);align-items:start;margin-bottom:clamp(16px,2vw,26px);}
.cs-row:last-child{margin-bottom:0;}
.cs-row-copy{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;}
.cs-row-copy-stack{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,34px);}
.cs-row-copy-stack .cs-row-copy{margin:0;}
.cs-num{font-family:var(--mv-display);font-weight:700;font-size:17px;line-height:1.25;
  color:var(--mv-cream);opacity:.9;min-width:22px;}
.cs-item-title{font-family:var(--mv-grotesk);font-weight:600;font-size:13.5px;line-height:1.4;
  color:var(--mv-cream);margin:0 0 8px;letter-spacing:.005em;}
.cs-bullets{margin:0;padding-left:16px;list-style:disc;}
.cs-bullets li{font-family:var(--mv-grotesk);font-size:12px;line-height:1.75;color:var(--mv-cream-2);}

/* ── media grids ── */
.cs-row-media{display:grid;gap:clamp(8px,1vw,14px);}
.cs-media-4{grid-template-columns:1.62fr .78fr .78fr .78fr;}
.cs-media-2{grid-template-columns:1fr 1fr;}

/* ── a media cell (image or wireframe placeholder) ── */
.cs-cell{position:relative;margin:0;overflow:hidden;border-radius:4px;
  border:1px solid var(--mv-line-2);background:rgba(255,255,255,.045);
  display:grid;place-items:center;aspect-ratio:1/1;
  transition:border-color .25s,transform .25s,box-shadow .25s;}
.cs-cell.is-wide{aspect-ratio:4/3;}
.cs-cell.is-tall{aspect-ratio:3/4.2;}
.cs-cell.is-perf{aspect-ratio:4/3;}
.cs-cell > span{font-family:var(--mv-grotesk);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mv-cream-2);text-align:center;padding:0 10px;line-height:1.5;}
.cs-cell img,.cs-cell video{width:100%;height:100%;object-fit:cover;display:block;}
.cs-cell.has-img{cursor:pointer;background:none;}
.cs-cell.has-img:hover{border-color:var(--mv-red);transform:translateY(-3px);
  box-shadow:0 18px 40px -26px #000;}

/* ── video players + thumbnail strip ── */
.cs-player{display:flex;flex-direction:column;gap:clamp(7px,.9vw,11px);}
.cs-player video{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  border:1px solid var(--mv-line-2);border-radius:4px;background:#000;}
.cs-video-ph{aspect-ratio:16/10;border:1px solid var(--mv-line-2);border-radius:4px;
  background:rgba(255,255,255,.045);display:grid;place-items:center;gap:10px;
  color:var(--mv-cream-2);position:relative;}
.cs-video-ph span{font-family:var(--mv-grotesk);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;}
.cs-video-ph svg{opacity:.55;}
.cs-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(5px,.6vw,9px);}
.cs-thumb{display:block;aspect-ratio:1/1;border:1px solid var(--mv-line-2);border-radius:3px;
  background:rgba(255,255,255,.045);overflow:hidden;}
.cs-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-thumb.has-img{cursor:pointer;}

/* ── landing-page browser mockups ── */
.cs-lp-copy + .cs-lp-copy{margin-top:clamp(16px,2vw,26px);}
.cs-lp-label{font-family:var(--mv-grotesk);font-weight:600;font-size:13px;color:var(--mv-cream);margin:0 0 8px;}
.cs-browser-wrap{display:flex;flex-direction:column;gap:8px;}
.cs-browser-label{font-family:var(--mv-grotesk);font-size:12px;color:var(--mv-cream-2);}
.cs-browser{border:1px solid var(--mv-line-2);border-radius:5px;overflow:hidden;background:rgba(255,255,255,.045);}
.cs-browser-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--mv-line-2);}
.cs-browser-bar i{width:8px;height:8px;border-radius:50%;border:1px solid var(--mv-line-2);display:block;}
.cs-browser-body{aspect-ratio:4/3.1;display:grid;place-items:center;}
.cs-browser-body span{font-family:var(--mv-grotesk);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mv-cream-2);text-align:center;line-height:1.7;}
.cs-browser-body img,.cs-browser-body video{width:100%;height:100%;object-fit:cover;display:block;}
.cs-browser.has-img{cursor:pointer;}
.cs-browser.has-img:hover{border-color:var(--mv-red);}

/* ── performance band ── */
.cs-perf-row{display:grid;grid-template-columns:1fr auto 1fr 1.05fr;
  gap:clamp(10px,1.4vw,20px);align-items:center;}
.cs-arrow{font-size:clamp(20px,2.4vw,30px);color:var(--mv-cream);text-align:center;}
.cs-metric{border:1px solid var(--mv-line-2);border-radius:4px;background:rgba(255,255,255,.045);
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px;}
.cs-metric-label{font-family:var(--mv-grotesk);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mv-cream-2);margin-bottom:6px;text-align:center;}
.cs-metric-name{font-family:var(--mv-display);font-weight:700;font-size:clamp(20px,2.4vw,32px);color:var(--mv-cream);line-height:1;}
.cs-metric-value{font-family:var(--mv-display);font-weight:800;font-size:clamp(26px,3.6vw,46px);
  color:var(--mv-red-2);line-height:1.05;letter-spacing:-.02em;}
.cs-caption{margin:clamp(14px,1.8vw,22px) 0 0;text-align:center;
  font-family:var(--mv-grotesk);font-size:12.5px;color:var(--mv-cream-2);}

/* ── light theme: the wireframe reads as ink-on-paper ── */
html[data-theme="light"] .cs-cell,
html[data-theme="light"] .cs-thumb,
html[data-theme="light"] .cs-video-ph,
html[data-theme="light"] .cs-browser,
html[data-theme="light"] .cs-metric{background:#EEEFF3;border-color:var(--line);}
html[data-theme="light"] .cs-title,
html[data-theme="light"] .cs-item-title,
html[data-theme="light"] .cs-lp-label,
html[data-theme="light"] .cs-num,
html[data-theme="light"] .cs-metric-name{color:var(--ink);}

/* ── responsive ── */
@media(max-width:1000px){
  .cs-row{grid-template-columns:1fr;gap:16px;}
  .cs-title{max-width:none;}
}
@media(max-width:700px){
  .cs-media-4{grid-template-columns:1fr 1fr;}
  .cs-cell.is-wide{grid-column:1 / -1;aspect-ratio:16/10;}
  .cs-media-2{grid-template-columns:1fr;}
  .cs-perf-row{grid-template-columns:1fr;}
  .cs-arrow{transform:rotate(90deg);}
  .cs-strip{grid-template-columns:repeat(6,1fr);}
}

/* ── landing pages that are a live URL or an uploaded .html ── */
.cs-browser-bar{position:relative;}
.cs-browser-url{flex:1 1 auto;margin-left:8px;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--mv-line-2);
  font-family:var(--mv-grotesk);font-size:9.5px;letter-spacing:.02em;color:var(--mv-cream-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.cs-browser-body iframe{width:100%;height:100%;border:0;display:block;background:#fff;}
/* a live embed is a preview, not a control surface - clicks go to Open live page */
.cs-browser.is-live .cs-browser-body{position:relative;}
.cs-browser.is-live .cs-browser-body::after{content:"";position:absolute;inset:0;}
.cs-browser.is-live:hover{border-color:var(--mv-red);}
.cs-browser-open{display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font-family:var(--mv-grotesk);font-size:11.5px;color:var(--mv-cream-2);
  text-decoration:none;border-bottom:1px solid transparent;align-self:flex-start;
  transition:color .2s,border-color .2s;}
.cs-browser-open:hover{color:var(--mv-cream);border-bottom-color:var(--mv-red);}
html[data-theme="light"] .cs-browser-url{background:#E4E6EC;border-color:var(--line);}