/**
 * paragraph-hero.css
 * Styles du paragraphe Hero (bundle : hero).
 * Réf. Figma : Hero fifty [RWD]
 */

/* ── Couleurs de fond par variante (field_bg_color) ────────────────────────
 *
 *  uno      → surface-zone-uno    #023C48  teal sombre  → texte blanc
 *  uno-low  → surface-zone-uno-low #6E9096 teal moyen   → texte blanc
 *  duo      → c1-50               #B7C7CB  teal clair   → texte sombre (Figma)
 *  duo-low  → surface-zone-duo-low #CCE7F3 bleu clair   → texte sombre
 *  trio     → surface-zone-trio    #EF7C45 orange       → texte sombre
 * ──────────────────────────────────────────────────────────────────────────── */

.para-hero--uno     { background-color: var(--tw-color-surface-zone-uno,      #023C48); }
.para-hero--uno-low { background-color: var(--tw-color-surface-zone-uno-low,  #6E9096); }
.para-hero--duo     { background-color: var(--tw-color-c1-50,                 #B7C7CB); }
.para-hero--duo-low { background-color: var(--tw-color-surface-zone-duo-low,  #CCE7F3); }
.para-hero--trio    { background-color: var(--tw-color-surface-zone-trio,     #EF7C45); }

/* ── Image de fond (field_image_bg) — remplit toute la colonne ─────────────
 * Tous les intermédiaires Drupal (field div, media article, field__item)
 * sont mis en display:block + taille 100% pour que l'img soit accessible.   */

.para-hero__bg {
  position: absolute;
  inset: 0;
}

.para-hero__bg article,
.para-hero__bg .field,
.para-hero__bg .field__item {
  display: block;
  width: 100%;
  height: 100%;
}

.para-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Masque la légende si elle apparaît dans l'image de fond */
.para-hero__bg .field--name-field-caption {
  display: none;
}

/* ── Image flottante (field_image_over) — ratio 5:4, coins arrondis ────────
 * Centrée dans la colonne image, par-dessus le fond.                         */

.para-hero__over {
  aspect-ratio: 5 / 4;
  width: 100%;
  overflow: hidden;
  border-radius: var(--tw-radius-main, 8px);
}

.para-hero__over article,
.para-hero__over .field,
.para-hero__over .field__item {
  display: block;
  width: 100%;
  height: 100%;
}

.para-hero__over img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Masque la légende depuis le rendu media (on la gère manuellement dans le twig) */
.para-hero__over .field--name-field-caption {
  display: none;
}

/* ── Texte blanc sur fond sombre (uno / uno-low) ──────────────────────────
 *  La couleur est définie sur le slot et héritée par tous les enfants.
 *  Les éléments wysiwyg sont re-forcés explicitement au cas où la feuille
 *  wysiwyg surchargerait l'héritage CSS.                                      */

.para-hero--uno .para-hero__slot,
.para-hero--uno-low .para-hero__slot {
  color: var(--tw-color-content-main-alt-inverse, #ffffff);
}

.para-hero--uno .para-hero__slot .wysiwyg,
.para-hero--uno .para-hero__slot .wysiwyg p,
.para-hero--uno .para-hero__slot .wysiwyg li,
.para-hero--uno .para-hero__slot .wysiwyg a,
.para-hero--uno-low .para-hero__slot .wysiwyg,
.para-hero--uno-low .para-hero__slot .wysiwyg p,
.para-hero--uno-low .para-hero__slot .wysiwyg li,
.para-hero--uno-low .para-hero__slot .wysiwyg a {
  color: var(--tw-color-content-main-alt-inverse, #ffffff);
}