/* ============================================================
   URHOM — SECTION 04 / REAL SPACES
   Left copy column + a horizontal project rail that runs off the
   right edge. Native scroll-snap, driven by the arrow buttons —
   no slider library, no scroll hijacking.
   Tokens, buttons and the reveal system come from base.css.
   ============================================================ */

.projects{
  position:relative;
  background:#FAF8F5;
  padding-block:clamp(72px,6.5vw,118px);
  overflow:hidden;
  isolation:isolate;
}

.projects__inner{
  display:grid;
  grid-template-columns:20.5vw 1fr;
  column-gap:clamp(24px,2.5vw,48px);
  align-items:center;
  padding-left:var(--gutter-rail);
}


/* ============================================================
   LEFT — copy column
   ============================================================ */

.projects__eyebrow{
  font-size:clamp(10.5px,.846vw,16px);
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#73726E;
}

.projects__title{
  margin-top:clamp(12px,1.35vw,26px);
  font-size:clamp(32px,3.27vw,62px);
  font-weight:600;
  line-height:1.07;
  letter-spacing:-.03em;
  color:var(--ink);
}
.projects__title em{ font-style:normal; color:var(--yellow); }

.projects__lede{
  margin-top:clamp(16px,1.3vw,26px);
  font-size:clamp(14px,.99vw,19px);
  line-height:1.45;
  letter-spacing:-.004em;
  color:var(--ink-mute);
  max-width:30ch;
}

.projects__cta{ margin-top:clamp(22px,1.75vw,34px); }

/* ---- carousel controls ---- */

.pnav{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.3vw,24px);
  margin-top:clamp(26px,2.5vw,46px);
}

.pnav__btn{
  display:grid;
  place-items:center;
  width:clamp(36px,2.76vw,52px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(24,22,18,.18);
  background:rgba(255,255,255,.7);
  color:var(--ink);
  transition:background var(--t-med) var(--ease-out),
             border-color var(--t-med) var(--ease-out),
             transform var(--t-med) var(--ease-soft),
             opacity var(--t-med) var(--ease-out);
}
.pnav__btn svg{ width:42%; height:42%; }
.pnav__btn:hover:not(:disabled){
  background:var(--yellow);
  border-color:var(--yellow);
  transform:scale(1.06);
}
.pnav__btn:disabled{ opacity:.34; cursor:default; }

.pnav__track{
  display:flex;
  align-items:center;
  gap:5px;
  flex:1 1 auto;
  max-width:clamp(80px,9vw,170px);
}
.pnav__dot{
  flex:1 1 0;
  height:3px;
  border-radius:3px;
  background:var(--hair);
  transition:background var(--t-med) var(--ease-out);
}
.pnav__dot.is-on{ background:var(--yellow); }


/* ============================================================
   RIGHT — project rail
   ============================================================ */

.prail{
  display:flex;
  gap:clamp(8px,.68vw,14px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-block:4px;
  padding-right:6vw;
}
.prail::-webkit-scrollbar{ display:none; }

@media (prefers-reduced-motion: reduce){
  .prail{ scroll-behavior:auto; }
}

.pcard{
  position:relative;
  flex:0 0 clamp(230px,21.7vw,420px);
  aspect-ratio:385 / 565;
  scroll-snap-align:start;
  border-radius:clamp(12px,1.07vw,20px);
  overflow:hidden;
  isolation:isolate;
  background:#E9E4DC;
  box-shadow:0 16px 40px -26px rgba(48,38,24,.44);
  transition:transform .55s var(--ease-soft),
             box-shadow .55s var(--ease-soft);
}
.pcard:hover{
  transform:translateY(-5px);
  box-shadow:0 28px 56px -28px rgba(48,38,24,.52);
}

.pcard__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform .9s var(--ease-soft);
}
.pcard:hover .pcard__img{ transform:scale(1.06); }

.pcard::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(10,8,6,.82)  0%,
    rgba(10,8,6,.62) 14%,
    rgba(10,8,6,.26) 32%,
    rgba(10,8,6,.04) 50%,
    rgba(10,8,6,0)   64%);
}

