/* ============================================
   IAF Separator — auto <hr> between extensions + standalone extension
   Grid: max-width 1440px, padding horizontal 64px (desktop).
   Width modes: module (cols 3–6), full_layout (inner Satzspiegel), viewport (100vw).
   ============================================ */

:root {
  --iaf-separator-color: var(--iaf-canvas-border-strong);
  --iaf-separator-thickness: 1px;
  --iaf-separator-inline-padding: 64px;
  --iaf-separator-max-width: 1440px;
  --iaf-separator-grid-gap: 32px;
  /* Filet haut → contenu extension (desktop 60px ; mobile 16px). */
  --iaf-ext-divider-gap: 60px;
  /* Filet interne entre items (listing cols, modular toggles…) — inchangé. */
  --iaf-ext-item-divider-gap: 16px;
}

/* Per-extension vertical spacing wrapper.
   Admin slug presets (parity with content modules: 0/50/75/100/125/150/200/300)
   are mapped to pixel values by PHP and emitted as inline CSS variables on
   `<div class="iaf-ext-spacing" style="--iaf-ext-spacing-before: Xpx; --iaf-ext-spacing-after: Ypx;">`.
   First renderable extension gets spacing-before forced to 0 in PHP so the
   page header is not pushed down. */
.iaf-ext-spacing {
  padding-top: var(--iaf-ext-spacing-before, 0);
  padding-bottom: var(--iaf-ext-spacing-after, 0);
}

/* Section-level top divider + unified gap (replaces legacy external `<hr>`).
   Gap sits *below* the line (::before margin-bottom), not above it (padding-top
   would push the line down and leave content flush under the rule). */
.iaf-ext-spacing--has-top-divider {
  padding-top: 0;
}

.iaf-ext-spacing--has-top-divider::before {
  content: '';
  display: block;
  height: var(--iaf-separator-thickness);
  background-color: var(--iaf-separator-color);
  margin: 0 auto var(--iaf-ext-divider-gap);
  width: calc(100% - (var(--iaf-separator-inline-padding) * 2));
  max-width: calc(var(--iaf-separator-max-width) - (var(--iaf-separator-inline-padding) * 2));
  box-sizing: border-box;
}

/* Timeline: top divider lives inside `.iaf-timeline__sticky-head` (one sticky group). */
.iaf-ext-spacing--has-top-divider:has(> .iaf-timeline)::before {
  display: none;
}

/* Drop duplicate section padding-top — wrapper gap is the sole divider → content rhythm.
   ::before margin-bottom creates the Figma gap; do not pad cells with border-left
   (border-box padding would extend vertical rules up to the horizontal line). */
.iaf-ext-spacing--has-top-divider > .iaf-ext {
  padding-top: 0;
}

.iaf-ext-spacing--has-top-divider > .iaf-timeline .iaf-timeline__inner {
  padding-top: 0;
}

/* Moving Numbers — le padding-block haut (120px) est remplacé par le gap unifié du wrapper. */
.iaf-ext-spacing--has-top-divider > .iaf-big-titles {
  padding-top: 0;
}

/* Intro Text (`iaf_text`) — filet bas ; l’extension suivante n’a pas de filet haut wrapper (évite double ligne). */
.iaf-ext-spacing--has-bottom-divider:not(:has(> .iaf-text)) {
  padding-bottom: 0;
}

/* Intro Text : spacing-after admin conservé avant le filet bas (rythme d’origine). */
.iaf-ext-spacing--has-bottom-divider:has(> .iaf-text) {
  padding-bottom: var(--iaf-ext-spacing-after, 0);
}

/* Intro Text + filet haut : padding section = seul écart filet → contenu (160px). */
.iaf-ext-spacing--has-top-divider:has(> .iaf-text)::before {
  margin-bottom: 0;
}

.iaf-ext-spacing--has-bottom-divider::after {
  content: '';
  display: block;
  height: var(--iaf-separator-thickness);
  background-color: var(--iaf-separator-color);
  margin: 0 auto var(--iaf-ext-divider-gap);
  width: calc(100% - (var(--iaf-separator-inline-padding) * 2));
  max-width: calc(var(--iaf-separator-max-width) - (var(--iaf-separator-inline-padding) * 2));
  box-sizing: border-box;
}

/* Ex. How we work : Intro Text → Listing / Listing Logo (The Ecosystem). */
.iaf-ext-spacing--has-bottom-divider + .iaf-ext-spacing {
  padding-top: 0;
}

.iaf-ext-spacing--has-bottom-divider + .iaf-ext-spacing > .iaf-ext {
  padding-top: 0;
}

.iaf-ext-spacing--has-bottom-divider + .iaf-ext-spacing > .iaf-hero-location--no-photo .iaf-hero-location__inner {
  padding-top: 0;
}

/* Auto separator between two rendered extensions (full_layout / Satzspiegel). */
.iaf-separator {
  border: 0;
  display: block;
  height: var(--iaf-separator-thickness);
  background-color: var(--iaf-separator-color);
  margin: 0 auto;
  width: calc(100% - (var(--iaf-separator-inline-padding) * 2));
  max-width: calc(var(--iaf-separator-max-width) - (var(--iaf-separator-inline-padding) * 2));
}

/* -------- Standalone page extension (iaf_separator) -------- */

.iaf-separator-ext {
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--iaf-separator-inline-padding);
  display: flex;
  justify-content: center;
  background-color: transparent;
}

