/* ════════════════════════════════════════════════════════════════════
   Win'Event — pages/gallery.css  (galerie masonry + filtres + lightbox)
   ════════════════════════════════════════════════════════════════════ */
@layer pages {

  /* ── En-tête galerie : plus d'air ──────────────────────────────── */
  [data-gallery] .section-head { margin-bottom: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); }

  /* ── Filtres ───────────────────────────────────────────────────── */
  .gallery-filters {
    display: flex; flex-wrap: wrap; gap: 0.6rem 0.7rem;
    margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  }
  .filter-btn {
    position: relative;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--line-chalk);
    border-radius: var(--r-pill);
    font-family: var(--font-body); font-weight: 500;
    font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--on-chalk-mut);
    transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
  }
  .filter-btn:hover { color: var(--graphite); border-color: var(--bronze); }
  .filter-btn[aria-pressed="true"] {
    color: var(--ink);
    border-color: transparent;
    background: var(--grad-gold);
  }

  /* ── Grille masonry (grid + grid-auto-rows, mesurée en JS) ─────── */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 44%, 300px), 1fr));
    grid-auto-rows: 8px;
    gap: var(--gutter);
  }
  /* Avant hydratation JS : rendu en colonnes fluides (pas de page vide) */
  .no-js .gallery-grid, .gallery-grid:not(:has(.creation)) { grid-auto-rows: auto; }

  .creation { grid-row-end: span 30; }
  .creation__btn {
    display: block; width: 100%; text-align: left; padding: 0;
    border-radius: var(--r-md); overflow: hidden;
    background: var(--ink-3);
  }
  .creation__inner { position: relative; display: block; }
  .creation__inner img {
    width: 100%; height: auto; display: block;
    transition: transform var(--dur-mid) var(--ease-out);
  }
  .creation__meta {
    position: absolute; inset: auto 0 0 0;
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 2rem 1rem 0.9rem;
    background: linear-gradient(transparent, rgba(12,11,10,.82));
    color: var(--on-ink);
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--dur-mid), transform var(--dur-mid);
  }
  .creation__title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.1; }
  .creation__place { font-size: var(--fs-small); color: var(--champagne); letter-spacing: 0.04em; }
  .creation__btn:hover .creation__inner img { transform: scale(1.05); }
  .creation__btn:hover .creation__meta,
  .creation__btn:focus-visible .creation__meta { opacity: 1; transform: none; }
  .creation__btn { transition: box-shadow var(--dur-mid), transform var(--dur-mid); }
  .creation__btn:hover { box-shadow: var(--shadow-gold); }

  .gallery-empty { padding: 3rem 0; color: var(--on-chalk-mut); text-align: center; }

  /* ── Lightbox maison ───────────────────────────────────────────── */
  .lightbox {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(8,7,6,.94);
    animation: lbIn var(--dur-mid) var(--ease-out);
  }
  @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
  .lightbox[hidden] { display: none; }
  .lightbox__figure { grid-column: 2; margin: 0; display: grid; justify-items: center; gap: 1rem; }
  .lightbox__img {
    max-width: min(92vw, 1100px); max-height: 80svh;
    width: auto; height: auto; object-fit: contain;
    border-radius: var(--r-sm);
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
  }
  .lightbox__cap { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; }
  .lightbox__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--on-ink); }
  .lightbox__place { font-size: var(--fs-small); color: var(--champagne); letter-spacing: 0.05em; }
  .lightbox__close {
    position: absolute; top: 1rem; right: 1.2rem;
    width: 48px; height: 48px; font-size: 2rem; line-height: 1;
    color: var(--on-ink); border: 1px solid var(--line-ink); border-radius: 50%;
  }
  .lightbox__close:hover { border-color: var(--gold); color: var(--champagne); }
  .lightbox__nav {
    width: 52px; height: 52px; font-size: 1.4rem;
    color: var(--on-ink); border: 1px solid var(--line-ink); border-radius: 50%;
    transition: border-color var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
  }
  .lightbox__nav:hover { border-color: var(--gold); color: var(--champagne); transform: scale(1.06); }
  .lightbox__nav--prev { grid-column: 1; }
  .lightbox__nav--next { grid-column: 3; }
  @media (max-width: 560px) {
    .lightbox { grid-template-columns: 1fr; }
    .lightbox__figure { grid-column: 1; }
    .lightbox__nav { position: absolute; bottom: 1.2rem; }
    .lightbox__nav--prev { left: 1.2rem; }
    .lightbox__nav--next { right: 1.2rem; }
  }
}