/* IAF Image (big_images) — aligné sur optional_image (iaf-modular).
   Layouts : --layout-full-bleed | --layout-grid | --layout-content-column.
   Fit : --fit-cover | --fit-contain (object-fit ou background-size).
   Grille Satzspiegel : --iaf-hero-loc-max 1440px, padding 64px, 6 cols (nav / modular).
   Assombrissement : --iaf-big-image-overlay sur __bg::after ou __image-frame::after.
   Comportement scroll : --behavior-* (plein écran __bg uniquement).
   Reveal : 95→100 vw/vh (full bleed) ; fondu/scale sur __image-frame (grille / colonne). */

:root {
  --iaf-hero-loc-padding-inline: 64px;
  --iaf-hero-loc-padding-top: 100px;
  --iaf-hero-loc-padding-bottom: 80px;
  --iaf-hero-loc-max: 1440px;
  --iaf-hero-loc-grid-gap: 32px;
  --iaf-hero-loc-right-gap: 32px;
}

.iaf-hero-location {
  position: relative;
  box-sizing: border-box;
  min-height: 100svh;
  min-height: 100vh;
  width: 100%;
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
  background-color: transparent;
  /* Reveal au chargement — hero uniquement (+50 % vs tokens reveal globaux). */
  --iaf-reveal-dur-in-1: 0.63s;
  --iaf-reveal-dur-in-2: 0.72s;
  --iaf-reveal-ease-in: cubic-bezier(0.33, 0, 0.2, 1);
}

/* Calque image : reveal 95vw/vh → 100vw/vh + fondu. */
.iaf-hero-location__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #eeeeee;
  background-image: var(--iaf-hero-loc-image, none);
  background-size: 95vw 95vh;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  opacity: 0;
  will-change: opacity, background-size;
  transition:
    opacity var(--iaf-reveal-dur-in-1) var(--iaf-reveal-ease-in),
    background-size var(--iaf-reveal-dur-in-1) var(--iaf-reveal-ease-in);
}

.iaf-hero-location__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--iaf-big-image-overlay, 0));
}

.iaf-hero-location--darkening-0 .iaf-hero-location__bg::after {
  content: none;
}

.iaf-hero-location--behavior-fixed .iaf-hero-location__bg {
  background-attachment: fixed;
}

.iaf-hero-location--behavior-parallax .iaf-hero-location__bg {
  will-change: transform, opacity, background-size;
}

.iaf-hero-location__bg--video {
  background-image: none;
}

.iaf-hero-location__bg-video,
.iaf-hero-location__media-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.iaf-hero-location__bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(0.95);
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--iaf-reveal-dur-in-1) var(--iaf-reveal-ease-in),
    transform var(--iaf-reveal-dur-in-1) var(--iaf-reveal-ease-in);
}

.iaf-hero-location__bg--video.is-revealed .iaf-hero-location__bg-video {
  opacity: 1;
  transform: scale(1);
}

.iaf-hero-location--behavior-parallax .iaf-hero-location__bg-video,
.iaf-hero-location--behavior-parallax .iaf-hero-location__media-video {
  will-change: transform;
}

/* Full bleed — fill (cover) : l’image remplit tout le cadre, sans letterbox. */
.iaf-hero-location--layout-full-bleed .iaf-hero-location__bg {
  background-size: cover;
}

.iaf-hero-location__bg.is-revealed {
  opacity: 1;
  will-change: auto;
}

.iaf-hero-location--layout-full-bleed .iaf-hero-location__bg.is-revealed {
  background-size: cover;
}

.iaf-hero-location--behavior-parallax .iaf-hero-location__bg.is-revealed {
  will-change: transform;
}

/* -------- Image <img> (grille / colonne contenu) — parité modular -------- */

.iaf-hero-location__figure {
  margin: 0;
}

.iaf-hero-location__image-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.iaf-hero-location__image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--iaf-big-image-overlay, 0));
}

.iaf-hero-location--darkening-0 .iaf-hero-location__image-frame::after {
  content: none;
}

.iaf-hero-location__img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.iaf-hero-location--fit-cover .iaf-hero-location__image-frame {
  aspect-ratio: 3 / 2;
}

.iaf-hero-location--fit-cover .iaf-hero-location__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grille / colonne — fill (cover), pas contain. */
.iaf-hero-location--layout-grid .iaf-hero-location__image-frame,
.iaf-hero-location--layout-content-column .iaf-hero-location__image-frame {
  aspect-ratio: 3 / 2;
}

