/**
 * MSBela – gallery.css  v2.14.0
 *
 * Styly pro: archiv galerií, detail galerie, galerie karty, lightbox.
 * Závisí na design tokenech definovaných v main.css (:root).
 * Žádné inline CSS, žádné !important (kromě reduced-motion guardu).
 *
 * Obsah:
 *   1. Archiv – sekce + header + filter tagy
 *   2. Gallery grid
 *   3. Gallery karta  (.galleryCard)
 *   4. Detail galerie  (.galleryDetail)
 *   5. Masonry grid  (.galleryMasonry / .galleryItem)
 *   6. Lightbox  (.msbLightbox)
 *   7. Stránkování
 *   8. Utility + prázdné stavy
 *   9. Reduced motion
 */

/* ============================================================
   1. Archiv – sekce obálka
   ============================================================ */

.galleryArchive {
  padding-block-start: var(--space-8);
  padding-block-end:   var(--space-10);
  min-height: 60vh;
}

.gallerySection {
  padding-block: var(--space-10);
}

.gallerySection--shortcode {
  padding-block: var(--space-6);
}

/* ── Záhlaví sekce ────────────────────────────────────────── */

.gallerySection__header {
  margin-bottom: var(--space-8);
}

.gallerySection__title,
.galleryDetail__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.5rem, 3vw, var(--font-size-2xl));
  font-weight:    400;
  font-style:     italic;
  color:          var(--ds-teal-dark);
  margin-bottom:  var(--space-5);
  position:       relative;
  padding-bottom: var(--space-5);
  line-height:    1.2;
  display:        block;
}

.gallerySection__title::after,
.galleryDetail__title::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  width:            2.5rem;        /* kratší než section-title výchozí */
  height:           3px;
  background-color: var(--ds-teal);
  border-radius:    var(--radius-full);
}

/* ── Filtrovací tagy (archiv) ─────────────────────────────── */

.gallerySection__filter {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  margin-top: var(--space-4);
}

.gallerySection__filterTag {
  display:          inline-flex;
  align-items:      center;
  padding:          6px 16px;
  border-radius:    var(--radius-full);
  font-family:      var(--font-ui);
  font-size:        0.8rem;
  font-weight:      var(--font-weight-bold);
  color:            var(--ds-text-mid);
  background-color: var(--ds-green-pale);
  border:           2px solid transparent;
  text-decoration:  none;
  transition:
    background-color 150ms ease,
    border-color     150ms ease,
    color            150ms ease;
}

.gallerySection__filterTag:hover,
.gallerySection__filterTag:focus-visible {
  background-color: var(--ds-teal-light);
  color:            var(--ds-teal-dark);
  outline:          none;
}

.gallerySection__filterTag.is-active {
  background-color: var(--ds-teal-dark);
  border-color:     var(--ds-teal-dark);
  color:            var(--ds-white);
}

.gallerySection__filterTag:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   2. Gallery grid  (archiv + shortcode)
   ============================================================ */

.galleryGrid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-5);
}

