/* ═══════════════════════════════════════════════════════════
   CASE STUDY STYLESHEET
   Shared component styles for project/case-study pages.
   Linked by devmode.html. Existing project pages still inline
   a copy of these styles — keep the two in sync if you edit.
   ═══════════════════════════════════════════════════════════ */

:root {
  --teal: #1a9e8f;
  --teal-deep: #0d7a6e;
  --teal-light: #e6f5f3;
  --ink: #1a1a2e;
  --ink-soft: #3a3a52;
  --warm-gray: #6b6b7b;
  --light-gray: #f4f3f1;
  --cream: #faf9f7;
  --white: #ffffff;
  --accent-coral: #e8614d;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Outfit', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }

/* ─── NAV ───
   Scoped to body > nav (the page header) specifically — a bare `nav`
   element selector also matched the shared footer's nested
   <nav class="site-contact-aside-nav">, pinning it to the top of the
   viewport as a phantom "Explore" bar over the hero. */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.nav-logo {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.nav-back {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--warm-gray);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.3s;
}
.nav-back:hover { color: var(--teal); }

/* ─── PROJECT HERO ─── */
.project-hero {
  padding: 8rem 3rem 4rem;
  background: var(--white);
}
.project-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}
.project-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-deep); /* --teal is 3.32:1 on white, fails WCAG AA at this size */
  margin-bottom: 1rem;
}
.project-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.project-summary {
  font-size: 1.15rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ─── CONTEXT BAR ─── */
.context-bar {
  background: var(--white);
  border-top: 1px solid var(--light-gray);
  padding: 0 3rem;
}
.context-bar-inner {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 2rem 0;
}
.context-item-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep); /* --teal is 3.32:1 on white, fails WCAG AA at this size */
  margin-bottom: 0.35rem;
}
.context-item-value {
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
}

/* ─── KEY METRICS STRIP ─── */
.metrics-strip {
  background: var(--ink);
  padding: 3rem;
}
.metrics-strip-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.metric-number {
  font-family: var(--serif);
  font-size: 2.75rem;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 0.5rem;
}
/* Modifier for long metric values (e.g. "2hrs vs 3-4 days") */
.metric-number.is-long { font-size: 1.75rem; line-height: 1.15; }
.metric-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}

/* ─── CONTENT SECTIONS ─── */
.content-section {
  padding: 5rem 3rem;
}
/* Modifier: alternate white background (replaces inline style="background: var(--white);") */
.content-section--bg-white { background: var(--white); }

.content-narrow {
  max-width: 800px;
  margin: 0 auto;
}
.section-number {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--teal);
  opacity: 0.5;
  margin-bottom: 0.5rem;
  display: block;
}
.content-section h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
  margin-bottom: 1.25rem;
  line-height: 1.25;
}
/* Sans-serif subheaders within a section (replaces repeated inline h3 styles) */
.content-section h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
  margin-top: 2.5rem;
}
.content-section h3:first-child { margin-top: 0; }
.content-section p {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.content-section p:last-child { margin-bottom: 0; }

/* ─── LAYOUT: FULL BLEED IMAGE ─── */
.full-bleed {
  width: 100%;
  padding: 0;
  margin: 0;
}
.full-bleed img,
.full-bleed .image-placeholder {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
}

/* ─── LAYOUT: IMAGE GRID ─── */
.image-grid {
  display: grid;
  gap: 1rem;
  margin: 2.5rem 0;
}
.image-grid.two-up { grid-template-columns: 1fr 1fr; }
.image-grid.three-up { grid-template-columns: 1fr 1fr 1fr; }
.image-grid .image-placeholder,
.image-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
}
/* Modifier: center and cap the grid when it sits outside .content-narrow
   (replaces repeated inline max-width/margin/padding on wrappers). */
.image-grid.contained {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 3rem;
}

/* ─── LAYOUT: TEXT + SIDE IMAGE ─── */
.text-with-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
.text-with-image.reversed { direction: rtl; }
.text-with-image.reversed > * { direction: ltr; }
.text-with-image .image-placeholder,
.text-with-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
}

/* ─── CALLOUT BLOCK ─── */
.callout {
  background: var(--teal-light);
  border-left: 4px solid var(--teal);
  padding: 2rem 2.5rem;
  margin: 2.5rem 0;
  border-radius: 0 8px 8px 0;
}
/* When the callout is the last thing in its section, its own bottom
   margin stacks with the section's bottom padding — the section
   already provides that breathing room, so this compounded twice
   reads as a huge dead gap before the next section starts. */
