/* =========================================================
   Locations & Venues — page-specific layout
   Reuses tokens/components from css/style.css
   ========================================================= */

/* ---------- Hero ---------- */
.loc-hero{
  position: relative;
  width: 100%;
  max-width: 100%;
  background: var(--c-black-2);
  aspect-ratio: 1440 / 560;
  min-height: 420px;
  display: flex;
  align-items: flex-start;
}
.loc-hero-media{
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.loc-hero-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.loc-hero-scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,13,13,.75) 0%, rgba(13,13,13,.45) 40%, rgba(13,13,13,.18) 65%, rgba(13,13,13,0) 100%);
}
.loc-hero-title, .loc-hero-lede{ text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.loc-hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}
.loc-hero-title{
  font-size: clamp(32px, 5.4vw, 54px);
  max-width: 760px;
  margin-top: 16px;
}
.loc-hero-title .h-script{
  font-size: clamp(34px, 6vw, 60px);
}
.lede.on-dark.loc-hero-lede{
  margin-top: 22px;
  font-size: 18px;
  font-weight: 600;
  max-width: 600px;
  color: #cfc8bd;
}

/* ---------- Intro / The Setting ---------- */
.loc-intro{ padding-top: 90px; padding-bottom: 90px; }
.loc-eyebrow-goldDark{ color: var(--c-gold-dark); }
.loc-eyebrow-goldDark::before{ background: var(--c-gold-dark); }
.loc-intro-title{
  font-size: clamp(30px, 4.2vw, 48px);
  letter-spacing: -0.5px;
  margin-top: 8px;
}
.loc-intro-script{
  font-size: clamp(30px, 4.6vw, 54px);
  margin-top: 6px;
}
.loc-intro-lede{
  margin-top: 26px;
  font-size: 17px;
  max-width: 820px;
}

/* ---------- Venue Types ---------- */
.loc-types{ padding-top: 60px; padding-bottom: 100px; }
.loc-types-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.loc-card{
  position: relative;
  display: block;
  background: var(--c-black-2);
  aspect-ratio: 629 / 420;
  overflow: hidden;
  border-radius: 2px;
  cursor: pointer;
}
.loc-card-media img{ transition: transform .6s ease; }
.loc-card:hover .loc-card-media img{ transform: scale(1.05); }
.loc-card-media{
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.loc-card-media img{
  position: absolute;
  max-width: none;
  object-fit: cover;
}
.loc-card-scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,.4) 45%, rgba(13,13,13,.96) 100%);
}
.loc-card-content{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 5.4% 28px;
  z-index: 2;
}
.loc-card-num{
  display: block;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-gold);
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
  margin-bottom: 10px;
}
.loc-card-title{
  font-family: var(--font-serif-italic);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--c-cream);
  margin-bottom: 10px;
}
.loc-card-desc{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
  color: #d8d2c8;
  max-width: 520px;
}

/* Per-card crop offsets (percentages relative to each card's own box,
   derived from the Figma frame's exact image geometry) */
.loc-card--villas .loc-card-media img{
  left: -3.97%; top: -11.9%; width: 112.08%; height: 111.9%;
}
.loc-card--beachfront .loc-card-media img{
  left: -50.56%; top: -26.43%; width: 162.16%; height: 161.9%;
}
.loc-card--boutique .loc-card-media img{
  left: -2.54%; top: -94.05%; width: 104.13%; height: 234.05%;
}
.loc-card--unique .loc-card-media img{
  left: -1.11%; top: -71.19%; width: 102.23%; height: 229.52%;
}

/* ---------- Regions ---------- */
.loc-regions{ padding-top: 90px; padding-bottom: 90px; }
.loc-regions-title{
  font-size: clamp(30px, 4.2vw, 48px);
  letter-spacing: -0.5px;
  margin-top: 8px;
}
.loc-regions-script{
  font-size: clamp(30px, 4.6vw, 54px);
  margin-top: 6px;
}
.loc-regions-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  row-gap: 40px;
  margin-top: 56px;
}
.loc-region-name{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.16px;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 8px;
}
.loc-region-desc{
  font-family: var(--font-alt);
  font-weight: 600;
  font-size: 12px;
  line-height: 19px;
  color: var(--c-text-muted);
  max-width: 300px;
}

/* ---------- Closing CTA ---------- */
.loc-cta{
  position: relative;
  background: var(--c-navy);
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 100px;
}
.loc-cta-media{
  position: absolute;
  inset: 0;
}
.loc-cta-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
}
.loc-cta-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--c-navy) 0%, rgba(52,88,108,.6) 65%, rgba(52,88,108,.3) 100%);
}
.loc-cta-content{
  position: relative;
  z-index: 2;
}
.loc-cta-title{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.08;
  color: #ffffff;
  margin: 0;
}
.loc-cta-script{
  font-size: clamp(28px, 4.6vw, 54px);
  color: var(--c-gold-light);
  margin-top: 6px;
  max-width: 780px;
}
.loc-cta-lede{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  color: #dbe4e9;
  max-width: 620px;
  margin-top: 22px;
  margin-bottom: 36px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .loc-regions-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px){
  .loc-hero{ aspect-ratio: auto; min-height: 460px; align-items: flex-end; }
  .loc-hero-scrim{
    background: linear-gradient(to top, rgba(13,13,13,.9) 0%, rgba(13,13,13,.7) 45%, rgba(13,13,13,.45) 72%, rgba(13,13,13,.1) 90%, rgba(13,13,13,0) 100%);
  }
  .loc-intro, .loc-regions{ padding-top: 56px; padding-bottom: 56px; }
  .loc-types{ padding-top: 40px; padding-bottom: 56px; }
  .loc-types-grid{ grid-template-columns: 1fr; }
  .loc-card{ aspect-ratio: 4 / 3; }
  .loc-regions-grid{ grid-template-columns: 1fr; row-gap: 32px; }
  .loc-cta{ padding-top: 64px; padding-bottom: 64px; }
}