/* File: test/css/youtube-gallery.css */

/* thumbs */
.yt-card__thumb {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

.yt-card[data-kind="full"] .yt-card__thumb {
  aspect-ratio: 16 / 9;
}

.yt-card[data-kind="shorts"] .yt-card__thumb {
  aspect-ratio: 9 / 16;
}

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

/* modal frame */
.mfp-yt .mfp-content {
  width: auto !important;
}

.mfp-yt__frame {
  position: relative;
  width: min(92vw, 980px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
}

.mfp-yt__frame--full {
  aspect-ratio: 16 / 9;
}

.mfp-yt__frame--shorts {
  width: min(92vw, 420px);
  aspect-ratio: 9 / 16;
}

.mfp-yt__frame iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* Center-top close button 
.mfp-yt__frame .mfp-close {
  position: absolute;
  left: 95%;
  top: -5px;
  right: auto;

  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;

  border-radius: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  opacity: 1;
  border: 0;
  cursor: pointer;
  z-index: 2;
}

.mfp-yt__frame .mfp-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

@media (max-width: 480px) {
  .mfp-yt__frame .mfp-close {
    top: -10px;
  }
}
*/

/* --- spacing tweak (safe): keep 3 columns, only add vertical breathing room --- */
.yt-grid {
  gap: 0 !important; /* neutralize any previous gap that may break 3-col flex layouts */
}

a.yt-card {
  display: block;
  margin-bottom: 24px;
}

@media (max-width: 991.98px) {
  a.yt-card { margin-bottom: 18px; }
}

@media (max-width: 575.98px) {
  a.yt-card { margin-bottom: 14px; }
}

/* FORCE Shorts cards to be same as Full (16:9) */
.yt-card[data-kind="shorts"] .yt-card__thumb,
.yt-card[data-kind="shorts"] .yt-card__img,
.yt-card[data-kind="shorts"] .yt-card__preview {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}

/* If your layout uses padding-top trick via ::before */
.yt-card[data-kind="shorts"] .yt-card__thumb::before,
.yt-card[data-kind="shorts"] .yt-card__img::before,
.yt-card[data-kind="shorts"] .yt-card__preview::before {
  padding-top: 56.25% !important; /* 16:9 */
}

/* Make sure image doesn't stretch the block */
.yt-card[data-kind="shorts"] .yt-card__thumb img,
.yt-card[data-kind="shorts"] .yt-card__img img,
.yt-card[data-kind="shorts"] .yt-card__preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Make YouTube cards look like News cards, but keep modal behavior */
a.yt-card.blog-post {
  color: inherit;
  text-decoration: none;
}

a.yt-card.blog-post:hover {
  text-decoration: none;
}

a.yt-card.blog-post h5 {
  margin-top: 10px; /* чтобы было как на news */
}