.callout:last-child { margin-bottom: 0; }
.callout p {
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 0;
}
.callout .callout-source {
  font-size: 0.85rem;
  color: var(--teal-deep);
  font-weight: 500;
  margin-top: 0.75rem;
  margin-bottom: 0;
}
.callout p + ul { margin-top: 0.75rem; }

/* ─── DIAMOND LIST ───
   General-purpose bulleted-list treatment for any multi-point content on a
   case-study page — not scoped to .callout, any <ul class="list-diamond">
   anywhere on the page gets it. Diamond markers instead of the default
   round browser bullet, teal — same accent as every other callout/list on
   the site. Use this instead of <br>-separating lines in one <p> whenever
   content is really a list of distinct points. */
.list-diamond {
  margin: 0;
  padding-left: 1.4rem;
}
.list-diamond li {
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 0.6rem;
}
.list-diamond li:last-child { margin-bottom: 0; }
.list-diamond li::marker {
  content: "\25C6  ";
  color: var(--teal);
  font-size: 0.65em;
}

/* ─── QUOTE BLOCK ─── */
.quote-block {
  background: var(--white);
  padding: 4rem 3rem;
  text-align: center;
}
.quote-block blockquote {
  /* Lora reads much better at italic display sizes than DM Serif Display italic,
     which has skinny strokes that break up at quote scale. */
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  color: var(--ink);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.55;
}
.quote-block cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--warm-gray);
  font-weight: 500;
}

/* ─── PROGRESSION / BEFORE-AFTER ─── */
.progression {
  max-width: 960px;
  margin: 2.5rem auto;
}
.progression-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.progression-tab {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  cursor: pointer;
  border: none;
  transition: background 0.3s, color 0.3s;
  background: var(--light-gray);
  color: var(--warm-gray);
}
.progression-tab.active {
  background: var(--ink);
  color: var(--white);
}
.progression-stage {
  display: none;
  border-radius: 8px;
  overflow: hidden;
}
.progression-stage.active { display: block; }
.progression-stage .image-placeholder,
.progression-stage img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* ─── IMAGE CAROUSEL ─── */
.carousel-wrapper {
  position: relative;
  max-width: 960px;
  margin: 2.5rem auto;
  overflow: hidden;
  border-radius: 8px;
}
.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.carousel-track.is-grabbing { cursor: grabbing; }
.carousel-slide { min-width: 100%; }
.carousel-slide img { -webkit-user-drag: none; user-drag: none; }
.carousel-slide .image-placeholder,
.carousel-slide img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.carousel-slide .slide-caption {
  padding: 1rem 0;
  font-size: 0.85rem;
  color: var(--warm-gray);
  text-align: center;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-btn:hover { background: var(--white); }
.carousel-btn.prev { left: 1rem; }
.carousel-btn.next { right: 1rem; }

/* Per-slide subtext shown above the dots. Read from `data-label` on each
   .carousel-slide via shared JS — change the attribute, the text follows. */
.carousel-label {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--medium-gray, #9aa0a6);
  margin-top: 1rem;
  min-height: 1em;
  transition: opacity 0.2s ease;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Pill-expand active dot. Subtle spring easing on the width morph, no
   secondary animations — the shape change alone carries the feedback. */
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: #b8bcc2;
  cursor: pointer;
  padding: 0;
  transition:
    width 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
    background-color 0.3s ease;
}
.carousel-dot:hover { background: #7a7e85; }
.carousel-dot.active {
  width: 24px;
  background: var(--teal);
}
@media (prefers-reduced-motion: reduce) {
  .carousel-dot { transition: background-color 0.2s ease; }
}

/* Carousel slides are inside overflow:hidden, so the standard .zoomable
   hover lift/shadow gets clipped. Replace it with a brightness tint so
   the click affordance stays without bleeding past the viewport. */
.carousel-slide .zoomable { transition: filter 0.25s ease; }
.carousel-slide .zoomable:hover { transform: none; box-shadow: none; filter: brightness(1.04); }
.carousel-slide .zoomable:active { transform: none; }

/* ─── CREDITS ─── */
.credits {
  background: var(--white);
  padding: 4rem 3rem;
}
.credits-inner {
  max-width: 800px;
  margin: 0 auto;
}
.credits h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--ink);
}
.credits-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.75rem 2rem;
  align-items: baseline;
}
.credit-role {
  font-size: 0.85rem;
  color: var(--warm-gray);
  font-weight: 500;
}
.credit-name {
  font-size: 0.95rem;
  color: var(--ink);
}

