/* ==========================================================================
   CISL SIENA — CSS PAGINA: FOTOGALLERIA
   File: wp-content/mu-plugins/cisl-siena/pages/fotogalleria/style.css
   Dipende da cisl-global, cisl-layout, cisl-pages.
   Filtri · barra album · mosaico · visore a tutto schermo.
   ========================================================================== */

/* ---------- Filtri (stesso disegno dei filtri di notizie e federazioni) ---------- */
.cisl-galfilter { margin-top: clamp(28px, 4vw, 48px); }

.cisl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cisl-sp-2);
}
.cisl-filters__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--cisl-line);
  border-radius: var(--cisl-r-pill);
  background: var(--cisl-white);
  color: var(--cisl-ink-2);
  font: 700 var(--cisl-fs-sm) / 1.2 var(--cisl-font-sans);
  cursor: pointer;
  transition: background-color 0.2s var(--cisl-ease), color 0.2s var(--cisl-ease), border-color 0.2s var(--cisl-ease);
}
.cisl-filters__item:hover { border-color: var(--cisl-green); color: var(--cisl-green); }
.cisl-filters__item[aria-pressed="true"] { background: var(--cisl-green); border-color: var(--cisl-green); color: var(--cisl-white); }
.cisl-filters__item:focus-visible { outline: 3px solid var(--cisl-red); outline-offset: 2px; }
.cisl-filters__count {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: var(--cisl-r-pill);
  background: var(--cisl-green-soft);
  color: var(--cisl-green-dark);
  font-size: var(--cisl-fs-xs);
  text-align: center;
}
.cisl-filters__item[aria-pressed="true"] .cisl-filters__count { background: rgba(255, 255, 255, 0.2); color: var(--cisl-white); }

.cisl-galfilter__album { margin-top: var(--cisl-sp-5); max-width: 620px; }
.cisl-galfilter__album label {
  display: block;
  margin-bottom: var(--cisl-sp-2);
  font-size: var(--cisl-fs-sm);
  font-weight: 800;
  color: var(--cisl-ink);
}
.cisl-galfilter__row { display: flex; gap: var(--cisl-sp-2); }
.cisl-galfilter__row select {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 12px 48px 12px 20px;
  border: 2px solid var(--cisl-line);
  border-radius: var(--cisl-r-pill);
  background: var(--cisl-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23177246' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 18px;
  font: 600 var(--cisl-fs-sm) / 1.3 var(--cisl-font-sans);
  color: var(--cisl-ink);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
.cisl-galfilter__row select:focus { outline: none; border-color: var(--cisl-green); box-shadow: 0 0 0 4px var(--cisl-green-soft); }

/* ---------- Barra dell'album scelto ---------- */
.cisl-galblock { padding-top: clamp(28px, 4vw, 48px); }

.cisl-albumbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cisl-sp-5);
  margin-bottom: var(--cisl-sp-5);
  padding: var(--cisl-sp-5) var(--cisl-sp-6);
  border-radius: var(--cisl-r-lg);
  background: var(--cisl-bg);
  border-left: 5px solid var(--cisl-green);
}
.cisl-albumbar[hidden] { display: none; }
.cisl-albumbar__title { margin: var(--cisl-sp-2) 0 4px; }
.cisl-albumbar__meta { margin: 0; color: var(--cisl-ink-2); font-size: var(--cisl-fs-sm); font-weight: 600; }
.cisl-albumbar__desc { margin: var(--cisl-sp-2) 0 0; max-width: 70ch; color: var(--cisl-ink-2); }
.cisl-albumbar__reset { flex: none; }

/* ---------- Mosaico ----------
   Righe "giustificate": ogni foto è alta --h e larga in proporzione al suo
   formato (flex-grow = rapporto × 100, scritto nel riquadro). Le righe si
   riempiono da sole a qualsiasi larghezza; il ::after tiene l'ultima riga
   senza stirarla. Ordine di lettura = ordine delle foto (dal più recente). */
