/**
 * Broadcast Showcase Widgets — NTV Theme
 * -------------------------------------------------------------------------
 * Design tokens are exposed as CSS custom properties on :root so the whole
 * palette can be re-themed from a child theme or Elementor's custom CSS
 * without touching this file.
 */
:root {
	--bsw-accent-red: #E50914;
	--bsw-accent-red-alt: #ED1C24;
	--bsw-bg-dark: #141414;
	--bsw-bg-card: #1F1F1F;
	--bsw-text-heading: #FFFFFF;
	--bsw-text-muted: #A3A3A3;
	--bsw-radius-card: 20px;
	--bsw-radius-pill: 12px;
	--bsw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   1. SHOW REEL CAROUSEL
   ========================================================================= */

.bsw-reel-wrapper {
	position: relative;
	font-family: var(--bsw-font);
}

/* Optional Section Header (Content tab) — sits above the carousel itself,
   never overlaid on a card, matching the Trending Strip widget's header. */
.bsw-reel-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.bsw-reel-header-accent {
	display: inline-block;
	width: 4px;
	height: 20px;
	background-color: var(--bsw-accent-red);
	border-radius: 2px;
	flex-shrink: 0;
}

.bsw-reel-header-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--bsw-text-heading);
}

.bsw-reel-swiper {
	/* Clips each row to its own box — including the hover-scale transform
	   on the last card — so nothing bleeds past the row's right edge into
	   the surrounding page. The 4px side padding above still gives the
	   scale-up effect room to breathe without being clipped mid-transform
	   for any card that ISN'T flush against the edge. */
	overflow: hidden;
	padding: 4px 4px 8px;
}

.bsw-reel-slide {
	height: auto;
}

/* The card itself is now just a plain flex column — the image (with all
   its overlay chrome: gradient, badge, play button) lives in
   .bsw-reel-thumb-wrap, and the title/excerpt sit in normal document flow
   below it in .bsw-reel-caption, instead of overlaid on the gradient. */
.bsw-reel-card {
	display: block;
	width: 100%;
	cursor: pointer;
}

.bsw-reel-thumb-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: var(--bsw-radius-card);
	overflow: hidden;
	background-color: var(--bsw-bg-card);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	transition: box-shadow 0.35s ease;
}

.bsw-reel-card:hover .bsw-reel-thumb-wrap,
.bsw-reel-card:focus-within .bsw-reel-thumb-wrap {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.bsw-reel-poster {
	position: absolute;
	inset: 0;
	/* !important guards against theme/Elementor global image resets (e.g.
	   `img { height: auto; max-width: 100%; }`) overriding this and leaving
	   a gap below a shorter-than-the-card image — see .bsw-trending-thumb
	   for the full explanation. */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

/* Hover/focus now scales just the image within its own clipped thumb-wrap,
   rather than the whole card (which would also drag the caption text
   underneath along with it) — this also keeps it immune to the earlier
   "hover-scale bleeds past the row's edge" issue, since the scaled image
   never leaves .bsw-reel-thumb-wrap's own overflow:hidden box. */
.bsw-reel-card:hover .bsw-reel-poster,
.bsw-reel-card:focus-within .bsw-reel-poster {
	transform: scale(1.04);
}

.bsw-reel-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0) 40%, rgba(20, 20, 20, 0.55) 75%, rgba(20, 20, 20, 0.92) 100%);
	pointer-events: none;
}

.bsw-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background-color: var(--bsw-accent-red);
	color: var(--bsw-text-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--bsw-radius-pill);
	line-height: 1;
}

.bsw-play-button {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--bsw-accent-red);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease;
	padding: 0;
}

.bsw-play-button svg {
	fill: var(--bsw-text-heading);
	margin-left: 2px; /* optical centering of the triangle */
}

.bsw-play-button:hover {
	transform: scale(1.1);
	background-color: var(--bsw-accent-red-alt);
}

/* Below the image now, in normal document flow — not overlaid on the
   gradient/badge/play-button chrome, which stays confined to
   .bsw-reel-thumb-wrap above. */
.bsw-reel-caption {
	padding-top: 10px;
}

