/* ==========================================================================
   Page sections — hero, offerings, about, booking CTA, interior page headers
   ========================================================================== */

/* ------------------------------------------------------------------ Hero */
.hero,
.section,
.page-head {
  position: relative;
  overflow: hidden;
}
.hero {
  background: var(--grad-hero);
  padding-block: clamp(48px, 7vw, 80px);
}
.hero::before,
.hero::after,
.section::before,
.page-head::before,
.booking::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../images/watercolor-splatters-stars-transparent.png');
  background-position: center top;
  background-size: 118% auto;
  background-repeat: repeat-y;
  opacity: 0.52;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 clamp(80px, 10vw, 160px),
    transparent clamp(220px, 24vw, 360px),
    transparent calc(100% - clamp(220px, 24vw, 360px)),
    #000 calc(100% - clamp(80px, 10vw, 160px)),
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 clamp(80px, 10vw, 160px),
    transparent clamp(220px, 24vw, 360px),
    transparent calc(100% - clamp(220px, 24vw, 360px)),
    #000 calc(100% - clamp(80px, 10vw, 160px)),
    #000 100%
  );
}
.hero::before {
  inset: 0;
  opacity: 0.68;
}
.hero::after {
  content: none;
}
.section > .wrap {
  position: relative;
  z-index: 2;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
}

.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.1;
}
.hero h1 em {
  font-style: italic;
  color: var(--primary);
  position: relative;
  display: inline-block;
}
/* Hand-drawn underline swash, inlined as a data URI (no extra request) */
.hero h1 em::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 9 Q50 2 100 9 Q150 16 198 9' stroke='%23E8B653' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.hero__sub {
  font-size: var(--fs-lg);
  color: var(--ink-md);
  margin: var(--sp-6) 0 var(--sp-7);
  line-height: 1.7;
  max-width: 46ch;
}

.hero__actions { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }

/* Hero slideshow */
.hero__visual {
  position: relative;
  min-width: 0;
}
.hero-slideshow {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: hero-image-reveal 1.1s 0.18s var(--ease) forwards;
}
.hero-slideshow__stage {
  position: relative;
  min-height: clamp(520px, 49vw, 650px);
  overflow: hidden;
  border-radius: 36px 36px 120px 36px;
  background: var(--surface-dk);
  box-shadow: var(--sh-lg);
}
.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-slide:first-child img { object-position: center 42%; }
.hero-slide figcaption {
  position: absolute;
  bottom: var(--sp-3); left: var(--sp-3); right: var(--sp-3);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink);
}
.hero-slideshow__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.hero-slideshow__dots { display: flex; gap: 10px; }
.hero-slideshow__dots button {
  width: 12px; height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-dk);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero-slideshow__dots button:hover { transform: scale(1.2); }
.hero-slideshow__dots button.is-active { background: var(--accent); }
.hero-slideshow__toggle {
  border: 0;
  background: transparent;
  color: var(--primary-dk);
  font: 700 var(--fs-xs) / 1 var(--font-body);
  cursor: pointer;
  padding: var(--sp-2);
}
@keyframes hero-image-reveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* -------------------------------------------------------------- Offerings */
.offerings__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
@media (max-width: 800px) { .offerings__head { grid-template-columns: 1fr; } }

.offerings .card:nth-child(1) {
  background: #EDF8F7;
  border-color: #CBE7E4;
}
.offerings .card:nth-child(2) {
  background: #FFF1F2;
  border-color: #F5D2D5;
}
.offerings .card:nth-child(3) {
  background: #FFF9E8;
  border-color: #F2E2B6;
}

/* ----------------------------------------------------------------- About */
.about {
  background: var(--grad-about);
}
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .about__inner { grid-template-columns: 1fr; } }

.about__media { position: relative; }
.about__photo {
  width: 88%;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 48px 48px 120px 48px;
  background: var(--surface-dk);
}

