/* ============================================================
   SeaRendipity — Home page (Phase 3)
   Full-bleed hero, stat bar, welcome, testimonials, extras.
   Depends on tokens.css (+ base.css for reset/helpers).
   Linked ONLY on index.html.
   ============================================================ */

/* Neutralize legacy layout wrappers on the home page so sections
   can run full-bleed. Scoped to body.has-hero (home only). */
body.has-hero { background: var(--color-paper); }
body.has-hero #background {
  background: var(--color-paper);
  min-height: 0;
}
body.has-hero #page {
  max-width: none;
  overflow-x: clip;
}

.home-main {
  display: block;
}

/* Shared section container */
.home-section {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ------------------------------ HERO ------------------------------ */
.home-hero {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 88vh, 860px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.home-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  z-index: 0;
}
.home-hero__slide.is-active { opacity: 1; }
.home-hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-overlay);
  z-index: 1;
}
.home-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-9) var(--container-pad) clamp(3.5rem, 2rem + 6vw, 6rem);
  color: var(--color-on-dark);
}
.home-hero__eyebrow {
  font-family: var(--font-brand);
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  color: var(--color-sand);
  line-height: 1;
  margin: 0 0 var(--space-3);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.home-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: #fff;
  margin: 0 0 var(--space-4);
  max-width: 18ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.home-hero__subtitle {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-on-dark-muted);
  max-width: 52ch;
  margin: 0 0 var(--space-6);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Hero controls */
.home-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}
.home-hero__arrow:hover { background: rgba(0, 0, 0, 0.6); }
.home-hero__arrow--prev { left: clamp(0.5rem, 1vw, 1rem); }
.home-hero__arrow--next { right: clamp(0.5rem, 1vw, 1rem); }
.home-hero__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.home-hero__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.home-hero__dot.is-active {
  background: var(--color-sand);
  transform: scale(1.15);
}

/* ------------------------------ STAT BAR ------------------------------ */
.stat-bar {
  background: var(--gradient-stat);
  color: #fff;
}
.stat-bar__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-6) var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.stat {
  flex: 1 1 140px;
  min-width: 120px;
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.stat__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
}

/* ------------------------------ WELCOME ------------------------------ */
.welcome {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}
.welcome__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.welcome__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
}
.welcome__title .brand-script {
  color: var(--color-teal-deep);
  font-size: 1.35em;
}
.welcome__text p {
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}
.welcome__highlights {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.welcome__highlights li { margin: 0; }
.welcome__media {
  position: relative;
}
.welcome__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.welcome__media::before {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 55%;
  height: 55%;
  border-radius: var(--radius-lg);
  background: var(--gradient-stat);
  opacity: 0.18;
  z-index: -1;
}

/* ------------------------------ TESTIMONIALS ------------------------------ */
.testimonials {
  background: var(--color-sand-soft);
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}
.testimonials__head {
  text-align: center;
  margin-bottom: var(--space-6);
}
.testimonials__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-heading);
  margin: 0;
}
.testi-viewport {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
}
.testi-card {
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  display: none;
}
.testi-card.is-active {
  display: block;
  animation: testiFade var(--dur) var(--ease);
}
@keyframes testiFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.testi-card__mark {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.6;
  color: var(--color-teal);
  opacity: 0.5;
}
.testi-card__quote {
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.15rem);
  line-height: 1.7;
  color: var(--color-text);
  margin: var(--space-3) 0 var(--space-4);
  max-height: 15em;
  overflow-y: auto;
}
.testi-card__author {
  font-weight: var(--fw-semibold);
  color: var(--color-teal-deep);
}
.testi-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.testi-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  color: var(--color-teal-deep);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.testi-arrow:hover { background: var(--color-teal-deep); color: #fff; }
.testi-count {
  font-size: var(--fs-small);
  color: var(--color-muted);
  min-width: 4ch;
  text-align: center;
}

/* ------------------------------ EXTRAS ------------------------------ */
.home-extras {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}
.home-extras__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  align-items: start;
}
.extra-card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.extra-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
}
.extra-card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text);
}
.extra-card li { margin-bottom: var(--space-2); }
.extra-card__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.extra-card__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.video-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 52, 58, 0.38);
  transition: background var(--dur-fast) var(--ease);
}
.video-facade:hover::before,
.video-facade:focus-visible::before { background: rgba(8, 52, 58, 0.22); }
.video-facade__play {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-cta);
  transition: transform var(--dur-fast) var(--ease);
}
.video-facade:hover .video-facade__play { transform: scale(1.06); }
.video-facade__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent var(--color-cta);
}
.video-facade__label {
  position: relative;
  color: #fff;
  font-weight: var(--fw-semibold);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.extra-card__book {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.extra-card .weather-widget { display: block; }

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width: 820px) {
  .welcome__grid { grid-template-columns: 1fr; }
  .welcome__media { order: -1; }
}