/* ============================================================
   URHOM — SECTION 06 / HAPPY CUSTOMERS
   Full-bleed photograph, copy left, three testimonial cards on a
   snap rail to the right. Shares the rail behaviour with Section 04.
   Tokens and the reveal system come from base.css.
   ============================================================ */

.love{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#EFEAE3;
  isolation:isolate;
}

/* ---------------- media ---------------- */

.love__media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.love__media-inner{ position:absolute; inset:0; will-change:transform; }

.love__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 52%;
  transform:scale(1.04);
  transform-origin:50% 50%;
}
.js .love__img{
  transform:scale(1.11);
  transition:transform 1.5s var(--ease-soft);
}
.js .love.is-ready .love__img{ transform:scale(1.04); }

/* localised light on the left only — the right stays photographic */
.love__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,.76) 0%,
    rgba(255,255,255,.58) 16%,
    rgba(255,255,255,.26) 28%,
    rgba(255,255,255,.05) 38%,
    rgba(255,255,255,0)   48%);
}

/* ---------------- layout ---------------- */

.love__inner{
  display:grid;
  grid-template-columns:25.5vw 1fr;
  column-gap:clamp(20px,2vw,40px);
  align-items:center;
  width:100%;
  padding-left:var(--gutter-wide);
}

.love__eyebrow{
  font-size:clamp(10.5px,.846vw,16px);
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-photo-soft);
}

.love__title{
  margin-top:clamp(12px,1.24vw,24px);
  font-size:clamp(30px,3.04vw,58px);
  font-weight:600;
  line-height:1.07;
  letter-spacing:-.03em;
  color:var(--ink);
}
.love__title em{ font-style:normal; color:var(--yellow); }

.love__lede{
  margin-top:clamp(14px,1.18vw,24px);
  font-size:clamp(14px,.95vw,18px);
  line-height:1.5;
  letter-spacing:-.004em;
  color:var(--ink-photo);
  max-width:32ch;
}

/* ---- carousel controls (same language as Section 04) ---- */

.lnav{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.3vw,24px);
  margin-top:clamp(26px,2.4vw,44px);
}
.lnav__btn{
  display:grid;
  place-items:center;
  width:clamp(36px,2.6vw,48px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(24,22,18,.22);
  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);
}
.lnav__btn svg{ width:42%; height:42%; }
.lnav__btn:hover:not(:disabled){
  background:var(--yellow);
  border-color:var(--yellow);
  transform:scale(1.06);
}
.lnav__btn:disabled{ opacity:.34; cursor:default; }

.lnav__track{
  display:flex; align-items:center; gap:6px;
  flex:1 1 auto;
  max-width:clamp(80px,8.5vw,160px);
}
.lnav__dot{
  flex:1 1 0;
  height:3px;
  border-radius:3px;
  background:rgba(24,22,18,.2);
  transition:background var(--t-med) var(--ease-out);
}
.lnav__dot.is-on{ background:var(--yellow); }


/* ============================================================
   TESTIMONIAL CARDS
   ============================================================ */

.lrail{
  display:flex;
  gap:clamp(12px,1.3vw,26px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:10px 5vw 10px 0;
}
.lrail::-webkit-scrollbar{ display:none; }

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

.tcard{
  position:relative;
  flex:0 0 clamp(250px,24vw,450px);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  border-radius:clamp(14px,1.1vw,22px);
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 18px 44px -28px rgba(48,38,24,.5);
  transition:transform .5s var(--ease-soft),
             box-shadow .5s var(--ease-soft);
}
.tcard:hover{
  transform:translateY(-5px);
  box-shadow:0 28px 58px -30px rgba(48,38,24,.56);
}

.tcard__shot{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#E9E4DC;
}
.tcard__shot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 52%;
  transform:scale(1.02);
  transition:transform .9s var(--ease-soft);
}
.tcard:hover .tcard__shot img{ transform:scale(1.06); }

