/* =============================================================
   pages/id-case.css
   Secondary industrial-design case studies (boat-hull-deck,
   transportation-diorama, faucet, technical-drawing).
   Layered on top of styles.css + project-detail.css, so section,
   fact-tile, tag and CTA styling comes from those. This file only
   adds: the framed hero stage, captioned image galleries and the
   zoomable lightbox (line drawings must be readable at full size).
   Scoped under the .idc- prefix; tokens only.
   ============================================================= */

/* ── Hero stage ──────────────────────────────────────────────── */
.idc-hero { background: var(--bg-hero); }

.idc-hero__stage {
  position: relative;
  height: clamp(360px, 62vh, 640px);
  background: var(--card-surface);
  overflow: hidden;
}

.idc-hero__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.idc-hero__btn:focus-visible { outline-offset: -4px; }

.idc-hero__btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--idc-hero-fit, contain);
  object-position: var(--idc-hero-pos, center);
}

/* Same horizontal rhythm as .project-detail so the title lines up
   with the body column below it. */
.idc-hero__text {
  padding: var(--space-40) 235px var(--space-56);
  background: var(--bg-hero);
}
.idc-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.idc-hero__title {
  font-family: var(--font-headings);
  font-size: clamp(32px, 4.4vw, 60px);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: var(--space-16);
  max-width: 22ch;
}
.idc-hero__desc {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  color: var(--gray-900);
  line-height: 26px;
  max-width: 720px;
}

/* ── Captioned galleries ─────────────────────────────────────── */
.idc-gallery {
  display: grid;
  grid-template-columns: repeat(var(--idc-cols, 1), minmax(0, 1fr));
  gap: var(--space-16);
  align-items: start;
  margin-top: var(--space-24);
}
.idc-gallery--2 { --idc-cols: 2; }
.idc-gallery--3 { --idc-cols: 3; }
/* stacked galleries use the same peer gap as the grid itself */
.idc-gallery + .idc-gallery { margin-top: var(--space-16); }

.idc-figure { margin: 0; min-width: 0; }

.idc-figure__btn {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--card-surface);
  border: 1px solid var(--purple-card-border);
  cursor: zoom-in;
  transition: border-color var(--transition-speed) ease;
}
.idc-figure__btn:hover { border-color: var(--purple-border); }
.idc-figure__btn img { display: block; width: 100%; height: auto; }

.idc-figure figcaption {
  margin-top: var(--space-8);
  font-family: var(--font-text);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--gray-900);
}

/* ── Lightbox (with click-to-zoom to natural size) ───────────── */
.idc-lightbox {
  --idc-scrim: rgba(8, 12, 29, 0.95);
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--idc-scrim);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.idc-lightbox[data-open='true'] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .idc-lightbox,
  .idc-lightbox[data-open='true'] { transition: none; }
}

.idc-lightbox__stage {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: auto;
  padding: var(--space-56) var(--space-24) var(--space-56);
}
.idc-lightbox__img {
  margin: auto;
  flex: none;
  max-width: 100%;
  max-height: calc(100vh - 2 * var(--space-56));
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: var(--elev-1);
  cursor: zoom-in;
}
.idc-lightbox.is-zoomed .idc-lightbox__img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.idc-lightbox:not(.is-zoomable) .idc-lightbox__img { cursor: default; }

.idc-lightbox__btn {
  position: absolute;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hero);   /* solid: stays visible over white plates */
  border: 1px solid var(--purple-border);
  color: var(--white);
  font-size: var(--fs-20);
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
}
.idc-lightbox__btn:hover { background: var(--bg-chip); }
.idc-lightbox__btn--close { top: var(--space-12); right: var(--space-12); }
.idc-lightbox__btn--prev  { left: var(--space-12);  top: 50%; transform: translateY(-50%); }
.idc-lightbox__btn--next  { right: var(--space-12); top: 50%; transform: translateY(-50%); }
.idc-lightbox__btn[hidden] { display: none; }

.idc-lightbox__caption {
  position: absolute;
  left: 50%;
  bottom: var(--space-12);
  z-index: 1;
  transform: translateX(-50%);
  max-width: min(80vw, 720px);
  padding: var(--space-8) var(--space-16);
  background: var(--bg-hero);
  border: 1px solid var(--section-border);
  font-family: var(--font-text);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--gray-900);
  text-align: center;
}
.idc-lightbox__caption:empty { display: none; }

