/* Center the whole video page inside your Bootstrap column */
.video-page{
  max-width: 1100px;
  margin: 0 auto;          /* this is what actually centers the block */
  padding: 0 10px;
}

/* Center the title + description */
.video-hero{
  text-align: center;
  margin: 0 0 5px;
}
.video-title{
  margin: 0 0 10px;
  line-height: 1.1;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
}
.video-desc{
  margin: 0 auto;
  max-width: 120ch;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
}

/* Center + enlarge the embed */
.video-embed{
  display: flex;
  justify-content: center;
}
.video-embed__ratio{
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 1px;
  overflow: hidden;
}
.video-embed__ratio iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* Optional: add breathing room below video */
.video-embed{ margin: 1px 0 1px; }
 /* Remove any default top spacing right after the video */
.video-meta{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Tighten the grid spacing */
.video-meta__grid{
  margin-top: 0 !important;
  padding-top: 0 !important;
  gap: 10px;                 /* was larger by default / earlier */
}

/* details/summary often have default margins/padding */
.video-transcript details{
  margin: 0 !important;
  padding: 0 !important;
}

.video-transcript summary{
  margin: 0 !important;
  padding: 1px 0 !important; /* reduce this if you want even tighter */
}

/* Transcript body spacing */
.video-transcript__body{
  margin: 0 !important;
  padding: 1px 0 0 !important;  /* reduce top padding here */
}

.video-transcript__body p:first-child{
  margin-top: 0 !important;
}

/* Bold + underline ONLY for links you mark as .video-link */
.video-page a.video-link{
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.video-page a.video-link:hover,
.video-page a.video-link:focus{
  text-decoration-thickness: 2px;
}