/* BSM YouTube feed — self-contained styling that reproduces the Smash Balloon look:
   teal rounded cards, cover-cropped 16:9 thumbnails (no black bars), white title on
   teal, soft arrows, pagination dots, and a click-to-play lightbox. The feed is
   transparent so the theme's section background + wave show through unchanged. */

.bsm-yt-feed { position: relative; background: transparent; }
.bsm-yt-feed .sby_items_wrap { padding: 9px; background: transparent; }
.bsm-yt-feed .bsm-yt-swiper { overflow: hidden; }
.bsm-yt-feed .swiper-wrapper { align-items: flex-start; box-sizing: border-box; }
/* Slide: keep it a plain block and DON'T override margin — Swiper sets margin-right
   = spaceBetween for the gap between cards. */
.bsm-yt-feed .swiper-slide.sby_item {
  float: none !important; height: auto !important; box-sizing: border-box;
}

/* Card: teal #1CD4C6, rounded 10px. Plain block so the fixed-ratio thumbnail can
   never be squished by flex (that caused the different card sizes). */
.bsm-yt-feed .sby_inner_item {
  width: 100%; box-sizing: border-box;
  background: #1CD4C6;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}

/* Thumbnail: 16:9, cover-cropped so YouTube's letterbox black bars are cropped off. */
.bsm-yt-feed .sby_video_thumbnail_wrap { margin: 0; }
.bsm-yt-feed .sby_video_thumbnail {
  display: block !important;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;   /* a guaranteed 16:9 BOX */
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background-color: #1CD4C6;      /* teal fallback if a thumb is slow */
  background-size: cover;         /* crops YouTube's letterbox bars, never letterboxes */
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
}
/* Absolute-fill + cover crops YouTube's baked-in 4:3 letterbox bars right off.
   This is the reliable no-black-bars method and doesn't depend on the browser
   honouring aspect-ratio on the <img>. */
.bsm-yt-feed .sby_video_thumbnail img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important;
  object-fit: cover !important; display: block !important; margin: 0 !important;
}

/* Play button — plain white YouTube glyph, centred, transparent background. */
.bsm-yt-feed .sby_play_btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: flex; align-items: center; justify-content: center;
}
.bsm-yt-feed .sby_play_btn_bg { background: transparent !important; }
.bsm-yt-feed .sby_play_btn svg,
.bsm-yt-feed .sby_play_btn .svg-inline--fa {
  color: #fff !important; fill: #fff !important;
  width: 56px !important; height: auto !important;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .5));
  opacity: .92; transition: opacity .15s ease;
}
/* Brighten only (no transform) so the icon never shifts off-centre on hover. */
.bsm-yt-feed .sby_video_thumbnail:hover .sby_play_btn svg { opacity: 1; }

/* Title bar — white title text on the teal card, no underline (matches SB). */
.bsm-yt-feed .bsm-yt-titlebar {
  background: #1CD4C6; padding: 13px 15px 16px; cursor: pointer;
  border-radius: 0 0 10px 10px;
  min-height: 76px; box-sizing: border-box;   /* comfortably fits 2 lines, never clips */
}
.bsm-yt-feed .bsm-yt-title {
  color: #fff; font-weight: 600; font-size: 15px; line-height: 1.35; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}

/* Arrows — soft light circular buttons. */
.bsm-yt-nav {
  position: absolute; top: 38%; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); cursor: pointer; z-index: 6;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
  transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.bsm-yt-nav:hover { background: #fff; transform: scale(1.06); }
.bsm-yt-nav::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; border-top: 3px solid #555; border-right: 3px solid #555;
}
.bsm-yt-prev { left: -8px; } .bsm-yt-prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.bsm-yt-next { right: -8px; } .bsm-yt-next::after { transform: translate(-70%, -50%) rotate(45deg); }
.bsm-yt-nav.swiper-button-disabled { opacity: .3; pointer-events: none; }
@media (max-width: 900px) { .bsm-yt-prev { left: 0; } .bsm-yt-next { right: 0; } }

/* Pagination dots */
.bsm-yt-pagination { position: static; text-align: center; margin-top: 16px; }
.bsm-yt-pagination .swiper-pagination-bullet {
  width: 9px; height: 9px; margin: 0 4px; background: #c7cdd2; opacity: 1;
  transition: background .15s ease;
}
.bsm-yt-pagination .swiper-pagination-bullet-active { background: #1CD4C6; }

/* Lightbox */
body.bsm-yt-lb-open { overflow: hidden; }
.bsm-yt-lb {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .85); z-index: 99999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: bsmYtFade .18s ease;
}
@keyframes bsmYtFade { from { opacity: 0; } to { opacity: 1; } }
.bsm-yt-lb-inner { position: relative; width: min(960px, 92vw); }
.bsm-yt-lb-frame {
  position: relative; padding-bottom: 56.25%; height: 0; background: #000;
  border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.bsm-yt-lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bsm-yt-lb-close {
  position: absolute; top: -44px; right: -4px; background: none; border: 0;
  color: #fff; font-size: 36px; line-height: 1; cursor: pointer; padding: 4px 10px;
}
.bsm-yt-lb-close:hover { color: #1CD4C6; }