body.idc-lightbox-open { overflow: hidden; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .idc-hero__text { padding-left: 100px; padding-right: 100px; }
}
@media (max-width: 900px) {
  .idc-hero__stage { height: clamp(300px, 52vh, 520px); }
  .idc-hero__text  { padding: var(--space-32) var(--space-40) var(--space-40); }
}
@media (max-width: 640px) {
  .idc-hero__stage { height: clamp(260px, 46vh, 420px); }
  .idc-hero__text  { padding: var(--space-24) 20px var(--space-32); }
  .idc-gallery--2,
  .idc-gallery--3  { --idc-cols: 1; }
  .idc-lightbox__stage { padding-left: var(--space-8); padding-right: var(--space-8); }
  .idc-lightbox__btn--prev { left: var(--space-4); }
  .idc-lightbox__btn--next { right: var(--space-4); }
}

/* Single tall figure (e.g. a portrait sketch): cap the width so it
   doesn't fill a whole screen of height. Still opens in the lightbox. */
.idc-gallery--narrow { max-width: 560px; }

/* ── Wide galleries (stacked full-width renders) ─────────────────
   Bleed past the 235px page padding down to 100px a side (the page's
   widest container, same as the ≤1200px padding). --page-pad-x is set
   by .project-detail per breakpoint, so the bleed is 135px on large
   screens and collapses to 0 once the padding is already ≤100px. */
.idc-gallery--wide {
  margin-inline: calc(-1 * max(0px, var(--page-pad-x, 0px) - 100px));
}
/* Stack peer gap = same --space-16 as the grid. */
.idc-gallery--wide + .idc-gallery--wide { margin-top: var(--space-16); }

/* One-line note under a block (composited-backdrop disclosure etc.) */
.idc-note {
  margin-top: var(--space-16);
  font-family: var(--font-text);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--gray-900);
}

/* ── Videos (muted loops, play/pause control) ────────────────── */
.idc-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-24);
}
.idc-videos--single { grid-template-columns: minmax(0, 1fr); }
.idc-video { margin: 0; min-width: 0; }
.idc-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--card-surface);
  border: 1px solid var(--purple-card-border);
  overflow: hidden;
}
.idc-video__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.idc-video figcaption {
  margin-top: var(--space-8);
  font-family: var(--font-text);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--gray-900);
}

/* Shared small solid control (play/pause, reset, interact). Solid
   dark fill so it stays legible over bright renders and video. */
.idc-ctl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-12);
  justify-content: center;
  background: var(--bg-hero);
  border: 1px solid var(--purple-border);
  color: var(--white);
  font-family: var(--font-text);
  font-size: var(--fs-13);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
}
.idc-ctl:hover { background: var(--bg-chip); }
.idc-ctl:active { background: var(--bg-chip); }
.idc-ctl:focus-visible { outline: 2px solid var(--purple-900); outline-offset: 2px; }
.idc-ctl[disabled] { opacity: 0.5; cursor: not-allowed; }
.idc-ctl i { font-size: var(--fs-20); }

.idc-video__ctl {
  position: absolute;
  left: var(--space-12);
  bottom: var(--space-12);
}

/* ── 3D viewer ───────────────────────────────────────────────── */
/* Stage backdrop matches the studio-grey of the renders. New local
   token (no light-grey surface exists in styles.css) — sync to Figma. */
.idc-viewer { --idc-viewer-bg: #d9dde2; margin-top: var(--space-24); }
.idc-viewer__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--idc-viewer-bg);
  border: 1px solid var(--purple-card-border);
  overflow: hidden;
}
.idc-viewer__poster,
.idc-viewer__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.idc-viewer__poster { object-fit: cover; }
.idc-viewer__canvas { cursor: grab; touch-action: none; outline-offset: -4px; }
.idc-viewer__canvas:active { cursor: grabbing; }
.idc-viewer__canvas:focus-visible { outline: 2px solid var(--purple-500); }
/* Locked (touch default): vertical swipes scroll the page. */
.idc-viewer.is-locked .idc-viewer__canvas { touch-action: pan-y; cursor: default; }

.idc-viewer__status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-8) var(--space-16);
  background: var(--bg-hero);
  color: var(--white);
  font-family: var(--font-text);
  font-size: var(--fs-13);
  line-height: 1.5;
  text-align: center;
  max-width: calc(100% - 2 * var(--space-16));
}
.idc-viewer__status[hidden] { display: none; }
.idc-viewer__bar {
  position: absolute;
  left: var(--space-12);
  right: var(--space-12);
  bottom: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  pointer-events: none;
}
.idc-viewer__bar > * { pointer-events: auto; }
.idc-viewer__hint {
  margin-top: var(--space-8);
  font-family: var(--font-text);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--gray-900);
}
.idc-viewer__bar[hidden],
.idc-viewer [hidden] { display: none; }
.idc-viewer__fallback {
  margin-top: var(--space-8);
  font-family: var(--font-text);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--gray-900);
}
.idc-viewer.is-ready .idc-viewer__poster { visibility: hidden; }

@media (max-width: 900px) {
  .idc-viewer__stage { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .idc-videos { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .idc-ctl { transition: none; }
}