.iaf-separator-ext__inner {
  width: 100%;
  max-width: calc(var(--iaf-separator-max-width) - (var(--iaf-separator-inline-padding) * 2));
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--iaf-separator-grid-gap);
  align-items: center;
}

.iaf-separator-ext .iaf-separator {
  margin: 0;
}

/* Module — cols 3–6 (content column; same span as .iaf-modular__content-wrap). */
.iaf-separator-ext--module .iaf-separator-ext__inner {
  justify-items: stretch;
}

.iaf-separator-ext--module .iaf-separator {
  grid-column: 3 / span 4;
  justify-self: stretch;
  width: 100%;
  max-width: none;
}

/* Full layout — full inner grid inside page margins (matches auto .iaf-separator above). */
.iaf-separator-ext--full_layout .iaf-separator-ext__inner {
  display: block;
}

.iaf-separator-ext--full_layout .iaf-separator {
  width: 100%;
  max-width: 100%;
}

/* Viewport — 100vw, edge to edge. */
.iaf-separator-ext--viewport {
  padding: 0;
}

.iaf-separator-ext--viewport .iaf-separator-ext__inner {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: block;
}

.iaf-separator-ext--viewport .iaf-separator {
  width: 100%;
  max-width: none;
}

/* -------- Separator inside IAF Modular (.iaf-modular__content-wrap) -------- */
/* Rendered inside .iaf-modular__module — use descendant selectors, not >. */
/* content-wrap is already cols 3–6; do not re-apply page padding or 6-col grid. */

.iaf-modular__content-wrap .iaf-modular__separator.iaf-separator-ext {
  padding: 0;
  display: block;
  width: 100%;
  max-width: none;
}

.iaf-modular__content-wrap .iaf-modular__separator .iaf-separator-ext__inner {
  display: block;
  width: 100%;
  max-width: none;
  grid-template-columns: none;
  column-gap: 0;
}

/* Module — 100% of content-wrap; same line as .iaf-modular__toggle border-bottom. */
.iaf-modular__content-wrap .iaf-modular__separator.iaf-separator-ext--module .iaf-separator-ext__inner {
  border-bottom: 1px solid var(--iaf-modular-toggle-divider);
}

.iaf-modular__content-wrap .iaf-modular__separator.iaf-separator-ext--module .iaf-separator {
  display: none;
}

/* Full layout — breakout to .iaf-modular__inner width (cols 1–6). */
.iaf-modular__content-wrap .iaf-modular__separator.iaf-separator-ext--full_layout {
  width: calc(150% + 0.5 * var(--iaf-modular-grid-gap, var(--iaf-separator-grid-gap)));
  margin-left: calc(-50% - 0.5 * var(--iaf-modular-grid-gap, var(--iaf-separator-grid-gap)));
}

.iaf-modular__content-wrap .iaf-modular__separator.iaf-separator-ext--full_layout .iaf-separator {
  display: block;
  grid-column: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  height: var(--iaf-separator-thickness);
  background-color: var(--iaf-separator-color);
}

.iaf-modular__inner:not(:has(.iaf-modular__title-col))
  .iaf-modular__content-wrap
  .iaf-modular__separator.iaf-separator-ext--full_layout {
  width: 100%;
  margin-left: 0;
}

/* Viewport — 100vw from nested content column. */
.iaf-modular__content-wrap .iaf-modular__separator.iaf-separator-ext--viewport {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.iaf-modular__content-wrap .iaf-modular__separator.iaf-separator-ext--viewport .iaf-separator-ext__inner {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-bottom: none;
}

.iaf-modular__content-wrap .iaf-modular__separator.iaf-separator-ext--viewport .iaf-separator {
  display: block;
}

@media (max-width: 1023px) {
  .iaf-modular__content-wrap .iaf-modular__separator.iaf-separator-ext--full_layout {
    width: 100%;
    margin-left: 0;
  }
}

/* Mobile only — filet entre le hero et la première extension juste en dessous.
   Sur desktop le hero touche directement le contenu (pas de filet) ; en empilé
   mobile on ajoute la même ligne que les séparateurs inter-sections, sauf si la
   1re extension porte déjà un filet haut ou est un séparateur autonome.
   NOTE (v1.0.170): le filet mobile vit dans le hero (`.iaf-header-*__divider`) et
   fait partie de l’intro — règle sibling retirée. */
@media (max-width: 768px) {
  :root {
    --iaf-separator-inline-padding: 24px;
  }

  .iaf-separator-ext--module .iaf-separator-ext__inner {
    display: block;
  }

  .iaf-separator-ext--module .iaf-separator {
    grid-column: auto;
    width: 100%;
    max-width: 100%;
  }
}

/* Mobile — filet → contenu = 16px. */
@media (max-width: 1023px) {
  :root {
    --iaf-ext-divider-gap: 16px;
    /* Espace AU-DESSUS du filet : évite que la ligne soit collée à l'image /
       la vidéo / l'aplat de couleur de l'extension précédente. */
    --iaf-ext-divider-gap-before: 32px;
  }

  .iaf-ext-spacing--has-top-divider::before {
    margin-top: var(--iaf-ext-divider-gap-before);
  }

  .iaf-ext-spacing--has-bottom-divider::after {
    margin-bottom: var(--iaf-ext-divider-gap);
  }

  .iaf-ext-spacing--has-bottom-divider + .iaf-ext-spacing {
    padding-top: 0;
  }

  .iaf-ext-spacing--has-bottom-divider + .iaf-ext-spacing > .iaf-ext {
    padding-top: 0;
  }
}