/* One sheet for every project and case-study page:
   /portfolio/<slug>/index.html  (all of them, including _base)
   /case-studies/<slug>/index.html
   Edit once, it changes all of them.

   Page variants are opt-in via markup, not via extra sheets:
   - class="content roomy"  -> 4rem gap between blocks (video showcases)
   - the .lb lightbox block + /assets/lightbox.js  -> image lightbox */

html { scroll-behavior: smooth; }

/* ── PROJECT HEADER ── */
.project-header { max-width: 900px; margin: 0 auto; padding: 5rem 6% 3.5rem; }
.project-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.6rem; }
.project-category { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); }
.meta-sep { color: var(--beige-dark); font-size: 0.7rem; }
.project-year, .project-client, .project-location { font-size: 0.7rem; font-weight: 300; color: var(--text-muted); letter-spacing: 0.06em; }
.project-publication { font-size: 0.7rem; font-weight: 500; color: var(--violet); letter-spacing: 0.06em; background: var(--violet-light); padding: 0.2rem 0.6rem; border-radius: 20px; text-decoration: none; transition: background 0.2s; }
.project-publication:hover { background: var(--violet-mid); color: #fff; }
.project-header h1 { font-family: 'DM Serif Display', serif; font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1.8rem; }
.project-header h1 em { font-style: italic; color: var(--violet); }
.project-desc { font-size: 1.05rem; font-weight: 300; color: var(--text-muted); line-height: 1.8; max-width: 680px; border-top: 1px solid var(--beige-dark); padding-top: 1.8rem; }

/* ── SCOPE (case studies) ── */
.project-scope { max-width: 900px; margin: 0 auto; padding: 0 6% 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.scope-item h3 { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); margin-bottom: 0.5rem; }
.scope-item p { font-size: 0.88rem; font-weight: 300; color: var(--text-muted); line-height: 1.7; }

/* ── CONTENT BLOCKS ── */
.content { max-width: 1200px; margin: 0 auto; padding: 0 4% 6rem; display: flex; flex-direction: column; gap: 1.5rem; }
.content.roomy { gap: 4rem; }
.block-full img,
.block-full video { width: 100%; height: auto; border-radius: 16px; display: block; object-fit: cover; }
.block-full video { max-height: 80vh; height: auto; }
.block-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.block-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; }
.block-split { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; }
.block-split-r { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
.block-2col img, .block-2col video,
.block-3col img, .block-3col video,
.block-split img, .block-split video,
.block-split-r img, .block-split-r video {
  width: 100%; border-radius: 14px; display: block; object-fit: cover; height: 100%; min-height: 260px;
}
.caption { font-size: 0.78rem; font-weight: 300; color: var(--text-muted); text-align: center; margin-top: -0.8rem; letter-spacing: 0.02em; }
.block-text { max-width: 680px; margin: 1rem auto; font-size: 0.95rem; font-weight: 300; color: var(--text-muted); line-height: 1.8; }
.block-caption { font-size: 0.9rem; font-weight: 300; color: var(--text-muted); line-height: 1.7; max-width: 680px; }
.section-divider { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet); border-bottom: 1px solid var(--beige-dark); padding-bottom: 0.5rem; }

/* ── MEDIA + TEXT (real-time / app case studies) ──
   One media column beside one text column. `.flip` puts the text first.
   Markup order is always media-then-text so it degrades correctly on mobile,
   where both collapse to one column with the media on top. */
.block-duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2.5rem; align-items: center; }
.block-duo.flip { grid-template-columns: 1fr 1.35fr; }
.block-duo.flip > :first-child { order: 2; }
.block-duo img, .block-duo video { width: 100%; height: auto; border-radius: 14px; display: block; }
.duo-text h3 { font-family: 'DM Serif Display', serif; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 400; line-height: 1.25; margin-bottom: 0.9rem; }
.duo-text h3 em { font-style: italic; color: var(--violet); }
.duo-text p { font-size: 0.95rem; font-weight: 300; color: var(--text-muted); line-height: 1.8; }
.duo-text p + p { margin-top: 0.9rem; }

/* ── VIDEO ── */
.video-section { display: flex; flex-direction: column; gap: 1.2rem; }
.video-title { font-family: 'DM Serif Display', serif; font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; line-height: 1.2; color: var(--text); }
.video-desc { font-size: 0.9rem; font-weight: 300; color: var(--text-muted); line-height: 1.7; max-width: 680px; }
.block-video { border-radius: 16px; overflow: hidden; }
.block-video-inner { padding: 56.25% 0 0 0; position: relative; }
.block-video-inner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 700px) {
  .block-2col, .block-3col, .block-split, .block-split-r,
  .block-duo, .block-duo.flip { grid-template-columns: 1fr; }
  .block-duo.flip > :first-child { order: 0; }
  .block-duo { gap: 1.5rem; }
  .project-scope { grid-template-columns: 1fr; }
}

/* ── LIGHTBOX (pages with the .lb block; /assets/lightbox.js drives it) ── */
body:has(.lb) .content img { cursor: zoom-in; }
.lb { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.93); z-index: 1000; align-items: center; justify-content: center; cursor: zoom-out; }
.lb.open { display: flex; }
.lb-img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 4px; cursor: default; }
.lb-close { position: fixed; top: 1.4rem; right: 1.6rem; color: rgba(255,255,255,0.55); font-size: 1.8rem; line-height: 1; cursor: pointer; transition: color 0.2s; background: none; border: none; }
.lb-close:hover { color: #fff; }
.lb-prev, .lb-next { position: fixed; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.45); font-size: 2.4rem; background: none; border: none; cursor: pointer; padding: 1rem; transition: color 0.2s; user-select: none; }
.lb-prev { left: 0.8rem; }
.lb-next { right: 0.8rem; }
.lb-prev:hover, .lb-next:hover { color: #fff; }
.lb-counter { position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-size: 0.72rem; color: rgba(255,255,255,0.35); letter-spacing: 0.12em; }

img { -webkit-user-drag: none; }