@media (min-width: 480px) {
  .galleryGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .galleryGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Grid v shortcode: max 2 sloupce */
.galleryGrid--shortcode {
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .galleryGrid--shortcode {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   3. Gallery karta  (.galleryCard)
   ============================================================ */

.galleryCard {
  display:          flex;
  flex-direction:   column;
  background-color: var(--ds-white);
  border-radius:    var(--radius-lg);           /* 24px */
  box-shadow:       var(--shadow-card);
  overflow:         hidden;
  transition:
    transform  250ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 250ms ease;
  will-change: transform;
}

.galleryCard:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.galleryCard--private {
  opacity: .9;
}

.galleryCard--compact {
  /* Kompaktnější varianta (homepage / shortcode) */
}

/* ── Cover obrázek ────────────────────────────────────────── */

.galleryCard__image {
  position:    relative;
  width:       100%;
  height:      200px;
  overflow:    hidden;
  flex-shrink: 0;
  background-color: var(--ds-sky-pale);
}

.galleryCard--compact .galleryCard__image {
  height: 160px;
}

.galleryCard__imageLink {
  display: block;
  height:  100%;
}

.galleryCard__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 400ms ease;
}

.galleryCard:hover .galleryCard__img {
  transform: scale(1.04);
}

.galleryCard__placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      linear-gradient(
                     135deg,
                     var(--ds-sky-pale) 0%,
                     var(--ds-sky-light) 100%
                   );
}

/* ── Overlay badges ───────────────────────────────────────── */

.galleryCard__count {
  position:         absolute;
  bottom:           var(--space-2);
  right:            var(--space-2);
  background-color: rgba(0, 0, 0, .55);
  color:            #fff;
  font-size:        0.72rem;
  font-weight:      var(--font-weight-bold);
  line-height:      1;
  padding:          4px 10px;
  border-radius:    var(--radius-full);
  pointer-events:   none;
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.galleryCard__privateBadge {
  position:       absolute;
  top:            var(--space-2);
  left:           var(--space-2);
  font-size:      1rem;
  line-height:    1;
  filter:         drop-shadow(0 1px 3px rgba(0,0,0,.5));
  pointer-events: none;
}

/* ── Soukromá karta – šrafování ───────────────────────────── */

.galleryCard--private .galleryCard__image::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 8px,
                    rgba(0,0,0,.04) 8px,
                    rgba(0,0,0,.04) 9px
                  );
  pointer-events: none;
}

/* ── Meta sekce ───────────────────────────────────────────── */

.galleryCard__meta {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        var(--space-4);
  gap:            var(--space-2);
}

/* ── Provoz štítek (tag) ──────────────────────────────────── */

.galleryCard__tag {
  display:          inline-block;
  padding:          3px 10px;
  border-radius:    var(--radius-full);
  font-size:        0.68rem;
  font-weight:      var(--font-weight-bold);
  text-transform:   uppercase;
  letter-spacing:   .06em;
  line-height:      1.5;
  align-self:       flex-start;
}

/* Barvy per-provoz */
.galleryCard__tag--velenského,
.galleryCard__tag--velenek-o {
  background-color: var(--ds-sky-light);
  color:            var(--ds-teal-dark);
}

.galleryCard__tag--mladoboleslavska,
.galleryCard__tag--mladoboleslavsk {
  background-color: var(--ds-green-light);
  color:            var(--ds-green-dark);
}

.galleryCard__tag--brezinka {
  background-color: var(--ds-apricot-light);
  color:            #a8500a;
}

/* Fallback */
.galleryCard__tag {
  background-color: var(--ds-green-pale);
  color:            var(--ds-text-mid);
}

/* ── Nadpis karty ─────────────────────────────────────────── */

.galleryCard__title {
  font-family: var(--font-display);
  font-size:   clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 400;
  color:       var(--ds-text-dark);
  margin:      0;
  line-height: 1.3;
}

.galleryCard__titleLink {
  color:           inherit;
  text-decoration: none;
  transition:      color 150ms ease;
}

.galleryCard__titleLink:hover,
.galleryCard__titleLink:focus-visible {
  color:           var(--ds-teal-dark);
  text-decoration: underline;
  outline:         none;
}

.galleryCard__titleLink:focus-visible {
  outline:        var(--focus-ring);
  outline-offset: 2px;
  border-radius:  2px;
}

.galleryCard__privateLabel {
  font-size:  .75em;
  color:      var(--ds-text-light);
  font-style: italic;
}

/* ── Datum + počet fotek ──────────────────────────────────── */

.galleryCard__dateRow {
  font-size:   0.78rem;
  color:       var(--ds-text-light);
  margin:      0;
  display:     flex;
  flex-wrap:   wrap;
  gap:         4px;
  align-items: center;
}

.galleryCard__sep { color: var(--ds-text-light); }

.galleryCard__eventDate {
  color:       var(--ds-teal-dark);
  font-weight: var(--font-weight-semibold);
}

/* ── CTA tlačítko ─────────────────────────────────────────── */

.galleryCard__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* ── Detail tag (single) ──────────────────────────────────── */

.galleryDetail__tag {
  display:          inline-block;
  padding:          4px 14px;
  border-radius:    var(--radius-full);
  font-size:        0.75rem;
  font-weight:      var(--font-weight-bold);
  text-transform:   uppercase;
  letter-spacing:   .06em;
  text-decoration:  none;
  background-color: var(--ds-sky-light);
  color:            var(--ds-teal-dark);
  transition:       background-color 150ms ease;
}

