/* ============================================================
   EXCEPTIONAL STAYS — page-only rules.
   Shared components (hero, features-grid, story, dest-grid,
   media-banner, buttons, footer) come from common.css. Only
   what's unique to this page lives here. See STYLE-GUIDE.md.
   ============================================================ */

/* ===== HERO ===== */
/* .hero:has(.stays-hero-actions) = the same hero rendered by UserControls/Header.ascx
   on DestinationStays.aspx, which can't add the .stays-hero class itself. */
.stays-hero,
.hero:has(.stays-hero-actions){
  min-height:var(--hero-height,80vh);
  background-size:cover;
  background-position:center;
}
.stays-hero .hero-sub,
.hero:has(.stays-hero-actions) .hero-sub{max-width:440px;}
.nav-center .current{border-bottom:1px solid rgba(255,255,255,.75);padding-bottom:4px;}

/* Secondary hero button with an inline play icon */
.btn-outline .play-icon{flex-shrink:0;}

/* ===== ICON ROW (4-up, no intro-block heading above it) ===== */
.stays-pillars{padding:var(--section-space-sm,64px) 0;}

/* ===== QUALITY OVER QUANTITY (.story split section) ===== */
.stays-quality .story-img{min-height:460px;}

/* ===== FEATURED STAYS ===== */
.stays-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:48px;
}
.stays-head h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);margin-top:12px;}
.stays-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.stay-card{display:block;}
.stay-card-img{
  aspect-ratio:4/3;
  border-radius:2px;
  background-size:cover;
  background-position:center;
  margin-bottom:18px;
}
.stay-loc{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  margin-bottom:8px;
}
.stay-card-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.stay-name{font-family:'Playfair Display',serif;font-size:19px;font-weight:600;line-height:1.3;}
.stay-card-title svg{flex-shrink:0;margin-top:6px;color:var(--ink);transition:transform .2s ease;}
.stay-card:hover .stay-card-title svg{transform:translateX(3px);}
/* Stays without a page yet: plain card, no arrow / hover. */
.stay-card--static{cursor:default;}
.stay-card--static .stay-card-title svg{display:none;}
.stay-desc{font-size:15.5px;color:var(--muted);line-height:1.55;margin-bottom:16px;}
.stay-meta{display:flex;gap:18px;padding-top:16px;border-top:1px solid var(--line);}
.stay-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--muted);
}
.stay-meta svg{color:var(--gold);flex-shrink:0;}

/* ===== EXPLORE BY DESTINATION (light bg split section) ===== */
.explore-stays{background:var(--cream);}
/* Featured stays and Explore by destination are both white: drop the
   doubled padding between them (feedback 5-10 #17 — "large blank gap"). */
#featured-stays + .explore-stays{padding-top:0;}
.explore-head{--sh-gap:56px;--sh-margin:0;}
.explore-left{max-width:340px;flex-shrink:0;}
.explore-left h2{line-height:1.22;margin:14px 0 18px;}
.explore-left p:not(.eyebrow){font-size:16px;color:var(--muted);line-height:1.6;margin-bottom:26px;}
.explore-grid{
  display:flex;
  gap:14px;
  flex:1;
  max-width:1200px;
  height:clamp(220px,22vw,300px);
}

/* ===== MEMBER TESTIMONIALS (dark, no card borders) ===== */
.stays-testimonials{background:var(--dark);color:#fff;}
.testi-head{--sh-gap:48px;--sh-margin:0;}
.testi-left{max-width:280px;flex-shrink:0;}
.testi-left h2{line-height:1.25;margin:14px 0 28px;}
.testi-nav{display:flex;gap:12px;}
.testi-nav button{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:transparent;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.testi-nav button:hover{background:rgba(255,255,255,.1);border-color:#fff;}
.testi-viewport{
  flex:1;
  overflow:hidden;
}
.testi-track{
  display:flex;
  gap:36px;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}
.testi-card{
  flex:0 0 calc((100% - 72px) / 3);
  min-width:0;
}
.testi-card p{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:18px;
  line-height:1.6;
  color:#f1ece0;
  margin-bottom:22px;
}
.testi-name{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;}
.testi-loc{font-size:12.5px;color:#a89e8c;margin-top:3px;}

/* ===== CLOSING CTA (.story split section, buttons beside the copy) =====
   Uses its own .cta-copy/.cta-buttons wrappers rather than .hero-actions —
   that class is targeted by the hero load-in timeline and the
   generic .story-text scroll-reveal in gsap-animations.js, and
   double-matching both left it permanently hidden. */
.stays-closing .story-text{
  flex-direction:row;
  align-items:center;
  gap:40px;
  padding-top:var(--section-space-sm,70px);
  padding-bottom:var(--section-space-sm,70px);
}
.cta-copy{flex:1;}
.cta-buttons{display:flex;flex-direction:column;gap:14px;flex-shrink:0;}
/* This page has two .story-text sections (Quality + this one).
   gsap-animations.js's generic .story-text reveal binds its
   ScrollTrigger to only the first match, so this section's own
   text/buttons never receive a play state — force them visible. */
.stays-closing .story-text,
.stays-closing .story-text *{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .stays-hero,
  .hero:has(.stays-hero-actions){min-height:auto;padding-top:130px;padding-bottom:80px;}
  .stays-grid{grid-template-columns:repeat(2,1fr);row-gap:36px;}
  .stays-head{flex-direction:column;align-items:flex-start;gap:16px;}
  .explore-left{max-width:100%;}
  .explore-grid{max-width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;}
  .explore-grid .dest-card{height:auto;aspect-ratio:4/3;}
  .testi-left{max-width:100%;}
  .testi-viewport{width:100%;}
  .testi-card{flex:0 0 100%;}
  .stays-closing .story-text{flex-direction:column;align-items:flex-start;}
  .cta-buttons{flex-direction:row;}
}

@media (max-width:500px){
  .stays-grid{grid-template-columns:1fr;}
  .stays-closing .cta-buttons{flex-direction:column;align-self:stretch;}
  .explore-grid{grid-template-columns:minmax(0,1fr);}
}