/* Home page components; colours and typography are shared in main.CSS. */
.home-page { padding-top: 5rem; }
.hero-section { background: linear-gradient(120deg, var(--color-navy), var(--color-teal)); color: var(--color-white); padding: 6rem 8%; }
.hero-content { max-width: 680px; }
.hero-content h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.1; margin-bottom: 1rem; }
.hero-content > p:not(.eyebrow) { color: #e6f3f1; font-size: 1.15rem; line-height: 1.7; max-width: 580px; }
.eyebrow { color: var(--color-orange); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.primary-button { background: var(--color-orange); border-radius: 999px; color: var(--color-white); display: inline-block; font-weight: 700; margin-top: 1rem; padding: .8rem 1.4rem; }
.featured-section { margin: 0 auto; max-width: 1200px; padding: 4rem 1.25rem; }
.section-heading h2 { color: var(--color-navy); font-size: 2rem; margin-bottom: .5rem; }
.status-message { color: var(--color-muted); }
.destination-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.destination-card { background: var(--color-white); border-radius: var(--border-radius); box-shadow: var(--card-shadow); display: flex; flex-direction: column; padding: 1.4rem; }
.destination-card h3 { color: var(--color-navy); margin-bottom: .75rem; }
.destination-card p { color: var(--color-muted); line-height: 1.5; }
.destination-card .trip-price { color: var(--color-teal-dark); font-size: 1.15rem; font-weight: 700; margin-top: auto; }