/* ============================================
   IAF CTA — carte blanche + mosaïque 2×2 (Figma).
   Eyebrow col 1–2 ; carte col 3–6.
   Grille droite : gris | navy / blanc | accent — flush bord droit.
   ============================================ */

:root {
  --iaf-cta-padding-block: 120px;
  --iaf-cta-padding-inline: 64px;
  --iaf-cta-max: 1440px;
  --iaf-cta-grid-gap: 32px;
  --iaf-cta-card-padding: 44px;
  --iaf-cta-card-radius: 4px;
  --iaf-cta-cta-gap: 24px;
  /* Figma : bloc 226.09px → carré ≈ 113px */
  --iaf-cta-square-size: 113px;
  --iaf-cta-cell-grey: #eeeeee;
}

/* Section uniquement — `.iaf-cta` est aussi le composant lien global (slides, quote…). */
section.iaf-cta[data-iaf-extension="iaf_cta"] {
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  padding-bottom: var(--iaf-cta-padding-block);
  padding-inline: var(--iaf-cta-padding-inline);
}

/* Sans filet : padding haut standard. Avec filet : gap wrapper seul (60px). */
.iaf-ext-spacing:not(.iaf-ext-spacing--has-top-divider) > section.iaf-cta[data-iaf-extension="iaf_cta"] {
  padding-top: var(--iaf-cta-padding-block);
}

.iaf-ext-spacing--has-top-divider > section.iaf-cta[data-iaf-extension="iaf_cta"] {
  padding-top: 0;
}

.iaf-cta__inner {
  /* Même cadre que les autres extensions (Modular) : max-width − padding inline,
     sinon le contenu déborde du gabarit sur les grands écrans. */
  max-width: calc(var(--iaf-cta-max) - (var(--iaf-cta-padding-inline) * 2));
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}

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

.iaf-cta__title-wrap {
  grid-column: 1 / span 2;
}

.iaf-cta__title {
  margin: 0;
  color: var(--iaf-canvas-heading, #0c364b);
  text-wrap: balance;
}

.iaf-cta__card {
  grid-column: 3 / span 4;
  display: grid;
  grid-template-columns: 1fr calc(var(--iaf-cta-square-size) * 2);
  align-items: stretch;
  background-color: #ffffff;
  border-radius: var(--iaf-cta-card-radius);
  overflow: hidden;
  box-sizing: border-box;
  min-height: calc(var(--iaf-cta-square-size) * 2);
}

.iaf-cta__card--no-eyebrow {
  grid-column: 1 / span 6;
}

.iaf-cta__card-main {
  padding: var(--iaf-cta-card-padding);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.iaf-cta__body {
  margin: 0;
  color: var(--iaf-canvas-heading, #0c364b);
  text-wrap: pretty;
}

.iaf-cta__body p {
  margin: 0;
}

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

.iaf-cta__body em {
  font-style: italic;
}

.iaf-cta__cta-wrap {
  margin: 0;
  margin-top: var(--iaf-cta-cta-gap);
  align-self: flex-start;
}

/* CTA sous le texte — fond gris pour rester visible sur la carte blanche. */
.iaf-cta__cta-wrap .iaf-cta-pill--on-grey {
  background-color: var(--iaf-cta-cell-grey);
  color: var(--iaf-primary-1, #2398ff);
  box-shadow: none;
}

.iaf-cta__cta-wrap .iaf-cta-pill--on-grey:hover,
.iaf-cta__cta-wrap .iaf-cta-pill--on-grey:focus-visible {
  background-color: var(--iaf-cta-cell-grey);
  color: var(--iaf-primary-1, #2398ff);
  box-shadow: var(--iaf-interaction-shadow-hover);
}

/* Mosaïque 2×2 — bord droit/haut/bas flush avec la carte blanche. */
.iaf-cta__mosaic {
  display: grid;
  grid-template-columns: repeat(2, var(--iaf-cta-square-size));
  grid-template-rows: repeat(2, var(--iaf-cta-square-size));
  flex-shrink: 0;
  align-self: stretch;
}

.iaf-cta__cell {
  box-sizing: border-box;
}

.iaf-cta__cell--tl {
  background-color: var(--iaf-cta-cell-grey);
}

.iaf-cta__cell--bl {
  background-color: #ffffff;
}

/* --- Responsive --- */
@media (max-width: 1023px) {
  :root {
    --iaf-cta-padding-block: 64px;
    --iaf-cta-padding-inline: var(--iaf-layout-padding-inline-tablet, 24px);
    --iaf-cta-card-padding: 28px;
    --iaf-cta-square-size: clamp(72px, 22vw, 113px);
  }

  .iaf-ext-spacing:not(.iaf-ext-spacing--has-top-divider) > section.iaf-cta[data-iaf-extension="iaf_cta"] {
    padding-top: clamp(80px, 14vh, 104px);
  }

  .iaf-cta__title-wrap {
    grid-column: 1 / -1;
  }

  .iaf-cta__card {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .iaf-cta__mosaic {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, var(--iaf-cta-square-size));
  }
}

@media (max-width: 768px) {
  :root {
    --iaf-cta-padding-block: 48px;
    --iaf-cta-padding-inline: var(--iaf-layout-padding-inline-phone, 20px);
    --iaf-cta-square-size: clamp(64px, 28vw, 96px);
  }

  .iaf-ext-spacing:not(.iaf-ext-spacing--has-top-divider) > section.iaf-cta[data-iaf-extension="iaf_cta"] {
    padding-top: clamp(72px, 13vh, 96px);
  }
}