/* ==========================================================================
   NMAYA — homepage
   ========================================================================== */

/* ---------------------------------------------------------------- hero --- */

.hero{
  padding-top:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2.2rem,5vw,4.2rem);
  overflow:hidden;
}
.hero__copy{max-width:660px}
.hero__title{margin:.2rem 0 1.1rem}
.hero__title em{
  font-style:italic;
  /* the one flourish: an italic didone swash carrying the brand's cut line */
  position:relative;
}
.hero__title em::after{
  content:"";position:absolute;left:0;right:.06em;bottom:.08em;
  border-bottom:1px dashed var(--thread);
}
.hero__cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.hero__cta .btn{flex:1 1 auto;min-width:180px}

/* --------------------------------------------------- horizontal slider --- */

.slider{margin-top:clamp(2rem,4.5vw,3.2rem);position:relative}

.slider__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:.9rem;
}
.slider__label{
  font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--slate);
}
.slider__nav{display:none;gap:.4rem}

.slider__viewport{
  /* bleed to the screen edge so the next card peeks on mobile */
  margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  touch-action:pan-x pan-y;
}
.slider__viewport::-webkit-scrollbar{display:none}

.slider__track{
  display:flex;gap:clamp(.6rem,1.4vw,1rem);
  padding-block:.25rem .5rem;
  width:max-content;
}

.slide{
  /* 1.7 cards visible on a phone — the half card is the swipe affordance */
  flex:0 0 58vw;
  max-width:320px;
  scroll-snap-align:start;
  position:relative;
}
.slide__media{
  position:relative;display:block;
  aspect-ratio:3/4;
  border-radius:var(--r-img);
  overflow:hidden;background:var(--calico-2);
  box-shadow:var(--shadow);
}
.slide__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease);
}
.slide:hover .slide__media img{transform:scale(1.05)}
.slide__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(22,34,46,.55),rgba(22,34,46,0) 46%);
  opacity:.9;
}
.slide__caption{
  position:absolute;left:.85rem;right:.85rem;bottom:.8rem;z-index:2;
  color:var(--paper);
  font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
}
.slide__caption svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.5;fill:none;flex:none}

.slider__dots{
  display:flex;gap:.35rem;justify-content:center;margin-top:1rem;
}
.slider__dot{
  width:22px;height:2px;background:var(--calico-3);border-radius:999px;
  transition:background .3s var(--ease),width .3s var(--ease);
}
.slider__dot.is-active{background:var(--ink);width:34px}

/* ---------------------------------------------------------- categories --- */

.cats{display:grid;gap:clamp(.7rem,1.6vw,1.2rem);grid-template-columns:repeat(2,1fr)}
.cat{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-img);background:var(--ink-2);
  aspect-ratio:3/4;
}
.cat:first-child{grid-column:span 2;aspect-ratio:16/11}
.cat img{
  width:100%;height:100%;object-fit:cover;opacity:.86;
  transition:transform 1.1s var(--ease),opacity .5s var(--ease);
}
.cat:hover img{transform:scale(1.06);opacity:1}
.cat::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(22,34,46,.78),rgba(22,34,46,.05) 55%);
}
.cat__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.1rem;color:var(--paper);
}
.cat__name{
  display:block;font-family:var(--display);
  font-size:clamp(1.05rem,2.4vw,1.7rem);line-height:1.1;
  overflow-wrap:break-word;hyphens:auto;
}
.cat__blurb{
  display:block;font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--thread-dim);margin-top:.35rem;line-height:1.35;
}

/* ---------------------------------------------------------------- kids --- */

.kids{
  display:grid;gap:0;grid-template-columns:1fr;
  border:1px dashed var(--thread);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);
}
.kids__media{position:relative;aspect-ratio:16/10;background:var(--calico-2)}
.kids__media img{width:100%;height:100%;object-fit:cover}
.kids__body{padding:clamp(1.6rem,4vw,3rem)}
.kids__tag{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;
  background:var(--thread);color:var(--ink);padding:.35em .8em;border-radius:999px;
  font-weight:600;margin-bottom:1rem;
}
.kids__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.kids__body h2{margin-bottom:.8rem}
.kids__body .btn{margin-top:1.5rem}
.kids__url{
  display:block;margin-top:.9rem;font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);
}

/* -------------------------------------------------------- testimonials --- */

.reviews{
  display:flex;gap:clamp(.7rem,1.6vw,1.2rem);
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:.4rem;
}
.reviews::-webkit-scrollbar{display:none}
.review{
  flex:0 0 82vw;max-width:400px;scroll-snap-align:start;
  background:var(--paper);border:1px solid var(--calico-2);
  border-top:2px solid var(--thread);
  border-radius:var(--r-lg);padding:1.5rem;
  display:flex;flex-direction:column;gap:.9rem;
}
.stars{display:flex;gap:.15rem;color:var(--thread)}
.stars svg{width:14px;height:14px;fill:currentColor;stroke:none}
.stars .is-off{color:var(--calico-3)}
.review__text{margin:0;font-size:var(--fs-md);line-height:1.55}
.review__who{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding-top:.6rem}
.review__who img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.review__avatar{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--ink);color:var(--thread-dim);
  font-family:var(--display);font-size:1rem;
}
.review__who>span{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.review__name{display:block;font-weight:500;font-size:var(--fs-sm);line-height:1.25}
.review__meta{
  display:block;font-size:var(--fs-xs);letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);line-height:1.3;
}

/* ----------------------------------------------------------- final cta --- */

.final{text-align:center;position:relative;overflow:hidden}
.final__inner{position:relative;z-index:2;max-width:640px;margin-inline:auto}
.final .lede{margin-inline:auto;margin-top:1rem}
.final .btn{margin-top:2rem}
.final::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,88vw);aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(192,168,126,.35);
}

/* --------------------------------------------------------- breakpoints --- */

@media (min-width:600px){
  .slide{flex-basis:34vw}
  .review{flex-basis:56vw}
  .cats{grid-template-columns:repeat(3,1fr)}
  .cat:first-child{grid-column:span 2;aspect-ratio:auto}
}

@media (min-width:900px){
  .hero__cta .btn{flex:0 0 auto}
  .slide{flex-basis:22vw;max-width:none}
  .slider__nav{display:flex}
  .review{flex-basis:32vw}
  .kids{grid-template-columns:1.15fr 1fr;align-items:stretch}
  .kids__media{aspect-ratio:auto;min-height:340px}
  .kids__body{display:flex;flex-direction:column;justify-content:center}
  .cats{grid-template-columns:repeat(4,1fr)}
  .cat:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
}

@media (min-width:1200px){
  .hero__grid{display:grid;grid-template-columns:1fr;gap:0}
  .slide{flex-basis:19vw}
  .review{flex-basis:24vw}
}