/* moove.studio — Project page styles */

/* ─── PROJECT HERO (BASE — used by citroen, porsche, absolut) ─── */
.proj-hero {
  position: relative;
  height: 100svh; min-height: 600px;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  background: var(--dark);
  /* No overflow:hidden — media is clipped inside .proj-hero-video-wrap
     (contain:paint). Meta-bar uses bottom:-4px to cover GPU bleed. */
  padding-bottom: 0;
}

.proj-hero-media {
  position: absolute; inset: 0;
}
/* Video wrap — `contain: paint` strictly clips the GPU-promoted video
   so it cannot bleed past the wrapper during transformed scroll. The
   vignette nests inside this wrap so both ride the same compositor
   layer. See css/tokens.css MEDIA + OVERLAY ARCHITECTURE for the
   alternative .moove-player pattern. */
.proj-hero-video-wrap {
  position: absolute;
  inset: 0;
  contain: paint;
  overflow: hidden;
}
/* Freeze-frame overlay: shown from first paint when arriving via card zoom,
   covers the video until it has seeked to the synced timecode and can play.
   --hero-frame is set by the page head script from a canvas capture taken
   just before navigation; has-hero-frame class is removed by page-transition.js
   once the video fires canplay. Eliminates the black flash on zoom arrival. */
html.has-hero-frame .proj-hero-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Captured frame + same vignette gradient as .proj-hero-vignette so
     there's no visual pop when the overlay is removed and the real
     vignette div takes over. */
  background:
    linear-gradient(to top, rgba(8,12,16,.92) 0%, rgba(8,12,16,.4) 40%, transparent 70%),
    linear-gradient(to bottom, rgba(8,12,16,.5) 0%, transparent 30%),
    var(--hero-frame) center / cover no-repeat;
  z-index: 2;
  pointer-events: none;
}
/* Slate hero: video-wrap only covers the middle panel, so the top and
   bottom bars (60px each) are NOT covered by the video-wrap overlay above.
   Add a full-hero overlay so has-hero-frame hides the dark-bar pop on
   those strips too. position:absolute removes it from the flex flow. */
html.has-hero-frame .proj-hero--slate::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(8,12,16,.92) 0%, rgba(8,12,16,.4) 40%, transparent 70%),
    linear-gradient(to bottom, rgba(8,12,16,.5) 0%, transparent 30%),
    var(--hero-frame) center / cover no-repeat;
}
.proj-hero-media img,
.proj-hero-media video,
.proj-hero-video-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.proj-hero-placeholder {
  position: absolute; inset: 0;
  background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
}
.proj-hero-placeholder span {
  font: 400 11px/1 var(--sans);
  letter-spacing: .3em; text-transform: uppercase; color: var(--rule-alt);
  opacity: .5;
}
.proj-hero-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,12,16,.92) 0%, rgba(8,12,16,.4) 40%, transparent 70%),
    linear-gradient(to bottom, rgba(8,12,16,.5) 0%, transparent 30%);
  pointer-events: none;
}

.proj-hero-content {
  position: relative; z-index: 2;
  padding: var(--nav-h) var(--gutter) 0;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  padding-bottom: calc(5rem + 60px);
  max-width: 900px;
}

.proj-title {
  font-size: clamp(34px, 3.6vw, 58px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0; margin-top: 0.4rem;
}
.proj-subtitle {
  font-size: clamp(12px, 0.9vw, 16px);
  font-weight: 300;
  letter-spacing: 0.005em;
  line-height: 1.5;
  color: rgba(255,255,255,0.5);
}

/* ─── PROJECT META BAR ──────────────────────────────────────────────
   Footer strip at the bottom of the hero section.

   Standard .proj-hero: height is fixed at 100svh with overflow:hidden,
   and .proj-hero-content has flex:1 — so a flex child meta-bar gets
   pushed beyond the hero height and clipped. Solution: position absolute
   at bottom:0 so it sits inside the hero without affecting flex layout.

   Slate .proj-hero--slate: uses justify-content:stretch with three explicit
   flex children (top/body/bottom), so the meta-bar IS the third flex child
   and must NOT be absolute — the flex layout handles it correctly. */
.proj-meta-bar {
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,0.06);
  z-index: 2;
  animation: metaBarFadeIn 0.5s 0.4s backwards;
}
@keyframes metaBarFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* All project heroes: meta-bar anchored to bottom as an overlay.
   bottom:-4px lets the dark background bleed 4px below the section
   boundary, covering any GPU compositing bleed from hero media. */