.cisl-mosaic {
  --h: 240px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cisl-mosaic::after { content: ""; flex-grow: 100000; }

.cisl-mosaic__item {
  position: relative;
  height: var(--h);
  flex-basis: calc(var(--r) * var(--h));
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--cisl-r-sm);
  background: var(--cisl-green-soft);
}
.cisl-mosaic__item[hidden] { display: none; }

.cisl-mosaic__link { display: block; width: 100%; height: 100%; color: var(--cisl-white); }
.cisl-mosaic__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--cisl-ease);
}
.cisl-mosaic__link:hover .cisl-mosaic__img,
.cisl-mosaic__link:focus-visible .cisl-mosaic__img { transform: scale(1.05); }
.cisl-mosaic__link:focus-visible { outline: 3px solid var(--cisl-red); outline-offset: -3px; }

.cisl-mosaic__over {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(8, 48, 28, 0.85), rgba(8, 48, 28, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--cisl-ease), transform 0.25s var(--cisl-ease);
  pointer-events: none;
}
.cisl-mosaic__link:hover .cisl-mosaic__over,
.cisl-mosaic__link:focus-visible .cisl-mosaic__over { opacity: 1; transform: none; }
.cisl-mosaic__album {
  overflow: hidden;
  font-size: var(--cisl-fs-sm);
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cisl-mosaic__date { font-size: var(--cisl-fs-xs); opacity: 0.85; }

/* Locandine (immagini con il testo dentro): quando si guarda la sezione
   Locandine il mosaico diventa una griglia di riquadri uguali, più grandi
   delle foto, e ogni immagine si vede sempre intera. */
.cisl-mosaic--posters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--cisl-sp-4);
}
.cisl-mosaic--posters::after { content: none; }
.cisl-mosaic--posters .cisl-mosaic__item { height: auto; aspect-ratio: 3 / 4; }
.cisl-mosaic--posters .cisl-mosaic__link { position: absolute; inset: 0; height: auto; }
.cisl-mosaic--posters .cisl-mosaic__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cisl-mosaic__item--poster .cisl-mosaic__img { object-fit: contain; }
.cisl-mosaic__item--poster .cisl-mosaic__over { display: none; }

.cisl-galnone,
.cisl-galempty {
  margin: 0;
  padding: var(--cisl-sp-6);
  border: 2px dashed var(--cisl-line);
  border-radius: var(--cisl-r-lg);
  text-align: center;
  color: var(--cisl-ink-2);
}
.cisl-galempty .cisl-h3 { margin: 0 0 var(--cisl-sp-2); color: var(--cisl-ink); }
.cisl-galempty p { margin: 0 auto var(--cisl-sp-5); max-width: 56ch; }
.cisl-galempty .cisl-icon { width: 18px; height: 18px; }

.cisl-galmore { display: flex; justify-content: center; margin-top: var(--cisl-sp-6); }
.cisl-galmore:has(> [hidden]:only-child) { display: none; }

.cisl-galblock .cisl-help { margin-top: clamp(40px, 6vw, 72px); }

@media (max-width: 1024px) {
  .cisl-mosaic { --h: 190px; }
}
@media (max-width: 640px) {
  .cisl-mosaic { --h: 128px; gap: 6px; }
  .cisl-mosaic--posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cisl-sp-2); }
  .cisl-mosaic__over { display: none; } /* Riquadri piccoli: il titolo si legge nel visore. */
  .cisl-albumbar { flex-direction: column; align-items: flex-start; padding: var(--cisl-sp-5); }
  .cisl-galfilter__row select { min-height: 48px; }
}

/* ==========================================================================
   Visore a tutto schermo (<dialog>)
   ========================================================================== */
html.cisl-lb-open { overflow: hidden; }

