/* ============================================================
   PROJECT DETAIL PAGE — project.css
   Extends style.css + mobile.css — no token duplication.
   Used by: work/butterfly-chrome/, work/casita-verde/, etc.
   ============================================================ */

/* ── PROJECT HERO ───────────────────────────────────────────
   Full-viewport hero: large background image + dark overlay.
   Content sits in the lower-left with editorial spacing.
──────────────────────────────────────────────────────────── */
.project-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy);
}

/* Background image layer */
.project-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.project-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transform-origin: center;
  will-change: transform;
}

/* Navy gradient overlay — denser at bottom for text legibility */
.project-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 26, 79, 0.25) 0%,
      rgba(0, 26, 79, 0.40) 40%,
      rgba(0, 26, 79, 0.80) 80%,
      rgba(0, 26, 79, 0.95) 100%
    );
}

/* Content container positioned over overlay */
.project-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(100px, 14vw, 160px) var(--gutter) clamp(64px, 8vw, 112px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-end;
  gap: clamp(24px, 3vw, 48px);
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Left column: project name + headline */
.project-hero-left {}

.project-hero-eyebrow {
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: clamp(12px, 1.5vw, 20px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-hero-title {
  font-family: var(--display);
  font-size: clamp(52px, 8vw, 128px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: clamp(16px, 2vw, 28px);
}

.project-hero-subtitle {
  font-family: var(--body);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(248, 247, 243, 0.6);
  line-height: 1.4;
}

/* Right column: tagline */
.project-hero-right {
  padding-bottom: clamp(4px, 0.5vw, 8px);
}

.project-hero-tagline {
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 34px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  color: rgba(248, 247, 243, 0.8);
  border-left: 2px solid var(--cyan);
  padding-left: clamp(20px, 2vw, 32px);
}

/* Scroll cue */
.project-hero-scroll {
  position: absolute;
  bottom: clamp(24px, 3vw, 40px);
  right: var(--gutter);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.45;
}

.project-hero-scroll span {
  font-family: var(--body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  writing-mode: vertical-lr;
}

.project-hero-scroll-line {
  width: 1px;
  height: 48px;
  background: var(--white);
  animation: scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* ── PROJECT META BAR ───────────────────────────────────────
   Horizontal strip below hero: Client · Services · Year
──────────────────────────────────────────────────────────── */
.project-meta {
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.project-meta-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.project-meta-item {
  padding: clamp(20px, 2.5vw, 36px) clamp(16px, 2vw, 28px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.project-meta-item:first-child {
  padding-left: 0;
}

.project-meta-item:last-child {
  border-right: none;
  padding-right: 0;
}

.project-meta-label {
  font-family: var(--body);
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(248, 247, 243, 0.4);
  margin-bottom: 8px;
}

.project-meta-value {
  font-family: var(--body);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 500;
  color: var(--cream);
  line-height: 1.3;
}


/* ── PROJECT INTRO / RESULTS SECTIONS ───────────────────────
   Two-column editorial text layout.
   Left: sticky label area. Right: heading + body.
──────────────────────────────────────────────────────────── */
.project-section {
  background: var(--white);
  padding: clamp(72px, 9vw, 140px) var(--gutter);
}

.project-section--dark {
  background: var(--navy);
}

.project-section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.project-section-label-wrap {
  padding-top: clamp(6px, 0.5vw, 10px);
}

.project-section-num {
  font-family: var(--display);
  font-size: clamp(80px, 10vw, 140px);
  font-weight: 700;
  line-height: 0.85;
  color: rgba(0, 26, 79, 0.07);
  letter-spacing: -0.04em;
  display: block;
  margin-bottom: -0.2em;
  user-select: none;
}

.project-section--dark .project-section-num {
  color: rgba(248, 247, 243, 0.05);
}

.project-section-tag {
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cobalt);
}

.project-section--dark .project-section-tag {
  color: var(--cyan);
}

.project-section-right {}

.project-section-heading {
  font-family: var(--display);
  font-size: clamp(32px, 3.8vw, 58px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: clamp(20px, 2.5vw, 36px);
}

.project-section--dark .project-section-heading {
  color: var(--cream);
}

.project-section-body {
  font-family: var(--body);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--grey);
  max-width: 58ch;
}

.project-section--dark .project-section-body {
  color: rgba(248, 247, 243, 0.65);
}

/* Services tag list below body copy */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(24px, 2.5vw, 36px);
}

.project-tag {
  font-family: var(--body);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt);
  background: rgba(0, 49, 163, 0.08);
  border: 1px solid rgba(0, 49, 163, 0.2);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
}


/* ── FULL-BLEED IMAGE ───────────────────────────────────────
   Container holds an explicit height — the img is absolutely
   positioned at 120% tall so parallax translate never shows
   the background behind it. JS only sets transform, never
   height/marginTop, so no layout reflow on scroll.
   Side padding keeps images inset from the viewport edges,
   consistent with the content section gutters.
──────────────────────────────────────────────────────────── */
.project-img-full {
  position: relative;
  margin: 0 var(--gutter); /* no bottom margin — spacing driven by margin-top selectors below */
  height: clamp(320px, 55vw, 820px);
  overflow: hidden;
  border-radius: clamp(10px, 1.2vw, 18px);
}

.project-img-full img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
}

.project-img-full--tall {
  height: clamp(480px, 70vw, 1040px);
}

.project-img-full--short {
  height: clamp(240px, 38vw, 560px);
}

/* Contained image (with breathing room) */
.project-img-contained {
  background: var(--light-blue);
  padding: clamp(40px, 5vw, 80px) var(--gutter);
}

.project-img-contained img {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}


/* ── IMAGE GRID ─────────────────────────────────────────────
   Two-up image grid with optional asymmetric sizing
──────────────────────────────────────────────────────────── */
.project-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 0.6vw, 10px);
  line-height: 0;
  margin: 0 var(--gutter); /* no bottom margin — spacing driven by margin-top selectors below */
}

.project-img-grid--asymmetric {
  grid-template-columns: 0.65fr 1.35fr;
}

.project-img-grid-item {
  overflow: hidden;
  position: relative;
  border-radius: clamp(10px, 1.2vw, 18px);
}

.project-img-grid-item img {
  width: 100%;
  height: clamp(280px, 40vw, 640px);
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.9s var(--ease);
}

.project-img-grid-item:hover img {
  transform: scale(1.025);
}

/* Three-column grid variant */
.project-img-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.project-img-grid--three .project-img-grid-item img {
  height: clamp(200px, 28vw, 480px);
}


/* ── PROJECT NEXT ───────────────────────────────────────────
   Editorial "next project" transition panel
──────────────────────────────────────────────────────────── */
.project-next {
  background: var(--navy);
  padding: clamp(64px, 8vw, 120px) var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.project-next-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.project-next-label {
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248, 247, 243, 0.4);
  margin-bottom: clamp(12px, 1.5vw, 20px);
}

.project-next-title {
  font-family: var(--display);
  font-size: clamp(52px, 7vw, 104px);
  font-weight: 400;
  font-style: italic;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: clamp(20px, 2.5vw, 36px);
  transition: color 0.3s ease;
}

.project-next-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  transition: gap 0.3s ease;
}

.project-next-link svg {
  transition: transform 0.3s ease;
}

.project-next-link:hover {
  gap: 16px;
}

.project-next-link:hover svg {
  transform: translateX(4px);
}

.project-next-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
}

.project-next-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.9s var(--ease);
  filter: grayscale(1) brightness(0.88) sepia(1) hue-rotate(185deg) saturate(4.5);
}