.proj-hero .proj-meta-bar,
.s3-hero .proj-meta-bar,
.smeg-sequence .proj-meta-bar {
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  z-index: 10;
}
.proj-meta-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;       /* always one row */
  gap: clamp(1.5rem, 4vw, 6rem);
  min-height: 60px;        /* grows if a value wraps */
  padding-block: 0.75rem;
}
.proj-meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;            /* allow flex children to shrink */
}
.proj-meta-label {
  font: 500 9px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
}
.proj-meta-value {
  font: 300 13px/1.35 var(--sans);  /* line-height 1.35 for clean wrapping */
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.75);
}
/* Mobile: CSS grid gives perfectly equal columns regardless of content width */
@media (max-width: 600px) {
  .proj-meta-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    gap: 0;
    padding-block: 1rem;
    min-height: auto;
  }

  /* Each column: label top, value below, top-aligned */
  .proj-meta-item { align-items: flex-start; }

  /* Left / centre / right alignment for visual rhythm */
  .proj-meta-item:nth-child(1) { text-align: left; }
  .proj-meta-item:nth-child(2) { text-align: center; align-items: center; }
  .proj-meta-item:nth-child(3) { text-align: right;  align-items: flex-end; }

  .proj-meta-value { line-height: 1.4; }
}

/* ─── PROJECT HERO — SOFT SLATE CINEMATIC (Rivella only) ──────────
   Overrides the base layout: removes flex-end + 900px gutter, adds
   video fills the full hero height, title block is centered. */
.proj-hero--slate {
  justify-content: stretch;
  padding-bottom: 0;
}


.proj-hero--slate .proj-slate-body {
  position: relative;
  flex: 1;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Centered title block — overrides base .proj-hero-content layout */
.proj-hero--slate .proj-slate-content {
  position: relative; z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Blue accent bar — reuses base .proj-accent-bar (32×2 px, accent
   color, glow — already defined later in this file). The slate
   variant just needs to neutralize the top margin since the bar is
   the first item in a centered flex column (no element above it). */
.proj-hero--slate .proj-accent-bar {
  margin-top: 0;
}

/* Kicker label — overridden to white for legibility on the busy
   video background. The blue accent already lives in the bar above,
   so two stacked blue elements would be redundant; white gives a
   cleaner hierarchy (blue bar → white kicker → title). */
.proj-hero--slate .label {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
}

/* Title — large, mixed-case, refined (overrides base .proj-title) */
.proj-hero--slate .proj-title {
  font-size: clamp(48px, 5.5vw, 88px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 24px 0;
}

/* Subtitle — committed bigger so it actually reads */
.proj-hero--slate .proj-subtitle {
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.7);
  max-width: 540px;
  margin: 0;
}


/* Bottom letterbox credit line — single line, uppercase tracked */

/* ─── PROJECT SECTIONS ─── */
.proj-section {
  padding-block: clamp(4rem,8vw,7rem);
  background: var(--dark);
  border-top: 1px solid var(--rule);
}
.proj-section--dark { background: var(--charcoal); }

.proj-section-title {
  font-size: var(--t-h1);
  font-weight: var(--fw-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.proj-body {
  font-size: var(--t-body-lg);
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  max-width: 540px;
}
.proj-body + .proj-body { margin-top: 1rem; }

.proj-intro { max-width: 720px; }
.proj-intro-text { }

/* Grids */
.proj-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; margin-bottom: 2px;
}
.proj-img-wrap {
  overflow: hidden; background: var(--charcoal);
  aspect-ratio: 16/9;
}
.proj-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.proj-img-wrap:hover img { transform: scale(1.03); }

.proj-img-full {
  overflow: hidden; background: var(--charcoal);
  aspect-ratio: 21/9;
}
.proj-img-full img {
  width: 100%; height: 100%; object-fit: cover;
}

.proj-video-wrap {
  aspect-ratio: 16/9; overflow: hidden; background: var(--charcoal);
}
.proj-video-wrap video { width: 100%; height: 100%; object-fit: cover; }

/* Split layout */
.proj-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,6vw,6rem); align-items: center;
}
.proj-split--reverse { direction: rtl; }
.proj-split--reverse > * { direction: ltr; }

/* Before/After */
.proj-before-after {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.proj-ba-item { position: relative; overflow: hidden; }
.proj-ba-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; }

/* Full-bleed variant — breaks out of the centred .container so the
   side-by-side pair spans the entire viewport width (used on Citroën C3).
   left:50% + margin-left:-50vw works regardless of container padding
   because the container is horizontally centred (its centre == viewport
   centre). When a vertical scrollbar is present, 100vw overshoots the
   content area by the scrollbar width — but #smooth-wrapper and body both
   set overflow-x:hidden, which clips the overshoot so it can never produce
   a horizontal scrollbar. */
.proj-before-after--full {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}
.proj-ba-label {
  position: absolute; bottom: 1rem; left: 1.25rem;
  font: 800 9px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--blue-hi);
}