.galleryDetail__tag:hover {
  background-color: var(--ds-teal-light);
}

.galleryDetail__tag--mladoboleslavska { background-color: var(--ds-green-light); color: var(--ds-green-dark); }
.galleryDetail__tag--brezinka         { background-color: var(--ds-apricot-light); color: #a8500a; }

/* ============================================================
   4. Detail galerie  (.galleryDetail)
   ============================================================ */

.galleryDetail {
  padding-block: var(--space-8);
  min-height:    60vh;
}

/* ── Breadcrumb ───────────────────────────────────────────── */

.galleryDetail__breadcrumb {
  font-size:   0.82rem;
  color:       var(--ds-text-light);
  margin-bottom: var(--space-5);
  display:     flex;
  flex-wrap:   wrap;
  gap:         4px;
  align-items: center;
}

.galleryDetail__breadcrumb a {
  color:           var(--ds-teal-dark);
  text-decoration: none;
}

.galleryDetail__breadcrumb a:hover {
  text-decoration: underline;
}

/* ── Detail záhlaví ───────────────────────────────────────── */

.galleryDetail__header {
  margin-bottom: var(--space-6);
}

.galleryDetail__title {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}

.galleryDetail__privateBadge {
  font-size: .7em;
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* ── Meta bar ─────────────────────────────────────────────── */

.galleryDetail__metaBar {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-3);
  align-items: center;
  margin-top:  var(--space-4);
}

.galleryDetail__date {
  font-size:   0.88rem;
  color:       var(--ds-text-mid);
}

.galleryDetail__count {
  font-size:       0.82rem;
  color:           var(--ds-text-light);
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
}

/* ── Popis ────────────────────────────────────────────────── */

.galleryDetail__description {
  color:         var(--ds-text-mid);
  font-size:     var(--font-size-base);
  line-height:   1.7;
  margin-bottom: var(--space-8);
  max-width:     72ch;
}

/* ── Soukromá – zamčená ───────────────────────────────────── */

.galleryDetail__locked {
  text-align:    center;
  padding:       var(--space-12) var(--space-6);
  background:    var(--ds-sky-pale);
  border-radius: var(--radius-lg);
  max-width:     560px;
  margin-inline: auto;
}

.galleryDetail__lockedIcon {
  font-size:     3.5rem;
  margin-bottom: var(--space-4);
  line-height:   1;
}

.galleryDetail__lockedTitle {
  font-family:   var(--font-display);
  font-size:     var(--font-size-xl);
  color:         var(--ds-teal-dark);
  margin-bottom: var(--space-3);
}

.galleryDetail__lockedText {
  color:         var(--ds-text-mid);
  margin-bottom: var(--space-6);
  font-size:     1rem;
  line-height:   1.6;
}

/* ── Zpět odkaz ───────────────────────────────────────────── */

.galleryDetail__back {
  margin-top: var(--space-10);
}

.galleryDetail__noPhotos {
  color:      var(--ds-text-light);
  font-style: italic;
  padding:    var(--space-8);
  text-align: center;
  background: var(--ds-sky-pale);
  border-radius: var(--radius-md);
}

/* ============================================================
   5. Masonry grid  (.galleryMasonry / .galleryItem)
   ============================================================ */

.galleryMasonry {
  /* CSS columns pro masonry efekt – bez JS */
  columns:       2;
  column-gap:    var(--space-3);
  margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
  .galleryMasonry {
    columns: 3;
  }
}

@media (min-width: 992px) {
  .galleryMasonry {
    columns: 4;
  }
}

.galleryItem {
  display:                 inline-block;
  width:                   100%;
  break-inside:            avoid;
  margin-bottom:           var(--space-3);
  border-radius:           var(--radius-md);
  overflow:                hidden;
  background-color:        var(--ds-sky-pale);
}

.galleryItem__btn {
  display:         block;
  width:           100%;
  padding:         0;
  border:          none;
  background:      none;
  cursor:          pointer;
  border-radius:   var(--radius-md);
  overflow:        hidden;
  position:        relative;
}

.galleryItem__btn::after {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       rgba(0, 0, 0, 0);
  border-radius:    var(--radius-md);
  transition:       background 200ms ease;
}

.galleryItem__btn:hover::after,
.galleryItem__btn:focus-visible::after {
  background: rgba(0, 0, 0, .15);
}

.galleryItem__btn:focus-visible {
  outline:        var(--focus-ring);
  outline-offset: 2px;
}

.galleryItem__img {
  display:    block;
  width:      100%;
  height:     auto;
  transition: transform 300ms ease;
}

.galleryItem__btn:hover .galleryItem__img {
  transform: scale(1.03);
}

.galleryItem__placeholder {
  display:    block;
  width:      100%;
  aspect-ratio: 4 / 3;
  background: var(--ds-sky-pale);
}

/* ============================================================
   6. Lightbox  (.msbLightbox)
   ============================================================ */

.msbLightbox {
  position:         fixed;
  inset:            0;
  z-index:          9999;
  background-color: rgba(0, 0, 0, .92);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  opacity:          0;
  pointer-events:   none;
  transition:       opacity 200ms ease;
  /* Scroll lock handled via JS (body overflow) */
}

.msbLightbox.is-open {
  opacity:        1;
  pointer-events: all;
}

/* ── Vnitřní kontejner ────────────────────────────────────── */

.msbLightbox__inner {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  padding:         var(--space-6);
}

/* ── Fotka ────────────────────────────────────────────────── */

.msbLightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(100vw - 120px);
  max-height: calc(100vh - 80px);
}