.bsw-reel-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--bsw-text-heading);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bsw-reel-excerpt {
	margin: 0;
	font-size: 12.5px;
	color: var(--bsw-text-muted);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Swiper navigation / pagination re-skin — shared by the Show Reel
   Carousel and Program Grid Carousel wrappers. */
.bsw-reel-wrapper .swiper-button-prev,
.bsw-reel-wrapper .swiper-button-next,
.bsw-program-grid-wrapper .swiper-button-prev,
.bsw-program-grid-wrapper .swiper-button-next {
	width: 40px;
	height: 40px;
	background-color: rgba(20, 20, 20, 0.7);
	border-radius: 50%;
	color: var(--bsw-text-heading);
	backdrop-filter: blur(4px);
}

.bsw-reel-wrapper .swiper-button-prev::after,
.bsw-reel-wrapper .swiper-button-next::after,
.bsw-program-grid-wrapper .swiper-button-prev::after,
.bsw-program-grid-wrapper .swiper-button-next::after {
	font-size: 16px;
	font-weight: 900;
}

.bsw-reel-wrapper .swiper-button-prev:hover,
.bsw-reel-wrapper .swiper-button-next:hover,
.bsw-program-grid-wrapper .swiper-button-prev:hover,
.bsw-program-grid-wrapper .swiper-button-next:hover {
	background-color: var(--bsw-accent-red);
}

.bsw-reel-wrapper .swiper-pagination-bullet,
.bsw-program-grid-wrapper .swiper-pagination-bullet {
	background-color: var(--bsw-text-muted);
	opacity: 0.6;
}

.bsw-reel-wrapper .swiper-pagination-bullet-active,
.bsw-program-grid-wrapper .swiper-pagination-bullet-active {
	background-color: var(--bsw-accent-red);
	opacity: 1;
}

/* Video / YouTube modal player launched by the play button */
.bsw-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.bsw-modal-inner {
	position: relative;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16/9;
	background-color: #000;
	border-radius: 12px;
	overflow: hidden;
}

.bsw-modal-media {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.bsw-modal-close {
	position: absolute;
	top: -40px;
	right: 0;
	background: none;
	border: none;
	color: var(--bsw-text-heading);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

/* =========================================================================
   2. LIVE STREAM HERO
   ========================================================================= */

.bsw-live-hero {
	position: relative;
	width: 100%;
	height: 70vh;
	min-height: 320px;
	overflow: hidden;
	background-color: var(--bsw-bg-dark);
	border-radius: 0;
	font-family: var(--bsw-font);
}

/* Wraps only the video/poster/iframe layers (never the gradient, badge, or
   title/subtitle overlay) so the scroll-triggered mini-player in
   hero-pip.js can reposition just the playing video via a single class,
   without dragging text content along with it. See "PIP MINI-PLAYER"
   below for what happens when .is-pip is added to the parent
   .bsw-live-hero. */
.bsw-hero-media {
	position: relative;
	width: 100%;
	height: 100%;
}

.bsw-hero-poster {
	position: absolute;
	inset: 0;
	/* !important guards against theme/Elementor global image resets — see
	   .bsw-trending-thumb for the full explanation. */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	z-index: 0;
}

.bsw-video-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	opacity: 0;
	transition: opacity 800ms ease-in-out;
}

/* Promo layer starts visible; live layer starts hidden. */
.bsw-promo-player {
	opacity: 1;
	z-index: 2;
}

.bsw-live-player {
	opacity: 0;
	z-index: 1;
}

.bsw-live-hero.bsw-is-live .bsw-live-player {
	z-index: 2;
}

.bsw-embed-layer {
	border: 0;
	background-color: #000;
	z-index: 2; /* sits above the promo layer once cross-faded in, same as .bsw-live-player */
}

.bsw-hero-gradient {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(0deg, var(--bsw-bg-dark) 0%, transparent 60%);
	pointer-events: none;
}

.bsw-live-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--bsw-accent-red);
	color: var(--bsw-text-heading);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: var(--bsw-radius-pill);
}

.bsw-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--bsw-text-heading);
	animation: bsw-pulse 1.4s ease-in-out infinite;
}

@keyframes bsw-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

.bsw-unmute-button {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: rgba(20, 20, 20, 0.7);
	color: var(--bsw-text-heading);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--bsw-radius-pill);
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color 0.2s ease;
}

.bsw-unmute-button svg {
	fill: var(--bsw-text-heading);
}

.bsw-unmute-button:hover {
	background-color: var(--bsw-accent-red);
}

.bsw-hero-content {
	position: absolute;
	left: 32px;
	bottom: 40px;
	right: 32px;
	z-index: 4;
	max-width: 640px;
}

.bsw-hero-title {
	margin: 0 0 10px;
	font-size: clamp(24px, 4vw, 42px);
	font-weight: 800;
	color: var(--bsw-text-heading);
	line-height: 1.15;
}

.bsw-hero-subtitle {
	margin: 0;
	font-size: clamp(14px, 1.6vw, 18px);
	color: var(--bsw-text-muted);
	line-height: 1.5;
}

