/* ============================================================================
   PROJECT PAGE STYLES
   Used alongside styles.css. All block classes start `.pp-` so they translate
   cleanly to WordPress (ACF Flexible Content / Gutenberg patterns later).
   ============================================================================ */

/* ------------------------------------------------------ HERO with video */
/* 35% shorter than homepage hero (62vh → 40.3vh, 380px → 247px). */
.pp-hero{
  height:40.3vh;
  min-height:247px;
  position:relative;
  z-index:0;
  overflow:hidden;
  background:#000;
}
/* Position absolute so that top/height percentages are relative to the
   hero's HEIGHT (not its width). 20% extra height gives 10% buffer on each
   side for the parallax translateY without ever exposing the black bg. */
.pp-hero video,
.pp-hero img{
  position:absolute;
  top:-10%;
  left:0;
  width:100%;
  height:120%;
  object-fit:cover;
  object-position:center center;
}

/* ------------------------------------------------------------- HEADLINE */
.pp-headline-section{
  padding:7.575rem calc(var(--side-pad) * 1.15) 0;
  text-align:center;
}
/* No-hero variant: adds nav-clearance padding instead of hero overlap */
.pp-headline-section--no-hero{
  padding-top:11rem;
}
.pp-hd-break{ display:inline }
@media (min-width:1630px){
  .pp-hd-break{ display:block }
}

.pp-headline{
  font-family:'Azeret Mono',monospace;font-weight:400;
  /* Same clamp as homepage .headline so it shrinks identically on mobile. */
  font-size:clamp(24.5px,3.5vw,47.5px);line-height:1.25;color:var(--dark);
  /* 24px matches homepage .headline margin-bottom; 8px extra matches the
     action-link's own margin-top on the homepage (total 32px gap). */
  margin-bottom:32px;
}
/* Client name below the headline — same font/treatment as the homepage
   action-link buttons ("SAY HELLO", "HOW IT WORKS"). */
.pp-client-label{
  display:block;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(18px,1.82vw,26px);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--dark);
}

/* ---------------------------------------------------------- IMAGE BLOCKS */
/* All image blocks live within the page side margins (var(--side-pad)). */
.pp-images{
  padding:0 var(--side-pad);
  margin-top:6rem;
}
/* Headline → first images: match homepage projects gap (7.575rem). */
.pp-headline-section + .pp-images{
  margin-top:7.575rem;
}
/* Consecutive image blocks (e.g. full image directly above a pair) sit
   slightly closer than text↔image transitions to match visual rhythm. */
.pp-images + .pp-images{
  margin-top:3rem;
}
/* Extra bottom space on main so the parallax-lifted post-edge never
   slides the jagged edge over the content above it.
   Max parallax lift is 120px + jagged edge height ~50px + breathing room.
   Uses max() so the floor holds at small/short viewports too. */
.pp-main{
  padding-bottom:max(24vh, 220px);
}

/* Two images side by side; stacks on small viewports. */
.pp-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}
.pp-pair img,
.pp-full img{
  display:block;width:100%;height:auto;
  border-radius:clamp(6px,0.7vw,12px);
}
.pp-pair video,
.pp-full video{
  display:block;width:100%;height:auto;
  border-radius:clamp(6px,0.7vw,12px);
}
.pp-full .iframe-wrap{
  width:100%;
  aspect-ratio:16/9;
  border-radius:clamp(6px,0.7vw,12px);
  overflow:hidden;
}
.pp-full .iframe-wrap iframe{
  display:block;width:100%;height:100%;
  border:none;
}
@media (max-width:768px){
  .pp-pair{grid-template-columns:1fr}
  .pp-images + .pp-images{margin-top:1.5rem}
}

/* ------------------------------------------------------ 2-COLUMN BODY TEXT
   Mirrors proc-cols on the process page. Wrap two sibling elements in
   .pp-cols to split them left/right. Remove the wrapper to revert. */