.pcard__body{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:1;
  display:flex;
  align-items:flex-end;
  gap:clamp(8px,.9vw,18px);
  padding:clamp(16px,1.47vw,28px);
}
.pcard__text{ flex:1 1 auto; min-width:0; }

.pcard__title{
  display:block;
  font-size:clamp(16px,1.24vw,24px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.022em;
  color:#fff;
}
.pcard__place{
  display:block;
  margin-top:clamp(3px,.28vw,7px);
  font-size:clamp(12px,.846vw,16px);
  font-weight:400;
  letter-spacing:-.002em;
  color:rgba(255,255,255,.82);
}

.pcard__go{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:clamp(32px,2.48vw,48px);
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  box-shadow:0 2px 10px -4px rgba(0,0,0,.4);
  transition:transform var(--t-med) var(--ease-soft),
             background var(--t-med) var(--ease-out);
}
.pcard__go svg{ width:44%; height:44%; transition:transform var(--t-med) var(--ease-soft); }
.pcard:hover .pcard__go{ background:var(--yellow); transform:scale(1.08); }
.pcard:hover .pcard__go svg{ transform:translateX(2px); }


/* ============================================================
   ENTRANCE — rides the shared [data-reveal] system
   ============================================================ */

.js [data-reveal="pcard"]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .75s var(--ease-out) var(--d),
             transform .85s var(--ease-out) var(--d);
}
.js [data-reveal="pcard"].is-revealed{ opacity:1; transform:none; }

.js [data-reveal="pcard"] .pcard__img{
  transform:scale(1.12);
  transition:transform 1.2s var(--ease-soft) var(--d);
}
.js [data-reveal="pcard"].is-revealed .pcard__img{ transform:scale(1.02); }

@media (prefers-reduced-motion: reduce){
  .js [data-reveal="pcard"]{ opacity:1 !important; transform:none !important; }
  .js [data-reveal="pcard"] .pcard__img{ transform:scale(1.02) !important; }
}


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

@media (max-width:1440px){
  .projects__inner{ grid-template-columns:25vw 1fr; padding-left:5vw; }
  .pcard{ flex-basis:clamp(230px,26vw,400px); }
}

/* tablet — copy stacks above the rail, rail keeps swiping */
@media (max-width:1180px){
  .projects__inner{
    grid-template-columns:1fr;
    row-gap:clamp(32px,4.6vw,56px);
    padding-left:clamp(28px,6vw,64px);
  }
  .projects__title{ margin-top:18px; font-size:clamp(34px,5.4vw,52px); }
  .projects__lede{ font-size:17px; max-width:46ch; }
  .projects__lede br{ display:none; }
  .prail{ padding-right:clamp(28px,6vw,64px); }
  .pcard{ flex-basis:clamp(240px,34vw,340px); }
}

@media (max-width:760px){
  .projects{ padding-block:clamp(64px,13vw,92px); }
  .projects__inner{ padding-left:24px; row-gap:30px; }
  .projects__eyebrow{ font-size:11px; }
  .projects__title{ margin-top:14px; font-size:clamp(30px,8.6vw,42px); line-height:1.08; }
  .projects__lede{ margin-top:14px; font-size:16px; max-width:38ch; }
  .projects__cta{ margin-top:24px; }
  .projects__cta .btn--lg{ height:52px; font-size:15px; padding-inline:24px; }
  .pnav{ margin-top:26px; }

  .prail{ padding-right:24px; gap:12px; }
  .pcard{ flex-basis:min(74vw,300px); aspect-ratio:4 / 5; }
  .pcard__body{ padding:18px; }
  .pcard__title{ font-size:19px; }
  .pcard__place{ font-size:14px; }
  .pcard__go{ width:40px; }
}