/* ============================================================
   HAVLO SHARED VISUAL CONTRACT
   One set of rules. Two rendering systems (React + Go templates).
   Both produce the same visual output because both follow these rules.

   Source of truth: docs/calm-authority-creative-direction.md
   Palette: warm ivory (#fcf9f4) + deep navy (#002046) + copper (#a36442)
   Fonts: canonical Instrument Sans display and body tokens
   Rule: No 1px borders — use background shifts for boundaries
   ============================================================ */

/* ── THE HERO CONTRACT ──
   Navy gradient, white text. Always.
   Never dark text on navy. Never. */
.hv-hero-navy {
  background: linear-gradient(160deg, #002046 0%, #1b365d 100%);
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  margin: 0;
}
.hv-hero-navy .hv-hero-label {
  font: 600 0.75rem/1 var(--hv-font-body);
  color: #dba070;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.5rem;
  display: block;
}
.hv-hero-navy .hv-hero-title {
  font: 800 clamp(2.5rem, 5vw, 3.5rem)/1.05 var(--hv-font-display);
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.hv-hero-navy .hv-hero-subtitle {
  font: 400 clamp(1rem, 2vw, 1.25rem)/1.6 var(--hv-font-body);
  color: rgba(255, 255, 255, 0.7);
  max-width: 36rem;
  margin-bottom: 2rem;
}
.hv-hero-navy .hv-cta-primary {
  display: inline-block;
  background: #FFFFFF;
  color: #002046;
  font-family: var(--hv-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.875rem 2rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 120ms ease;
}
.hv-hero-navy .hv-cta-primary:hover { opacity: 0.90; }
.hv-hero-navy .hv-cta-ghost {
  display: inline-block;
  background: transparent;
  color: #FFFFFF;
  font-family: var(--hv-font-body);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.875rem 2rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease;
}
.hv-hero-navy .hv-cta-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.hv-hero-navy .hv-hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Short navy hero — content pages, less padding */
.hv-hero-navy-short {
  background: linear-gradient(160deg, #002046 0%, #1b365d 100%);
  padding: clamp(3rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  margin: 0;
}
.hv-hero-navy-short .hv-hero-label { font: 600 0.75rem/1 var(--hv-font-body); color: #dba070; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; display: block; }
.hv-hero-navy-short .hv-hero-title { font: 700 clamp(1.75rem, 3.5vw, 2.5rem)/1.15 var(--hv-font-display); color: #FFFFFF; letter-spacing: -0.02em; }
.hv-hero-navy-short .hv-hero-subtitle { font: 400 1rem/1.6 var(--hv-font-body); color: rgba(255, 255, 255, 0.7); max-width: 36rem; margin-top: 1rem; }

/* ── IVORY HEADER ──
   For content pages, legal, FAQ — no navy hero */
.hv-hero-ivory {
  background: #fcf9f4;
  padding: clamp(3rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  margin: 0;
}
.hv-hero-ivory .hv-hero-label {
  font: 600 0.75rem/1 var(--hv-font-body);
  color: #a36442;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
  display: block;
}
.hv-hero-ivory .hv-hero-title {
  font: 700 1.75rem/1.15 var(--hv-font-display);
  color: #1c1c19;
}

/* ── THE SECTION RHYTHM ──
   Sections alternate ivory/raised with zero gap.
   Padding is INSIDE sections, not BETWEEN them.
   If you see a screen-height of solid color, something is broken. */
.hv-section-ivory {
  background: #fcf9f4;
  padding: clamp(4rem, 8vw, 6rem) 3rem;
  margin: 0;
}
.hv-section-raised {
  background: #f6f3ee;
  padding: clamp(4rem, 8vw, 6rem) 3rem;
  margin: 0;
}
/* Collapse the gap when content section follows hero — prevents the void */
.hv-hero-ivory + .hv-section-ivory,
.hv-hero-navy + .hv-section-ivory,
.hv-hero-navy-short + .hv-section-ivory {
  padding-top: 2rem;
}
.hv-hero-ivory + .hv-section-raised,
.hv-hero-navy + .hv-section-raised {
  padding-top: 2rem;
}
.hv-section-inner {
  max-width: 72rem;
  margin: 0 auto;
}
.hv-section-label {
  font: 600 0.75rem/1 var(--hv-font-body);
  color: #a36442;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
  display: block;
}
.hv-section-title {
  font: 700 1.75rem/1.15 var(--hv-font-display);
  color: #1c1c19;
  margin-bottom: 1.5rem;
}
.hv-section-body {
  font: 400 1rem/1.6 var(--hv-font-body);
  color: #505f76;
  max-width: 36rem;
}

/* ── THE PROOF STRIP ──
   Single centered text line below hero.
   Copper text on ivory. Bridges hero to content. */
.hv-proof-strip {
  font: 400 1rem/1.6 var(--hv-font-body);
  color: #a36442;
  text-align: center;
  padding: 1.5rem 3rem;
  background: #fcf9f4;
  margin: 0;
}

/* ── NO-LINE CARDS ──
   White cards floating on ivory/raised.
   Ambient shadow only. NEVER a 1px border. */
.hv-card {
  background: #FFFFFF;
  border-radius: 0.375rem;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(28, 28, 25, 0.06);
  border: none;
}
.hv-card-title {
  font: 600 1.125rem/1.3 var(--hv-font-body);
  color: #1c1c19;
  margin-bottom: 0.75rem;
}
.hv-card-body {
  font: 400 1rem/1.6 var(--hv-font-body);
  color: #505f76;
}
.hv-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 1024px) { .hv-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hv-card-grid { grid-template-columns: 1fr; } }

/* ── LARGE METRICS ── */
.hv-metric-value {
  font: 800 3rem/1 var(--hv-font-display);
  font-style: italic;
  color: #1c1c19;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.hv-metric-label {
  font: 600 0.75rem/1 var(--hv-font-body);
  color: #505f76;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── SPLIT LAYOUT ── */
.hv-split {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}
@media (max-width: 768px) { .hv-split { grid-template-columns: 1fr; } }

/* ── FOOTER CTA ──
   Calm invitation. Italic headline. Single navy button.
   NEVER multiple CTAs. NEVER urgency language. */
.hv-footer-cta {
  text-align: center;
  padding: clamp(4rem, 8vw, 7rem) 3rem;
  background: #f6f3ee; /* raised ivory — visually distinct from page ivory (#fcf9f4) */
  margin: 0;
}
.hv-footer-cta-title {
  font: 700 1.75rem/1.15 var(--hv-font-display);
  font-style: italic;
  color: #1c1c19;
  margin-bottom: 1rem;
}
.hv-footer-cta-subtitle {
  font: 400 1rem/1.6 var(--hv-font-body);
  color: #505f76;
  max-width: 32rem;
  margin: 0 auto 2rem;
}
.hv-cta-navy {
  display: inline-block;
  background: #002046;
  color: #FFFFFF;
  font-family: var(--hv-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.875rem 2rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 120ms ease;
}
.hv-cta-navy:hover { opacity: 0.90; }

/* ── PROSE COLUMN ──
   Content pages, legal, FAQ — centered readable prose. */
.hv-prose {
  font: 400 1rem/1.6 var(--hv-font-body);
  color: #1c1c19;
  max-width: 48rem;
  margin: 0 auto;
}
.hv-prose h2 {
  font: 600 1.25rem/1.3 var(--hv-font-display);
  color: #1c1c19;
  margin: 2rem 0 1rem;
}
.hv-prose h3 {
  font: 600 1.1rem/1.3 var(--hv-font-body);
  color: #1c1c19;
  margin: 1.5rem 0 0.75rem;
}
.hv-prose p {
  margin-bottom: 1rem;
  color: #505f76;
}
.hv-prose ul, .hv-prose ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  color: #505f76;
}
.hv-prose li { margin-bottom: 0.5rem; }

/* ── DARK NARRATIVE BAND ──
   Used sparingly — once per page max.
   Navy gradient. White text. Always. */
.hv-narrative-dark {
  background: linear-gradient(160deg, #002046 0%, #1b365d 100%);
  padding: clamp(4rem, 8vw, 6rem) 3rem;
  margin: 0;
  color: #FFFFFF;
}
.hv-narrative-dark .hv-section-title { color: #FFFFFF; }
.hv-narrative-dark .hv-section-body { color: rgba(255, 255, 255, 0.7); }
.hv-narrative-dark .hv-section-label { color: #dba070; }

/* ── MOBILE RESPONSIVENESS ──
   Override inline-styled grids that cannot respond to media queries.
   Attribute selectors match both spaced and non-spaced variants. */
@media (max-width: 768px) {
  /* Force 3-col grids to single column on mobile */
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  /* Force 2-col grids to single column */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Force 12-col grid to single column */
  div[style*="grid-template-columns:repeat(12"],
  div[style*="grid-template-columns: repeat(12"] {
    grid-template-columns: 1fr !important;
  }
  /* Force 4-col stat grids to 2-col */
  div[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Booking page 2-col to stack */
  div[style*="grid-template-columns:1fr 380px"] {
    grid-template-columns: 1fr !important;
  }
  /* Section padding reduction on mobile */
  .hv-section-ivory,
  .hv-section-raised {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (max-width: 480px) {
  /* 4-col stat grids go full single column on small screens */
  div[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}