.project-next:hover .project-next-img img {
  transform: scale(1.04);
}

.project-next:hover .project-next-title {
  color: var(--cyan);
}

.project-next-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 49, 163, 0.3);
  transition: opacity 0.4s ease;
}

.project-next:hover .project-next-img-overlay {
  opacity: 0.15;
}


/* ── CTA PARALLAX BG ────────────────────────────────────────
   Mirrors about.css + work.css — must be in project.css too
   since that page-specific stylesheet isn't loaded here.
──────────────────────────────────────────────────────────── */
.cta-bg-parallax {
  position: absolute;
  inset: -20% 0;
  z-index: 0;
}

.cta-bg-parallax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.5;
}


/* ── IMAGE SPACING — all driven by margin-top selectors ─────
   One value for "outer" gaps (section ↔ image, image → next),
   one for "inner" gaps (consecutive image blocks).
   No margin-bottom on image blocks so there's never an
   asymmetry between top and bottom of an image group.
──────────────────────────────────────────────────────────── */

/* Outer gap: section → image */
.project-section + .project-img-full,
.project-section + .project-img-grid {
  margin-top: clamp(32px, 4vw, 56px);
}

/* Outer gap: image → section */
.project-img-full + .project-section,
.project-img-grid + .project-section {
  margin-top: clamp(32px, 4vw, 56px);
}

