:root {
  --cvb-gap: clamp(8px, 1vw, 16px);
  --cvb-dur: 0.25s;
  --cvb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --row-max: 266px; /* hauteur max des rangées, pour les grands écrans */
}
/* Activer les unités de conteneur */
.realisations-grid.is-layout-grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a a a b"
    "c d e f";
  gap: var(--wp--preset--spacing--s);
  list-style: none;
  padding: 0;
}

/* Placement */
.realisations-grid > li:nth-child(1) {
  grid-area: a;
}
.realisations-grid > li:nth-child(2) {
  grid-area: b;
}
.realisations-grid > li:nth-child(3) {
  grid-area: c;
}
.realisations-grid > li:nth-child(4) {
  grid-area: d;
}
.realisations-grid > li:nth-child(5) {
  grid-area: e;
}
.realisations-grid > li:nth-child(6) {
  grid-area: f;
}
@media (max-width: 48em) {
  .realisations-grid > li {
    grid-area: auto;
    min-height: 200px;
  }
}
/* On limite le style au grid */
.realisations-grid .wp-block-cover {
  position: relative;
  overflow: hidden; /* respect du border-radius */
}

.realisations-grid .wp-block-cover .wp-block-cover__link:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Hauteurs pilotées par la largeur du conteneur, mais plafonnées à 266px */
@supports (height: 1cqw) {
  /* cartes #2–#6 : ~carré d'1 colonne, max 266px */
  .realisations-grid > li {
    height: min(var(--row-max), 25cqw);
  }

  /* carte #1 : 3 colonnes en 16/9 → hauteur ≈ (3 cols) * 9/16 = 42.1875cqw, max 266px */
  .realisations-grid > li:nth-child(1) {
    height: min(var(--row-max), 42.1875cqw);
  }
}

/* Les cartes remplissent la cellule, recadrage */
.realisations-grid .wp-block-cover {
  height: 100%;
  border-radius: var(--wp--custom--radius--l);
  overflow: hidden;
}
.realisations-grid .wp-block-cover__image-background,
.realisations-grid .wp-block-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Tablette (3 colonnes) ===== */
@media (min-width: 782px) and (max-width: 1023.98px) {
  .realisations-grid.is-layout-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "a a a"
      "b c d"
      "e f .";
  }
  @supports (height: 1cqw) {
    /* 1 col ≈ 33.333cqw ; #1 sur 3 col en 16/9 = 56.25cqw */
    .realisations-grid > li {
      height: min(var(--row-max), 33.333cqw);
    }
    .realisations-grid > li:nth-child(1) {
      height: min(var(--row-max), 56.25cqw);
    }
  }
}

/* ===== Mobile (1 colonne) ===== */
@media (max-width: 781.98px) {
  .realisations-grid.is-layout-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d" "e" "f";
  }
  /* On abandonne la hauteur fixe et on repasse en ratios */
  .realisations-grid > li {
    height: auto;
  }
  /* .realisations-grid .wp-block-cover {
    aspect-ratio: 4 / 3;
  } */
  /* .realisations-grid > li:nth-child(1) .wp-block-cover {
    aspect-ratio: 16 / 9;
  } */
}
.realisations-grid li {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.realisations-grid li:hover {
  transform: scale(1.03);
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); */
}

.realisations-grid a.real-card__link {
  position: absolute;
  inset: 0;
  height: auto;
}
.realisations-grid li a:focus {
  outline: 2px solid var(--wp--preset--color--primary, #000);
  outline-offset: 4px;
}
.realisations-grid > li:nth-child(n + 7) {
  display: none;
} /* optionnel, pour 6 items stricts */

/* Cible correcte : l’<article class="wp-block-cover real-card"> dans chaque <li> */
/* Fond géré par le Cover : SPAN avec background-image */
.real-card {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* si tu veux rester spécifique au contexte de la grille */
.realisations-grid_item > article.wp-block-cover.real-card {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.wp-block-cover__inner-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  color: #fff;
  padding: var(--wp--preset--spacing--s);
  box-sizing: border-box;
}