/* =========================================================
   Videos Page — SAFE overrides only
   File: /public/videos.css
========================================================= */

/* Keep it scoped: only affect the videos page wrapper */
.videos-main .videos-section-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin: 12px 0 10px;
}

.videos-main .videos-section-header h2{
  margin:0;
  font-size:18px;
}

.videos-main .videos-section-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(168,182,255,.22);
  background: rgba(0,0,0,.12);
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.videos-main .videos-section-link:hover{
  border-color: rgba(255,212,71,.60);
  box-shadow: 0 0 0 3px rgba(255,212,71,.10);
  background: rgba(255,212,71,.10);
}

/* =========================================================
   Video thumb overlay + duration badge polish (scoped)
========================================================= */

.page-videos .yt-thumb{
  position: relative;
}

/* Reserve space + prevent layout shift (img already lazy) */
.page-videos .yt-thumb img{
  width: 100%;
  height: 100%;
  display: block;
}

/* Subtle play overlay */
.page-videos .yt-play-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}

.page-videos .yt-card-btn:hover .yt-play-overlay{
  opacity: .72;
  transform: scale(1.02);
}

/* Keep the play icon reasonably small and crisp */
.page-videos .yt-play-icon{
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.35));
}

/* Ensure duration stays above thumb visuals */
.page-videos .yt-duration{
  z-index: 2;
}

.page-videos .yt-play-overlay{
  z-index: 1;
}