/*
 * Bloc de bannières promo de l'accueil (pchomebanners). Chargé uniquement sur l'accueil, avec un numéro
 * de version dans l'URL : un déploiement n'est jamais masqué par le cache navigateur.
 *
 * Chaque case a une proportion fixe (format de l'emplacement) ; l'image la remplit :
 *   - recadrée autour du point focal (--pchb-pos) en mode « cover » ;
 *   - entière, sur la couleur de fond de la bannière (--pchb-bg), en mode « contain ».
 * Les proportions doivent rester celles de PcHomeComposition::FORMATS (aperçus du back-office).
 */

.pchb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-top: 2.5rem;
}

.pchb-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--pchb-bg, transparent);
}
.pchb-tile--wide { aspect-ratio: 8 / 3; }
.pchb-tile--tall { aspect-ratio: 32 / 25; }
.pchb-tile--card { aspect-ratio: 4 / 3; }

/* Image en absolu : elle ne pèse pas sur la hauteur des rangées de la grille. */
.pchb-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pchb-pos, 50% 50%);
  transition: transform .3s ease;
}
.pchb-tile--contain img { object-fit: contain; }

a.pchb-tile--cover:hover img { transform: scale(1.03); }
a.pchb-tile:focus-visible {
  outline: 2px solid #ff0000;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .pchb-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .pchb-grid--three { grid-template-columns: repeat(3, 1fr); }

  /* 1 grande + 2 : la grande case couvre les deux rangées ; sa hauteur suit les deux cases larges. */
  .pchb-grid--big-left .pchb-tile:first-child,
  .pchb-grid--big-right .pchb-tile:first-child {
    grid-row: 1 / span 2;
    aspect-ratio: auto;
  }
  .pchb-grid--big-left .pchb-tile:first-child { grid-column: 1; }
  .pchb-grid--big-right .pchb-tile:first-child { grid-column: 2; }
  .pchb-grid--big-right .pchb-tile:not(:first-child) { grid-column: 1; }
}

/* Mobile : une image mobile dédiée est montrée entière, à sa propre proportion (pas de recadrage). */
@media (max-width: 767px) {
  .pchb-tile--has-mobile { aspect-ratio: auto; }
  .pchb-tile--has-mobile img {
    position: static;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pchb-tile img { transition: none; }
}