.cisl-lb {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #04160d;
  color: var(--cisl-white);
  font-family: var(--cisl-font-sans);
}
.cisl-lb::backdrop { background: rgba(0, 0, 0, 0.6); }
.cisl-lb[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.cisl-lb__top {
  display: flex;
  align-items: center;
  gap: var(--cisl-sp-3);
  padding: 12px clamp(12px, 3vw, 28px);
}
.cisl-lb__count { margin: 0 auto 0 0; font-size: var(--cisl-fs-sm); font-weight: 700; opacity: 0.85; }
.cisl-lb__album {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--cisl-r-pill);
  background: transparent;
  color: var(--cisl-white);
  font: 700 var(--cisl-fs-sm) / 1.2 var(--cisl-font-sans);
  cursor: pointer;
}
.cisl-lb__album:hover { background: rgba(255, 255, 255, 0.12); }

.cisl-lb__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--cisl-white);
  cursor: pointer;
  transition: background-color 0.2s var(--cisl-ease);
}
.cisl-lb__btn:hover { background: rgba(255, 255, 255, 0.24); }
.cisl-lb__btn svg { width: 22px; height: 22px; }
.cisl-lb__btn:focus-visible,
.cisl-lb__album:focus-visible { outline: 3px solid var(--cisl-white); outline-offset: 2px; }
.cisl-lb__btn[hidden] { display: none; }

.cisl-lb__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  padding: 0 clamp(8px, 7vw, 96px);
  touch-action: pan-y pinch-zoom;
}
.cisl-lb__img {
  display: block;
  max-width: 100%;
  /* Altezza esplicita: dentro la griglia del <dialog> la percentuale non basta
     e le foto verticali coprirebbero la didascalia. 190px = barra sopra + didascalia. */
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--cisl-r-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  transition: opacity 0.2s var(--cisl-ease);
  user-select: none;
  -webkit-user-drag: none;
}
.cisl-lb__img.is-loading { opacity: 0.35; }

.cisl-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.cisl-lb__nav--prev { left: clamp(8px, 2vw, 28px); }
.cisl-lb__nav--next { right: clamp(8px, 2vw, 28px); }

.cisl-lb__cap {
  padding: 14px clamp(16px, 7vw, 96px) 20px;
  text-align: center;
}
.cisl-lb__cap p { margin: 0 auto; max-width: 80ch; }
.cisl-lb__title { font-weight: 800; font-size: var(--cisl-fs-base); }
.cisl-lb__meta { margin-top: 2px !important; font-size: var(--cisl-fs-sm); opacity: 0.75; }
.cisl-lb__text { margin-top: 8px !important; font-size: var(--cisl-fs-sm); opacity: 0.95; }
.cisl-lb__text:empty { display: none; }

@media (max-width: 640px) {
  .cisl-lb__nav { top: auto; bottom: 8px; transform: none; width: 44px; height: 44px; background: rgba(0, 0, 0, 0.45); }
  .cisl-lb__album { padding: 8px 12px; font-size: var(--cisl-fs-xs); }
  .cisl-lb__stage { padding: 0 8px; }
}

/* Telefono e tablet: la foto occupa tutto lo spazio tra la barra in alto e la didascalia
   (larga quanto lo schermo). Con le dimensioni "naturali" Safari su iPhone la mostrava
   piccola al centro: qui il riquadro ha misure certe e la foto ci sta dentro intera. */
@media (max-width: 900px) {
  .cisl-lb__stage { padding: 0; }
  /* Due classi: ".cisl-section img { height: auto }" altrimenti vince e la foto resta in alto. */
  .cisl-lb .cisl-lb__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
  .cisl-lb__nav { z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cisl-mosaic__img,
  .cisl-mosaic__over,
  .cisl-lb__img { transition: none; }
  .cisl-mosaic__link:hover .cisl-mosaic__img,
  .cisl-mosaic__link:focus-visible .cisl-mosaic__img { transform: none; }
}