/* ==========================================================================
   pages/home.css — index.html
   --------------------------------------------------------------------------
   Project:   Kali Villas Mentawai
   Layer:     Page (ITCSS)
   Loaded by: index.html (LAST, after base + components + nav + footer)
   --------------------------------------------------------------------------
   Page sections, in document order:
     1. Hero                — full-bleed video over poster image
     2. Intro ("The Place") — two-column with intro image
     3. Wave feature        — "A perfect left at the doorstep"
     4. Gallery (Fragments) — five-image asymmetric grid
     5. Quote strip         — italic editorial quote, two stable lines
     6. CTA                 — handled by components.css (.cta-section)
   ========================================================================== */


/* ==========================================================================
   1. Hero
   --------------------------------------------------------------------------
   Z-index stack (back to front):
     0  .hero-img      — bg image (single still — see note)
     2  .hero-overlay  — gradient on top of image for text legibility
     3  .hero-content  — copy + CTA, sits above the overlay

   The home hero used to ship an autoplay <video> at z-index 1 above the
   poster image. We dropped it in favour of a single high-quality still:
   smaller payload, faster paint, identical mood. The waves page still
   uses video — see css/pages/waves.css for the .hero-video rule there.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../../img/aerial/aerial.jpg');
  background-size: cover;
  background-position: center 40%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(12, 10, 8, 0.20)  0%,
    rgba(12, 10, 8, 0.10) 25%,
    rgba(12, 10, 8, 0.55) 65%,
    rgba(12, 10, 8, 0.82) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 3;
  padding: 0 4rem 8rem;
  max-width: 880px;
}

.hero-eyebrow {
  margin-bottom: 1.5rem;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--terra);
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 0.30s;
}

.hero-title {
  margin-bottom: 2rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 300;
  line-height: 1.0;
  color: #f2ede4;
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 0.55s;
}
.hero-title em {
  font-style: italic;
  color: rgba(242, 237, 228, 0.65);
}

.hero-sub {
  margin-bottom: 3rem;
  max-width: 380px;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: rgba(242, 237, 228, 0.72);
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 0.75s;
}

.hero-cta {
  display: inline-block;
  padding: 1rem 2.75rem;
  border: 0.5px solid rgba(242, 237, 228, 0.55);
  font-size: 0.67rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  color: #f2ede4;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 0.95s;
}
.hero-cta:hover {
  background: #f2ede4;
  color: var(--navy);
  border-color: #f2ede4;
}

/* "Scroll" indicator in the bottom-right corner of the hero */
.hero-scroll {
  position: absolute;
  z-index: 3;
  bottom: 3rem;
  right: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 1.30s;
}
.hero-scroll span {
  writing-mode: vertical-rl;
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.5);
}
.scroll-line {
  width: 0.5px;
  height: 52px;
  background: rgba(242, 237, 228, 0.4);
  transform-origin: top;
  animation: scrollLine 2.2s ease-in-out infinite 1.6s;
}

@keyframes scrollLine {
  0%, 100% { transform: scaleY(1);    opacity: 1;   }
  50%      { transform: scaleY(0.25); opacity: 0.3; }
}


/* ==========================================================================
   2. Intro ("The Place")
   ========================================================================== */
.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 9rem 4rem;
}

.intro-img-wrap {
  position: relative;
  overflow: hidden;
}
.intro-img-wrap img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.intro-img-wrap:hover img {
  transform: scale(1.03);
}

/* Terracotta corner accent on the image — top + left edges */
.intro-img-wrap::before,
.intro-img-wrap::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  background: var(--terra);
  z-index: 2;
}
.intro-img-wrap::before { width: 56px; height: 3px;  }
.intro-img-wrap::after  { width: 3px;  height: 56px; }


/* ==========================================================================
   3. Wave feature — "A perfect left at the doorstep"
   ========================================================================== */
.wave-section {
  background: var(--sand-dark);
  border-top: 0.5px solid var(--sand-deeper);
  border-bottom: 0.5px solid var(--sand-deeper);
}

.wave-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

.wave-img {
  overflow: hidden;
}
.wave-img img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.wave-section:hover .wave-img img {
  transform: scale(1.03);
}

.wave-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 5rem;
}
/* The wave feature's section title sits closer to its terra-rule than the
   default — slightly tighter bottom margin keeps the rule visually paired. */
.wave-content .section-title {
  margin-bottom: 2rem;
}


/* ==========================================================================
   4. Gallery (Fragments) — compact horizontal carousel
   --------------------------------------------------------------------------
   The carousel itself (.gallery-carousel, .carousel-track, .carousel-item,
   arrows, edge fades, mobile breakpoint) is a shared component defined in
   css/carousel.css. This section only carries page-level container chrome.
   ========================================================================== */
.gallery-section {
  padding: 8rem 4rem;
}
.gallery-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.5rem;
}
/* Inside the header, the eyebrow + text-link are inline-balanced with no
   surrounding margins (parent .gallery-header handles spacing). */
.gallery-header .eyebrow   { margin-bottom: 0; }
.gallery-header .text-link { margin-top: 0; }


/* ==========================================================================
   5. Quote strip — italic editorial quote, two stable lines
   --------------------------------------------------------------------------
   The quote is forced to break after the em-dash via .quote-break which
   becomes a block-level span at desktop widths. On narrow screens the span
   reverts to inline so the text wraps naturally.
   ========================================================================== */
.quote-strip {
  padding: 7rem 4rem;
  text-align: center;
}

.quote-mark {
  margin-bottom: 2rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 5rem;
  font-weight: 300;
  line-height: 0.6;
  color: var(--terra-pale);
}

.quote-text {
  max-width: 880px;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--navy);
  text-wrap: balance;
}
.quote-text .quote-break {
  display: block;
}
@media (max-width: 700px) {
  .quote-text .quote-break {
    display: inline;
  }
}

.quote-attr {
  margin-top: 2rem;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--navy-dim);
}


/* ==========================================================================
   Mobile breakpoints (< 900px)
   ========================================================================== */
@media (max-width: 900px) {
  .hero-content   { padding: 0 1.75rem 5rem; }
  .hero-scroll    { display: none; }

  .intro          { grid-template-columns: 1fr; padding: 6rem 1.75rem; gap: 3rem; }
  .intro-img-wrap img { height: 300px; }

  .wave-inner     { grid-template-columns: 1fr; }
  .wave-img img   { min-height: 280px; height: 280px; }
  .wave-content   { padding: 3.5rem 1.75rem; }

  .gallery-section  { padding: 6rem 1.75rem; }
  .gallery-header   { flex-direction: column; align-items: flex-start; gap: 1rem; }
  /* Carousel mobile rules now live in css/carousel.css (shared) */

  .quote-strip    { padding: 5rem 1.75rem; }
}