/* Novinka s videem vypadá ve výpisu stejně jako novinka s fotkou.
 *
 * Proč vůbec: náhled videa se dřív vykresloval jako <img> ze slideru
 * (Gallery2), tedy `width: auto` — u náhledu z YouTube 320 px, zatímco fotka
 * vyplní celý sloupec (339 px na desktopu). Zákazníkovi se rozcházely okraje
 * a řešilo se to tak, že se z videa dělal screenshot a vkládal jako fotka.
 * Šablona (inc/news-list.php) proto u jednoho videa používá týž rám
 * `.News-image` jako fotka a tenhle soubor k němu dodává značku „play".
 *
 * Nesahá to na stránku Galerie — pravidla jsou schválně omezená na .News-item.
 */

/* Rám je `.News-image`, odkaz kolem něj jen nese značku přehrávání. */
.News-item .News-video {
  position: relative;
  display: block;
}

.News-item .News-video:before,
.News-item .Gallery2-link--videos:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-image: url(../img/play.svg);
  background-size: 60px;
  background-position: center center;
  background-repeat: no-repeat;
  /* Značka na světlém záběru zanikala; stín ji drží čitelnou na čemkoli. */
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, .45));
  transition: opacity .3s ease;
  pointer-events: none;
}

.News-item .News-video:hover:before { opacity: .75; }

/* Kurzor: rám je proklikávací stejně jako u fotky.
 * Ořez od středu, ne od horního rohu jako u fotek: když náhled výjimečně
 * nemáme u sebe a bere se `hqdefault` z YouTube, má nahoře a dole černé pruhy
 * a ty se při ořezu od kraje ukážou. Od středu se odříznou. */
.News-item .News-video .News-image {
  cursor: pointer;
  background-position: center center;
}

/* Lightbox s videem — poměr 16:9 a rozumná šířka i na mobilu.
   Magnific Popup si jinak drží pevných 900 px. */
.mfp-video .mfp-content {
  max-width: 1000px;
  width: 92%;
}

.mfp-video .mfp-iframe-scaler { padding-top: 56.25%; }