.tcard__body{
  position:relative;
  padding:clamp(16px,1.3vw,26px);
  padding-top:clamp(26px,2.1vw,40px);
  background:#fff;
}

/* the quote badge straddles the image / copy boundary */
.tcard__badge{
  position:absolute;
  left:clamp(16px,1.3vw,26px);
  top:0;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:clamp(34px,2.65vw,50px);
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  color:var(--yellow);
  box-shadow:0 4px 14px -6px rgba(40,32,18,.42);
}
.tcard__badge svg{ width:48%; height:48%; fill:currentColor; }

.tcard__quote{
  font-size:clamp(13px,.95vw,18px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.006em;
  color:var(--ink);
}

.tcard__rule{
  height:1px;
  margin:clamp(14px,1.18vw,24px) 0 clamp(12px,1.0vw,20px);
  background:rgba(24,22,18,.12);
}

.tcard__who{
  display:flex;
  align-items:center;
  gap:clamp(9px,.73vw,15px);
}

.tcard__avatar{
  flex:0 0 auto;
  width:clamp(34px,2.65vw,50px);
  height:auto;              /* beats the img height attribute, which was
                               stretching the circle into an ellipse */
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 38%;
  background:#E9E4DC;
}

.tcard__id{ flex:1 1 auto; min-width:0; }
.tcard__name{
  display:block;
  font-size:clamp(13px,.9vw,17px);
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--ink);
}
.tcard__place{
  display:block;
  margin-top:2px;
  font-size:clamp(11.5px,.79vw,15px);
  color:var(--ink-mute);
}

.tcard__stars{
  flex:0 0 auto;
  display:flex;
  gap:2px;
  color:var(--yellow);
}
.tcard__stars svg{
  width:clamp(11px,.79vw,15px);
  height:clamp(11px,.79vw,15px);
  fill:currentColor;
}


/* ============================================================
   ENTRANCE
   ============================================================ */

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

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


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

@media (max-width:1440px){
  .love__inner{ grid-template-columns:30vw 1fr; padding-left:4.5vw; }
}

@media (max-width:1180px){
  .love{ min-height:0; }
  .love__inner{
    grid-template-columns:1fr;
    row-gap:clamp(30px,4.4vw,52px);
    padding-left:clamp(28px,6vw,64px);
    padding-top:clamp(108px,13vw,150px);
    padding-bottom:clamp(60px,7vw,90px);
  }
  .love__media::after{
    background:linear-gradient(104deg,
      rgba(255,255,255,.86) 0%,
      rgba(255,255,255,.70) 32%,
      rgba(255,255,255,.40) 58%,
      rgba(255,255,255,.12) 80%,
      rgba(255,255,255,0)   100%);
  }
  .love__img{ object-position:62% 52%; }
  .love__title{ margin-top:18px; font-size:clamp(34px,5.4vw,52px); }
  .love__lede{ font-size:17px; max-width:48ch; }
  .love__lede br{ display:none; }
  .lrail{ padding-right:clamp(28px,6vw,64px); }
  .tcard{ flex-basis:min(62vw,340px); }
}

@media (max-width:760px){
  .love__inner{ padding-inline:24px; padding-top:clamp(104px,20vh,170px); row-gap:28px; }
  .love__media::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.80) 44%,
      rgba(255,255,255,.60) 74%,
      rgba(255,255,255,.46) 100%);
  }
  .love__img{ object-position:68% 50%; }
  .love__eyebrow{ font-size:11px; }
  .love__title{ margin-top:14px; font-size:clamp(30px,8.6vw,42px); line-height:1.08; }
  .love__lede{ margin-top:14px; font-size:16px; max-width:38ch; }
  .lnav{ margin-top:24px; }

  .lrail{ padding-right:24px; gap:14px; }
  .tcard{ flex-basis:min(80vw,320px); }
  .tcard__quote{ font-size:15px; }
  .tcard__name{ font-size:15px; }
  .tcard__place{ font-size:13.5px; }
}