/* ============================================================
   LE HAUS — ANTIGUA DESTINATION DETAIL (destination-detail-antigua.html)
   ------------------------------------------------------------
   Page-only rules for the "Antigua Page Le Haus 2.0 final" mockup.
   Loads after common.css — see /website/FrontEnd/STYLE-GUIDE.md.
   Reuses hero/nav/footer/eyebrow/serif/btn/link-arrow/media-quote/
   dest-card/media-banner from there.

   This template's light sections use a cooler navy ink/muted pair
   instead of the site's default warm brown (--ink/--muted) — sampled
   from the mockup (headings, eyebrows and "View Residence"-style
   links all read as navy, not brown). Scoped to `body` so it only
   overrides descendants on this page, and dark sections (hero,
   dest-card, media-banner) are unaffected since they already set
   explicit white/gold colors. */
body{
  --ink:#16283f;
  --muted:#75808d;
}

/* ===== HERO ===== */
.antigua-hero{min-height:var(--hero-height,80vh);}
.hero-tag{
  color:#fff;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:14px;
}
.nav-center .current{border-bottom:1px solid rgba(255,255,255,.75);padding-bottom:4px;}

/* ===== WHY WE LOVE ANTIGUA (split intro) ===== */
.antigua-intro-grid{
  display:grid;
  grid-template-columns:2fr 3fr;
  gap:56px;
  align-items:center;
}
.antigua-intro-text h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);line-height:1.22;margin:14px 0 18px;}
.antigua-intro-media{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  aspect-ratio:604/210;
}
.antigua-intro-img{
  position:absolute;inset:0;
  background-color:#e4ded0;
  background-size:cover;
  background-position:center;
}
.antigua-intro-media .media-quote{top:28px;right:28px;max-width:220px;font-size:19px;}

/* ===== SECTION HEAD (Stay / Experience / Edit) ===== */
.antigua-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.antigua-section-sub{font-size:16px;color:var(--muted);margin-top:8px;}
.antigua-section-head .link-arrow{flex-shrink:0;padding-bottom:4px;}

/* ===== STAY IN ANTIGUA (4-up photo cards) ===== */
.antigua-stay{background:var(--cream);}
/* Featured split blocks (feedback 5-10 #15): the residence (Turtle Cove)
   and the beach club, each with its own CTA, ahead of the card row. */
.antigua-feature{
  display:grid;
  grid-template-columns:3fr 2fr;
  align-items:stretch;
  margin-bottom:28px;
  background:#fff;
  border:1px solid var(--line);
  transition:border-color .35s ease;
}
.antigua-feature:hover{border-color:#c9d9e6;}
.antigua-feature-img{
  min-height:340px;
  background-color:#e4ded0;
  background-size:cover;
  background-position:center;
}
.antigua-feature-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:48px 56px;
}
.antigua-feature-text h3{font-size:var(--fs-h2);font-weight:var(--fw-h2);line-height:1.22;margin:14px 0 12px;}
.antigua-feature-text p:not(.eyebrow){font-size:16px;color:var(--muted);line-height:1.6;margin-bottom:22px;}
.antigua-feature--reverse{grid-template-columns:2fr 3fr;}
.antigua-feature--reverse .antigua-feature-img{order:2;}
.antigua-feature + .stay-grid{margin-top:40px;}

.stay-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.stay-card{display:block;}
.stay-card-img{
  aspect-ratio:213/150;
  border-radius:2px 2px 0 0;
  background-color:#e4ded0;
  background-size:cover;
  background-position:center;
}
.stay-card-body{
  display:flex;
  flex-direction:column;
  padding:18px;
  border:1px solid var(--line);
  border-radius:0 0 2px 2px;
  background-color:transparent;
  transition:background-color .35s ease, border-color .35s ease;
}
.stay-card:hover .stay-card-body{
  background-color:#eaf1f8;
  border-color:#c9d9e6;
}
.stay-card-body h3{
  display:flex;
  align-items:flex-start;
  min-height:2.6em;
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:6px;
}
.stay-card-loc{font-size:13px;color:var(--muted);margin-bottom:14px;}
.stay-card-desc{
  min-height:2.4em;
  font-size:15.5px;
  color:var(--muted);
  line-height:1.55;
  margin-bottom:16px;
}
.stay-card .link-arrow{font-size:11px;margin-top:auto;}

/* ===== EXPERIENCE ANTIGUA (5-up dest-card grid) ===== */
.antigua-experience{background:var(--cream-2);}
.experience-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
.experience-grid .dest-card{aspect-ratio:1/1;height:auto;}

/* ===== THE LE HAUS EDIT — merged guide: experiences + guide categories
   (feedback 5-10 #16), 5-up small dest-card grid ===== */
.edit-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.edit-card{aspect-ratio:6/5;height:auto;padding:16px;}
.edit-card .dc-row{justify-content:space-between;}
.edit-card .dc-name{margin-bottom:0;}

/* ===== MAKE ANTIGUA YOUR NEXT CHAPTER (closing banner) ===== */
.antigua-cta-banner{min-height:560px;}
.antigua-cta-banner .media-banner-bg{background-color:var(--dark);}
.antigua-cta-banner .media-banner-text{max-width:460px;}
.antigua-cta-banner .hero-actions{margin-top:8px;}

@media (min-width:1101px){
  .antigua-cta-banner .media-banner-text{max-width:600px;}
}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .antigua-intro-grid{grid-template-columns:1fr;gap:30px;}
  .antigua-intro-media{aspect-ratio:auto;height:260px;min-height:0;}
  .antigua-feature,
  .antigua-feature--reverse{grid-template-columns:1fr;}
  .antigua-feature--reverse .antigua-feature-img{order:0;}
  .antigua-feature-img{min-height:260px;}
  .antigua-feature-text{padding:32px 28px;}
  .stay-grid{grid-template-columns:repeat(2,1fr);row-gap:36px;}
  .experience-grid{grid-template-columns:repeat(3,1fr);row-gap:14px;}
  .edit-grid{grid-template-columns:repeat(3,1fr);row-gap:12px;}
}

@media (max-width:640px){
  .antigua-hero .hero-inner{padding-top:130px;}
  .stay-grid{grid-template-columns:1fr;}
  .experience-grid{grid-template-columns:repeat(2,1fr);}
  .edit-grid{grid-template-columns:repeat(2,1fr);}
  .antigua-section-head{align-items:flex-start;}
}