/* ==========================================================================
   Project detail — page-specific styles (template-project.php)
   Simplified seven-section version of Figma "08 — Project Detail" (node 439:2):
   hero, full-bleed hero image, overview, gallery, testimonial, CTA, next project.
   Reuses main.css tokens, .container, .eyebrow, .btn, .link-arrow and reveals.
   Added 2026-10-15.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Hero */
.prj-hero{ background:var(--paper-2); padding:96px 0 56px; }
.prj-hero__inner{ display:flex; flex-direction:column; gap:28px; align-items:flex-start; }
.prj-hero__back{
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
  display:inline-flex; gap:.6em; align-items:center; transition:color .2s ease, gap .2s ease;
}
.prj-hero__back:hover, .prj-hero__back:focus-visible{ color:var(--ink); gap:.85em; }
.prj-hero__title{ font-family:var(--font-serif); font-weight:300; color:var(--ink-2); font-size:80px; line-height:1.04; }
.prj-hero__lede{ font-family:var(--font-serif); font-weight:300; color:var(--text-soft); font-size:26px; line-height:1.45; max-width:880px; }

/* ---------------------------------------------------------------- 2. Hero image (full bleed) */
.prj-hero-media{ height:720px; overflow:hidden; background:var(--paper-3); }
.prj-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------------------------------------------------------- 3. Overview */
.prj-about{ background:var(--paper-2); padding:130px 0 0; }
.prj-about__inner{ display:flex; flex-direction:column; gap:28px; max-width:786px; }
.prj-about__head{ display:flex; flex-direction:column; gap:14px; }
.prj-about__title{ font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:50px; line-height:1.15; }
.prj-about__body{ display:flex; flex-direction:column; gap:24px; }
.prj-about__body p{ font-weight:300; color:var(--text-soft); font-size:17px; line-height:1.75; }

/* ---------------------------------------------------------------- 4. Gallery */
.prj-gallery{ background:var(--paper-2); padding:130px 0; }
.prj-gallery__inner{ display:flex; flex-direction:column; gap:40px; }
.prj-gallery__head{ display:flex; flex-direction:column; gap:14px; }
.prj-gallery__title{ font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:50px; line-height:1.15; }
.prj-gallery__grid{ display:flex; flex-direction:column; gap:40px; }
.prj-gallery__row{ display:grid; gap:40px; }
.prj-gallery__row--1{ grid-template-columns:1fr; }
.prj-gallery__row--2{ grid-template-columns:repeat(2, 1fr); }
.prj-gallery__row--3{ grid-template-columns:repeat(3, 1fr); }
.prj-gallery__item{ margin:0; overflow:hidden; background:var(--paper-3); min-width:0; }
.prj-gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.prj-gallery__item:hover img{ transform:scale(1.02); }
.prj-gallery__item--large{ height:700px; }
.prj-gallery__row--2 .prj-gallery__item{ height:460px; }
.prj-gallery__row--3 .prj-gallery__item{ height:340px; }

/* ---------------------------------------------------------------- 5. Client testimonial */
.prj-testimonial{ background:var(--paper-2); padding:0 0 130px; }
.prj-testimonial__inner{ display:flex; flex-direction:column; align-items:center; gap:44px; text-align:center; }
.prj-testimonial__quote{
  font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:34px; line-height:1.5;
  max-width:1080px; margin:0;
}
.prj-testimonial__attr{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.prj-testimonial__name{ font-weight:500; color:var(--ink); font-size:16px; }
.prj-testimonial__meta{ color:var(--muted); font-size:11px; letter-spacing:2px; text-transform:uppercase; }

/* ---------------------------------------------------------------- 6. CTA */
.prj-cta{ background:var(--paper-3); padding:110px 0; }
.prj-cta__inner{ display:flex; gap:80px; align-items:center; justify-content:space-between; }
.prj-cta__copy{ display:flex; flex-direction:column; gap:20px; max-width:726px; }
.prj-cta__title{ font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:40px; line-height:1.2; }
.prj-cta__lede{ font-weight:300; color:var(--text-soft); font-size:17px; line-height:1.75; }
.prj-cta__actions{ flex-shrink:0; }

/* ---------------------------------------------------------------- 7. Next project */
.prj-next{ background:var(--paper-2); padding:110px 0 130px; }
.prj-next__inner{ display:flex; flex-direction:column; gap:32px; }
.prj-next__row{ display:flex; justify-content:space-between; align-items:center; gap:24px; }
.prj-next__card{ display:flex; flex-direction:column; gap:24px; color:inherit; }
.prj-next__img{ height:520px; overflow:hidden; background:var(--paper-3); }
.prj-next__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.prj-next__card:hover .prj-next__img img, .prj-next__card:focus-visible .prj-next__img img{ transform:scale(1.03); }
.prj-next__card:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; }
.prj-next__name{ font-family:var(--font-serif); font-weight:500; color:var(--ink); font-size:30px; line-height:1.25; }
.prj-next__sub{ font-weight:300; color:var(--text-soft); font-size:15px; line-height:1.6; margin-top:8px; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width:1200px){
  .prj-hero__title{ font-size:64px; }
  .prj-hero-media{ height:560px; }
  .prj-gallery__item--large{ height:520px; }
  .prj-gallery__row--2 .prj-gallery__item{ height:360px; }
  .prj-gallery__row--3 .prj-gallery__item{ height:260px; }
  .prj-next__img{ height:420px; }
}
@media (max-width:900px){
  .prj-hero{ padding:64px 0 40px; }
  .prj-hero__title{ font-size:48px; }
  .prj-hero__lede{ font-size:20px; }
  .prj-hero-media{ height:400px; }
  .prj-about{ padding:80px 0 0; }
  .prj-about__title, .prj-gallery__title{ font-size:38px; }
  .prj-gallery{ padding:80px 0; }
  .prj-gallery__grid, .prj-gallery__row{ gap:24px; }
  .prj-gallery__item--large{ height:360px; }
  .prj-gallery__row--2 .prj-gallery__item{ height:240px; }
  .prj-gallery__row--3 .prj-gallery__item{ height:190px; }
  .prj-testimonial{ padding:0 0 80px; }
  .prj-testimonial__quote{ font-size:24px; }
  .prj-cta{ padding:80px 0; }
  .prj-cta__inner{ flex-direction:column; align-items:flex-start; gap:36px; }
  .prj-cta__title{ font-size:32px; }
  .prj-next{ padding:80px 0 100px; }
  .prj-next__img{ height:300px; }
  .prj-next__name{ font-size:26px; }
}
@media (max-width:560px){
  .prj-hero__title{ font-size:38px; }
  .prj-hero-media{ height:280px; }
  .prj-gallery__row--2, .prj-gallery__row--3{ grid-template-columns:1fr; }
  .prj-gallery__item--large, .prj-gallery__row--2 .prj-gallery__item, .prj-gallery__row--3 .prj-gallery__item{ height:240px; }
  .prj-testimonial__quote{ font-size:22px; }
  .prj-next__img{ height:220px; }
}