/* ========================================
   HERO SECTION — Auberge de jeunesse
   ======================================== */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-white); /* le texte du hero hérite du blanc (les classes de titre ne portent plus la couleur) */
    overflow: hidden;
    background-color: var(--color-background-dark);
}

/* Image de fond plein écran */
.hero-background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Voile noir uniforme à 32 % pour la lisibilité du texte */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 100%);
}

/* Contenu centré */
.hero-container {
    position: relative;
    z-index: 3;
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-5xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

/* Typographie via les classes réutilisables .title-h3 / .title-display ;
   ici, uniquement les ajustements propres au hero. */
.hero-title {
    margin: 0;
    text-wrap: balance; /* répartit le titre de façon équilibrée sur 2 lignes */
}

/* Typographie via .title-h6 ; ici uniquement la largeur/espacement propres au hero */
.hero-description {
    max-width: 32rem;
    margin: 0 0 var(--space-md);
}

/* Le bouton « Faire une réservation » utilise le système générique .btn .btn-dark
   (components.css) + la typo .title-h6 — aucune règle bouton spécifique au hero. */

/* Responsive */
@media (max-width: 768px) {
    .hero-section {
        min-height: 90vh;
    }

    .hero-container {
        padding: var(--space-5xl) var(--space-lg);
        gap: var(--space-md);
    }

    /* Réduit le 75px de .title-display sur mobile pour éviter le débordement */
    .hero-title {
        font-size: clamp(2.75rem, 11vw, 3.5rem);
    }
}