.pp-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,6rem);
  align-items:start;
}
@media (max-width:768px){
  .pp-cols{grid-template-columns:1fr; row-gap:1.08em}
}
/* When body text uses 2 cols it spans to the image edge (var(--side-pad)),
   overriding the narrower multiplied padding of .pp-text-section. */
.pp-text-section:has(.pp-cols){
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
}

/* ------------------------------------------------------ BODY TEXT BLOCK */
/* Narrower than images: extra horizontal padding on top of side-pad.
   padding-bottom is 0 — the gap below text is supplied by the next
   element's margin-top so it stays symmetrical. */
.pp-text-section{
  padding:6rem calc(var(--side-pad) * 2.3) 0;
}
.pp-text-section p + p{margin-top:1em}
.pp-text{
  font-family:'Azeret Mono',monospace;font-weight:400;
  font-size:clamp(18.4px,1.645vw,25.3px);
  line-height:1.5;
  color:var(--dark);
  text-align:left;
}
.pp-text--light{color:white}
.pp-sec-title{
  display:block;
  margin-top:1.5em;
  margin-bottom:0.75em;
}
/* When a section title opens a text block (Execution, Outcomes) the 1.5em
   top margin is not needed — padding-top on the section already provides the gap.
   Same applies when the title is a direct child of a .pp-cols column, or the
   first child of a wrapper div inside .pp-cols. */
.pp-text-section > .pp-sec-title:first-child,
.pp-cols > .pp-sec-title:first-child,
.pp-cols > * > .pp-sec-title:first-child{
  margin-top:0;
}
/* Paragraphs have browser-default top margin; remove it when used as a
   column in .pp-cols so the first line aligns with the adjacent column.
   The higher-specificity selector (.pp-text-section .pp-cols > p) is needed
   to beat .pp-text-section p + p { margin-top: 1em } (specificity 0,1,2). */
.pp-cols > p,
.pp-text-section .pp-cols > p{
  margin-top:0;
}
.pp-sec-title--light{color:white}
.pp-list{
  list-style:none;
  padding:0;
  margin:0;
}
.pp-list li{display:flex;gap:0.5em}
.pp-list li+li{margin-top:0.6em}
.pp-list li::before{content:'•';flex-shrink:0}

/* ------------------------ BLUE CONTENT (inside field-notes-style block) */
/* Override field-notes bottom padding so it equals the image→text gap (6rem).
   Override padding-top to add 30% more breathing room above the first image. */
.field-notes:has(.pp-blue-content){
  padding-top:3.49rem;
  padding-bottom:6rem;
}
.pp-blue-content{
  display:flex;
  flex-direction:column;
  gap:0;
}
.pp-blue-content .pp-images{margin-top:6rem}
@media (max-width:1440px){.pp-blue-content .pp-images{margin-top:4.2rem}}
@media (max-width:768px){.pp-blue-content .pp-images{margin-top:2.63rem}}
@media (max-width:480px){.pp-blue-content .pp-images{margin-top:2.1rem}}
/* Pull images/text out of field-notes' 1.15×side-pad so they match the
   white-section widths (section_w − 2×side-pad). */
.field-notes .pp-images{
  margin-left:calc(var(--side-pad) * -1.15);
  margin-right:calc(var(--side-pad) * -1.15);
}
.field-notes .pp-text-section{
  margin-left:calc(var(--side-pad) * -1.15);
  margin-right:calc(var(--side-pad) * -1.15);
}

/* --------------------------------------- CREDITS (reuse services-section) */
.pp-credits{
  padding-top:4.648rem;
  padding-bottom:4.648rem;
}


/* ------------------------------ MORE PROJECTS (reuse testimonials shell) */
/* Padding matches testimonials exactly. The footer's wave-top is position:absolute
   translateY(-100%) so it floats above the footer and overlaps this section's
   bottom by ~60px (the wave height at ≥620px). The testimonials' large
   padding-bottom (9.435rem) was sized to absorb that overlap and still leave
   the same visible gap as the top — pp-more must do the same. */
