/*
Theme Name:     Twenty Twenty-Five Child
Description:    Child theme for the Twenty Twenty-Five theme
Template:       twentytwentyfive
Version:        1.0.0
Tags:           block-template
Text Domain:    twentytwentyfive-child
*/

/* =====================================================================================================================
   PROGRAMS (homepage) — CSS only
   But : tout ce qui manque au FSE pour obtenir le rendu exact
   - Query Loop en 2 colonnes collées (desktop)
   - Damier de couleurs + inversion 1 ligne sur 2
   - Mobile : 1 colonne, texte puis image + alternance simple
===================================================================================================================== */

.programs .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.programs .wp-block-post-template > li {
  margin: 0 !important;
  padding: 0 !important;
}

/* WP/FSE met parfois un "block-gap" sur le bloc Colonnes : on force à 0 */
.programs .program-card {
  margin: 0 !important;
  gap: 0 !important;
}

.programs .program-card.wp-block-columns {
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* Images = plein cadre (sinon ça ne colle pas au design) */
.programs .program-card__img,
.programs .program-card__img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.programs .program-card__img img {
  object-fit: cover !important;
}

/* Hauteur mini du bloc texte pour que l’alternance fasse “gros pavés” */
.programs .program-card__box {
  min-height: 40vh !important;
}

/* Damier desktop (2 colonnes) */
.programs .wp-block-post-template > li:nth-child(4n + 1) .program-card__box,
.programs .wp-block-post-template > li:nth-child(4n) .program-card__box {
  background: #1f1c1c !important;
}

.programs .wp-block-post-template > li:nth-child(4n + 2) .program-card__box,
.programs .wp-block-post-template > li:nth-child(4n + 3) .program-card__box {
  background: #f34e3a !important;
}

/* Inversion desktop : 3-4, 7-8, etc. */
.programs .wp-block-post-template > li:nth-child(4n + 3) .program-card,
.programs .wp-block-post-template > li:nth-child(4n + 4) .program-card {
  flex-direction: row-reverse !important;
}

/* --- Programs : mobile --- */
@media (max-width: 900px) {
  .programs .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }

  /* Colonnes => empilement vertical, sans espaces */
  .programs .program-card.wp-block-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Texte au-dessus / image en dessous */
  .programs .program-card__content {
    order: 1 !important;
  }
  .programs .program-card__media {
    order: 2 !important;
  }

  /* Figures WP = marges par défaut */
  .programs figure {
    margin: 0 !important;
  }

  /* On reset le fond avant de ré-appliquer l’alternance */
  .programs .program-card__box {
    min-height: auto !important;
    background: transparent !important;
  }

  /* Alternance mobile simple */
  .programs .wp-block-post-template > li:nth-child(odd) .program-card__box {
    background: #1f1c1c !important;
  }

  .programs .wp-block-post-template > li:nth-child(even) .program-card__box {
    background: #f34e3a !important;
  }
}

/* =====================================================================================================================
   PLANS (homepage) — CSS only
   But :
   - Alternance des cartes (fond + couleur texte)
   - Badge prix : couleurs alternées + dimensions fixes
===================================================================================================================== */

.plans-block > li:nth-child(odd) > .wp-block-columns {
  background: #1f1c1c;
  color: #fafafa;
}

.plans-block > li:nth-child(even) > .wp-block-columns {
  background: #fff6f6;
  color: #1f1c1c;
}

/* On force les liens à suivre la couleur du parent */
.plans-block a {
  color: inherit;
}

.plans-block > li:nth-child(odd) .plan-price {
  background: #5b5a5e;
  color: #fafafa;
}

.plans-block > li:nth-child(even) .plan-price {
  background: #f7dde1;
  color: #1f1c1c;
}

/* Badge prix : taille fixe (sinon ça bouge selon le contenu) */
.plan-price {
  max-width: 100px;
  height: 64px;
  box-sizing: border-box;
}

/* =====================================================================================================================
   MOSAIC GALLERY (homepage) — CSS only
   But :
   - Placement “mosaïque” desktop (grille 8 colonnes / 2 lignes)
   - Mobile : 2 colonnes / 4 rangées, toutes les images même taille
===================================================================================================================== */

.mosaic-gallery {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 0 !important;

  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
}

.mosaic-gallery > figure {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.mosaic-gallery img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Placement desktop (via tes classes) */
.mosaic-gallery .img_gauche {
  grid-area: 1/1/3/3 !important;
}
.mosaic-gallery .img_haut_gauche {
  grid-area: 1/3/2/5 !important;
}
.mosaic-gallery .img_haut_droite {
  grid-area: 1/5/2/7 !important;
}
.mosaic-gallery .img_droite {
  grid-area: 1/7/3/9 !important;
}

.mosaic-gallery .img_bas_1 {
  grid-area: 2/3/3/4 !important;
}
.mosaic-gallery .img_bas_2 {
  grid-area: 2/4/3/5 !important;
}
.mosaic-gallery .img_bas_3 {
  grid-area: 2/5/3/6 !important;
}
.mosaic-gallery .img_bas_4 {
  grid-area: 2/6/3/7 !important;
}

/* --- Mosaic : mobile (2 colonnes / 4 lignes, toutes les cases identiques) --- */
@media (max-width: 900px) {
  .mosaic-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(4, 180px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Reset du placement desktop : chaque figure prend 1 case */
  .mosaic-gallery > figure {
    grid-area: auto !important;
  }

  .mosaic-gallery
    :is(
      .img_gauche,
      .img_haut_gauche,
      .img_haut_droite,
      .img_droite,
      .img_bas_1,
      .img_bas_2,
      .img_bas_3,
      .img_bas_4
    ) {
    grid-area: auto !important;
  }
}

/* =====================================================================================================================
   MEMBERSHIP (homepage) — CSS only
   But :
   - Faire dépasser l’image de droite du cadre (effet “visuel en avant”)
   - Mobile : on annule l’effet et on évite l’espace en bas
===================================================================================================================== */

.membership {
  position: relative;
  overflow: visible;
}

.membership .wp-block-column:last-child {
  position: relative;
}

/* Image “décollée” du cadre (desktop/tablet) */
.membership .membership-container {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 !important;
  z-index: 2;
  transform: translateY(150px);
}

.membership .membership-container img {
  display: block;
  height: auto;
}

/* Mobile : colonnes déjà empilées en FSE => on reset tout */
@media (max-width: 900px) {
  .membership {
    padding-bottom: 0 !important;
  }

  .membership .membership-container {
    position: static !important;
    transform: none !important;
    margin: var(--wp--preset--spacing--40) 0 0 !important;
  }
}

/* --------------------------------------------------------------------------------------------------------
NAV centré en mobile 
----------------------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .wp-block-navigation__responsive-container-content {
    align-items: center !important;
  }

  .wp-block-navigation__container {
    align-items: center !important;
    text-align: center !important;
  }

  .wp-block-navigation__responsive-container-close {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}