/* Sonke Design — website case-study presentation v12 */

.case-v12-website{
  --website-ink:#f5f1e9;
  --website-muted:rgba(245,241,233,.68);
  --website-line:rgba(255,255,255,.13);
  color:var(--website-ink);
  background:
    radial-gradient(circle at 78% 20%,rgba(180,141,92,.12),transparent 34%),
    #172027;
}
.case-v12-website .case-v11-head{margin-bottom:24px}
.case-v12-website .case-v11-head h2{max-width:900px;color:var(--website-ink)}
.case-v12-website .case-v11-head>p{color:var(--website-muted)}
.case-v12-website .case-v11-kicker{color:#d7b78e}
.case-v12-website__head{margin-bottom:clamp(34px,5vw,64px)}
.case-v12-website__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:20px;
  border-top:1px solid var(--website-line);
}
.case-v12-website__tags{display:flex;flex-wrap:wrap;gap:8px}
.case-v12-website__tags span{
  padding:8px 12px;
  border:1px solid var(--website-line);
  border-radius:999px;
  color:var(--website-muted);
  font:500 10px/1 Inter,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.case-v12-live-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(245,241,233,.55);
  color:var(--website-ink);
  font:500 12px/1 Inter,sans-serif;
}
.case-v12-live-link span{font-size:16px;transition:transform .2s ease}
.case-v12-live-link:hover span{transform:translate(3px,-3px)}

.case-v12-website__showcase{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,290px);
  gap:clamp(26px,4vw,56px);
  align-items:end;
}
.case-v12-browser,.case-v12-phone{margin:0;min-width:0}
.case-v12-browser{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:#0e1114;
  box-shadow:0 36px 90px rgba(0,0,0,.34);
}
.case-v12-browser__bar{
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 70px;
  align-items:center;
  min-height:45px;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:#242a2e;
}
.case-v12-browser__dots{display:flex;gap:6px}
.case-v12-browser__dots i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.30)}
.case-v12-browser__address{
  grid-column:2;
  overflow:hidden;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:7px;
  color:rgba(255,255,255,.56);
  background:rgba(255,255,255,.04);
  font:500 10px/1 Inter,sans-serif;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.case-v12-browser__screen.project-v9-video-stage{
  height:auto;
  min-height:0;
  aspect-ratio:16/10;
  background:#111;
}
.case-v12-browser__screen.project-v9-video-stage video{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
}
.case-v12-browser figcaption{
  margin:0;
  padding:12px 16px 14px;
  border-top:1px solid rgba(255,255,255,.09);
  color:var(--website-muted);
}

.case-v12-phone{justify-self:center;width:min(100%,275px)}
.case-v12-phone__frame{
  position:relative;
  padding:12px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:38px;
  background:#090b0d;
  box-shadow:0 30px 70px rgba(0,0,0,.40);
}
.case-v12-phone__camera{
  position:absolute;
  z-index:6;
  top:19px;
  left:50%;
  width:68px;
  height:18px;
  border-radius:999px;
  background:#090b0d;
  transform:translateX(-50%);
}
.case-v12-phone__screen.project-v9-video-stage{
  height:auto;
  min-height:0;
  aspect-ratio:9/16;
  overflow:hidden;
  border-radius:28px;
  background:#111;
}
.case-v12-phone__screen.project-v9-video-stage video{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
}
.case-v12-phone figcaption{padding-top:12px;color:var(--website-muted);text-align:center}
.case-v12-phone .project-v10-controls{
  left:8px;
  right:8px;
  bottom:8px;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:7px;
  padding:7px;
}
.case-v12-phone .project-v10-controls__time,
.case-v12-phone .project-v10-controls__fullscreen{display:none}
.case-v12-phone .project-v10-controls button{min-width:26px;height:26px}

@media(max-width:900px){
  .case-v12-website__showcase{grid-template-columns:1fr}
  .case-v12-phone{width:min(72vw,300px);margin-top:10px}
}

@media(max-width:680px){
  .case-v12-website__meta{align-items:flex-start;flex-direction:column}
  .case-v12-browser{border-radius:10px}
  .case-v12-browser__bar{grid-template-columns:54px minmax(0,1fr) 0;min-height:40px;padding:0 10px}
  .case-v12-browser__address{padding:7px 9px;font-size:9px}
  .case-v12-browser__screen.project-v9-video-stage{
    height:auto;
    min-height:0;
    max-height:none;
  }
  .case-v12-browser .project-v10-controls__time,
  .case-v12-browser .project-v10-controls__fullscreen{display:none}
}

@media(prefers-reduced-motion:reduce){
  .case-v12-live-link span{transition:none}
}