/* ==========================================================
  Flambart — galerie et lightbox (version factorisée)

  Ce fichier est chargé uniquement sur la page Galerie. Il définit
  la présentation des vignettes, des catégories et de la lightbox
  utilisée pour visualiser les photos.  Les règles sont scellées
  sous une classe racine `.flambart-gallery-page` pour ne pas
  interférer avec d’autres pages. Cette version supprime
  les surcharges forcées au profit de
  sélecteurs plus spécifiques et de variables centralisées.  Les
  variables nécessaires (`--flambart-radius-soft`, `--flambart-border-soft`,
  `--flambart-z-lightbox`) doivent être définies dans `main.css`.
  ========================================================== */

/* Racine de page : à ajouter sur l’élément principal de la galerie */
.flambart-gallery-page {
  /* Variables locales pour ajuster la grille sans surcharger le design system */
  --gallery-gap: 0.8rem;
  --feature-min: 220px;
  --thumb-min: 150px;
}

.entry-content > .flambart-gallery-page,
main.wp-block-group > .flambart-gallery-page,
.entry-content > .wp-block-group.flambart-gallery-page,
main.wp-block-group > .wp-block-group.flambart-gallery-page {
  position: relative;
  left: 50%;
  width: min(calc(100vw - 2 * var(--flambart-page-pad, 1.5rem)), var(--flambart-wide-width, 1380px));
  max-width: var(--flambart-wide-width, 1380px);
  transform: translateX(-50%);
}

@media (min-width: 1200px) {
  .flambart-gallery-page {
    --gallery-gap: clamp(1rem, 1.4vw, 1.35rem);
    --feature-min: 300px;
    --thumb-min: 220px;
  }
}

@media (min-width: 1500px) {
  .flambart-gallery-page {
    --feature-min: 340px;
    --thumb-min: 240px;
  }
}

/* Grilles émises par la page historique et par le rendu galerie du plugin. */
.flambart-gallery-feature-grid,
.flambart-public-gallery-grid {
  --gallery-gap: 0.8rem;
  --feature-min: 220px;
  --thumb-min: 150px;
}

/* Catégories mises en avant */
.flambart-gallery-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--feature-min)), 1fr));
  gap: var(--gallery-gap);
  width: 100%;
  max-width: var(--flambart-max);
  margin-left: auto;
  margin-right: auto;
}

.flambart-gallery-feature {
  display: block;
  min-height: var(--feature-min);
  border-radius: var(--flambart-radius-soft);
  box-shadow: none;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.flambart-gallery-feature img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: var(--feature-min);
  object-fit: cover;
}

.flambart-gallery-feature span {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  background: rgba(16, 42, 67, 0.65);
  color: var(--flambart-cream);
  padding: 0.4rem 0.6rem;
  border-radius: var(--flambart-radius-sm);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}

.flambart-gallery-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 42, 67, 0.72), transparent 58%);
}

/* Barre de navigation entre catégories et retour */
.flambart-gallery-jumpbar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

.flambart-gallery-jumpbar a,
.flambart-gallery-back,
.flambart-albums-filters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: var(--flambart-border-soft);
  border-radius: var(--flambart-radius-pill);
  padding: 0.5rem 0.85rem;
  color: var(--flambart-blue-dark);
  background: rgba(255, 255, 255, 0.6);
  font-weight: 800;
  text-decoration: none;
  transition: background 0.2s;
}

.flambart-gallery-back {
  width: max-content;
  margin: 1rem auto 0;
}

.flambart-gallery-jumpbar a:hover,
.flambart-gallery-back:hover,
.flambart-albums-filters a:hover {
  background: rgba(247, 242, 232, 0.8);
}

/* Filtres de catégories des albums */
.flambart-albums-filters {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.5rem 0;
}

.flambart-albums-filters a.is-active {
  background: var(--flambart-blue-dark);
  color: var(--flambart-cream);
}

.flambart-albums-grid.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gallery-gap, 1.5rem);
  margin-top: 1.5rem;
}

.flambart-albums-grid .flambart-album-card {
  width: auto;
}