/* ─── NEXT PROJECT ─── */
.next-project {
  background: var(--teal-light);
  padding: 4rem 3rem;
  text-align: center;
}
.next-project-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-deep); /* --teal is 3.32:1 on white, fails WCAG AA at this size */
  margin-bottom: 0.75rem;
}
.next-project h3 {
  font-family: var(--serif);
  font-size: 1.75rem;
  color: var(--ink);
  margin-bottom: 1rem;
}
.next-project a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--teal-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 0.2rem;
  transition: color 0.3s;
}
.next-project a:hover { color: var(--ink); }

/* ─── FOOTER ─── */
footer {
  text-align: center;
  padding: 2rem 3rem;
  background: var(--ink);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
}

/* ─── ZOOMABLE / LIGHTBOX ───
   Add `.zoomable` to any img or wrapper. Hover → lift + shadow.
   Click → opens a shadowbox overlay with the enlarged image.
   Source resolution order: data-zoom-src → <img src> inside → self src.

   When the clicked image lives inside a .carousel-wrapper, the lightbox
   builds a gallery from the carousel's slides and shows prev/next chevrons
   to cycle through them — captions come from each slide's `data-label`.
   Single images outside a carousel show only the close button.

   ESC, overlay click, or the × button closes. ←/→ navigate the gallery.
   Scroll wheel or trackpad pinch zooms the open image (centered); drag to
   pan once zoomed; double-click toggles 2x; +/−/reset buttons in the
   corner cover touch/no-wheel input. Zoom resets on navigate/close.
   The overlay is injected lazily by the shared JS. */
.zoomable {
  cursor: zoom-in;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.zoomable:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(26, 26, 46, 0.18);
}
.zoomable:active { transform: translateY(-1px); }
.zoomable img { border-radius: inherit; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(13, 13, 24, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
/* Stage is a fixed-size viewport (80vw x 80vh, ~10% breathing room per
   side) — NOT shrink-wrapped to the image — so a tall/narrow image still
   gets a large area to zoom and pan into instead of being clipped to its
   own small unzoomed footprint. Deliberately sized smaller than the full
   overlay so there's an obvious backdrop margin left to click-to-close,
   and given its own faint border/tint so the "container" reads as a real
   bounded object instead of the picture just floating in open space.
   It also carries the open-pop animation, so that transform never fights
   the user's zoom/pan transform on the image itself. */
.lightbox-stage {
  width: 80vw;
  height: 80vh;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: scale(0.96);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox.is-open .lightbox-stage { transform: scale(1); }
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: var(--ink);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform 0.12s ease-out;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-img.is-zoomed { cursor: grab; }
.lightbox-img.is-panning { cursor: grabbing; transition: none; }
.lightbox-zoom {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  padding: 0.3rem;
}
.lightbox-zoom-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.lightbox-zoom-btn:hover { background: rgba(255, 255, 255, 0.15); }
.lightbox-zoom-btn.reset {
  width: auto;
  border-radius: 100px;
  padding: 0 0.75rem;
  font-size: 0.72rem;
  font-family: var(--sans);
  font-weight: 500;
}
@media (max-width: 768px) {
  .lightbox-zoom { bottom: 1rem; right: 1rem; }
  .lightbox-zoom-btn { width: 30px; height: 30px; font-size: 0.9rem; }
}
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.lightbox-nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.lightbox-nav.prev { left: 1.5rem; }
.lightbox-nav.next { right: 1.5rem; }
.lightbox-nav[hidden] { display: none; }
@media (max-width: 768px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.1rem; }
  .lightbox-nav.prev { left: 0.5rem; }
  .lightbox-nav.next { right: 0.5rem; }
}
.lightbox-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-family: var(--sans);
  max-width: 80vw;
  text-align: center;
}

/* ─── SECTION DIVIDER ─── Zero-height structural marker between sections.
   Useful as an anchor target or JS hook without affecting layout. */
.section-divider { display: block; margin: 0; padding: 0; }

/* ─── IMAGE PLACEHOLDERS ─── */
.image-placeholder {
  background: var(--light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--warm-gray);
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px dashed rgba(0,0,0,0.1);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  body > nav { padding: 1rem 1.5rem; }
  .project-hero { padding: 6rem 1.5rem 3rem; }
  .context-bar { padding: 0 1.5rem; }
  .context-bar-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
  .metrics-strip { padding: 2.5rem 1.5rem; }
  .metrics-strip-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .content-section { padding: 3rem 1.5rem; }
  .text-with-image {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .text-with-image.reversed { direction: ltr; }
  .image-grid.two-up { grid-template-columns: 1fr; }
  .image-grid.three-up { grid-template-columns: 1fr; }
  .image-grid.contained { padding: 0 1.5rem; }
  .credits-grid {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .credit-role { margin-top: 0.75rem; }
}