/* Sonke Design — case-study refinements v10 */

/* 1. Logo / sygnet artwork: keep the whole source image visibly centered
   inside the editorial frame instead of letting the source canvas dominate it. */
.project-v9-stage--brand img[src*="/branding/logo-"],
.project-v9-stage--brand img[src*="/branding/sygnet-"]{
  width:auto;
  height:auto;
  max-width:78%;
  max-height:78%;
  margin:auto;
  object-fit:contain;
  object-position:center;
}

/* 2. Video layouts: every format gets an equal stage. The video itself keeps
   its true aspect ratio in the centre, so a 9:16 reel no longer behaves like
   an oversized card and its controls remain inside the visible stage. */
.project-v9-video-stage{
  position:relative;
  isolation:isolate;
}
.project-v9-video-stage video{
  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  margin:auto;
  object-fit:contain;
  object-position:center;
  background:transparent;
}
.project-v9-video-stage.is-portrait video{
  width:auto;
  height:100%;
  max-width:min(100%, 405px);
}
.project-v9-video-stage.is-square video{
  width:auto;
  height:100%;
  max-width:100%;
}

/* Persistent, custom project-video controls. Native controls remain the
   no-JS fallback and are disabled only after this UI is successfully built. */
.project-v10-controls{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:5;
  display:grid;
  grid-template-columns:auto auto minmax(70px,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(14,13,12,.78);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:#fff;
  opacity:1;
  transition:background .2s ease;
}
.project-v10-controls button{
  border:0;
  padding:4px;
  margin:0;
  min-width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:#fff;
  background:transparent;
  font:500 13px/1 Inter,sans-serif;
  cursor:pointer;
}
.project-v10-controls button:hover{background:rgba(255,255,255,.10)}
.project-v10-controls__time{
  min-width:74px;
  font:500 10px/1 Inter,sans-serif;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.82);
  white-space:nowrap;
}
.project-v10-controls__progress{
  width:100%;
  min-width:0;
  accent-color:#f7f3ed;
  cursor:pointer;
}
.project-v10-controls__icon{font-size:15px;line-height:1}
.project-v9-video-stage:fullscreen{background:#111;display:grid;place-items:center}
.project-v9-video-stage:fullscreen video{max-width:100vw;max-height:100vh}
.project-v9-video-stage:fullscreen .project-v10-controls{bottom:22px;left:22px;right:22px}

/* 3. Contextual lightbox. Plans, documents and branding need a light neutral
   viewing field; photography / visualisations retain the dark cinematic box. */
.lightbox.is-light-media{
  background:rgba(239,234,226,.985);
}
.lightbox.is-light-media img{
  box-sizing:border-box;
  max-width:min(1500px,92vw);
  max-height:86vh;
  padding:clamp(12px,1.8vw,28px);
  background:#fff;
  border:1px solid rgba(34,31,27,.10);
  box-shadow:0 22px 70px rgba(40,35,28,.14);
}
.lightbox.is-light-media button{
  color:#24211d;
}

@media(max-width:680px){
  .project-v9-stage--brand img[src*="/branding/logo-"],
  .project-v9-stage--brand img[src*="/branding/sygnet-"]{
    max-width:84%;
    max-height:84%;
  }
  .project-v9-video-stage,
  .project-v9-video-grid--formats .project-v9-video-stage{
    height:min(72svh,620px);
    min-height:360px;
    max-height:none;
  }
  .project-v9-video-stage video{
    width:auto;
    height:100%;
    max-height:100%;
  }
  .project-v10-controls{
    left:8px;
    right:8px;
    bottom:8px;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:7px;
    padding:8px;
  }
  .project-v10-controls__time{display:none}
  .project-v10-controls__fullscreen{display:none}
  .lightbox{padding:18px}
  .lightbox.is-light-media img{max-width:96vw;max-height:88svh;padding:10px}
}