/*
 * ST-TRA-044 — hero des archives (« Appartements ») : titre + accroche, diaporama à droite.
 * Balisage : rh_hero_archive_html() (functions.php), rendu par taxonomy-property-type.php.
 * Diaporama : rh-hero-slideshow.css/.js (qui reconnaissent `.rh-hero-archive__photos`).
 *
 * Reproduit le hero Greenshift de « Le quartier », MESURÉ le 30/09/2026 (on ne peut pas
 * réutiliser son CSS : Greenshift le génère par id de bloc, dans la méta de chaque page) :
 *   - fond saumon plein cadre (palette-color-2) ; conteneur aligné sur la grille du site ;
 *   - ≥ 1000 px : colonne texte = moitié du conteneur − 20 px ; colonne photos en position
 *     absolue, du milieu de l'écran + 20 px jusqu'au bord DROIT de l'écran, toute la hauteur ;
 *     hauteur du bloc = fenêtre − header (comme rh-hero-hauteur.css) ;
 *   - < 1000 px : empilé, texte centré (80 px en haut et en bas), photos 600 px de haut de 690
 *     à 999 px et 400 px en dessous — les hauteurs que suppose rh_hero_sizes().
 * Titre : même taille que le grand titre du hero de « Le quartier » (clamp 45 → 80 px).
 */

.rh-hero-archive {
  position: relative;
  background: var(--theme-palette-color-2, #ff9ea2);
  color: var(--theme-palette-color-8, #ffffff);
}

.rh-hero-archive__contenu {
  display: flex;
  width: var(--theme-container-width, 90vw);
  max-width: var(--theme-normal-container-max-width, 1290px);
  margin-inline: auto;
}

.rh-hero-archive__texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rh-hero-archive__titre {
  margin: 0 0 60px;
  color: inherit;
  font-size: clamp(45px, 5vw, 80px);
  font-weight: 800;
  line-height: 1;
}

.rh-hero-archive__accroche {
  margin: 0;
  color: inherit;
  font-size: 18px;
  line-height: 1.65;
}

.rh-hero-archive__photos {
  overflow: hidden;
}

/* --- Ordinateur : côte à côte --- */
@media (min-width: 1000px) {
  .rh-hero-archive__contenu {
    min-height: calc(100vh - var(--header-height, 120px));
    min-height: calc(100svh - var(--header-height, 120px));
  }

  .rh-hero-archive__texte {
    width: calc(50% - 20px);
    padding-block: clamp(24px, 5vh, 48px);   /* même règle que rh-hero-hauteur.css */
  }

  .rh-hero-archive__photos {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% + 20px);
    right: 0;
  }
}

/* --- Tablette et mobile : empilé --- */
@media (max-width: 999.98px) {
  .rh-hero-archive {
    padding-top: 80px;
  }

  .rh-hero-archive__contenu {
    flex-direction: column;
  }

  .rh-hero-archive__texte {
    align-items: center;
    padding-block: 0 80px;
    text-align: center;
  }

  .rh-hero-archive__titre {
    margin-bottom: 50px;
    /* « Appartements » est UN mot : à 45 px il fait 347 px, plus large que la colonne de 330 px
     * d'un écran de 375 px (mesuré le 30/09). Le grand titre de « Le quartier », lui, passe à la
     * ligne entre ses mots. On borne la taille à 11 % de la largeur d'écran. */
    font-size: clamp(32px, 11vw, 45px);
  }

  .rh-hero-archive__photos {
    position: relative;
    height: 600px;
  }
}

@media (max-width: 689.98px) {
  .rh-hero-archive__photos {
    height: 400px;
  }
}