/* ==========================================================================
 # Ajustements Central Hostel (nov. 2026)
 Chargé après dist/styles/main.css (voir inc/hooks/booking-bar.php)
========================================================================== */

/* Ombres des blocs du bandeau (titre et barre de réservation, aussi une fois collée), sans bordure */
:root {
  --ch-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.5);
  --ch-shadow-mobile: 0 1rem 2.5rem rgba(0, 0, 0, 0.5);
}

/* Police du titre du bandeau : ITC Avant Garde Demi (choix de la cliente, nov. 2026) */
@font-face {
  font-family: "CH ITC Avant Garde Demi";
  src: url("fonts/ITCAvantGardeStd-Demi.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Header : titre du bandeau
   Un bloc par ligne (fond crème, ombre portée), séparé de la ligne suivante.
   Deux lignes au maximum : lignes équilibrées, zone de titre de la largeur de la barre
   de réservation, et custom/hero-title.js réduit la taille si un titre dépasse encore.
   La couleur de titre réglée par page est neutralisée pour rester lisible.
   Marges calées sur ITC Avant Garde : plus de marge en haut qu'en bas, car la police
   garde déjà de la place sous la ligne pour les lettres qui descendent (g, p...). */
.hero__title {
  display: block;
  margin: 0;
  padding: 0 0.6em; /* place des marges latérales de chaque bloc : aucune ligne plus large que la barre */
  color: var(--color-black) !important;
  font-family: "CH ITC Avant Garde Demi", var(--font-emphasize);
  font-weight: 600;
  letter-spacing: var(--negative-letter-spacing);
  line-height: 1.63;
  text-wrap: balance;
  filter: drop-shadow(0 1rem 1.25rem rgba(0, 0, 0, 0.5));
}

.hero__title-text {
  position: relative;
  top: 0.135em;
  padding: 0.35em 0.6em 0.08em;
  background: var(--color-background);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Une seule colonne, de la largeur de la barre de réservation (52.5rem) :
   le titre ne dépasse jamais la barre, et la barre garde sa largeur quel que soit le titre */
.hero__inner {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 890px) {
  .hero__inner {
    grid-template-columns: minmax(0, 52.5rem);
    justify-content: center;
  }

  .hero__container {
    max-width: none;
  }

  .hero__title {
    filter: drop-shadow(0 1.5rem 1.75rem rgba(0, 0, 0, 0.5));
  }
}

/* Contenu du bandeau sans contexte d'empilement propre : la barre de réservation
   qu'il contient peut ainsi rester au-dessus de la page une fois collée */
.hero__inner {
  z-index: auto;
}

/* Bloc « titre + barre de réservation » centré verticalement dans le bandeau :
   autant d'espace au-dessus du titre que sous la barre. Sans titre (accueil) : barre centrée. */
.hero__inner {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
  justify-items: center;
  align-items: start;
}

/* --ch-hero-overlap : hauteur du menu qui recouvre le haut du bandeau (calculée en JS) */
.hero__inner {
  margin-top: var(--ch-hero-overlap, 0px);
}

.hero__container {
  grid-row: 2;
}

.hero__inner > .ch-booking--in-hero {
  grid-row: 3;
}

/* Tout dans l'unique colonne (sinon un bloc vide décale la barre dans une 2e colonne) */
.hero__inner > * {
  grid-column: 1;
}

/* Accueil (pas de titre) : le bloc titre vide est retiré */
.hero--no-title .hero__container {
  display: none;
}

.hero--no-title .hero__inner > .ch-booking--in-hero {
  grid-row: 2;
  margin-top: 0;
}

/* Header mobile : image visible et hauteur homogène sur toutes les pages */
@media (max-width: 889px) {
  .hero--has-media {
    min-height: 50vh;
    min-height: 50svh;
    overflow: hidden;
  }

  .hero--has-media .hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* Footer : partie droite retirée, la partie menus prend toute la largeur */
.site-footer__main {
  flex-basis: 100%;
}

/* Ordinateur : « Nos destinations » et « Informations » centrés dans la section,
   mentions verticales (cookies, crédits) toujours calées en bas à droite */
@media (min-width: 890px) {
  .site-footer__main {
    position: relative;
    justify-content: center;
    align-items: flex-start;
    column-gap: 8rem;
  }

  .site-footer__vertical {
    position: absolute;
    right: 3.125rem;
    bottom: 3.75rem;
    margin: 0;
  }
}