/*
 * ST-TRA-041 — Hero : hauteur calée sur la fenêtre, titre de page dans le bloc. CSS pur.
 * Child theme versionné (UXQ-P-03 : rien au Customizer). Pendant PHP : functions.php,
 * `rh_hero_titre_integre()` (le titre de page entre dans le hero).
 *
 * Demandes d'Etienne du 30/09/2026 :
 *   1. la marge au-dessus du titre de page était trop grande → puis, en relecture : le titre
 *      doit entrer DANS le hero, qui démarre alors juste sous le header, comme sur l'accueil ;
 *   2. le hero doit prendre la hauteur de la fenêtre, sur toutes les pages qui l'ont (au 30/09 :
 *      accueil, « Le quartier », « The Neighborhood »).
 *
 * Constat mesuré (1440 × 900) :
 *   - 60 px au-dessus du titre (50 px sur mobile) : `--theme-content-vertical-spacing`, réglé
 *     dans le Customizer de Blocksy pour tout le site ;
 *   - hero à 1000 px FIXES (`min-height`, Greenshift, par id de bloc) : à 900 px de haut, le bas
 *     du bloc et les points du diaporama sont hors écran ;
 *   - colonne gauche à 200 px de marge intérieure en haut et en bas (Greenshift) pour 529 px de
 *     contenu sur l'accueil : ramener le hero à la fenêtre sans toucher à cette marge ferait
 *     déborder le texte de 149 px.
 *
 * SIGNATURE du hero = 1ʳᵉ rangée pleine largeur du contenu, comme HERO_SELECTOR (rh-hero.js),
 * l'exclusion RH-1 (rh-reveal.js) et rh-hero-slideshow.css — GARDER SYNCHRO. Pas d'id de bloc :
 * parité FR/EN et pages futures.
 *
 * `!important` : Greenshift pose `min-height` et `padding` par ID de bloc (spécificité haute).
 * Même justification que rh-hero-slideshow.css, et même périmètre étroit.
 */

:root {
  /* --- TUNABLES --- */
  /* Haut et bas de la colonne texte du hero (était 200 px). Suit la hauteur de la fenêtre :
   * à 48 px fixes, le texte de l'accueil (512 px) ne tenait plus sous 720 px de haut. */
  --rh-hero-col-marge: clamp(24px, 5vh, 48px);
}

/* --- Le hero démarre sous le header : l'espacement vertical de Blocksy (60 px) n'a plus de
 * titre à séparer du header sur ces pages. L'accueil n'en a déjà pas. -------------------- */
.ct-container-full[data-vertical-spacing*="top"]:has(> article > .entry-content > .gspb_row.alignfull:first-child) {
  padding-top: 0;
}

/* --- Titre de page injecté en tête de la colonne texte (functions.php). Même graisse et même
 * taille que le titre de page de Blocksy qu'il remplace, en blanc sur le saumon du hero. --- */
.rh-hero-page-title {
  margin: 0 0 20px;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.5;
}

/* --- Ordinateur : colonnes côte à côte (en deçà de 1000 px, Greenshift les empile, et un hero
 * à hauteur d'écran n'a plus de sens). ------------------------------------------------------ */
@media (min-width: 1000px) {
  main .entry-content > .gspb_row.alignfull:first-child {
    /*
     * `--header-height` (Blocksy, 120 px ici) et NON `--rh-header-h` (rh-sticky.js) : ce dernier
     * suit le rétrécissement du header au défilement, et le hero changerait de hauteur pendant
     * qu'on défile.
     *
     * `min-height` et non `height` : si la fenêtre est trop basse pour le contenu, le bloc
     * grandit au lieu de couper le texte. La colonne photo (position absolute, top/bottom 0)
     * suit la hauteur du bloc.
     */
    min-height: calc(100vh - var(--header-height, 120px)) !important;
    min-height: calc(100svh - var(--header-height, 120px)) !important;
    height: auto !important;
  }

  /* Colonne texte (celle qui porte le titre du hero) : marge réduite, contenu déjà centré
   * verticalement par Greenshift (flex colonne, justify-content: center). */
  main .entry-content > .gspb_row.alignfull:first-child > .gspb_row__content
    > [class*="gspb_row__col"]:has(:is(h1, h2, h3, h4, .gspb_heading)) {
    padding-top: var(--rh-hero-col-marge) !important;
    padding-bottom: var(--rh-hero-col-marge) !important;
  }
}