/* ==========================================================================
   components.css — Reusable building blocks
   --------------------------------------------------------------------------
   Project:   Kali Villas Mentawai
   Layer:     Components (ITCSS)
   Loaded by: All HTML pages (after base.css)
   --------------------------------------------------------------------------
   Contains atoms and molecules used across multiple pages:
     1. Eyebrow label (small uppercase tag above section titles)
     2. Section title (large serif headline)
     3. Terracotta divider rule
     4. Body text block
     5. Inline text link with arrow
     6. Filled and outlined buttons
     7. CTA section (used at the bottom of every page)
     8. Scroll-reveal animation classes (.reveal + delay variants)
     9. Shared keyframes
    10. Two-column page header (used on inner pages)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Eyebrow — small uppercase tag, sits above a section title
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  margin-bottom: 2rem;
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terra);
}


/* --------------------------------------------------------------------------
   2. Section title — the primary serif headline pattern
   -------------------------------------------------------------------------- */
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--navy);
}
.section-title em {
  font-style: italic;
  color: var(--terra);
}

/* Subsection title — same family as .section-title at a smaller size.
   Used for sub-block headers (rates header, transfer summary, etc.). */
.subsection-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--navy);
}
.subsection-title em {
  font-style: italic;
  color: var(--terra);
}


/* --------------------------------------------------------------------------
   3. Terracotta divider — short horizontal accent under titles
   -------------------------------------------------------------------------- */
.terra-rule {
  width: 40px;
  height: 1px;
  margin: 2.5rem 0;
  background: var(--terra);
}


/* --------------------------------------------------------------------------
   4. Body text — the standard prose block
   -------------------------------------------------------------------------- */
.body-text {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 2.0;
  color: var(--navy-muted);
}
.body-text p + p {
  margin-top: 1.5rem;
}


/* --------------------------------------------------------------------------
   5. Inline text link with trailing arrow
   --------------------------------------------------------------------------
   The arrow grows on hover via the gap transition for a small motion cue.
   -------------------------------------------------------------------------- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  font-size: 0.67rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
  text-decoration: none;
  transition: gap 0.35s;
}
.text-link::after {
  content: '→';
  font-size: 0.875rem;
}
.text-link:hover {
  gap: 1.25rem;
}


/* --------------------------------------------------------------------------
   6. Buttons — filled (primary) and outlined (secondary)
   -------------------------------------------------------------------------- */
.btn-fill {
  display: inline-block;
  padding: 1.1rem 3rem;
  background: var(--terra);
  color: var(--sand);
  border: none;
  font-size: 0.67rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s;
}
.btn-fill:hover {
  background: var(--terra-light);
}

.btn-outline {
  display: inline-block;
  padding: 1.1rem 3rem;
  background: transparent;
  color: var(--sand);
  border: 0.5px solid rgba(245, 239, 227, 0.3);
  font-size: 0.67rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.3s;
}
.btn-outline:hover {
  border-color: var(--sand);
}


/* --------------------------------------------------------------------------
   7. CTA section — the dark navy block at the bottom of most pages
   -------------------------------------------------------------------------- */
.cta-section {
  padding: 9rem 4rem;
  background: var(--navy);
  text-align: center;
}

.cta-eyebrow {
  display: block;
  margin-bottom: 2rem;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terra-light);
}

.cta-title {
  margin: 0 auto 1.5rem;
  max-width: 640px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--sand);
}
.cta-title em {
  font-style: italic;
  color: rgba(245, 239, 227, 0.65);
}

.cta-sub {
  margin-bottom: 3.5rem;
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(245, 239, 227, 0.72);
}

.cta-btns {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .cta-section {
    padding: 6rem 1.75rem;
  }
}


/* --------------------------------------------------------------------------
   8. Scroll reveal — fades content in as it enters the viewport
   --------------------------------------------------------------------------
   Trigger:    js/reveal.js adds the .visible class via IntersectionObserver
   Variants:   .d1 .d2 .d3 stagger sibling reveals by 0.15s each
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.d1 { transition-delay: 0.15s; }
.d2 { transition-delay: 0.30s; }
.d3 { transition-delay: 0.45s; }


/* --------------------------------------------------------------------------
   9. Shared keyframes
   -------------------------------------------------------------------------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --------------------------------------------------------------------------
   10. Two-column page header
   --------------------------------------------------------------------------
   Used on inner pages (book.html, how-to-get-here.html) for the intro
   block: an eyebrow + title on the left, supporting copy + cards on the
   right. Page-specific stylesheets only need to override the mobile
   breakpoint padding (most pages collapse to a single column at 900px).
   -------------------------------------------------------------------------- */
.page-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12rem 4rem 6rem;
}
.page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--navy);
}
.page-title em {
  font-style: italic;
  color: var(--terra);
}
.header-body {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.95;
  color: var(--navy-muted);
}
.header-body p + p {
  margin-top: 1.25rem;
}