/* Storyboarding page — uses film-direction.css for the Why cards and process timeline */

/* Shot strip */
.sb-strip-sec{ padding-top:110px; }
.sb-strip-top{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:end; margin-bottom:32px; }
.sb-strip-top h2{ font-size:clamp(40px,5.6vw,72px); line-height:.95; margin-top:10px; }
.sb-strip-ctrl{ display:flex; flex-direction:column; gap:18px; }
.sb-strip-ctrl p{ color:var(--dim); font-size:16px; line-height:1.65; max-width:46ch; }
.sb-arrows{ display:flex; gap:10px; }
.sb-arrow{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#111; display:grid; place-items:center; cursor:pointer; transition:background .2s, border-color .2s; }
.sb-arrow:hover{ background:var(--red); border-color:var(--red); }
.sb-arrow svg{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.sb-strip{ list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,30%); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:18px; scrollbar-width:thin; scrollbar-color:var(--red) rgba(255,255,255,.08); }
.sb-strip::-webkit-scrollbar{ height:4px; }
.sb-strip::-webkit-scrollbar-track{ background:rgba(255,255,255,.08); }
.sb-strip::-webkit-scrollbar-thumb{ background:var(--red); }
.sb-shot{ scroll-snap-align:start; border:1px solid var(--line); border-radius:8px; background:#0f0f0f; padding:12px 12px 16px; display:flex; flex-direction:column; gap:12px; }
.sb-shot-img{ aspect-ratio:16/9; border-radius:4px; overflow:hidden; background:#e9e6df; }
.sb-shot-img img{ width:100%; height:100%; object-fit:cover; }
.sb-shot-head{ display:flex; justify-content:space-between; align-items:baseline; padding:0 4px; }
.sb-shot-head b{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px; text-transform:uppercase; }
.sb-shot-head span{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px; color:var(--red2); }
.sb-shot-meta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 4px; }
.sb-shot-meta div{ border-top:1px solid var(--line); padding-top:8px; }
.sb-shot-meta dt{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.sb-shot-meta dd{ font-size:14px; margin-top:2px; }
.sb-vo{ display:flex; gap:10px; align-items:flex-start; padding:10px 4px 0; border-top:1px solid var(--line); font-size:14px; line-height:1.5; color:#d6d6d6; }
.sb-vo span{ flex-shrink:0; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:12px; letter-spacing:.1em; color:#fff; background:var(--red); border-radius:3px; padding:2px 6px; margin-top:1px; }

/* Sketch to final */
.sb-pairs-sec{ padding-top:96px; }
.sb-pairs-sec h2{ font-size:clamp(36px,4.6vw,60px); line-height:1; margin:10px 0 12px; }
.sb-pairs-lede{ color:var(--dim); font-size:16px; margin-bottom:28px; }
.sb-pairs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.sb-pair{ position:relative; margin:0; aspect-ratio:16/10; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#e9e6df; }
.sb-pair img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sb-sketch{ clip-path:inset(0 calc(100% - var(--split,50%)) 0 0); }
.sb-split{ position:absolute; top:0; bottom:0; left:var(--split,50%); width:2px; background:var(--red); box-shadow:0 0 14px var(--red); transform:translateX(-1px); pointer-events:none; }
.sb-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; z-index:2; }
.sb-range:focus-visible + figcaption, .sb-pair:focus-within{ outline:2px solid var(--red); outline-offset:3px; }
.sb-pair figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:30px 12px 10px; background:linear-gradient(0deg,rgba(10,10,10,.85),transparent); pointer-events:none; }
.sb-pair figcaption b{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px; text-transform:uppercase; }
.sb-pair figcaption span{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:rgba(0,0,0,.6); border:1px solid var(--line); }

@media (max-width:1000px){
  .sb-strip-top{ grid-template-columns:1fr; gap:18px; }
  .sb-strip{ grid-auto-columns:minmax(280px,46%); }
  .sb-pairs{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .sb-strip-sec{ padding-top:80px; }
  .sb-strip{ grid-auto-columns:85%; }
  .sb-pairs-sec{ padding-top:72px; }
}

/* Storyboard to screen sequence */
.sb-seq{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; counter-reset:seq; }
.sb-step{ margin:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#0f0f0f; position:relative; }
.sb-step-img{ aspect-ratio:16/9; overflow:hidden; background:#151515; }
.sb-step-img img{ width:100%; height:100%; object-fit:cover; }
.sb-step figcaption{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:baseline; padding:16px 16px 18px; }
.sb-step figcaption span{ grid-row:span 2; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:28px; color:var(--red2); line-height:1; }
.sb-step figcaption b{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px; text-transform:uppercase; }
.sb-step figcaption em{ font-style:normal; font-size:14px; color:var(--dim); }
.sb-step + .sb-step::before{ content:""; position:absolute; left:-18px; top:calc(50% - 40px); width:18px; height:2px; background:var(--red); }
@media (max-width:1000px){ .sb-seq{ grid-template-columns:1fr; } .sb-step + .sb-step::before{ display:none; } }