/* Galerie obrázků + YouTube — jednotné dlaždice pro zobrazení i editaci + lightbox. */

.gallery { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.gallery-item { position: relative; display: block; width: 160px; text-decoration: none; color: inherit; }
.gallery-item__thumb { display: block; width: 160px; height: 120px; object-fit: cover; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--rule); }
.gallery-item__thumb--text { display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; text-align: center; font-size: 0.8em; color: #766; word-break: break-word; }
.gallery-item__caption { display: block; font-size: 0.85em; color: #666; margin-top: 4px; }
.gallery-item--img .gallery-item__caption, .gallery-item--youtube .gallery-item__caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 4px 6px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.7)); border-radius: 0 0 6px 6px; }
.gallery-item__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.4em; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.7); pointer-events: none; }
.gallery-item--broken { padding: 8px; background: #f4e4e4; color: #844; border-radius: 4px; font-size: 0.85em; }

/* ── Stránka galerie = mřížka „diáků" → klik = svislý viewer (Zetlog) ──
   Default je kompaktní mřížka náhledů (3/řádek, rámeček+pozadí jako diapozitiv). Klik na
   kteroukoli → svislý scroll overlay (`.gallery-viewer`, gallery.js) otevřený na té fotce.
   Příloha v diskuzním příspěvku (vlákno/reakce) = malý inline náhled (pravidlo `.post .gallery`
   níž, vyhrává pozdější specificitou → komentář-příloha na stránce galerie dostane inline). */
.record--gallery .gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4 na řádku → menší diáky = menší okraj v paspartě */
  gap: 6px;
  margin: 14px 0;
}
.record--gallery .gallery-item {        /* „diák": ČTVERCOVÝ (pojme celé portréty i krajiny líp než 4/3),
                                           mírně světlá pasparta + jemný rámeček */
  width: 100%;                          /* vyplnit sloupec (definitivní šířka rozbije kruh aspect-ratio↔img) */
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 10px;                         /* tenčí pasparta → menší okraj kolem fotky */
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s;
}
.record--gallery .gallery-item:hover { box-shadow: 0 3px 11px rgba(0,0,0,0.15); }
/* Přirozený poměr (max-w/max-h, width/height auto) → `<img>` JE fotka, ne contain-box, takže
   rámeček sedne přesně na její hranu. Celá fotka, vystředěná flexem, oddělená 1px od paspartu. */
.record--gallery .gallery-item__thumb {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);   /* jemný 1px rámeček fotky → oddělen od světlé paspartu */
  border-radius: 1px;
}
@media (max-width: 760px) { .record--gallery .gallery { grid-template-columns: repeat(3, 1fr); } }
.record--gallery .gallery-item__caption { display: none; }   /* náhledy bez popisku; ten je až ve vieweru */

/* Svislý viewer (overlay přes celou obrazovku): velké fotky jedna pod druhou, scroll/swipe,
   otevřený na klikné fotce — „vypadá jako essay", ale jen na vyžádání (mimo stránku). */
.gallery-viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(20,18,15,0.97); }
.gallery-viewer__scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;   /* pojistka: žádný vodorovný scroll/posun na mobilu */
  -webkit-overflow-scrolling: touch;
  padding: 44px 12px 56px;
  text-align: center;
}
.gallery-viewer__item { margin: 0 0 22px; }
.gallery-viewer__item img {
  max-width: min(100%, 1280px);   /* obsah containeru (ne 96vw — to přetékalo přes padding → vodorovný scroll na mobilu); cap 1280 = nativní med varianta */
  max-height: 92vh;           /* každá fotka se vejde na obrazovku */
  width: auto; height: auto;
  border-radius: 4px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);   /* 1px rámeček → tmavá fotka oddělená od pozadí */
}
.gallery-viewer__item iframe { width: min(100%, 900px); height: 56vh; border: 0; border-radius: 4px; }
.gallery-viewer__item figcaption { color: #ddd; font-size: 13px; margin-top: 8px; }
.gallery-viewer__close {
  position: fixed; top: 10px; right: 14px; z-index: 1;
  width: 40px; height: 40px;
  background: rgba(0,0,0,0.4); border: 0; border-radius: 50%;
  color: #fff; font-size: 26px; line-height: 38px; cursor: pointer;
}
body.gallery-viewer-open { overflow: hidden; }

.post .gallery { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }   /* flex (ne grid z album pravidla) — malé inline náhledy i u komentáře na stránce galerie */
.post .gallery-item,
.post .gallery-item__thumb { width: 160px; }
.post .gallery-item__thumb { height: 120px; }   /* jako dřív (a jako mřížka galerie) — 75px bylo moc malé proti uloženému 240px thumb */

/* Editační varianta: tytéž dlaždice + popisek + Odebrat pod náhledem, drag&drop. */
.gallery-field { border: 1px dashed #bbb; padding: 12px; border-radius: 6px; }
.gallery-field.is-dragging { border-color: var(--accent, #4a90d9); background: #f3f8fd; }
.gallery-field__items { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.gallery-item--existing, .gallery-item--new { display: flex; flex-direction: column; gap: 4px; }
.gallery-item--existing .gallery-item__caption, .gallery-item--new .gallery-item__caption { position: static; color: inherit; background: none; padding: 0; }
.gallery-item__caption { font: inherit; }
input.gallery-item__caption { padding: 4px 6px; font-size: 0.85em; width: 160px; box-sizing: border-box; }
.gallery-item__remove { font-size: 0.85em; color: #844; cursor: pointer; }
.gallery-item--removed { opacity: 0.4; }
.gallery-field__add { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gallery-add-files, .gallery-add-youtube { padding: 6px 12px; font-size: 0.9em; }