/* ============================================================
   PAGE & SECTION LAYOUTS
   Reusable section components shared across the 6 pages.
   ============================================================ */

/* ---- Shared typographic helpers ---- */
.lead {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--color-text);
}
.lead--xl { font-size: var(--text-3xl); }
.prose {
  margin-top: var(--space-md);
  color: var(--color-text-muted);
  max-width: 62ch;
}
.on-dark .prose { color: rgba(250, 247, 242, 0.72); }
.on-dark .lead, .on-dark h2, .on-dark h3 { color: var(--color-cream); }

/* ============================================================
   HERO (all pages)
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-cream);
}
.page-hero--short { min-height: 82svh; }
.hero-bg-wrapper { position: absolute; inset: 0; z-index: 0; }
.hero-bg {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Bottom-up darkening for the text + a left-side wash where the copy sits,
     keeping the right of the image (dunes, villas) readable. */
  background:
    linear-gradient(to top,
      rgba(13, 27, 42, 0.90) 0%,
      rgba(13, 27, 42, 0.55) 38%,
      rgba(13, 27, 42, 0.22) 70%,
      rgba(13, 27, 42, 0.12) 100%),
    linear-gradient(to right,
      rgba(13, 27, 42, 0.60) 0%,
      rgba(13, 27, 42, 0.18) 42%,
      rgba(13, 27, 42, 0.00) 72%);
}
.page-hero--dark {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(74, 127, 168, 0.18), transparent 60%),
    var(--color-night);
  align-items: center;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-top: var(--space-2xl);
  /* extra bottom space lifts the copy clear of the scroll indicator */
  padding-bottom: calc(var(--space-2xl) + var(--space-lg));
}
.hero-surtitle {
  display: block;
  font-family: var(--font-accent);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: var(--text-sm);
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 18ch;
  overflow-wrap: break-word;
}
/* Capped so the home title always fits the frame on large screens */
.hero-title--hero {
  font-size: clamp(2.75rem, 1rem + 7.4vw, 7.5rem);
  line-height: 0.94;
  max-width: 15ch;
}
.hero-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-xl);
  margin-top: var(--space-md);
  max-width: 46ch;
  opacity: 0.92;
}
.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  z-index: 2;
}

/* ============================================================
   SPLIT — image + text (asymmetric 60/40), reversible
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 48rem) {
  .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}
.split__media { overflow: hidden; border-radius: var(--radius-sm); }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 0.9s var(--ease-signature); }
.split__media:hover img { transform: scale(1.04); }
.split__figure { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-gold); line-height: 1; }

/* ============================================================
   EDITORIAL — two-column text + pull quote (home intro & pages)
   ============================================================ */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 48rem) {
  .intro-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.intro-left h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.2; }
.intro-left p { margin-top: var(--space-md); color: var(--color-text-muted); max-width: 60ch; }
.intro-left .btn-outline { margin-top: var(--space-lg); }

/* ============================================================
   TIMELINE (la-ville)
   ============================================================ */
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.timeline__item { border-top: 1px solid var(--color-line); padding-top: var(--space-sm); }
.timeline__year { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-sea); }
.timeline__text { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ============================================================
   FEATURE LIST — numbered rows, no boxed cards (taste-compliant)
   ============================================================ */
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--color-line);
}
.feature {
  border-bottom: 1px solid var(--color-line);
  border-right: 1px solid var(--color-line);
  padding: var(--space-lg) var(--space-md);
}
.feature__index { font-family: var(--font-accent); font-size: var(--text-sm); letter-spacing: 0.18em; color: var(--color-gold); }
.feature__title { font-family: var(--font-display); font-size: var(--text-xl); margin-top: var(--space-xs); }
.feature__desc { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-text-muted); }
.on-dark .feature-list { border-color: var(--color-line-light); }
.on-dark .feature { border-color: var(--color-line-light); }
.on-dark .feature__desc { color: rgba(250, 247, 242, 0.7); }

/* ============================================================
   BANNER — full-bleed image with overlay text (golf, equitation…)
   ============================================================ */
.banner {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-cream);
}
.banner__bg {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  z-index: 0;
  will-change: transform;
}
.banner::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(110deg, rgba(13,27,42,0.72) 0%, rgba(13,27,42,0.2) 58%, transparent 100%);
}
.banner--right::after {
  background: linear-gradient(250deg, rgba(13,27,42,0.72) 0%, rgba(13,27,42,0.2) 58%, transparent 100%);
}
.banner__content { position: relative; z-index: 2; max-width: 42rem; }
.banner--right .banner__content { margin-left: auto; text-align: right; }
.banner h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-3xl); line-height: 1.1; }
.banner p { margin-top: var(--space-md); opacity: 0.92; max-width: 46ch; }
.banner--right p { margin-left: auto; }

/* ============================================================
   HOME — lifestyle grid (asymmetric masonry)
   ============================================================ */