.values { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.value { display: flex; align-items: flex-start; gap: var(--sp-4); }
.value__icon {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: rgb(var(--accent-rgb) / 0.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--accent-dk);
}
.value__icon svg { width: 20px; height: 20px; }
.value__text strong { display: block; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.value__text span { color: var(--ink-md); font-size: 0.9rem; }

/* --------------------------------------------------------- Booking / CTA */
.booking {
  background: var(--white);
  position: relative;
  overflow: hidden;
  color: var(--ink);
  border-block: 1px solid #F4DDD7;
}
.booking::before {
  opacity: 0.52;
}
.booking::after { content: none; }

.booking__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .booking__inner { grid-template-columns: 1fr; } }

.booking h2 { color: var(--ink); font-size: var(--fs-h2); font-weight: 900; line-height: 1.2; }
.booking p { color: var(--ink-md); font-size: var(--fs-md); line-height: 1.7; margin: var(--sp-5) 0 var(--sp-6); }
.booking .btn--light { background: var(--accent); color: var(--white); box-shadow: var(--sh-accent); }
.booking .btn--light:hover { background: var(--accent-dk); color: var(--white); }

.booking-cards { display: flex; flex-direction: column; gap: var(--sp-4); }
.booking-card {
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid #F1D7CE;
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.booking-card__icon { flex-shrink: 0; color: var(--primary); }
.booking-card__icon svg { width: 26px; height: 26px; }
.booking-card h3 { color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-base); margin-bottom: 2px; }
.booking-card p, .booking-card a { color: var(--ink-md); font-size: var(--fs-sm); margin: 0; line-height: 1.5; }
.booking-card a { text-decoration: underline; text-underline-offset: 3px; }
.booking-card a:hover { color: var(--primary-dk); }

/* ------------------------------------------------- Interior page banner */
.page-head {
  background: var(--grad-head);
  padding-block: clamp(48px, 7vw, 80px);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  opacity: 0.62;
}
/* This element also carries .wrap, so it must not set its own max-width —
   that would override the container width and centre the whole block.
   Constrain the text elements instead. */
.page-head__inner { position: relative; z-index: 2; }
.page-head h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 900; line-height: 1.12; max-width: 20ch; }
.page-head p { color: var(--ink-md); font-size: var(--fs-lg); line-height: 1.7; margin-top: var(--sp-5); max-width: 62ch; }
.page-head--split .page-head__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.page-head__media { display: block; width: min(100%, 400px); justify-self: end; }
.page-head__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 42%;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
.page-head__media--top img { object-position: center top; }
.page-head__media--landscape { width: min(100%, 480px); }
.page-head__media--landscape img { aspect-ratio: 4 / 3; object-position: center; }
@media (max-width: 860px) {
  .page-head--split .page-head__inner { grid-template-columns: 1fr; }
  .page-head__media { justify-self: center; }
}

/* ---------------------------------------------------- Alternating blocks */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.feature + .feature { margin-top: clamp(56px, 8vw, 96px); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

.feature__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
.feature__media--portrait {
  width: min(100%, 560px);
  justify-self: center;
}
.feature__media--portrait img {
  aspect-ratio: 4 / 5;
  object-position: center;
}
@media (min-width: 861px) {
  .feature--flip .feature__media { order: 2; }
}

.feature__body h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: var(--sp-4); }
.feature__body p { color: var(--ink-md); line-height: 1.75; }
.feature__body .btn, .feature__body .link-arrow { margin-top: var(--sp-5); }

/* -------------------------------------------------------- Detail listing */
.detail-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }
.detail {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.detail__icon { color: var(--accent); flex-shrink: 0; }
.detail__icon svg { width: 22px; height: 22px; }
.detail strong { display: block; color: var(--ink); font-size: 0.95rem; }
.detail span { color: var(--ink-md); font-size: 0.92rem; }

/* ------------------------------------------------------------------- 404 */
.notfound { text-align: center; padding-block: clamp(72px, 12vw, 140px); }
.notfound h1 { font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; color: var(--primary); }
.notfound p { color: var(--ink-md); font-size: var(--fs-lg); margin: var(--sp-5) auto var(--sp-7); max-width: 46ch; }

/* --- Small-screen refinements --- */
@media (max-width: 700px) {
  /* Line breaks are tuned for wide headings; let text reflow when narrow. */
  .hero h1 br,
  .section-title br { display: none; }
}

@media (max-width: 560px) {
  .hero::before,
  .section::before,
  .page-head::before,
  .booking::before {
    background-size: 135% auto;
    opacity: 0.46;
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0,
      #000 12px,
      transparent 43px,
      transparent calc(100% - 43px),
      #000 calc(100% - 12px),
      #000 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 12px,
      transparent 43px,
      transparent calc(100% - 43px),
      #000 calc(100% - 12px),
      #000 100%
    );
  }
  .hero__visual { margin-top: var(--sp-6); }
  .hero-slideshow__stage { min-height: min(128vw, 620px); border-radius: 24px 24px 72px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slideshow { opacity: 1; clip-path: none; animation: none; }
  .hero-slide { transition: none; }
}