/* ============================================
   Home Page Styles - Sterke Merken Hotel
   Uses base.css tokens and utilities
   ============================================ */

/* Hero */
.hero--home {
  position: relative;
  padding-top: calc(var(--space-24));
  padding-bottom: calc(var(--space-20));
  color: var(--color-text-inverse);
}
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,22,40,0.65) 0%, rgba(10,22,40,0.6) 40%, rgba(10,22,40,0.75) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
}
.hero__eyebrow { margin-bottom: var(--space-4); }
.hero__title { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.35); }
.hero__subtitle { color: #f3f6ff; max-width: 60ch; }
.hero__cta { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }

/* Booking bar */
.booking {
  margin-top: var(--space-8);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
}
.booking__row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr auto;
  gap: var(--space-4);
}
.booking__actions { display: flex; align-items: end; }
.booking .form-label { color: #fff; }
.booking .form-input, .booking .form-select {
  background-color: rgba(255,255,255,0.95);
}
@media (max-width: 900px) {
  .booking__row {grid-template-columns: auto; }
  .booking__actions { grid-column: 1 / -1; }
}

/* Search bar */
.searchbar { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.searchbar__input { flex: 1 1 320px; }

/* Highlights */
.section--highlights .highlight { text-decoration: none; color: inherit; }
.section--highlights .card h3 { margin-bottom: var(--space-2); }

/* Sections with imagery */
.image-stack__img { width: 100%; height: auto; }

/* Feature list */
.feature-list { margin-top: var(--space-4); }
.feature-list li { position: relative; padding-left: 1.25rem; margin-bottom: var(--space-2); color: var(--color-text-secondary); }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55rem;
  width: 8px; height: 8px;
  background: radial-gradient(circle at 30% 30%, var(--color-accent-400), var(--color-accent-600));
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(212,160,23,0.25);
}

/* Reveal on scroll */
.reveal-on-scroll { opacity: 0; transform: translateY(14px); transition: opacity var(--transition-slow) var(--ease-out), transform var(--transition-slow) var(--ease-out); }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Neutral section background contrast tweaks */
.bg-neutral h2, .bg-neutral h3 { color: var(--color-primary-900); }

/* Commitment section */
.section--commitment .btn { margin: 0 var(--space-2) var(--space-2) 0; }

/* Minor adjustments */
.section--experience h3 { margin-bottom: var(--space-3); }