.pp-more{
  background:var(--cream);
  padding:5.81rem var(--side-pad) 9.435rem;
  position:relative;
  z-index:4;
  text-align:left;
}
/* Section label: identical treatment to testimonials / field-notes. */
.pp-more .sec-label{
  color:var(--blue);
  font-size:clamp(19.5px,2.1vw,27px);
  margin-bottom:2.5625rem;
}
/* Fixed pixel width so images stay the same size as viewport narrows.
   Right-side gap closes first; images only shrink when section < 960px. */
.pp-more-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  width:min(960px,100%);
  margin:0;
  align-items:start;
}
.pp-more-row .proj-item{
  display:block;
}
.pp-more-row .proj-img{
  aspect-ratio:715/667;
  border-radius:clamp(6px,0.7vw,12px);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1),box-shadow .35s;
}
.pp-more-row .proj-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.pp-more-row .proj-item:hover .proj-img{
  transform:translate(-7px,-7px) rotate(-.3deg);
  box-shadow:10px 10px 0 var(--blue);
}
/* Zero out the homepage stagger so both thumbnails share the same top edge. */
.pp-more-row .proj-right{margin-top:0}

/* ------------------------------------------------------ ALTERNATING SPLIT
   Used for portrait-image pages (e.g. cooking app).
   Alternates image-left/text-right and text-left/image-right.
   .pp-split--text-first reverses order; on mobile the image always stacks
   on top via order:-1 so the reading pattern stays consistent. */
.pp-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,6rem);
  padding:0 var(--side-pad);
  margin-top:6rem;
  align-items:start;
}
.pp-split img{
  display:block;width:100%;height:auto;
  border-radius:clamp(6px,0.7vw,12px);
}
.pp-split-text{ }
/* Section title inside a split row: no top margin (split padding provides gap) */
.pp-split-text > .pp-sec-title:first-child{ margin-top:0; }
@media (max-width:768px){
  .pp-split{ grid-template-columns:1fr; margin-top:3.75rem; }
  .pp-split--text-first img{ order:-1; }
}
@media (max-width:480px){
  .pp-split{ margin-top:3rem; }
}

/* ================================================================
   CUSTOM VIDEO PLAYER
   ================================================================ */
.vid-player{
  position:relative;
  border-radius:clamp(6px,0.7vw,12px);
  overflow:hidden;
  background:#000;
  cursor:pointer;
}
.vid-poster{
  display:block;width:100%;height:auto;
  /* Stays in layout always — provides the container height */
}
.vid-player video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s;
}
/* Active = video has started (playing or paused mid-way) */
.vid-player.is-active .vid-poster{ opacity:0; }
.vid-player.is-active video{ opacity:1;pointer-events:auto; }

/* Big centred play button — initial / ended state only */
.vid-big-play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;padding:0;cursor:pointer;
}
.vid-big-play svg{ width:72px;height:72px; filter:drop-shadow(0 2px 12px rgba(0,0,0,0.4)); }
.vid-player.is-active .vid-big-play{ display:none; }

