/* ============================================================
   Project pages — overrides on top of /styles/global.css
   Only project-specific layout and components live here.
   ============================================================ */

:root {
  --page-bg:    var(--color-project-bg); /* white */
  --size-label: 11px;
  --gap-section: 56px; /* slightly more breathing room than main pages */
}

/* Project pages scroll normally — override the fixed viewport layout */
.page {
  position: static;
  top: auto; right: auto; bottom: auto; left: auto;
  padding: var(--pad-page-top) var(--pad-page-h) var(--pad-page-v);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Nav uses dark text on white bg (no color-text variable needed) */
nav a        { color: #0D0D0D; }
nav a:hover  { color: #C8341A; }

/* ── Hero image ───────────────────────────────────────────── */

.hero-image {
  width: 100%;
  background: #EBEBEB;
  overflow: hidden;
  margin-bottom: var(--gap-section);
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-image-placeholder {
  font-size: 13px;
  color: rgba(0,0,0,0.3);
  letter-spacing: 0.04em;
}

/* ── Content sections ─────────────────────────────────────── */


.section {
  max-width: 720px;
  margin-bottom: var(--gap-section);
}

.section h2 { margin-bottom: 12px; }

.section p {
  margin-bottom: 12px;
}

/* ── Image blocks ─────────────────────────────────────────── */

.img-full {
  width: 100%;
  overflow: hidden;
  background: #F4F4F4;
  margin-bottom: var(--gap-section);
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-full img { width: 100%; display: block; }

.img-row {
  display: grid;
  gap: 24px;
  margin-bottom: var(--gap-section);
}

.img-row.col-2 { grid-template-columns: repeat(2, 1fr); }
.img-row.col-3 { grid-template-columns: repeat(3, 1fr); }

.img-row-item {
  background: #F4F4F4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}

.img-row-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-placeholder {
  font-size: 13px;
  color: rgba(0,0,0,0.3);
  letter-spacing: 0.04em;
}

/* ── Two-col layout ───────────────────────────────────────── */

.two-col {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--gap-cols);
  margin-bottom: var(--gap-section);
  align-items: start;
}

/* ── Mobile ───────────────────────────────────────────────── */

@media (max-width: 800px) {
  .img-row.col-2,
  .img-row.col-3 { grid-template-columns: 1fr; }
  .two-col       { grid-template-columns: 1fr; }
}