.iaf-hero-location--layout-grid .iaf-hero-location__img,
.iaf-hero-location--layout-content-column .iaf-hero-location__img,
.iaf-hero-location--layout-grid .iaf-hero-location__media-video,
.iaf-hero-location--layout-content-column .iaf-hero-location__media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iaf-hero-location--fit-contain .iaf-hero-location__img,
.iaf-hero-location--fit-contain .iaf-hero-location__media-video {
  height: auto;
  object-fit: contain;
}

.iaf-hero-location__media {
  opacity: 0;
  transition: opacity var(--iaf-reveal-dur-in-1) var(--iaf-reveal-ease-in);
}

.iaf-hero-location__media.is-revealed {
  opacity: 1;
}

.iaf-hero-location--behavior-parallax .iaf-hero-location__img,
.iaf-hero-location--behavior-parallax .iaf-hero-location__media-video {
  will-change: transform;
}

/* Layout : Within the Grid (6 col, max 1440px) */

.iaf-hero-location--layout-grid {
  min-height: 100svh;
  min-height: 100vh;
}

.iaf-hero-location--image-only.iaf-hero-location--layout-grid {
  min-height: 0;
}

.iaf-hero-location--image-only.iaf-hero-location--layout-grid .iaf-hero-location__layout-inner--media {
  position: relative;
  left: auto;
  transform: none;
  padding: var(--iaf-hero-loc-padding-top) var(--iaf-hero-loc-padding-inline)
    var(--iaf-hero-loc-padding-bottom);
  box-sizing: border-box;
  max-width: var(--iaf-hero-loc-max);
  margin: 0 auto;
}

.iaf-hero-location--layout-grid .iaf-hero-location__layout-inner--media {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--iaf-hero-loc-max);
  padding: var(--iaf-hero-loc-padding-top) var(--iaf-hero-loc-padding-inline) 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--iaf-hero-loc-grid-gap);
  pointer-events: none;
}

.iaf-hero-location--layout-grid .iaf-hero-location__media--grid {
  grid-column: 1 / -1;
  min-width: 0;
}

.iaf-hero-location--layout-grid.iaf-hero-location--behavior-fixed .iaf-hero-location__layout-inner--media {
  position: fixed;
  top: 0;
  padding-top: var(--iaf-hero-loc-padding-top);
}

/* Layout : colonne contenu (cols 3–6, comme iaf-modular__content-wrap) */

