/* =========================================================
 * Peekaboo – gallery preview
 * - 1–3 photos preview
 * - 4:3 crop for preview tiles
 * - layout:
 *     1 => centered 50% width
 *     2 => 50/50
 *     3 => big left + two stacked right (left column wider)
 * - "+N" overlay centered on last tile
 * ========================================================= */

/* Wrapper */
.peekaboo-preview {
  display: grid;
  gap: 8px; /* dej 0, pokud chceš bez mezer */
}

/* Tile (button) – reset default button styling + crop box */
.peekaboo-preview__cell {
  /* reset button defaults (zabíjí "rámečky") */
  border: none;
  padding: 0;
  background: none;
  border-radius: 0;
  appearance: none;

  /* behavior */
  cursor: pointer;
  text-align: left;

  /* crop box */
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;

  /* remove any extra inline gaps */
  display: block;
}

/* Accessible focus without ugly border outside */
.peekaboo-preview__cell:focus {
  outline: none;
}

.peekaboo-preview__cell:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: -2px; /* dovnitř */
}

/* Image fills tile and is cropped */
.peekaboo-preview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------
 * Layout: 1 photo (centered 50% width)
 * --------------------------------- */
.peekaboo-preview--1 {
  grid-template-columns: 1fr 1fr;
}

/* jediná fotka do středu */
.peekaboo-preview--1 .peekaboo-preview__cell {
  grid-column: 1 / span 2; /* přes oba sloupce */
  width: 50%;              /* ale jen poloviční šířka */
  justify-self: center;    /* vycentrování */
}

/* ---------------------------------
 * Layout: 2 photos (50/50)
 * --------------------------------- */
.peekaboo-preview--2 {
  grid-template-columns: 1fr 1fr;
}

/* ---------------------------------
 * Layout: 3 photos (big left + 2 stacked right)
 * - left column wider
 * - IMPORTANT: left tile height must match both right tiles combined
 * --------------------------------- */
.peekaboo-preview--3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* 1st tile: left, spans both rows */
.peekaboo-preview--3 .peekaboo-preview__cell:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;

  /* override default 4:3:
   * must stretch to full grid height to align bottoms */
  aspect-ratio: auto;
  height: 100%;
}

/* 2nd tile: right top */
.peekaboo-preview--3 .peekaboo-preview__cell:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

/* 3rd tile: right bottom */
.peekaboo-preview--3 .peekaboo-preview__cell:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

/* ---------------------------------
 * "+N" overlay (centered, white text)
 * Only rendered in template when remaining > 0
 * --------------------------------- */
.peekaboo-preview__more {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  color: #fff;
  font-size: 5rem;
  font-weight: 500;
  letter-spacing: 0.02em;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none; /* clicks go through */
}


.peekaboo-lightbox[hidden] {
  display: none;
}

.peekaboo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
}

.peekaboo-lightbox__img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

.peekaboo-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;

  border: none;
  background: none;
  color: #fff;

  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

.peekaboo-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;

  font-size: 3rem;
  line-height: 1;
  cursor: pointer;

  padding: 10px 14px;
}

.peekaboo-lightbox__nav--prev { left: 12px; }
.peekaboo-lightbox__nav--next { right: 12px; }


/* Lightbox content should shrink to the image width */
.peekaboo-lightbox__content {
  display: inline-flex;          /* místo flex */
  flex-direction: column;
  align-items: stretch;          /* meta bude stejně široká jako obrázek */
}

/* image stays responsive */
.peekaboo-lightbox__img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

/* Meta row under image - match image width */
.peekaboo-lightbox__meta {
  width: 100%;                   /* klíčové: kopíruje šířku obrázku */
  margin-top: 10px;

  display: flex;
  justify-content: space-between;
  gap: 16px;

  color: #fff;
  font-size: 1rem;
  line-height: 1.3;
}

.peekaboo-lightbox__author {
  text-align: right;
  flex: 0 0 auto;
  opacity: 0.85;
  white-space: nowrap;
}