.bsw-editor-warning {
	padding: 24px;
	background-color: var(--bsw-bg-card);
	color: var(--bsw-accent-red-alt);
	border: 1px dashed var(--bsw-accent-red-alt);
	border-radius: 8px;
	font-family: var(--bsw-font);
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   2b. LIVE STREAM HERO — SCROLL-TRIGGERED PIP MINI-PLAYER
   Toggled purely via the `.is-pip` class added/removed by hero-pip.js
   (IntersectionObserver-driven) — no layout decisions happen in JS.
   ------------------------------------------------------------------------- */

/* The hero itself keeps its normal document-flow box at all times (same
   height as configured in the widget's Style tab) — only its inner
   .bsw-hero-media detaches visually. This is what leaves a natural gap in
   the page where the hero used to be, exactly like YouTube's own
   mini-player. */
/* `overflow: hidden` on the hero clips ANY descendant painted within its
   box — including `position: fixed` children — in every major browser,
   regardless of the fact that fixed positioning is computed relative to
   the viewport. Left in place, the "fixed" mini-player only renders through
   whatever sliver of the (now scrolled-away) hero's box still overlaps the
   viewport, which is what makes it appear pinned near the top instead of
   anchored bottom-right. Nothing is left needing clipping once .is-pip
   hides the rest of the hero's contents, so it's safe to drop here. */
.bsw-live-hero.is-pip {
	overflow: visible;
}

.bsw-live-hero.is-pip .bsw-hero-gradient,
.bsw-live-hero.is-pip .bsw-live-badge,
.bsw-live-hero.is-pip .bsw-unmute-button,
.bsw-live-hero.is-pip .bsw-hero-content {
	visibility: hidden;
	pointer-events: none;
}

.bsw-live-hero.is-pip .bsw-hero-media {
	position: fixed;
	right: 20px;
	bottom: 20px;
	left: auto;
	top: auto;
	width: min(360px, calc(100vw - 40px));
	height: auto;
	aspect-ratio: 16 / 9;
	/* Below WordPress core's #wpadminbar (z-index: 99999) and most sticky
	   theme headers, but well above ordinary page content. The PiP window
	   sits bottom-right while admin bars/sticky headers are conventionally
	   top-anchored, so in practice the two never occupy the same screen
	   region regardless. */
	z-index: 99998;
	border-radius: 12px;
	overflow: hidden;
	background-color: #000;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
	animation: bsw-pip-in 0.3s ease;
}

@keyframes bsw-pip-in {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.92);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.bsw-pip-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	display: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background-color: rgba(20, 20, 20, 0.75);
	color: var(--bsw-text-heading);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	backdrop-filter: blur(4px);
	transition: background-color 0.2s ease;
}

.bsw-pip-close svg {
	fill: currentColor;
}

.bsw-pip-close:hover {
	background-color: var(--bsw-accent-red);
}

/* Only ever shown once .is-pip is active — hero-pip.js also flips the
   `hidden` attribute, this is a CSS-side belt-and-braces backstop. */
.bsw-live-hero.is-pip .bsw-pip-close {
	display: flex;
}

@media (max-width: 480px) {
	.bsw-live-hero.is-pip .bsw-hero-media {
		width: calc(100vw - 24px);
		right: 12px;
		bottom: 12px;
	}
}

/* =========================================================================
   3. PROGRAM GRID CAROUSEL (poster-only, links to each Program's video page)
   ========================================================================= */

.bsw-program-grid-wrapper {
	position: relative;
	font-family: var(--bsw-font);
}

.bsw-program-swiper {
	/* See .bsw-reel-swiper above: clips the row to its own box so the
	   hover-scale on the last poster can't bleed past the right edge. */
	overflow: hidden;
	padding: 4px 4px 8px;
}

.bsw-program-slide {
	height: auto;
}

.bsw-program-card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 2/3;
	border-radius: var(--bsw-radius-card);
	overflow: hidden;
	background-color: var(--bsw-bg-card);
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.bsw-program-card:hover,
.bsw-program-card:focus {
	transform: scale(1.035);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
	z-index: 2;
}

.bsw-program-poster {
	position: absolute;
	inset: 0;
	/* !important guards against theme/Elementor global image resets — see
	   .bsw-trending-thumb for the full explanation. */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
}

.bsw-program-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0) 45%, rgba(20, 20, 20, 0.65) 80%, rgba(20, 20, 20, 0.92) 100%);
	pointer-events: none;
}

.bsw-program-count-badge {
	background-color: rgba(20, 20, 20, 0.75);
	backdrop-filter: blur(4px);
}

.bsw-program-meta {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 1;
}

.bsw-program-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--bsw-text-heading);
	line-height: 1.3;
}

/* =========================================================================
   4. AUTO-GENERATED PROGRAM ARCHIVE PAGE (plain video grid, no Swiper)
   ========================================================================= */

.bsw-program-archive {
	font-family: var(--bsw-font);
	background-color: var(--bsw-bg-dark);
}

.bsw-program-archive-hero {
	position: relative;
	width: 100%;
	min-height: 340px;
	background-size: cover;
	background-position: center;
	background-color: var(--bsw-bg-card);
	display: flex;
	align-items: flex-end;
}

