/* ============================================================
   PROJECT DETAIL PAGE
   ------------------------------------------------------------
   Reuses every token, .sec shell, .rail-nav and .btn already
   defined in style.css — this file only adds what is unique to
   this page: the hero band, the meta strip, the phase tabs and
   the per-phase photo rails.
   ============================================================ */

body.page-project{ padding-top:var(--header-h); }

/* Static shell → the entrance sequence never runs on this page,
   so [data-reveal] must render released rather than hidden. */
body.page-project [data-reveal]{
  opacity:1; transform:none; filter:none;
}
/* the scroll-triggered reveal still applies below the fold */
body.page-project .sec [data-reveal]{
  opacity:0; transform:translateY(38px); filter:blur(9px);
}
body.page-project .sec.is-in [data-reveal]{
  opacity:1; transform:none; filter:none;
  transition:opacity 1150ms var(--ease-cine) calc(var(--r,0) * 130ms),
             transform 1150ms var(--ease-cine) calc(var(--r,0) * 130ms),
             filter    950ms var(--ease-cine) calc(var(--r,0) * 130ms);
}


/* ============================================================
   1. PROJECT HERO
   ============================================================ */
.proj-hero{
  position:relative;
  padding-block:clamp(1.2rem,2.4vw,2rem) clamp(2.4rem,4.4vw,3.6rem);
  background:var(--cream-100);
}

.proj-hero-inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --- Top row: quote CTA (start) + back link (end) ---
   Flex, not float: `float` only accepts physical left/right, so a
   logical inline-start/end value is invalid and drops out of the
   flow, which is what pushed the row's width past the viewport. */
.proj-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.proj-back{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 0;
  font-size:.86rem;
  font-weight:700;
  color:var(--ink-500);
  transition:color var(--t-btn) var(--ease-btn), gap var(--t-btn) var(--ease-btn);
}
.proj-back svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.proj-back:hover{ color:var(--gold-900); gap:.7rem; }

.proj-hero-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  align-items:center;
  gap:clamp(1.6rem,3.4vw,3.2rem);
  margin-top:clamp(2.4rem,4.4vw,3.6rem);
}

/* --- Copy column --- */
.proj-cat{
  font-size:.86rem;
  font-weight:700;
  color:var(--gold-900);
}
.proj-title{
  margin-top:.6rem;
  font-family:var(--font-ar);
  font-weight:800;
  font-size:clamp(1.9rem,3.2vw,2.7rem);
  line-height:1.32;
  color:var(--ink-900);
  text-wrap:balance;
}
.proj-rule{
  display:block;
  width:8px; height:8px;
  margin-top:1.1rem;
  background:var(--gold-500);
  transform:rotate(45deg);
}
.proj-lede{
  margin-top:1.1rem;
  max-width:46ch;
  font-family:var(--font-ar-alt);
  font-size:.96rem;
  line-height:1.9;
  color:var(--ink-700);
}

.proj-meta{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(1.6rem,3vw,2.2rem);
}
.proj-meta li{ display:flex; align-items:center; gap:.7rem; }
.pm-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(207,166,72,.12);
  color:var(--gold-700);
}
.pm-icon svg{
  width:17px; height:17px;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.pm-text{ display:grid; gap:.1rem; }
.pm-text small{
  font-family:var(--font-ar-alt);
  font-size:.72rem;
  color:var(--ink-400);
}
.pm-text strong{
  font-size:.9rem;
  font-weight:800;
  color:var(--ink-900);
}

/* --- Hero photo --- */
.proj-hero-media{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  aspect-ratio:16 / 10.4;
  box-shadow:0 40px 90px -40px rgba(46,34,12,.5);
}
.proj-hero-media img{
  width:100%; height:100%;
  object-fit:cover;
}


/* ============================================================
   2. JOURNEY SECTION
   ============================================================ */
.sec--journey .sec-bg{ background-image:url("assets/sec2-bg.jpg"); opacity:.5; }
.sec--journey{ --lede-w:56ch; }

/* --- Tabs --- */
.journey-tabs{
  display:flex;
  justify-content:center;
  gap:0;
  margin-top:clamp(2rem,3.8vw,3rem);
  border-bottom:1px solid rgba(207,166,72,.22);
}
.jt-tab{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.9rem clamp(1rem,2.4vw,1.9rem) 1.05rem;
  position:relative;
  font-size:.92rem;
  font-weight:700;
  color:var(--ink-500);
  transition:color var(--t-btn) var(--ease-btn);
}
.jt-tab::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:-1px;
  height:2px;
  background:var(--gold-grad);
  transform:scaleX(0);
  transition:transform var(--t-btn) var(--ease-btn);
}
.jt-tab:hover{ color:var(--ink-900); }
.jt-tab.is-active{ color:var(--gold-900); }
.jt-tab.is-active::after{ transform:scaleX(1); }
.jt-num{
  font-family:var(--font-en);
  font-size:1.15rem;
  font-weight:500;
  color:var(--gold-300);
}
.jt-tab.is-active .jt-num{ color:var(--gold-700); }

/* --- Phases --- */
.journey-phases{ margin-top:clamp(2rem,3.6vw,2.8rem); }
.journey-phase{ display:none; }
.journey-phase.is-active{
  display:block;
  animation:phaseIn .5s var(--ease-out);
}
@keyframes phaseIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

