/* ==========================================================================
   video.css — strona filmu (video.php) i lista filmów (video_list.php).
   Tokeny z global.css (:root), komponenty (.section, .video-card, .yt-facade,
   .breadcrumbs, .testy-card) z components.css. Mobile-first.
   ========================================================================== */

.video-page{ padding-bottom: 24px; }

/* miniatury YouTube są 16:9 — na tych stronach ramka 16:9 zamiast 490/327
   z karty na głównej (sddefault 4:3 ma czarne pasy, cover ucina je dokładnie) */
.video-page .video-card__media{ aspect-ratio: 16 / 9; }

/* ---------- Odtwarzacz + opis ---------- */

.video-main{
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.video-main__player .yt-facade{ border-radius: 0; }

.video-main__info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 22px;
}
.video-main__title{
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.video-main__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.video-main__date{ font-size: 13px; color: var(--ink-soft); }

.video-main__desc{
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;
  max-width: 70ch;
}
.video-main__desc p{ margin: 0; }
/* zwijanie tylko z JS — bez JS opis jest pełny, a przycisk ukryty */
.js .video-main__desc.is-clamped{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.video-main__more{
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--main-color);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.no-js .video-main__more{ display: none; }
.video-main__more:hover{ color: var(--accent-dark); }
.video-main__more:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.video-main__yt{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--main-color);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .15s ease;
}
.video-main__yt svg{ width: 18px; height: 18px; flex: 0 0 auto; }
.video-main__yt:hover{ background: var(--main-color-dark); }
.video-main__yt:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

@media (min-width: 1000px){
  .video-main{
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .video-main__player{ align-self: start; }
  .video-main__info{ padding: 24px 26px; }
  .video-main__title{ font-size: 26px; }
  /* opis nie wydłuża kolumny ponad wysokość odtwarzacza */
  .js .video-main__desc.is-clamped{ -webkit-line-clamp: 8; }
}

/* "Czytaj artykuł" w karcie artykułu do filmu — do prawej */
.video-page .testy-card__footer{ justify-content: flex-end; }

/* ---------- Lista filmów ---------- */

@media (min-width: 700px){
  .video-grid--list{ grid-template-columns: repeat(3, 1fr); }
  .video-page .section__panel .video-grid{ gap: 20px; }

  .video-card--featured{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
  }
  .video-card--featured .video-card__body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 32px;
  }
  .video-card--featured .video-card__title{ font-size: 24px; line-height: 1.2; }
  .video-card--featured .video-card__play svg{ width: 72px; height: 72px; }
}
@media (min-width: 1000px){
  /* strona filmu: "Więcej filmów" w 3 kolumnach (6 = 2 pełne rzędy) */
  .video-page .video-grid{ grid-template-columns: repeat(3, 1fr); }
}

.video-card__desc{
  display: none;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (min-width: 700px){
  .video-card--featured .video-card__desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
  }
}

/* ---------- Paginacja ---------- */

.pager{ padding: 0 20px 22px; }
.pager__list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.pager__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pager__link svg{ width: 15px; height: 15px; flex: 0 0 auto; }
a.pager__link:hover{ border-color: var(--main-color); background: var(--main-color); color: #fff; }
.pager__link:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.pager__link.is-current{ background: var(--main-color); border-color: var(--main-color); color: #fff; }
.pager__gap{ padding: 0 2px; color: var(--ink-soft); }

@media (max-width: 599px){
  /* na telefonie strzałki bez napisów, żeby wszystko zmieściło się w 1 rzędzie */
  .pager__link--dir span{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }
  .pager__link--dir{ padding: 0; width: 40px; }
}

/* ---------- Brak filmu / pusta strona listy ---------- */

.video-empty{ padding: 24px 20px 28px; }
.video-empty__title{
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
}
.video-empty p{ margin: 0 0 16px; color: var(--ink-soft); }
.video-empty__cta{
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--main-color);
  color: #fff;
  font-weight: 600;
}
.video-empty__cta:hover{ background: var(--main-color-dark); }

@media (prefers-reduced-motion: reduce){
  .video-card,
  .video-card__media img,
  .video-card__play svg{ transition: none; }
  .video-card:hover,
  .video-card:hover .video-card__media img{ transform: none; }
}