/* Project pages: the three layouts in inc/project-layouts.php.
   Loaded only on single projects. Classes here are used by
   template-parts/project/* and nowhere else. */

/* ---------- shared: the details ---------- */
.proj-facts-sec{padding-top:clamp(2.8rem,6vw,4.6rem)}
.proj-facts{margin:0}
.proj-facts dd{margin:0}
.proj-fact .eyebrow{display:block}
/* One line (Varsha's ask): each detail as wide as its content, spread across the
   page. If space runs out, long values wrap inside their own column first, so
   the row itself stays a row. */
.proj-facts--row{display:grid;grid-auto-flow:column;grid-auto-columns:auto;justify-content:space-between;
  column-gap:clamp(1.6rem,3.5vw,4rem);padding:1.7rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proj-facts--row dd{margin-top:.55rem;font-size:1.02rem;color:var(--ink)}
.proj-facts--list{display:grid;border-top:1px solid var(--line);margin-top:clamp(1.8rem,4vh,2.6rem)}
.proj-facts--list .proj-fact{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.proj-facts--list dd{font-size:1rem;color:var(--ink)}

/* ---------- shared: the story, left-aligned (was centred) ---------- */
.proj-prose{text-align:left;max-width:64ch}
.proj-prose p{margin:0 0 1.2em;color:var(--ink-soft);font-weight:300;font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.85}
.proj-prose p:first-child{font-family:'Prata',serif;font-weight:400;color:var(--ink);
  font-size:clamp(1.15rem,1.6vw,1.38rem);line-height:1.6;margin-bottom:1.1em}
.proj-prose p:last-child{margin-bottom:0}

/* ---------- classic ---------- */
.proj-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:clamp(1.6rem,6vw,6rem);align-items:start}
.proj-split > .eyebrow{padding-top:.6rem}

/* ---------- editorial ---------- */
.proj-ed-open{padding:clamp(8.5rem,15vh,11rem) 0 clamp(2rem,5vw,4rem)}
.proj-ed-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.proj-ed-intro h1{font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1.05;font-weight:400;color:var(--ink);margin-top:1.2rem}
.proj-ed-lede{margin-top:1.4rem;color:var(--ink-soft);font-weight:300;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.75;max-width:44ch}
.proj-ed-cover .imgwrap{aspect-ratio:5/4}
.proj-ed-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.proj-ed-cols.no-story{grid-template-columns:1fr}
/* the story stays in view while the photos scroll past. Its column must STRETCH
   to the photos' height: sticky only travels within its parent, and a
   top-aligned column is exactly as tall as the story, so it had nowhere to go. */
.proj-ed-story{align-self:stretch}
.proj-ed-sticky{position:sticky;top:clamp(7rem,12vh,8.5rem)}
.proj-ed-sticky .eyebrow{display:block;margin-bottom:1.4rem}
.proj-ed-photos{display:grid;gap:clamp(1rem,2vw,1.6rem)}
/* each photo at its own proportions, uncropped */
.proj-ed-fig .imgwrap{aspect-ratio:auto}
.proj-ed-fig img{height:auto}

/* ---------- gallery ---------- */
.proj-hero--center .hero-content{top:50%;bottom:auto;transform:translateY(-42%)}
.proj-hero--center .hero-content .container{align-items:center;text-align:center}
.proj-hero--center h1{margin:0 auto}
.proj-hero--center .hero-content p{margin-left:auto;margin-right:auto}
.proj-gal-story .container{max-width:1120px}
.proj-gal-lede{font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.42;color:var(--ink);max-width:36ch;text-align:left}
.proj-gal-cols{max-width:none;columns:2;column-gap:clamp(2rem,5vw,4.5rem);margin-top:clamp(2rem,4vw,3rem)}
.proj-gal-cols p{break-inside:avoid}
/* in two columns every paragraph is body text; the lead is above */
.proj-gal-cols p:first-child{font-family:inherit;font-weight:300;color:var(--ink-soft);
  font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.85;margin-bottom:1.2em}
.proj-mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.4rem)}
.proj-mosaic .m4{grid-column:span 4}.proj-mosaic .m6{grid-column:span 6}
.proj-mosaic .m8{grid-column:span 8}.proj-mosaic .m12{grid-column:span 12}
.proj-mosaic .m4 .imgwrap{aspect-ratio:4/5}
.proj-mosaic .m6 .imgwrap{aspect-ratio:3/2}
.proj-mosaic .m8 .imgwrap{aspect-ratio:16/10}
.proj-mosaic .m12 .imgwrap{aspect-ratio:21/9}
/* beside an 8, the 4 takes the 8's exact height instead of approximating it
   with a ratio (the gutter makes the maths a few pixels off otherwise) */
.proj-mosaic .stretch,.proj-mosaic .stretch .imgwrap{height:100%}
.proj-mosaic .stretch .imgwrap{aspect-ratio:auto}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .proj-ed-grid,.proj-ed-cols{grid-template-columns:1fr}
  .proj-ed-sticky{position:static}
  .proj-split{grid-template-columns:1fr;gap:1rem}
}
@media(max-width:760px){
  /* one line cannot hold five details on a phone: two columns instead */
  .proj-facts--row{grid-auto-flow:row;grid-template-columns:1fr 1fr;justify-content:stretch;row-gap:1.4rem}
  .proj-gal-cols{columns:1}
  .proj-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense}
  .proj-mosaic .m4{grid-column:span 1}
  .proj-mosaic .m6,.proj-mosaic .m8,.proj-mosaic .m12{grid-column:span 2}
  .proj-mosaic .m6 .imgwrap,.proj-mosaic .m8 .imgwrap,.proj-mosaic .m12 .imgwrap{aspect-ratio:3/2}
  .proj-mosaic .stretch,.proj-mosaic .stretch .imgwrap{height:auto}
  .proj-mosaic .stretch .imgwrap{aspect-ratio:4/5}
}