.bsw-program-archive-hero-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, var(--bsw-bg-dark) 5%, transparent 65%);
}

.bsw-program-archive-hero-content {
	position: relative;
	z-index: 1;
	padding: 40px 32px;
	max-width: 720px;
}

.bsw-program-archive-title {
	margin: 0 0 10px;
	font-size: clamp(26px, 4vw, 42px);
	font-weight: 800;
	color: var(--bsw-text-heading);
}

.bsw-program-archive-desc {
	margin: 0;
	font-size: 15px;
	color: var(--bsw-text-muted);
	line-height: 1.6;
}

.bsw-program-archive-body {
	padding: 32px;
}

.bsw-program-archive-empty {
	color: var(--bsw-text-muted);
	font-size: 15px;
}

/* Plain CSS-grid version of the same card used in the Swiper reel, so a
   Program's archive page and the Show Reel Carousel look identical. */
.bsw-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

.bsw-video-grid .bsw-reel-thumb-wrap {
	aspect-ratio: 16/9;
}

.bsw-program-archive-pagination {
	margin-top: 32px;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.bsw-program-archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: var(--bsw-radius-pill);
	background-color: var(--bsw-bg-card);
	color: var(--bsw-text-muted);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}

.bsw-program-archive-pagination .page-numbers.current {
	background-color: var(--bsw-accent-red);
	color: var(--bsw-text-heading);
}

.bsw-program-archive-pagination .page-numbers:hover:not(.current) {
	background-color: rgba(255, 255, 255, 0.1);
}

/* =========================================================================
   5. TRENDING STRIP (light editorial theme, native posts/any CPT)
   ========================================================================= */

.bsw-trending-wrapper {
	position: relative;
	font-family: var(--bsw-font);
}

.bsw-trending-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.bsw-trending-accent {
	display: inline-block;
	width: 4px;
	height: 20px;
	background-color: #F15A24;
	border-radius: 2px;
	flex-shrink: 0;
}

.bsw-trending-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #4A4A4A;
}

.bsw-trending-swiper {
	/* See .bsw-reel-swiper above: clips the row to its own box so nothing
	   bleeds past the right edge. */
	overflow: hidden;
	padding: 4px 4px 8px;
}

.bsw-trending-slide {
	height: auto;
}

.bsw-trending-card {
	display: block;
	width: 100%;
	text-decoration: none;
}

.bsw-trending-thumb-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 61/91;
	border-radius: 6px;
	overflow: hidden;
	background-color: #E5E5E5;
}

.bsw-trending-thumb {
	position: absolute;
	inset: 0;
	/* !important on width/height guards against theme or Elementor global
	   image resets (a very common pattern: `img { height: auto; max-width:
	   100%; }`, sometimes itself !important) that would otherwise let the
	   image collapse to its natural aspect ratio instead of stretch-cropping
	   to fill this card — the exact cause of a gray gap appearing below a
	   shorter-than-the-card image. */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.bsw-trending-card:hover .bsw-trending-thumb,
.bsw-trending-card:focus .bsw-trending-thumb {
	transform: scale(1.04);
}

.bsw-trending-caption {
	padding-top: 10px;
}

.bsw-trending-item-title {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #26282B;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Nav arrows re-skinned to a light "white circle, dark icon" style, to
   match the editorial look instead of the dark Netflix-style widgets'
   arrows above. */
.bsw-trending-wrapper .swiper-button-prev,
.bsw-trending-wrapper .swiper-button-next {
	width: 36px;
	height: 36px;
	background-color: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	color: #26282B;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.bsw-trending-wrapper .swiper-button-prev::after,
.bsw-trending-wrapper .swiper-button-next::after {
	font-size: 14px;
	font-weight: 900;
}

.bsw-trending-wrapper .swiper-button-prev:hover,
.bsw-trending-wrapper .swiper-button-next:hover {
	background-color: #F15A24;
	color: #FFFFFF;
}

.bsw-trending-wrapper .swiper-pagination-bullet {
	background-color: #C7C7C7;
	opacity: 1;
}

.bsw-trending-wrapper .swiper-pagination-bullet-active {
	background-color: #F15A24;
}

/* =========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================= */

@media (max-width: 767px) {
	.bsw-reel-title {
		font-size: 14px;
	}
	.bsw-reel-excerpt {
		display: none; /* keep small cards clean on mobile */
	}
	.bsw-hero-content {
		left: 20px;
		right: 20px;
		bottom: 24px;
	}
	.bsw-live-hero {
		height: 56vh;
	}
	.bsw-program-swiper .bsw-program-title {
		font-size: 14px;
	}
	.bsw-program-archive-body {
		padding: 20px;
	}
	.bsw-video-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
	.bsw-trending-item-title {
		font-size: 13px;
		-webkit-line-clamp: 2;
	}
}