/* Outer gap: last image → next-project panel */
.project-img-full + .project-next,
.project-img-grid + .project-next {
  margin-top: clamp(32px, 4vw, 56px);
}

/* Inner gap: consecutive image blocks stay tight */
.project-img-full + .project-img-grid,
.project-img-grid + .project-img-full,
.project-img-full + .project-img-full,
.project-img-grid + .project-img-grid {
  margin-top: clamp(6px, 0.6vw, 10px);
}


/* ── SECTION SPACERS ────────────────────────────────────────
   Thin colored dividers between sections
──────────────────────────────────────────────────────────── */
.project-divider {
  height: 1px;
  background: var(--border);
}

.project-divider--dark {
  background: rgba(255, 255, 255, 0.08);
}


/* ── REVEAL ANIMATIONS ──────────────────────────────────────
   Inherits .reveal / .in-view from main.js scroll observer
──────────────────────────────────────────────────────────── */
.project-hero-content .reveal {
  /* hero content animates slightly differently */
  transition-duration: 0.9s;
}


/* ── MOBILE ─────────────────────────────────────────────────
   Responsive breakpoints
──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .project-hero-content {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 32px);
    padding-top: 120px;
  }

  /* Scale container heights down on tablet */
  .project-img-full {
    height: clamp(260px, 50vw, 560px);
  }

  .project-img-full--tall {
    height: clamp(340px, 60vw, 680px);
  }

  .project-hero-right {
    border-left: none;
    padding-left: 0;
  }

  .project-hero-tagline {
    font-size: clamp(17px, 3.5vw, 24px);
    padding-left: clamp(14px, 2vw, 20px);
  }

  .project-meta-inner {
    grid-template-columns: 1fr 1fr;
  }

  .project-meta-item:nth-child(2) {
    border-right: none;
    padding-right: 0;
  }

  .project-meta-item:nth-child(1),
  .project-meta-item:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: clamp(16px, 2vw, 24px);
    margin-bottom: 0;
  }

  .project-meta-item:nth-child(3),
  .project-meta-item:nth-child(4) {
    border-right: none;
    padding-top: clamp(16px, 2vw, 24px);
  }

  .project-meta-item:nth-child(4) {
    border-right: none;
    padding-right: 0;
  }

  .project-section-inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
  }

  .project-section-num {
    display: none;
  }

  .project-img-grid {
    grid-template-columns: 1fr;
  }

  .project-img-grid--asymmetric {
    grid-template-columns: 1fr;
  }

  .project-img-grid--three {
    grid-template-columns: 1fr 1fr;
  }

  .project-img-grid--three .project-img-grid-item:last-child {
    display: none;
  }

  .project-next-inner {
    grid-template-columns: 1fr;
  }

  .project-next-img {
    order: -1;
    aspect-ratio: 16/9;
  }

  .project-next-title {
    font-size: clamp(36px, 8vw, 64px);
  }
}

@media (max-width: 600px) {
  .project-hero-title {
    font-size: clamp(44px, 13vw, 72px);
  }

  .project-meta-inner {
    grid-template-columns: 1fr 1fr;
  }

  /* Override the CONTAINER height on mobile — never the img height.
     The img is position:absolute at height:120%, so setting a px height
     on the img breaks the fill and creates white gaps inside the container. */
  .project-img-full {
    height: clamp(220px, 58vw, 380px);
  }

  .project-img-full--tall {
    height: clamp(280px, 70vw, 440px);
  }

  .project-img-grid-item img {
    height: clamp(200px, 55vw, 360px);
  }

  .project-img-grid--three {
    grid-template-columns: 1fr;
  }

  .project-img-grid--three .project-img-grid-item:last-child {
    display: block;
  }
}