/* ============================================================
   media-blocks.css — case-study media layouts
   ============================================================ */

/* Media blocks sit above the page's fixed ambient orb, which paints at z-index 0.
   Static-flow content would otherwise be covered by it. */
.mb-track,.mb-stack,.mb-doc,.mb-full,.mb-resp,.mb-ba,.mb-ba-empty,
.mb-metrics,.mb-metric,.mb-data{position:relative;z-index:1;}

/* ---- shared media cell ---- */
/* height:auto is required — <image-slot> ships a default 160px height that
   would otherwise beat the aspect-ratio on every cell. */
.mb-cell,.mb-page{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--stroke);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));display:block;
  width:auto;height:auto;}
.mb-cell img,.mb-page img,.mb-cell video{display:block;width:100%;height:100%;object-fit:cover;}
.mb-cap{position:absolute;left:12px;bottom:11px;z-index:2;font-family:var(--display);font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7);}
.mb-still::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,7,15,.42),transparent 46%);opacity:0;transition:opacity .35s var(--ease);}
.mb-still:has(.mb-cap)::after{opacity:1;}

/* ---- carousels: one horizontal track per block ---- */
.mb-track{gap:16px;margin-top:22px;}
.mb-square .mb-cell{flex:0 0 var(--w,clamp(180px,20vw,240px));aspect-ratio:var(--ar,1/1);scroll-snap-align:start;}
.mb-portrait .mb-cell{flex:0 0 var(--w,clamp(200px,23vw,280px));aspect-ratio:var(--ar,3/4);scroll-snap-align:start;}
.mb-deliver .mb-cell{flex:0 0 var(--w,clamp(280px,38vw,460px));aspect-ratio:var(--ar,16/10);scroll-snap-align:start;}
.mb-gallery .mb-cell{flex:0 0 var(--w,clamp(280px,38vw,440px));aspect-ratio:var(--ar,16/10);scroll-snap-align:start;}
.mb-reel .mb-cell{flex:0 0 var(--w,clamp(190px,22vw,260px));aspect-ratio:var(--ar,9/16);scroll-snap-align:start;}

.mb-iface .ui-cell{flex:0 0 var(--w,clamp(200px,23vw,280px));aspect-ratio:var(--ar,3/4);scroll-snap-align:start;}

/* ---- device frames (Development) ---- */
.mb-fr{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--stroke-2);
  background:rgba(8,13,26,.7);box-shadow:0 22px 56px rgba(0,8,24,.5);}
.mb-shot{display:block;width:auto;height:auto;border:none;border-radius:0;}
.mb-chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  background:rgba(16,23,42,.9);border-bottom:1px solid var(--stroke);}
.mb-chrome i{width:8px;height:8px;border-radius:50%;background:rgba(150,180,230,.28);flex:none;}
.mb-chrome i:first-child{background:rgba(255,120,110,.5);}
.mb-chrome i:nth-child(2){background:rgba(255,200,90,.5);}
.mb-chrome i:nth-child(3){background:rgba(110,220,150,.5);}
.mb-chrome em{flex:1;margin-left:10px;height:16px;border-radius:20px;background:rgba(255,255,255,.05);
  font-style:normal;font-size:10px;line-height:16px;text-align:center;color:var(--ink-dim);
  letter-spacing:.04em;overflow:hidden;white-space:nowrap;}

.mb-browser .mb-fr{flex:0 0 var(--w,clamp(300px,42vw,520px));scroll-snap-align:start;}
.mb-browser .mb-shot{aspect-ratio:var(--ar,16/10);}

/* responsive trio */
.mb-resp{display:flex;align-items:flex-end;gap:18px;margin-top:22px;}
.mb-r-desk{flex:1 1 auto;min-width:0;}
.mb-r-desk .mb-shot{aspect-ratio:16/10;}
.mb-fr-tablet{flex:0 0 clamp(120px,15vw,190px);border-radius:16px;padding:7px;
  background:rgba(14,20,38,.9);}
.mb-fr-tablet .mb-shot{aspect-ratio:3/4;border-radius:9px;}
.mb-fr-phone{position:relative;flex:0 0 clamp(84px,10vw,124px);border-radius:20px;padding:6px;
  background:rgba(14,20,38,.95);}