.iaf-hero-location--layout-content-column {
  min-height: 0;
  overflow: visible;
  color: var(--iaf-canvas-heading, #1e1e1e);
}

.iaf-hero-location--layout-content-column .iaf-hero-location__title {
  color: var(--iaf-canvas-heading, #1e1e1e);
}

.iaf-hero-location--layout-content-column .iaf-hero-location__body {
  color: var(--iaf-canvas-text, #1e1e1e);
  opacity: 1;
}

.iaf-hero-location--layout-content-column .iaf-hero-location__media--content-column {
  margin-bottom: var(--iaf-hero-loc-right-gap);
}

.iaf-hero-location__inner {
  position: relative;
  z-index: 1;
  max-width: var(--iaf-hero-loc-max);
  margin: 0 auto;
  padding: var(--iaf-hero-loc-padding-top) var(--iaf-hero-loc-padding-inline)
    var(--iaf-hero-loc-padding-bottom);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* Cascade : ligne horizontale puis bloc texte (grille). */
.iaf-hero-location .iaf-reveal.iaf-reveal--stagger {
  --iaf-reveal-stagger-step: 270ms;
}

.iaf-hero-location__text-block {
  width: 100%;
  min-width: 0;
}

.iaf-hero-location__top-rule {
  flex-shrink: 0;
  height: var(--iaf-separator-thickness, 1px);
  width: 100%;
  max-width: calc(var(--iaf-hero-loc-max) - (var(--iaf-hero-loc-padding-inline) * 2));
  background-color: var(--iaf-separator-color, var(--iaf-canvas-border-strong));
  margin: 0 0 var(--iaf-ext-divider-gap, 60px);
}

/* Plein écran photo : filet blanc opaque (texte blanc sur image). */
.iaf-hero-location--layout-full-bleed:not(.iaf-hero-location--no-photo):not(.iaf-hero-location--bg-video) .iaf-hero-location__top-rule {
  background-color: #ffffff;
}

.iaf-hero-location__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--iaf-hero-loc-grid-gap);
  align-items: start;
  row-gap: 24px;
}

.iaf-hero-location__title {
  /* Même ancrage que `.iaf-listing__title-wrap` / `.iaf-slides__title-wrap` : col 1–2. */
  grid-column: 1 / span 2;
  margin: 0;
  color: #ffffff;
  text-wrap: balance;
}

.iaf-hero-location__right {
  /* Colonnes 3–6 : intro, corps, CTA (comme `.iaf-listing__items`, `.iaf-slides__list`). */
  grid-column: 3 / span 4;
  display: flex;
  flex-direction: column;
  gap: var(--iaf-hero-loc-right-gap);
  min-width: 0;
}

.iaf-hero-location--no-title .iaf-hero-location__right {
  grid-column: 3 / span 4;
}

.iaf-hero-location__intro {
  margin: 0;
  color: #ffffff;
  text-wrap: pretty;
  opacity: 0.95;
}

.iaf-hero-location__body {
  margin: 0;
  color: #ffffff;
  text-wrap: pretty;
  opacity: 0.95;
}

.iaf-hero-location__body p {
  margin: 0;
}

.iaf-hero-location__body p + p {
  margin-top: 16px;
}

.iaf-hero-location__body em,
.iaf-hero-location__intro em {
  font-style: italic;
}

.iaf-hero-location__cta-wrap {
  margin: 0;
  padding-top: 4px;
}

.iaf-hero-location__cta.iaf-cta-pill {
  /* Pilule blanche / texte Léman 100 = cta.css (identique texte/quote pill). */
  display: inline-block;
  align-self: flex-start;
}

@media (max-width: 1023px) {
  :root {
    --iaf-hero-loc-padding-inline: var(--iaf-layout-padding-inline-tablet, 24px);
    --iaf-hero-loc-padding-top: 56px;
    --iaf-hero-loc-padding-bottom: 56px;
    --iaf-hero-loc-right-gap: 20px;
  }

  .iaf-hero-location__bg,
  .iaf-hero-location--behavior-fixed .iaf-hero-location__bg {
    background-attachment: scroll;
  }

  .iaf-hero-location__title {
    grid-column: 1 / -1;
  }

  .iaf-hero-location__right {
    grid-column: 1 / -1;
  }

  .iaf-hero-location--no-title .iaf-hero-location__right {
    grid-column: 1 / -1;
  }

  .iaf-hero-location--no-photo .iaf-hero-location__inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (max-width: 768px) {
  :root {
    --iaf-hero-loc-padding-inline: var(--iaf-layout-padding-inline-phone, 20px);
    --iaf-hero-loc-padding-top: 48px;
    --iaf-hero-loc-padding-bottom: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iaf-hero-location__bg {
    opacity: 1;
    transition: none;
    will-change: auto;
    transform: none;
    background-attachment: scroll;
  }

  .iaf-hero-location--layout-full-bleed .iaf-hero-location__bg {
    background-size: cover;
  }

  .iaf-hero-location__media {
    opacity: 1;
    transition: none;
  }

  .iaf-hero-location--behavior-parallax .iaf-hero-location__img {
    transform: none !important;
  }

  .iaf-hero-location--behavior-fixed .iaf-hero-location__bg {
    background-attachment: scroll;
  }

  .iaf-hero-location--layout-grid.iaf-hero-location--behavior-fixed .iaf-hero-location__layout-inner--media {
    position: absolute;
  }
}

/* Variante Text (sans photo) : hauteur pilotée par le contenu. */
.iaf-hero-location--no-photo {
  min-height: 0;
  background-color: transparent;
}

.iaf-hero-location--no-photo .iaf-hero-location__inner {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Avec filet wrapper : l’écart filet → titre = --iaf-ext-divider-gap (pas de padding-top en double). */
.iaf-ext-spacing--has-top-divider > .iaf-hero-location--no-photo .iaf-hero-location__inner {
  padding-top: 0;
}

/* Surface claire — fond via canvas global (--page-bg-color), comme IAF Text / Listing. */
.iaf-hero-location--no-photo:not(.iaf-hero-location--text-surface-depth) {
  color: var(--iaf-canvas-heading, #1e1e1e);
  background-color: transparent;
}

.iaf-hero-location--no-photo:not(.iaf-hero-location--text-surface-depth) .iaf-hero-location__title {
  color: var(--iaf-canvas-heading);
}

.iaf-hero-location--no-photo:not(.iaf-hero-location--text-surface-depth) .iaf-hero-location__intro,
.iaf-hero-location--no-photo:not(.iaf-hero-location--text-surface-depth) .iaf-hero-location__body {
  color: var(--iaf-canvas-text, #1e1e1e);
  opacity: 1;
}

/* Surface Léman 150 #114E6D — tokens canvas (comme listing plein ton). */
.iaf-hero-location--no-photo.iaf-hero-location--text-surface-depth .iaf-hero-location__title {
  color: var(--iaf-canvas-heading);
}

.iaf-hero-location--no-photo.iaf-hero-location--text-surface-depth .iaf-hero-location__intro,
.iaf-hero-location--no-photo.iaf-hero-location--text-surface-depth .iaf-hero-location__body {
  color: var(--iaf-canvas-text);
  opacity: 1;
}