/* Bottom controls bar — visible on hover once active */
.vid-controls{
  position:absolute;bottom:0;left:0;right:0;
  padding:3rem 1.25rem 1.1rem;
  background:linear-gradient(transparent,rgba(0,0,0,0.55));
  display:flex;align-items:center;gap:0.85rem;
  opacity:0;transition:opacity 0.25s;
  pointer-events:none;
}
.vid-player.is-active:hover .vid-controls{
  opacity:1;pointer-events:auto;
}
/* Toggle button */
.vid-toggle{
  background:none;border:none;padding:0;cursor:pointer;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
}
.vid-toggle svg{ width:24px;height:24px; }
/* Show play icon when paused, pause icon when playing */
.vid-icon-pause{ display:none; }
.vid-icon-play { display:block; }
.vid-player.is-playing .vid-icon-pause{ display:block; }
.vid-player.is-playing .vid-icon-play { display:none; }
/* Progress bar */
.vid-progress{
  flex:1;height:3px;
  background:rgba(255,255,255,0.35);
  border-radius:2px;overflow:hidden;cursor:pointer;
}
.vid-bar{
  height:100%;width:0;
  background:white;border-radius:2px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* ≤ 1024px
   Parallax still active. field-notes horizontal padding drops from 1.15× to
   1× side-pad (handled by styles.css), so correct escape margins to match. */
@media (max-width:1440px){
  .pp-images{margin-top:4.5rem}
  .pp-images + .pp-images{margin-top:2.5rem}
  .pp-text-section{padding:4.5rem calc(var(--side-pad) * 1.9) 0}
  .pp-credits{padding-top:4rem;padding-bottom:4rem}
  .field-notes:has(.pp-blue-content){padding-top:1.95rem}
  /* Correct the escape margins now that field-notes padding = 1× side-pad */
  .field-notes .pp-images{
    margin-left:calc(var(--side-pad) * -1);
    margin-right:calc(var(--side-pad) * -1);
  }
  .field-notes .pp-text-section{
    margin-left:calc(var(--side-pad) * -1);
    margin-right:calc(var(--side-pad) * -1);
  }
  /* visible bottom = padding-bottom − wave(60px≈3.75rem); target = top(4rem) */
  .pp-more{padding-top:4rem;padding-bottom:7.75rem}
}

/* ≤ 1200px — intermediate step to prevent padding from compressing text too early */
@media (max-width:1200px){
  .pp-text-section{padding-left:calc(var(--side-pad) * 1.6);padding-right:calc(var(--side-pad) * 1.6)}
}

/* ≤ 1024px — headline padding matches homepage; text side padding steps down */
@media (max-width:1024px){
  .pp-headline-section--no-hero{padding-top:8.5rem}
  .pp-headline-section{padding-top:5rem;padding-left:var(--side-pad);padding-right:var(--side-pad)}
  .pp-headline-section + .pp-images{margin-top:5rem}
  .pp-text-section{padding-left:calc(var(--side-pad) * 1.4);padding-right:calc(var(--side-pad) * 1.4)}
}

/* ≤ 768px
   Parallax disabled. Replace the large parallax buffer on pp-main with a
   normal section gap. +20% extra vs bare minimum for visual breathing room. */
@media (max-width:768px){
  .pp-main{padding-bottom:7.2rem}
  .pp-headline-section--no-hero{padding-top:6.5rem}
  .pp-headline-section{padding-top:3.75rem}
  .pp-headline-section + .pp-images{margin-top:3.75rem}
  .pp-images{margin-top:3.75rem}
  .pp-images + .pp-images{margin-top:1.5rem}
  .pp-text-section{padding:3.75rem var(--side-pad) 0}
  .pp-credits{padding-top:3rem;padding-bottom:3rem}
  .field-notes:has(.pp-blue-content){padding-top:1.14rem;padding-bottom:4.5rem}
  /* visible bottom = padding-bottom − wave(60px≈3.75rem); target = top(3rem) */
  .pp-more{padding-top:3rem;padding-bottom:6.75rem}
}

/* ≤619px: wave-top shrinks to 30px (1.875rem) — recalc bottom padding.
   visible bottom = padding-bottom − 1.875rem; target = top(3rem → 4.875rem) */
@media (max-width:619px){
  .pp-more{padding-bottom:4.875rem}
}

/* ≤ 480px */
@media (max-width:480px){
  .pp-main{padding-bottom:5.2rem}
  .pp-headline-section--no-hero{padding-top:5rem}
  .pp-headline-section{padding-top:2.5rem}
  .pp-headline-section + .pp-images{margin-top:2.5rem}
  .pp-images{margin-top:3rem}
  .pp-images + .pp-images{margin-top:1.5rem}
  .pp-text-section{padding-top:3rem}
  .pp-credits{padding-top:2rem;padding-bottom:2rem}
  .field-notes:has(.pp-blue-content){padding-top:0.68rem;padding-bottom:3rem}
  /* visible bottom = padding-bottom − wave(30px≈1.875rem); target = top(2rem) */
  .pp-more{padding-top:2rem;padding-bottom:4rem}
}