/* Videos page — keep consistent with global tokens (main.css) */

/* Visually-hidden, accessible class */
.sr-only {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Page hero */
.page-hero {
  padding-block: 32px;
  background: linear-gradient(0deg, rgba(11,11,12,.04), rgba(11,11,12,.0));
}
.page-hero__sub { color: var(--text-500); margin: 6px 0 0; }

/* Filters */
.filter-fieldset { border:0; margin:0; padding:0; }
.videos-filters { background:#fff; border:1px solid #e8e2d7; border-radius:12px; padding:16px; box-shadow: var(--shadow-1); margin-bottom:16px; }
.videos-filters__row { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.videos-filters__group { display:flex; flex-direction:column; gap:6px; font-weight:600; color: var(--text-600); }
.videos-filters__group input,
.videos-filters__group select { width:100%; border:1px solid #e1d7c4; border-radius:8px; padding:8px 10px; font-weight:500; }
.videos-filters__label { font-size:13px; color: var(--text-500); }
.videos-filters__actions { display:flex; align-items:center; gap:12px; margin-top:12px; }
.link-reset { color: var(--text-500); text-decoration: underline; font-weight:600; }
.filter-tabs {
  display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0 16px;
}
.filter-tab {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; cursor:pointer;
  border:1px solid #e8e2d7; background:#fff; box-shadow: var(--shadow-1);
  font-weight:600;
}
.filter-tab .count {
  font-size:12px; padding:2px 8px; border-radius:999px;
  background: var(--ivory); border:1px solid #e8e2d7; color:#7a663f;
}

/* Active tab styling (CSS-only):
   Use :has() where supported for progressive enhancement; also provide checked states below */
.filter-tabs:has(+ .video-grid) .filter-tab { opacity:.85; }
#tab-all:checked ~ .filter-tabs label[for="tab-all"],
#tab-youtube:checked ~ .filter-tabs label[for="tab-youtube"],
#tab-tiktok:checked ~ .filter-tabs label[for="tab-tiktok"],
#tab-instagram:checked ~ .filter-tabs label[for="tab-instagram"] {
  border-color: var(--champagne);
  box-shadow: var(--shadow-2);
  opacity:1;
}

.video-card__views,
.video-card__details { display:block; font-size:13px; color: var(--text-500); margin-top:4px; }
.video-card__details { color: var(--text-600); font-weight:700; }

/* Grid (reuses card styling from main.css) */
.video-grid {
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){ .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .video-grid { grid-template-columns: repeat(3, 1fr); } }

/* Platform filtering (CSS-only) */
#tab-youtube:checked ~ .video-grid > .video-card:not([data-platform="youtube"]) { display:none; }
#tab-tiktok:checked  ~ .video-grid > .video-card:not([data-platform="tiktok"])  { display:none; }
#tab-instagram:checked ~ .video-grid > .video-card:not([data-platform="instagram"]) { display:none; }

/* Recently watched */
.videos-recent { margin: 12px 0 24px; }
.videos-recent__list { display:flex; gap:12px; overflow-x:auto; padding:6px 2px; }
.video-card--mini { width:200px; flex: 0 0 auto; }
.video-card--mini .video-card__title { font-size: 14px; }
.video-card--mini img { aspect-ratio: 16/9; object-fit: cover; }

/* Pagination */
.pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid #eee4d7; }
.pagination__links { display:flex; gap:8px; align-items:center; }
.pagination__links a { padding:6px 10px; border-radius:8px; border:1px solid #e1d7c4; background:#fff; }
.pagination__current { padding:6px 10px; border-radius:8px; background: var(--champagne); font-weight:700; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85);
  padding: var(--gutter);
}
.lightbox[hidden] { display: none !important; }
.lightbox.lightbox--open { display: flex; }
.lightbox__inner {
  position: relative;
  width: min(100%, 1080px);
  background: #000; border-radius: 12px; box-shadow: var(--shadow-2);
  padding: 12px;
}
.lightbox__frame { aspect-ratio: 16 / 9; }
.lightbox__frame iframe,
.lightbox__frame video,
.lightbox__frame .plyr,
.lightbox__frame .plyr__video-embed,
.lightbox__frame .lightbox__video {
  width: 100%; height: 100%; border: 0; display: block; border-radius: 12px;
}
.lightbox__close {
  position: absolute; top: 8px; right: 12px;
  width: 36px; height: 36px; line-height: 36px; text-align: center;
  background: rgba(255,255,255,.1); color: #fff; border-radius: 50%;
  font-size: 22px; font-weight: 700; text-decoration: none;
  border: 1px solid rgba(255,255,255,.25);
}
.lightbox__close:hover { background: rgba(255,255,255,.2); text-decoration: none; }
.lightbox__external { margin: 12px 4px 0; text-align: right; }
.lightbox__external a { color: #fff; text-decoration: underline; }
.lightbox__placeholder {
  color: #fff;
  text-align: center;
}
.lightbox__placeholder img { max-width: 320px; border-radius: 12px; margin-inline: auto; display:block; }
.lightbox__placeholder .button { margin-top: 12px; display:inline-block; }

/* Watch page */
.page-hero--video { padding-bottom: 12px; }
.video-watch { padding: 20px 0 28px; }
.video-watch__layout { display:grid; gap:18px; align-items:flex-start; }
@media (min-width: 900px){ .video-watch__layout { grid-template-columns: 2fr 1fr; } }
.video-watch__player { background:#000; border-radius:12px; padding:8px; box-shadow: var(--shadow-2); }
.video-watch__player .lightbox__video,
.video-watch__player video,
.video-watch__player .plyr,
.video-watch__player .plyr__video-embed { width:100%; height:100%; min-height:260px; border-radius:12px; }
.video-watch__meta { background:#fff; border:1px solid #e8e2d7; border-radius:12px; padding:12px; box-shadow: var(--shadow-1); }
.video-watch__stat { font-weight:700; margin:0 0 8px; }
.video-watch__tags { margin:0 0 8px; color: var(--text-600); }
.video-watch__desc { margin:0 0 8px; color: var(--text-600); }
.video-watch__platform-link a { font-weight:700; }
.video-watch__fallback { text-align:center; background:#111; color:#fff; border-radius:12px; padding:12px; }
.video-watch__fallback img { max-width:100%; border-radius:8px; margin-bottom:8px; }
.video-watch__about,
.video-watch__transcript { padding: 12px 0 24px; }
.video-watch__about .prose,
.video-watch__transcript .transcript-body { background:#fff; border:1px solid #e8e2d7; border-radius:12px; padding:12px; box-shadow: var(--shadow-1); }
.videos-index--related { padding-top: 8px; }