.lifestyle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 48rem) {
  .lifestyle-grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
}
.lifestyle-col { display: grid; grid-template-rows: 1fr 1fr; gap: var(--space-md); }
.lifestyle-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
@media (min-width: 48rem) {
  .lifestyle-row-2 { grid-template-columns: 1fr 1.3fr 1fr; }
}
.lifestyle-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  min-height: clamp(12rem, 26vw, 20rem);
}
.lifestyle-card--large { min-height: clamp(20rem, 44vw, 34rem); }
.lifestyle-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-signature); }
.lifestyle-card:hover img, .lifestyle-card:focus-within img { transform: scale(1.06); }
.lifestyle-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: var(--space-md);
  color: var(--color-cream);
  background: linear-gradient(to top, rgba(13,27,42,0.78), transparent 62%);
}
.lifestyle-caption h3 { font-family: var(--font-display); font-size: var(--text-xl); }
.lifestyle-caption p {
  font-size: var(--text-sm);
  opacity: 0;
  max-height: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--dur-med) var(--ease-signature), transform var(--dur-med) var(--ease-signature), max-height var(--dur-med) var(--ease-signature);
}
.lifestyle-card:hover .lifestyle-caption p,
.lifestyle-card:focus-within .lifestyle-caption p { opacity: 0.9; max-height: 6rem; transform: none; }

/* ============================================================
   HOME — investir teaser (dark)
   ============================================================ */
.investir-section { background: var(--color-night); color: var(--color-cream); }
.investir-inner { text-align: center; }
.investir-title { font-family: var(--font-display); font-weight: 300; font-size: var(--text-3xl); line-height: 1.15; max-width: 24ch; margin-inline: auto; }
.investir-text { margin-top: var(--space-md); color: rgba(250,247,242,0.72); max-width: 54ch; margin-inline: auto; }
.investir-inner .section-label-wrapper { justify-content: center; }
.investir-inner .stats-row { margin-top: var(--space-xl); text-align: left; }
.investir-inner .btn-outline { margin-top: var(--space-xl); }

/* ============================================================
   GASTRONOMIE — horizontal scroll track
   ============================================================ */
.gastro-section { background: var(--color-sand); overflow: hidden; }
.gastro-header { padding-bottom: var(--space-lg); }
.gastro-header h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.2; max-width: 24ch; }
.gastro-scroll-wrapper { overflow: hidden; }
.gastro-track {
  display: flex;
  gap: var(--space-lg);
  padding-inline: var(--space-lg);
  width: max-content;
}
.resto-card { flex: 0 0 auto; width: min(24rem, 78vw); }
.resto-img-wrapper { position: relative; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 3 / 4; }
.resto-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-signature); }
.resto-card:hover .resto-img-wrapper img { transform: scale(1.05); }
.resto-tag {
  position: absolute;
  top: var(--space-sm); left: var(--space-sm);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-night);
  background: var(--color-gold);
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
}
.resto-card h3 { font-family: var(--font-display); font-size: var(--text-2xl); margin-top: var(--space-sm); }
.resto-card p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 0.25rem; }
.gastro-footer { padding-top: var(--space-lg); }

/* When horizontal hijack is disabled (mobile / reduced motion) the track
   scrolls naturally on touch. */
@media (max-width: 47.999rem) {
  .gastro-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   PRODUCT LIST (gastronomie page) — emblematic produce
   ============================================================ */
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-lg);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-lg);
}
.product__name { font-family: var(--font-display); font-size: var(--text-2xl); }
.product__desc { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { background: var(--color-night); color: var(--color-cream); text-align: center; }
.cta-band h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-3xl); line-height: 1.12; max-width: 22ch; margin-inline: auto; }
.cta-band p { margin-top: var(--space-md); color: rgba(250,247,242,0.72); max-width: 50ch; margin-inline: auto; }
.cta-band .btn-outline { margin-top: var(--space-xl); }
.cta-band--sand { background: var(--color-sand); color: var(--color-text); }
.cta-band--sand h2 { color: var(--color-text); }
.cta-band--sand p { color: var(--color-text-muted); }

/* ============================================================
   CONTACT form
   ============================================================ */
.contact-section { background: var(--color-sand); }
.contact-inner { text-align: center; }
.contact-inner .section-label-wrapper { justify-content: center; }
.contact-title { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.15; max-width: 20ch; margin-inline: auto; }
.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  text-align: left;
  max-width: 40rem;
  margin-inline: auto;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 32rem) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-field label { font-size: var(--text-sm); letter-spacing: 0.06em; color: var(--color-text-muted); }
.form-field input, .form-field textarea {
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--space-xs);
  transition: border-color var(--dur-fast) var(--ease-signature);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--color-sea); }
.form-field textarea { resize: vertical; min-height: 6rem; }
.form-submit { justify-self: start; }

/* ---- Section heading block ---- */
.section-head { margin-bottom: var(--space-xl); }
.section-head h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.2; max-width: 28ch; }