/* =========================================================
   HOLIESTETYKA — bloki redaktorskie: „Zdjęcie”, „Zdjęcia obok siebie”, „Film”.
   Wstawki między akapitami, więc oddech mniejszy niż w pełnych sekcjach bazy.
   Mobile-first; próg 701 px zgodny z resztą motywu.
   ========================================================= */

/* Mniejszy padding niż .section / .section--tight — zdjęcie między tekstami
   nie ma robić dziury na pół ekranu. Podwójna klasa wygrywa specyficznością. */
.section.holi-img,
.section.holi-imgs-sec,
.section.holi-video-sec {
  padding-block: clamp(28px, 5vw, 56px);
}

/* ---------- Zdjęcie ---------- */
.holi-img__fig {
  margin: 0;
}
.holi-img__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-photo, 28px);
}
.holi-img--narrow .holi-img__fig {
  max-width: 640px;
  margin-inline: auto;
}
.holi-img--wide .holi-img__fig {
  max-width: 100%;
}
.holi-img--full .holi-img__fig img {
  border-radius: 0;
}
.holi-img__cap {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-muted, #5d6b61);
}
.holi-img--narrow .holi-img__cap,
.holi-img--full .holi-img__cap {
  text-align: center;
}

/* ---------- Zdjęcia obok siebie ---------- */
/* Na telefonie zawsze dwa w rzędzie — trzy i cztery byłyby znaczkami pocztowymi. */
.holi-imgs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.holi-imgs figure {
  margin: 0;
}
.holi-imgs img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-photo, 28px);
  background: var(--c-bg-2, #f1ecde);
}
.holi-imgs figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-muted, #5d6b61);
}
.holi-imgs-sec .sec-head {
  margin-bottom: 18px;
}

@media (min-width: 701px) {
  .holi-imgs--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .holi-imgs--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .holi-imgs {
    gap: 18px;
  }
}

/* ---------- Film ---------- */
/* .reel w bazie to dwie kolumny (film + tekst); tu jest sam film, więc jedna kolumna. */
.holi-video {
  display: block !important;
}
.holi-video .reel__media {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}
.holi-video--wide .reel__media {
  max-width: 560px;
}
.holi-video video.reel__v {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 9 / 16; /* JS podmienia na proporcję z pliku */
  object-fit: contain;  /* cały kadr, bez obcinania */
  background: var(--c-primary-4, #0e2a1b);
  margin-inline: auto;
}
.holi-video__cap {
  max-width: 560px;
  margin: 12px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-muted, #5d6b61);
}