/* =============================================================
   HERO SECTION  →  template-parts/home/hero.php
   Edit only this file for the homepage hero.
   ============================================================= */

.hero-section {
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-image {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    animation: heroZoom 10s ease-out forwards;
}
@keyframes heroZoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1.0); }
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(15,26,61,0.82) 0%, rgba(15,26,61,0.55) 60%, rgba(15,26,61,0.22) 100%);
}
.hero-content { position: relative; z-index: 1; padding-top: 60px; padding-bottom: 60px; }
.hero-text { max-width: 600px; animation: heroFadeUp 0.9s ease both; }
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-tagline {
    font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--gold-light); margin-bottom: 10px;
    animation: heroFadeUp 0.9s 0.1s ease both;
}
.hero-title {
    font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700; color: var(--white); line-height: 1.15; margin-bottom: 12px;
    animation: heroFadeUp 0.9s 0.2s ease both;
}
.hero-subtitle {
    font-size: 1rem; color: rgba(255,255,255,0.75); letter-spacing: 0.04em;
    margin-bottom: 16px; animation: heroFadeUp 0.9s 0.3s ease both;
}
.hero-description {
    font-size: 1.05rem; color: rgba(255,255,255,0.82);
    margin-bottom: 32px; line-height: 1.7;
    animation: heroFadeUp 0.9s 0.4s ease both;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; animation: heroFadeUp 0.9s 0.5s ease both; }
@media (max-width: 768px) {
    .hero-section { min-height: 440px; }
    .hero-cta { flex-direction: column; align-items: flex-start; }
    .hero-cta .btn { width: 100%; text-align: center; }
}
@media (max-width: 480px) { .hero-section { min-height: 380px; } }