.jp-title{
  font-size:clamp(1.1rem,1.5vw,1.35rem);
  font-weight:800;
  color:var(--ink-900);
}
.jp-copy{
  margin-top:.5rem;
  max-width:70ch;
  font-family:var(--font-ar-alt);
  font-size:.9rem;
  line-height:1.85;
  color:var(--ink-500);
}

.jp-rail{
  position:relative;
  margin-top:clamp(1.2rem,2.2vw,1.7rem);
}
.jp-track{
  --pg-gap:clamp(.7rem,1.3vw,1.2rem);
  display:flex;
  gap:var(--pg-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:.4rem .3rem .8rem;
  margin-inline:-.3rem;
}
.jp-track::-webkit-scrollbar{ display:none; }
.jp-shot{
  flex:0 0 calc((100% - 4 * var(--pg-gap)) / 5);
  scroll-snap-align:start;
  min-width:0;
  overflow:hidden;
  border-radius:12px;
  aspect-ratio:4 / 3;
  box-shadow:0 18px 40px -26px rgba(46,34,12,.4);
}
.jp-shot img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease-cine);
}
.jp-shot:hover img{ transform:scale(1.07); }


/* ============================================================
   3. BOTTOM CTA BAND
   ============================================================ */
.proj-cta-row{
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.4rem;
  padding:clamp(1.6rem,3vw,2.3rem) clamp(1.4rem,2.8vw,2.4rem);
  margin-top:clamp(2.6rem,4.6vw,3.8rem);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(255,253,249,.92), rgba(250,245,235,.82)),
    url("assets/sec7-bg.jpg") center/cover no-repeat;
  border:1px solid rgba(207,166,72,.24);
}
.proj-cta-copy p{
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  font-weight:800;
  color:var(--ink-900);
}
.proj-cta-sub{
  margin-top:.15rem;
  font-family:var(--font-ar-alt);
  font-weight:400 !important;
  font-size:.92rem !important;
  color:var(--ink-500);
}
.proj-cta-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* --- Quote-request pill: standalone, no .btn dependency --- */
.proj-cta{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.7rem 1.3rem;
  font-size:.85rem;
  font-weight:700;
  border:1px solid rgba(255,255,255,.5);
  transition:background-color var(--t-btn) var(--ease-btn),
             border-color var(--t-btn) var(--ease-btn),
             color var(--t-btn) var(--ease-btn),
             transform var(--t-btn) var(--ease-btn);
}
.proj-cta svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.proj-cta--top{
  color:#F5F0E6;
  background:var(--ink-grad);
  border-color:rgba(255,255,255,.14);
}
.proj-cta--top:hover{ transform:translateY(-2px); background:var(--ink-grad-hover); }

.proj-cta--solid{
  color:#F5F0E6;
  background:var(--ink-grad);
  border-color:rgba(255,255,255,.14);
}
.proj-cta--solid:hover{ transform:translateY(-2px); background:var(--ink-grad-hover); }

.proj-cta--ghost{
  color:var(--ink-900);
  background:rgba(255,253,248,.6);
  border-color:rgba(207,166,72,.4);
}
.proj-cta--ghost:hover{
  background:rgba(255,253,248,.92);
  border-color:var(--gold-500);
  transform:translateY(-2px);
}


/* ============================================================
   4. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .proj-hero-grid{ grid-template-columns:1fr; }
  .proj-hero-media{ order:-1; aspect-ratio:16/9; }
}

@media (max-width:820px){
  body.page-project{ padding-top:var(--header-h); }

  .proj-hero{ padding-block:1rem clamp(2rem,7vw,2.6rem); }
  .proj-cta--top{ padding:.55rem 1rem; font-size:.78rem; }
  .proj-cta--top .arrow{ display:none; }
  .proj-back{ font-size:.78rem; }
  .proj-back span{ display:none; }   /* icon-only on very tight rows */

  /* Title + hero photo keep the reference's side-by-side rhythm on
     mobile too — just stacked as image-then-title, tighter gaps. */
  .proj-hero-grid{ margin-top:1.6rem; gap:1.1rem; }
  .proj-hero-media{ aspect-ratio:4/3; border-radius:14px; }
  .proj-title{ font-size:clamp(1.5rem,6.4vw,1.9rem); }
  .proj-lede{ font-size:.88rem; max-width:100%; }

  .proj-meta{ gap:1rem 1.4rem; }
  .pm-icon{ width:34px; height:34px; }

  .journey-tabs{
    gap:0;
    overflow-x:auto;
    scrollbar-width:none;
    justify-content:flex-start;
  }
  .journey-tabs::-webkit-scrollbar{ display:none; }
  .jt-tab{ padding:.75rem .9rem .9rem; font-size:.82rem; white-space:nowrap; }
  .jt-num{ font-size:1rem; }

  .jp-copy{ font-size:.84rem; }

  /* two photos per row, two rows visible — matches the reference */
  .jp-track{
    flex-wrap:wrap;
    overflow-x:visible;
    scroll-snap-type:none;
    max-height:calc(2 * (38vw + var(--pg-gap)));
    overflow-y:auto;
  }
  .jp-shot{ flex:0 0 calc((100% - var(--pg-gap)) / 2); }
  .jp-rail .rail-nav{ display:none; }   /* wrap replaces the scroller */

  .proj-cta-row{ flex-direction:column; align-items:stretch; text-align:center; }
  .proj-cta-actions{ justify-content:center; }
}

@media (max-width:480px){
  .proj-back span{ display:inline; }
  .proj-back{ font-size:.72rem; }
  .proj-meta{ gap:.9rem 1.1rem; }
}