.flambart-album-card-meta {
  font-weight: 700;
  color: var(--flambart-blue-dark);
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
}

.flambart-album-card-footer {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Grille des miniatures */
.flambart-public-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--thumb-min), 1fr));
  gap: var(--gallery-gap);
  width: 100%;
  max-width: var(--flambart-max);
  margin: 1.5rem auto 0;
}

@media (min-width: 1200px) {
  .flambart-gallery-feature-grid,
  .flambart-public-gallery-grid {
    max-width: var(--flambart-wide-width, 1380px);
  }
}

.flambart-public-gallery-grid figure {
  margin: 0;
  min-width: 0;
  cursor: zoom-in;
  border: var(--flambart-border-soft);
  border-radius: var(--flambart-radius);
  background: rgba(255, 255, 255, 0.54);
  box-shadow: none;
  overflow: hidden;
}

.flambart-public-gallery-grid figcaption {
  padding: 0.45rem 0.6rem;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--flambart-blue-dark);
}

.flambart-public-gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 160ms ease, filter 160ms ease;
}

.flambart-public-gallery-grid figure:hover img,
.flambart-public-gallery-grid figure:focus-within img {
  filter: saturate(1.05);
  transform: scale(1.02);
}

/* Lightbox */
.flambart-lightbox[hidden] {
  display: none;
}

.flambart-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--flambart-z-lightbox);
  display: grid;
  place-items: center;
  padding: clamp(0.8rem, 3vw, 2rem);
  background: rgba(16, 42, 67, 0.86);
}

html.flambart-lightbox-open {
  overflow: hidden;
}

.flambart-lightbox-dialog {
  position: relative;
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}

.flambart-lightbox figure {
  margin: 0;
  min-width: 0;
}

.flambart-lightbox img {
  width: 100%;
  max-height: min(76vh, 760px);
  object-fit: contain;
  border-radius: var(--flambart-radius);
  background: #fff;
  transition: opacity 120ms ease;
}

.flambart-lightbox figcaption {
  margin-top: 0.55rem;
  color: var(--flambart-cream);
  text-align: center;
}

.flambart-lightbox-counter {
  margin: 0.3rem 0 0;
  color: var(--flambart-cream);
  opacity: 0.75;
  font-size: 0.85rem;
  text-align: center;
}

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

.flambart-lightbox button {
  border: 0;
  border-radius: var(--flambart-radius-pill);
  background: rgba(247, 242, 232, 0.94);
  color: var(--flambart-blue-dark);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  padding: 0.5rem 0.8rem;
  transition: background 0.2s;
}

.flambart-lightbox button:focus-visible,
.flambart-gallery-jumpbar a:focus-visible,
.flambart-gallery-back:focus-visible,
.flambart-public-gallery-grid figure:focus-within {
  outline: 3px solid rgba(247, 242, 232, 0.75);
  outline-offset: 3px;
}

.flambart-lightbox-close {
  position: absolute;
  top: -3rem;
  right: 0;
  padding: 0.55rem 0.85rem;
}

.flambart-lightbox-prev,
.flambart-lightbox-next {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.7rem;
  line-height: 1;
}

/* Réactivité */
@media (max-width: 980px) {
  .flambart-lightbox-dialog {
    grid-template-columns: 1fr;
  }
  .flambart-lightbox-prev,
  .flambart-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
  }
  .flambart-lightbox-prev {
    left: 0.5rem;
  }
  .flambart-lightbox-next {
    right: 0.5rem;
  }
}

@media (max-width: 760px) {
  .flambart-gallery-page {
    --gallery-gap: 0.6rem;
    --feature-min: 112px;
    --thumb-min: 145px;
  }
  .flambart-gallery-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flambart-gallery-feature span {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    font-size: 1rem;
  }
  .flambart-public-gallery-grid figcaption {
    padding: 0.55rem 0.6rem;
    font-size: 0.86rem;
  }
  .flambart-lightbox {
    padding: 0.8rem;
  }
  .flambart-lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
  }
  .flambart-lightbox img {
    max-height: 70vh;
  }
}

@media (max-width: 460px) {
  .flambart-public-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}