@media (max-width: 640px) {
  .msbLightbox__figure {
    max-width: calc(100vw - var(--space-5) * 2);
    max-height: calc(100vh - 100px);
  }
}

.msbLightbox__img {
  display:    block;
  max-width:  100%;
  max-height: calc(100vh - 140px);
  height:     auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 40px rgba(0,0,0,.6);

  /* Animate-in */
  transform:  scale(0.92);
  opacity:    0;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity   180ms ease;
}

.msbLightbox.is-open .msbLightbox__img {
  transform: scale(1);
  opacity:   1;
}

/* ── Caption ──────────────────────────────────────────────── */

.msbLightbox__caption {
  color:      rgba(255,255,255,.75);
  font-size:  0.82rem;
  margin-top: var(--space-2);
  text-align: center;
  max-width:  60ch;
}

/* ── Counter ──────────────────────────────────────────────── */

.msbLightbox__counter {
  position:   absolute;
  top:        var(--space-4);
  left:       50%;
  transform:  translateX(-50%);
  color:      rgba(255,255,255,.8);
  font-size:  0.8rem;
  font-family: var(--font-ui);
  pointer-events: none;
  white-space: nowrap;
}

/* ── Tlačítka ─────────────────────────────────────────────── */

.msbLightbox__btn {
  position:         absolute;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            48px;
  height:           48px;
  border-radius:    var(--radius-full);
  border:           2px solid rgba(255,255,255,.25);
  background:       rgba(255,255,255,.1);
  color:            #fff;
  cursor:           pointer;
  font-size:        1.25rem;
  line-height:      1;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.msbLightbox__btn:hover,
.msbLightbox__btn:focus-visible {
  background:    rgba(255,255,255,.25);
  border-color:  rgba(255,255,255,.6);
}

.msbLightbox__btn:focus-visible {
  outline:        3px solid #fff;
  outline-offset: 2px;
}

.msbLightbox__btn:active {
  transform: scale(.92);
}

/* Zavřít */
.msbLightbox__close {
  top:   var(--space-4);
  right: var(--space-4);
  z-index: 1;
}

/* Předchozí / Další */
.msbLightbox__prev {
  left:       var(--space-3);
  top:        50%;
  transform:  translateY(-50%);
}

.msbLightbox__next {
  right:      var(--space-3);
  top:        50%;
  transform:  translateY(-50%);
}

.msbLightbox__prev:hover,
.msbLightbox__prev:focus-visible {
  transform: translateY(-50%) scale(1.1);
}

.msbLightbox__next:hover,
.msbLightbox__next:focus-visible {
  transform: translateY(-50%) scale(1.1);
}

@media (max-width: 480px) {
  .msbLightbox__prev { left: var(--space-2); }
  .msbLightbox__next { right: var(--space-2); }

  .msbLightbox__btn {
    width:  40px;
    height: 40px;
  }
}

/* ── Loading spinner ──────────────────────────────────────── */

.msbLightbox__loader {
  position:     absolute;
  inset:        0;
  display:      flex;
  align-items:  center;
  justify-content: center;
  pointer-events: none;
}

/* OPRAVA: CSS display:flex přebíjí HTML atribut [hidden].
 * Explicitní override zajistí že spinner zmizí když JS nastaví hidden=true. */
.msbLightbox__loader[hidden] {
  display: none !important;
}

.msbLightbox__spinner {
  width:        40px;
  height:       40px;
  border:       3px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation:    msbSpinner 0.7s linear infinite;
}

@keyframes msbSpinner {
  to { transform: rotate(360deg); }
}


/* ── Play / Pause tlačítko ─────────────────────────────────────────── */

.msbLightbox__play {
  right:  calc(var(--space-3) + 48px + var(--space-2));  /* vlevo od Zavřít */
  top:    var(--space-3);
}

/* Ikonky: play default, pause skrytá */
.msbLightbox__iconPause { display: none; }
.msbLightbox__play.is-playing .msbLightbox__iconPlay  { display: none; }
.msbLightbox__play.is-playing .msbLightbox__iconPause { display: inline; }

/* Progress bar — animuje se pomocí CSS keyframes, resetuje se při prev/next */
.msbLightbox__progress {
  position:         absolute;
  bottom:           0;
  left:             0;
  height:           3px;
  width:            0%;
  background:       var(--ds-teal-mid, rgba(255,255,255,.7));
  pointer-events:   none;
}

.msbLightbox.is-playing .msbLightbox__progress {
  animation: msbProgress 5s linear forwards;
}

@keyframes msbProgress {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ============================================================
   7. Stránkování archívu
   ============================================================ */

.galleryArchive__pagination {
  margin-top: var(--space-10);
  display:    flex;
  justify-content: center;
}

.galleryArchive__pagination ul {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-2);
  list-style:  none;
  margin:      0;
  padding:     0;
}

.galleryArchive__pagination li a,
.galleryArchive__pagination li span {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  min-width:        40px;
  height:           40px;
  padding:          0 var(--space-3);
  border-radius:    var(--radius-full);
  font-size:        0.88rem;
  font-weight:      var(--font-weight-bold);
  text-decoration:  none;
  background-color: var(--ds-white);
  color:            var(--ds-text-mid);
  box-shadow:       var(--shadow-soft);
  border:           2px solid transparent;
  transition:
    background-color 150ms ease,
    border-color     150ms ease,
    color            150ms ease;
}

.galleryArchive__pagination li a:hover,
.galleryArchive__pagination li a:focus-visible {
  background-color: var(--ds-teal-light);
  color:            var(--ds-teal-dark);
  outline:          none;
}

.galleryArchive__pagination li a:focus-visible {
  outline:        var(--focus-ring);
  outline-offset: 2px;
}

.galleryArchive__pagination .current {
  background-color: var(--ds-teal-dark);
  border-color:     var(--ds-teal-dark);
  color:            var(--ds-white);
}

/* ============================================================
   8. Utility + prázdné stavy
   ============================================================ */

.galleryArchive__empty,
.gallerySection__empty {
  padding:       var(--space-10);
  text-align:    center;
  color:         var(--ds-text-light);
  font-style:    italic;
  font-size:     1rem;
}

.gallerySection__more {
  margin-top: var(--space-6);
  text-align: center;
}

.btn--disabled {
  opacity:        .6;
  cursor:         not-allowed;
  pointer-events: none;
}

/* ============================================================
   9. Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .galleryCard,
  .galleryCard__img,
  .galleryItem__img,
  .galleryItem__btn::after,
  .msbLightbox,
  .msbLightbox__img {
    transition:   none !important;
    animation:    none !important;
    will-change:  auto !important;
    transform:    none !important;
  }

  .msbLightbox__spinner {
    animation: none !important;
    display:   none;
  }
}