.mb-fr-phone .mb-shot{aspect-ratio:9/16;border-radius:15px;}
.mb-notch{position:absolute;left:50%;top:11px;transform:translateX(-50%);z-index:2;
  width:34%;height:5px;border-radius:5px;background:rgba(6,10,20,.9);}

/* unframed page carousel (still available) */
.mb-pages .ui-slide{flex:0 0 var(--w,clamp(280px,40vw,480px));aspect-ratio:var(--ar,16/10);scroll-snap-align:start;}

/* ---- data block: metrics + chart/table ---- */
.mb-data-demo{margin-top:16px;font-size:12.5px;color:var(--ink-dim);font-style:italic;}
.mb-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px;}
.mb-metric{padding:20px 18px;border-radius:16px;border:1px solid var(--stroke);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));}
.mb-m-val{display:block;font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,32px);
  line-height:1;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;}
.mb-m-lab{display:block;margin-top:9px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-dim);}

.mb-data{margin-top:18px;padding:22px 22px 18px;border-radius:20px;border:1px solid var(--stroke);
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.012));}
.mb-data-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.mb-data-title{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);}
.mb-data-toggle{display:inline-flex;gap:2px;padding:3px;border-radius:30px;border:1px solid var(--stroke);}
.mb-data-toggle button{border:none;background:none;cursor:pointer;padding:7px 16px;border-radius:30px;
  font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--ink-soft);transition:color .2s,background .2s;}
