/*
=========================================
Project pages — extends spec.css
Case-study layout, media grid, video, gallery, lightbox, prev/next
=========================================
*/

/* Hero: cover image + overview */
.p-hero .hero-figure { grid-column: 1 / span 5; }
.p-hero .hero-text { grid-column: 7 / -1; }
.p-hero h1 { font-size: var(--fs-80); }
.facts { margin-top: 28px; }

/* Readable text blocks */
.prose p { max-width: var(--measure); font-size: var(--fs-18); line-height: 1.55; }
.prose li { font-size: var(--fs-15); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; }
.prose a { text-underline-offset: 3px; text-decoration-color: var(--rule); }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul { margin: 0 0 1em; }
.prose li { position: relative; padding: 6px 0 6px 20px; border-top: 1px dashed var(--rule); }
.prose li:last-child { border-bottom: 1px dashed var(--rule); }
.prose li::before { content: "→"; position: absolute; left: 0; color: var(--muted); }

/* Media grid (12 columns) */
.media { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; }
.media > * { grid-column: span 12; margin: 0; }
.media .w-6 { grid-column: span 6; }
.media .w-7 { grid-column: span 7; }
.media .w-5 { grid-column: span 5; }
.media .w-8 { grid-column: 3 / span 8; }
.media .img img { height: auto; }

/* Responsive video embed */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--panel); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Gallery pages */
.gallery { columns: 3 260px; column-gap: var(--gutter); }
.g-item {
  display: block; width: 100%;
  margin: 0 0 var(--gutter);
  padding: 6px;
  border: 1px dashed var(--rule);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  break-inside: avoid;
}
.g-item .frame-head { padding-bottom: 6px; }
.g-item img { width: 100%; height: auto; transition: transform .8s var(--ease); }
.g-item .img { overflow: hidden; }
.g-item:hover img { transform: scale(1.03); }

/* Lightbox */
.lightbox {
  width: min(92vw, 1200px);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--n-300);
  background: var(--n-600);
  color: var(--n-100);
}
.lightbox::backdrop { background: rgba(14, 15, 16, .88); }
.lightbox .lb-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px dashed var(--n-500);
  font-family: var(--mono); font-size: var(--fs-12); letter-spacing: .06em; text-transform: uppercase;
  --fg: var(--n-100); --bg: var(--n-600);
}
.lightbox img { display: block; width: 100%; max-height: calc(92vh - 44px); object-fit: contain; }

/* Prev / next */
.pnav { display: grid; grid-template-columns: 1fr auto 1fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pnav a {
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px var(--gutter);
  text-decoration: none;
  transition: background .15s linear, color .15s linear;
}
.pnav a + a { border-left: 1px solid var(--rule); }
.pnav a:hover { background: var(--fg); color: var(--bg); }
.pnav a:hover .muted { color: var(--bg); }
.pnav .next { text-align: right; align-items: flex-end; }
.pnav .all { justify-content: center; align-items: center; }
.pnav strong { font: 400 var(--fs-24)/1.1 var(--grotesk); letter-spacing: -.01em; text-transform: uppercase; }
.pnav .pn { display: flex; align-items: center; gap: 14px; }
.pnav .next .pn { flex-direction: row-reverse; }
.pnav .thumb { width: 64px; height: 64px; flex: none; object-fit: cover; border: 1px solid var(--rule); }

/* Template placeholder (used by the fill-in examples) */
.placeholder {
  display: grid; place-items: center;
  aspect-ratio: var(--ratio, 4 / 3);
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--rule) 50%, transparent calc(50% + .5px)),
    linear-gradient(to top left, transparent calc(50% - .5px), var(--rule) 50%, transparent calc(50% + .5px)),
    var(--panel);
  font-family: var(--mono); font-size: var(--fs-12); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.placeholder span { padding: 4px 8px; background: var(--bg); }

@media (max-width: 960px) {
  .p-hero .hero-figure { grid-column: 1 / span 5; }
  .p-hero .hero-text { grid-column: 6 / -1; }
  .media .w-6, .media .w-7, .media .w-5, .media .w-8 { grid-column: span 12; }
}
@media (max-width: 640px) {
  .p-hero .hero-figure, .p-hero .hero-text { grid-column: 1 / -1; }
  .pnav { grid-template-columns: 1fr 1fr; }
  .pnav .all { grid-column: 1 / -1; grid-row: 2; border-left: 0 !important; border-top: 1px solid var(--rule); }
  .pnav .thumb { width: 44px; height: 44px; }
  .pnav strong { font-size: var(--fs-15); }
}