/* =========================================================
   Cove Craft — Project detail page (pure HTML/CSS layout, no SVG canvas)
   Layered on top of base.css + home.css. Each section flows naturally;
   the design is responsive at every viewport.
   ========================================================= */

html, body { background: #000; }

/* Override the home page canvas / .page styles when on project page so
   nothing here gets the "absolute over a fixed-aspect canvas" treatment. */
.page--project-flow main.proj-flow {
  position: relative;
  display: block;
  background: #000;
  color: #ffffff;
  padding: 24px clamp(20px, 4vw, 80px) 0;
  max-width: 1920px;
  margin: 0 auto;
  /* Big-canvas reservation removed — content sets its own height */
}

/* ---------- TOP NAV — back arrow + hamburger ----------
   Lives inside .topnav (a flex row), so no absolute positioning here.
   Sits naturally to the left of the burger with the flex gap between
   them, preventing the previous "pinched burger" overlap. */
.topnav__back {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 20px;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 200ms ease, border-color 200ms ease;
}
.topnav__back:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
}

/* ---------- LOGO (top-left) ---------- */
.proj-flow__logo {
  display: inline-block;
  margin-bottom: clamp(20px, 3vw, 60px);
}
.proj-flow__logo img {
  display: block;
  width: clamp(60px, 6vw, 110px);
  height: auto;
}

/* ---------- HEADER STRIP — title + thumb ---------- */
.proj-flow__header {
  display: grid;
  grid-template-columns: 1fr clamp(140px, 16vw, 240px);
  gap: clamp(24px, 4vw, 80px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 100px);
}
.proj-flow__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 22px);
  max-width: 720px;
}
.proj-flow__thumb {
  width: 100%;
  aspect-ratio: 1 / 1.4;
  border-radius: 14px;
  overflow: hidden;
  background: #0e1418;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}

/* ---------- BADGE (PROJECT, CONTACT) ---------- */
.proj-badge {
  display: inline-block;
  padding: 0.45em 1.1em;
  border: 1px solid var(--green, #22e07a);
  border-radius: 999px;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 0.9vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green, #22e07a);
  background: transparent;
  white-space: nowrap;
  align-self: flex-start;
  width: fit-content;
}

/* ---------- TITLE ---------- */
.proj-title {
  margin: 0;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: #ffffff;
}

/* ---------- SUBTITLE — uppercase metadata ---------- */
.proj-subtitle {
  margin: 0;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 1.0vw, 14px);
  line-height: 1.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- MISSION PARAGRAPH ---------- */
.proj-mission {
  margin: 0;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
  max-width: 56ch;
}

/* ============================================================
   GALLERY — multi-tier grid layout
   ============================================================ */
.proj-flow__gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 36px);
  margin-bottom: clamp(60px, 8vw, 140px);
}
.proj-flow__row {
  display: grid;
  gap: clamp(16px, 2vw, 36px);
}
/* Tier 1 — uneven two-col: ~1fr left, ~1.7fr right */
.proj-flow__row--uneven {
  grid-template-columns: 1fr 1.7fr;
  align-items: end;
}
/* Tier 3 — split: small image left, text right */
.proj-flow__row--split {
  grid-template-columns: 1fr 1.7fr;
  align-items: center;
}

/* ---------- IMAGE TILES ---------- */
.proj-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e1418;
  background-size: cover;
  background-position: center;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 28px rgba(0, 0, 0, 0.45);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.proj-tile:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 24px 44px rgba(0, 0, 0, 0.55);
}

/* Aspect-ratio shape variants — sized via aspect-ratio so images scale
   cleanly without fixed heights. */
.proj-tile--small { aspect-ratio: 1 / 1; }
.proj-tile--tall  { aspect-ratio: 1.45 / 1; }
.proj-tile--hero  { aspect-ratio: 16 / 9; width: 100%; }

/* Placeholder label rendered when no real background-image is set yet */
.proj-tile__placeholder {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  pointer-events: none;
}
/* Hide placeholder once a real background-image is supplied via inline style */
.proj-tile[style*="background-image"] .proj-tile__placeholder { display: none; }

/* When a video populates a tile, hide the placeholder and make the video
   fill the tile edge-to-edge. */
.proj-tile--video .proj-tile__placeholder { display: none; }
.proj-tile--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- DETAIL TEXT BLOCK (pairs with a small image tile) ---------- */
.proj-detail-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(12px, 1.0vw, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  max-width: 60ch;
}
.proj-detail-text p { margin: 0; }

/* ============================================================
   CONTACT BAND
   ============================================================ */
.proj-flow__contact {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(40px, 6vw, 100px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.proj-contact-title {
  margin: 0;
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #ffffff;
  max-width: 18ch;
}

/* Contact form — reuse base.css styling, override layout for flow */
.proj-flow__contact .contact-form {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: auto;
}
.proj-flow__contact .cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.proj-flow__contact .cf-foot {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

/* ============================================================
   FOOTER WORDMARK — big "covecraft" gradient text
   ============================================================ */
.proj-flow__footer {
  padding: clamp(20px, 3vw, 60px) 0 0;
  text-align: center;
  /* No scrollbar can ever leak out of here. */
  overflow: clip;
}

/* ----------------------------------------------------------------
   FOOTER WORDMARK
   The home page renders its big "cove craft" wordmark inside
   assets/ref/home.svg (viewBox 1920×10099) at the very bottom. We
   reuse that exact band on every project / work page so the brand
   wordmark is consistent.

   Strategy: render the full SVG via an <img>, anchor it to the
   bottom of a clipped container sized to expose only the wordmark
   band (~700 native units = ~6.9% of the 10099 height).
   ---------------------------------------------------------------- */
.proj-flow__wordmark {
  position: relative;
  display: block;
  width: 100%;
  /* Width-to-band ratio chosen to expose the entire bottom wordmark
     band of home.svg without clipping the contact band above it. */
  aspect-ratio: 1920 / 700;
  overflow: hidden;
  pointer-events: none;
}
.proj-flow__wordmark-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;        /* preserve the SVG's native aspect (10099/1920) */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================================
   RESPONSIVE — phone
   ============================================================ */
@media (max-width: 768px) {
  .topnav__back {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  /* Header collapses to single column on phone */
  .proj-flow__header {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .proj-flow__thumb {
    aspect-ratio: 1.4 / 1;
    max-width: 240px;
  }

  /* Gallery rows: keep uneven 2-col but tighter ratio on phone */
  .proj-flow__row--uneven { grid-template-columns: 1fr 1.4fr; }
  .proj-flow__row--split  { grid-template-columns: 1fr; gap: 14px; }

  .proj-title          { font-size: clamp(28px, 9vw, 48px); }
  .proj-subtitle       { font-size: clamp(10px, 2.6vw, 13px); }
  .proj-mission        { font-size: clamp(13px, 3.6vw, 18px); }
  .proj-contact-title  { font-size: clamp(24px, 7vw, 40px); }
  /* On phones the band looks better a touch shorter so the SVG
     wordmark renders larger relative to the slice. */
  .proj-flow__wordmark { aspect-ratio: 1920 / 600; }

  .proj-flow__contact .cf-row {
    grid-template-columns: 1fr;
  }
  .proj-flow__contact .cf-foot {
    flex-wrap: wrap;
  }
}

/* Hide the home-page canvas styles if any leak through */
.page--project-flow .page__canvas { display: none; }
.page--project-flow .page          { background: transparent; }