.mb-data-toggle button.on{color:#fff;background:var(--grad);}

.mb-chart{margin-top:20px;}
.mb-chart svg{display:block;width:100%;height:200px;overflow:visible;}
.mb-grid{stroke:rgba(150,180,230,.12);stroke-width:1;}
.mb-bar{fill:url(#mbg);}
.mb-line{fill:none;stroke:url(#mbg);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;}
.mb-area{fill:url(#mbg);opacity:.14;}
.mb-dot{fill:#eaf2ff;}
.mb-xaxis{display:flex;margin-top:10px;}
.mb-xaxis span{flex:1 1 0;text-align:center;font-size:11px;color:var(--ink-dim);letter-spacing:.04em;}

.mb-tablewrap{margin-top:18px;overflow-x:auto;}
.mb-table{width:100%;border-collapse:collapse;font-size:14px;}
.mb-table th{text-align:left;padding:11px 14px;font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);border-bottom:1px solid var(--stroke);}
.mb-table td{padding:12px 14px;color:var(--ink-soft);border-bottom:1px solid var(--stroke);}
.mb-table tr:last-child td{border-bottom:none;}
.mb-table td:last-child{color:var(--ink);font-family:var(--display);font-weight:600;}

/* ---- stacked wide ---- */
.mb-stack{display:flex;flex-direction:column;gap:18px;margin-top:22px;}
.mb-cinema .mb-cell{aspect-ratio:var(--ar,16/9);border-radius:18px;}

/* ---- vertical reels ---- */
.mb-reel{gap:16px;}

/* ---- document viewer ---- */
.mb-doc{margin-top:22px;}
.mb-doc-track{gap:18px;}
.mb-doc .mb-page{flex:0 0 var(--w,clamp(260px,32vw,380px));aspect-ratio:var(--ar,1/1.414);scroll-snap-align:start;
  box-shadow:0 22px 54px rgba(0,8,24,.45);}
.mb-doc-note{margin-top:12px;font-size:12px;color:var(--ink-dim);letter-spacing:.02em;}

/* ---- full bleed ---- */
.mb-full{margin-top:22px;}
.mb-full .mb-cell{aspect-ratio:var(--ar,16/8);border-radius:20px;}

/* ---- video + embed ---- */
.mb-video,.mb-embed{cursor:pointer;background-size:cover;background-position:center;}
.mb-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.mb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:62px;height:62px;border-radius:50%;border:1px solid rgba(190,220,255,.4);cursor:pointer;
  background:rgba(8,14,28,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),background .3s;}
.mb-play span{width:0;height:0;margin-left:4px;border-left:15px solid #eaf2ff;
  border-top:9px solid transparent;border-bottom:9px solid transparent;}
.mb-play:hover{transform:translate(-50%,-50%) scale(1.08);background:rgba(34,131,198,.6);}
.is-playing .mb-play,.is-live .mb-play{opacity:0;pointer-events:none;}

/* ---- before / after ---- */
.mb-ba{--split:50%;position:relative;margin-top:22px;aspect-ratio:16/9;overflow:hidden;
  border-radius:20px;border:1px solid var(--stroke);cursor:ew-resize;touch-action:none;user-select:none;}
.mb-ba-before,.mb-ba-after{position:absolute;inset:0;}
.mb-ba-after{clip-path:inset(0 0 0 var(--split));}
.mb-ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mb-ba-tag{position:absolute;bottom:14px;z-index:2;font-family:var(--display);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:6px 13px;border-radius:30px;
  background:rgba(8,14,28,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(190,220,255,.2);}
.mb-ba-before .mb-ba-tag{left:16px;}
.mb-ba-after .mb-ba-tag{right:16px;}
.mb-ba-handle{position:absolute;top:0;bottom:0;left:var(--split);width:2px;z-index:3;
  background:var(--grad);box-shadow:0 0 18px color-mix(in srgb,var(--c2) 65%,transparent);pointer-events:none;}
.mb-ba-handle i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(190,220,255,.45);
  background:rgba(8,14,28,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.mb-ba-handle i::before,.mb-ba-handle i::after{content:"";position:absolute;top:50%;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;}
.mb-ba-handle i::before{left:9px;transform:translateY(-50%);border-right:7px solid #cfe2ff;}
.mb-ba-handle i::after{right:9px;transform:translateY(-50%);border-left:7px solid #cfe2ff;}

/* before/after with no images yet: two droppable halves */
.mb-ba-empty{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;}
.mb-ba-empty > div{position:relative;}
.mb-ba-slot{display:block;width:100%;aspect-ratio:16/10;border-radius:18px;}
.mb-ba-lbl{position:absolute;left:14px;bottom:12px;font-family:var(--display);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding:5px 12px;border-radius:30px;
  background:rgba(8,14,28,.55);border:1px solid var(--stroke);pointer-events:none;}

@media (max-width:900px){
  .mb-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mb-doc .mb-page{flex-basis:clamp(230px,46vw,300px);}
  .mb-iface .ui-cell{flex-basis:clamp(170px,26vw,230px);}
  .mb-resp{gap:12px;}
  .mb-fr-tablet{flex-basis:clamp(104px,16vw,150px);}
  .mb-fr-phone{flex-basis:clamp(72px,11vw,96px);}
}
@media (max-width:640px){
  /* browser chrome eats vertical space on a phone — shrink the bar, not the shot */
  .mb-chrome{height:24px;padding:0 9px;}
  .mb-chrome i{width:6px;height:6px;}
  .mb-chrome em{height:13px;line-height:13px;font-size:9px;margin-left:7px;}
  /* chart table: tighter cells, and it already scrolls in its wrapper */
  .mb-table{font-size:13px;}
  .mb-table th{padding:9px 10px;font-size:10.5px;letter-spacing:.06em;}
  .mb-table td{padding:10px 10px;}
  .mb-tablewrap{margin-top:14px;-webkit-overflow-scrolling:touch;}
  .mb-xaxis span{font-size:9.5px;}
  .mb-grid,.mb-stack,.mb-doc,.mb-full,.mb-ba,.mb-track{margin-top:18px;}
  .mb-square .mb-cell{flex-basis:54vw;}
  .mb-portrait .mb-cell{flex-basis:62vw;}
  .mb-deliver .mb-cell{flex-basis:82vw;}
  .mb-reel .mb-cell{flex-basis:64vw;}
  .mb-iface .ui-cell{flex-basis:58vw;}
  .mb-gallery .mb-cell{flex-basis:82vw;}
  .mb-browser .mb-fr{flex-basis:84vw;}
  .mb-resp{flex-wrap:wrap;gap:12px;}
  .mb-r-desk{flex:0 0 100%;}
  .mb-fr-tablet{flex:0 0 34%;}
  .mb-fr-phone{flex:0 0 22%;}
  .mb-doc .mb-page{flex-basis:72vw;}
  .mb-full .mb-cell{aspect-ratio:4/3;}
  .mb-ba{aspect-ratio:4/3;}
  .mb-ba-empty{grid-template-columns:1fr;gap:12px;}
  .mb-play{width:52px;height:52px;}
  .mb-data{padding:18px 16px 14px;}
  .mb-metric{padding:16px 14px;}
  .mb-chart svg{height:170px;}
  .mb-xaxis span{font-size:10px;}
}