/* ─── CTA ─── */
.proj-cta-section {
  background: var(--dark);
  /* No border-top — was `1px solid var(--rule)` (#2a2a3a), which
     painted a brighter line directly under the breakdown player and
     was misdiagnosed for weeks as "video bleed". Sections flow
     seamlessly into the CTA against the page background instead. */
  padding-block: clamp(7rem, 15vw, 13rem);
  text-align: center;
}
.proj-cta {
  max-width: 900px;
  margin: 0 auto;
}
.proj-cta-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: var(--fw-h1);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 3rem;
  margin-top: 1rem;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .proj-grid-2 { grid-template-columns: 1fr; }
  .proj-img-full { aspect-ratio: 16/9; }
  .proj-split { grid-template-columns: 1fr; }
  .proj-split--reverse { direction: ltr; }
  .proj-before-after { grid-template-columns: 1fr; }
}

/* ── Service bar — decorative accent line above section headings ────────
   Height and base colour here; pages override colour via inline style. */
.service-bar {
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* ═══ COMBINED CONTENT BLOCK — editorial + breakdown as one tile ═══
   Two rows stacked flush with NO gap between them. Forms a single
   visual unit on the page rather than two separate sections.
   `margin-top: -1px` closes the 1-2px sub-pixel gap that can appear
   between proj-hero and this section during transformed scroll,
   ensuring the editorial text column meets the meta bar flush. */
.proj-content-block {
  display: flex;
  flex-direction: column;
  margin-top: -1px;
  position: relative;
  z-index: 1;
}

/* ── Row 1: narrow text + packshots player ─────────────────────────── */
.proj-editorial {
  display: grid;
  /* Narrower text column proportional to the mockup (~23% of width)
     gives the player ~77% — more cinematic, less cramped. */
  grid-template-columns: minmax(0, clamp(220px, 22vw, 360px)) 1fr;
  align-items: stretch;
  min-height: 58vh;
}

.proj-editorial__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--dark);
  padding: clamp(2rem, 3vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
}

/* Blue accent bar — uses --accent (#0095FF) by default. Smaller and
   more refined than before, matching the mockup proportions. */
.proj-accent-bar {
  width: 32px;
  height: 2px;
  background: var(--accent, #0095ff);
  box-shadow: 0 0 14px rgba(0, 149, 255, 0.55);
  margin-top: 1rem;
  margin-bottom: 1.4rem;
}

.proj-editorial__heading {
  font-size: clamp(2.25rem, 4.4vw, 4.4rem);
  font-weight: 100;          /* extra-thin — Helvetica Neue UltraLight */
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}

.proj-editorial__body {
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.45);
}

.proj-editorial__player {
  display: flex;
  flex-direction: column;
}

/* Stretch the player to fill the column height, ignoring 16:9 aspect ratio.
   Remove border-radius so it sits flush with the text column on the left
   and the breakdown row below it. Keep the inset 2px black ring (covers
   sub-pixel video bleed at the edges) — only drop the OUTER drop-shadow. */
.proj-editorial__player .moove-player {
  flex: 1;
  aspect-ratio: unset !important;
  max-width: none;
  min-height: 360px;
  border-radius: 0;
  box-shadow: none;
  /* NO clip-path. clip-path: inset(0) creates a new compositing
     context that breaks the assumption that overflow:hidden on the
     plain parent does the clipping. Letting the natural overflow do
     its job matches the working homepage hero structure. */
}

/* ── Row 2: full-width breakdown player, flush below editorial row ─── */
.proj-breakdown-row {
  /* No padding — fills the full viewport width */
}

.moove-player--wide {
  /* Ultra-wide ratio for a cinematic finale — matches v4 mockup */
  aspect-ratio: 16 / 6 !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* NO clip-path — see comment on .proj-editorial__player .moove-player.
     Plain overflow:hidden on .moove-player handles the clipping. */
  width: 100%;
}

/* "The breakdown." label as an overlay on the breakdown player */
.proj-breakdown-overlay {
  position: absolute;
  bottom: 1.5rem;
  left: 1.75rem;
  font: 400 0.75rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.proj-breakdown-overlay::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

@media (max-width: 900px) {
  .proj-editorial {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .proj-editorial__player .moove-player {
    aspect-ratio: 16 / 9 !important;
    height: auto;
    flex: none;
    min-height: 0;
  }
  .proj-editorial__heading {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }
  .moove-player--wide {
    aspect-ratio: 16 / 9 !important;
  }
}

/* ─── NEXT PROJECT STRIP ─────────────────────────────────────── */
.proj-next {
  display: block;
  background: var(--dark);
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.35s ease;
}
.proj-next:hover {
  background: rgba(255,255,255,0.02);
}
.proj-next-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  gap: 2rem;
}
.proj-next-text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.proj-next-title {
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  transition: opacity 0.25s ease;
}
.proj-next:hover .proj-next-title {
  opacity: 0.75;
}
.proj-next-arrow {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  transition: border-color 0.3s ease, transform 0.35s var(--ease), background 0.3s ease, color 0.3s ease;
}
.proj-next:hover .proj-next-arrow {
  border-color: rgba(55,115,230,0.6);
  background: rgba(55,115,230,0.1);
  color: rgba(255,255,255,0.9);
  transform: translateX(8px);
}
.proj-next-arrow svg {
  width: 18px;
  height: 18px;
}