/* --- /videos page + homepage video grid (includes/partials/youtube_video_grid.php) --- */

.videos-page{
  padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,2rem) clamp(3rem,6vw,4rem);
}

.videos-page__inner{
  max-width:72rem;
  margin:0 auto;
}

.videos-page__hero{
  text-align:center;
  margin-bottom:clamp(2rem,4vw,2.75rem);
}

.videos-page__title{
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(2rem,5vw,3rem);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#fff;
  margin:0 0 0.65rem;
}

.videos-page__subtitle{
  margin:0;
  font-size:clamp(0.875rem,2vw,1rem);
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}

.videos-page__empty{
  text-align:center;
  max-width:40rem;
  margin:0 auto 2rem;
  line-height:1.6;
  color:rgba(220,240,255,0.78);
}

.videos-page__empty a{
  color:#00CFFF;
  text-decoration:underline;
  text-underline-offset:0.15em;
}

.videos-page__channel-link{
  display:flex;
  justify-content:center;
  margin-top:2rem;
}

.video-stream-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.5vw,1.5rem);
  width:100%;
}

.video-stream-grid--preview{
  max-width:72rem;
  margin-inline:auto;
}

/* 1–2 videos: centered row instead of empty grid columns */
@media (min-width:640px){
  .video-stream-grid--count-1{
    grid-template-columns:minmax(0,22rem);
    justify-content:center;
  }

  .video-stream-grid--count-2{
    grid-template-columns:repeat(2,minmax(0,22rem));
    justify-content:center;
  }
}

@media (min-width:1024px){
  .video-stream-grid--count-1{
    grid-template-columns:minmax(0,24rem);
  }

  .video-stream-grid--count-2{
    grid-template-columns:repeat(2,minmax(0,24rem));
  }
}

@media (max-width:1023px){
  .video-stream-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .video-stream-grid--count-1{
    grid-template-columns:minmax(0,24rem);
    justify-content:center;
  }
}

@media (max-width:639px){
  .video-stream-grid,
  .video-stream-grid--count-1,
  .video-stream-grid--count-2{
    grid-template-columns:1fr;
    justify-content:stretch;
  }

  .video-stream-grid--count-1 .video-stream-card,
  .video-stream-grid--count-2 .video-stream-card{
    max-width:24rem;
    margin-inline:auto;
    width:100%;
  }
}

.video-stream-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  text-decoration:none;
  color:inherit;
  padding:0.85rem;
  border-radius:0.85rem;
  background:linear-gradient(165deg,rgba(5,21,84,0.72) 0%,rgba(4,15,65,0.5) 100%);
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:0 12px 40px rgba(0,0,0,0.35);
  transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease;
}

.video-stream-card:hover{
  transform:translateY(-4px);
  border-color:rgba(21,94,239,0.28);
  box-shadow:0 16px 48px rgba(0,0,0,0.45),0 0 0 1px rgba(21,94,239,0.12);
}

.video-stream-card__thumb{
  position:relative;
  border-radius:0.75rem;
  overflow:hidden;
  margin-bottom:0.85rem;
  aspect-ratio:16/9;
  background:rgba(0,0,0,0.45);
}

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

.video-stream-card__duration{
  position:absolute;
  right:0.5rem;
  bottom:0.5rem;
  padding:0.2rem 0.45rem;
  border-radius:0.35rem;
  font-family:"Inter",system-ui,sans-serif;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.02em;
  color:#fff;
  background:rgba(0,0,0,0.82);
  line-height:1.2;
}

.video-stream-card__title{
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(0.95rem,2vw,1.05rem);
  line-height:1.35;
  color:#fff;
  margin:0 0 0.65rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.video-stream-card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.35rem 0.65rem;
  margin-top:auto;
  font-family:"Inter",system-ui,sans-serif;
  font-size:0.8125rem;
  line-height:1.35;
  color:rgba(255,255,255,0.52);
}

.video-stream-card__date{
  white-space:nowrap;
}

.video-stream-card__views{
  white-space:nowrap;
}

.video-stream-card__views::before{
  content:"•";
  margin-right:0.65rem;
  color:rgba(255,255,255,0.35);
}

.video-stream-card__meta .video-stream-card__date:first-child + .video-stream-card__views::before,
.video-stream-card__meta .video-stream-card__views:first-child::before{
  display:none;
}

/* Homepage preview section */
.youtube-latest-section{
  background:none;
  border-radius:0;
  box-shadow:none;
}

.youtube-latest-title{
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(1.75rem,4vw,2.5rem);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#fff;
  margin:0 0 0.5rem;
}

.youtube-latest-subtitle{
  text-align:center;
  color:rgba(255,255,255,0.55);
  font-size:0.95rem;
  margin:0 0 1.25rem;
}

.youtube-latest-empty{
  text-align:center;
  max-width:36rem;
  margin:0 auto 2rem;
  line-height:1.55;
  color:rgba(220,240,255,0.75);
}

.youtube-latest-empty a{
  color:#00CFFF;
}

.youtube-latest-showmore{
  display:flex;
  justify-content:center;
  margin-top:1.5rem;
}

.youtube-latest-btn-showmore{
  display:inline-block;
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.12em;
  padding:0.85rem 2.5rem;
  border-radius:0.5rem;
  background:#155EEF;
  color:#fff;
  text-decoration:none;
  transition:filter 0.2s ease,transform 0.2s ease;
}

.youtube-latest-btn-showmore:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
}