/**
 * Paragraph "video_bg" - reszta stylow (karta, tytul, intro, body) dziedziczona
 * z .paragraph-image-bg w domel.css. Tu tylko obszar filmu.
 * Plik pisany recznie (poza gulpem) - 1rem = 10px.
 */

.paragraph-video-bg {
  scroll-margin-top: 12rem; /* przyklejone menu przy przejsciu do #film */
}

.paragraph-video-bg__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1440 / 520; /* jak styl paragraphs_image_header */
  background-color: #1d1d1b;
  transition: aspect-ratio 0.4s ease;
}

@media (max-width: 575.98px) {
  .paragraph-video-bg__media {
    aspect-ratio: 510 / 232; /* paragraphs_image_header_mob */
  }
}

.paragraph-video-bg__poster,
.paragraph-video-bg__poster > *,
.paragraph-video-bg__poster picture {
  display: block;
  width: 100%;
  height: 100%;
}

.paragraph-video-bg__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play - wysrodkowany w czesci posteru, ktorej nie zaslania karta (13.5rem). */
.paragraph-video-bg__play {
  position: absolute;
  left: 50%;
  top: calc((100% - 13.5rem) / 2);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.8rem 2rem 0.8rem 0.8rem;
  border: 0;
  border-radius: 5rem;
  background-color: rgba(255, 255, 255, 0.92);
  color: #1d1d1b;
  font-family: "Manrope", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.paragraph-video-bg__play:not(:has(.paragraph-video-bg__duration)) {
  padding-right: 0.8rem;
}

.paragraph-video-bg__play:hover,
.paragraph-video-bg__play:focus-visible {
  background-color: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

.paragraph-video-bg__play:focus-visible {
  outline: 3px solid #028946;
  outline-offset: 3px;
}

.paragraph-video-bg__play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: #028946;
  color: #fff;
}

.paragraph-video-bg__play-icon svg {
  width: 2.8rem;
  height: 2.8rem;
  margin-left: 0.3rem; /* optyczne wysrodkowanie trojkata */
}

@media (max-width: 767.98px) {
  /* Na mobile karta image_bg zaslania prawie caly obrazek (-13.5rem) - przy
     filmie poster z przyciskiem play musi byc widoczny, wiec nachodzi mniej. */
  .node.node-basic.node--view-mode-full .node__paragraphs .paragraph-video-bg .paragraph-image-bg__content {
    margin-top: -3rem;
  }
  .paragraph-video-bg__play {
    top: calc((100% - 3rem) / 2);
    font-size: 1.4rem;
  }
  .paragraph-video-bg__play-icon {
    width: 4.4rem;
    height: 4.4rem;
  }
  .paragraph-video-bg__play-icon svg {
    width: 2rem;
    height: 2rem;
  }
}

.paragraph-video-bg__player {
  display: none;
}

.paragraph-video-bg__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- w trakcie odtwarzania --- */
.paragraph-video-bg.is-playing .paragraph-video-bg__media {
  aspect-ratio: 16 / 9;
}

.paragraph-video-bg.is-playing .paragraph-video-bg__poster,
.paragraph-video-bg.is-playing .paragraph-video-bg__play {
  display: none;
}

.paragraph-video-bg.is-playing .paragraph-video-bg__player {
  display: block;
}

/* Media sa position:relative (dla przycisku/iframe), wiec karta tez musi byc
   pozycjonowana, zeby - jak w image_bg - nachodzila NA poster, a nie pod niego. */
.node.node-basic.node--view-mode-full .node__paragraphs .paragraph-video-bg .paragraph-image-bg__content {
  position: relative;
  z-index: 1;
  transition: margin-top 0.4s ease;
}

/* Odstep do nastepnej sekcji robi karta wystajaca pod obrazek (sekcje nie maja marginesow).
   W image_bg karta ma intro + przycisk "+", wiec pod obrazkiem zostaje ~18-26rem;
   karta z samym tytulem dawala ~5rem. Min. wysokosc = 13.5rem (zakladka) + 18.5rem. */
@media (min-width: 768px) {
  .node.node-basic.node--view-mode-full .node__paragraphs .paragraph-video-bg .paragraph-image-bg__card {
    min-height: 32rem;
  }
}

/* Karta nie nachodzi na film - przesuwa sie pod niego (nadpisuje -13.5rem z domel.css). */

.node.node-basic.node--view-mode-full .node__paragraphs .paragraph-video-bg.is-playing .paragraph-image-bg__content {
  margin-top: 3rem;
}