/* Frameless modal visuals */
.modal-content.bg-transparent { background: transparent; }
.ratio > iframe { width: 100%; height: 100%; border: 0; }
.modal-backdrop.show { opacity: .8; }

/* Close button styling */
.btn.btn-light.rounded-circle {
  width: 2.5rem; height: 2.5rem; padding: 0;
  font-size: 1.5rem; line-height: 1.5rem;
  display: grid; place-items: center;
}

/* 85% viewport scaling while preserving 16:9; keep centered */
#ytModal .modal-dialog.modal-85 { max-width: none; }
#ytModal .modal-dialog.modal-85 .ratio {
  width: min(85vw, calc(85vh * 16 / 9));
  margin-left: auto; margin-right: auto;
}
#ytModal .modal-dialog.modal-85 .ratio > iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 576px) {
  #ytModal .modal-dialog.modal-85 .ratio { width: 100vw; }
}

/* ---------- Thumbnail styling ---------- */
/* Crop wrapper with border; image zooms on hover */
.yt-thumb { display:inline-block; position:relative; cursor:pointer; max-width:420px; }
.yt-thumb .thumb-crop { background: transparent; }


.yt-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  object-fit: cover;
  transform: scale(1.06);              /* slight base zoom hides letterbox bars */
  transform-origin: center;
  transition: transform .25s ease, filter .25s ease;
  will-change: transform;
}
.yt-thumb:hover img {
  transform: scale(1.5);               /* requested hover zoom */
  filter: brightness(0.92);
}

/* Play overlay, inset so it doesn't cover the border */
.yt-thumb::after {
  content: "▶";
  position: absolute;
  inset: .25rem;
  display: grid; place-items: center;
  font-size: 3rem; line-height: 1;
  color: red; text-shadow: 0 2px 6px rgba(0,0,0,.6);
  pointer-events: none;
}