/* YT Playlist Feed */

.ytpl-grid {
	display: grid;
	grid-template-columns: repeat(var(--ytpl-cols, 3), minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}

@media (max-width: 1179px) {
	.ytpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.ytpl-grid { grid-template-columns: minmax(0, 1fr); }
}

.ytpl-item {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	text-align: left;
	white-space: normal;
	cursor: pointer;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.ytpl-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ytpl-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: #000;
}

.ytpl-thumb img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	max-width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	display: block;
	/* Slight overscale crops residual letterbox slivers on off-ratio thumbs */
	transform: scale(1.035);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.ytpl-item:hover .ytpl-thumb img,
.ytpl-item:focus-visible .ytpl-thumb img {
	transform: scale(1.07);
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
	.ytpl-thumb img { transition: none; }
	.ytpl-item:hover .ytpl-thumb img { transform: scale(1.035); }
}

.ytpl-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 40px;
	background: rgba(23, 23, 23, 0.8);
	border-radius: 10px;
	transition: background 0.2s ease;
}

.ytpl-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-38%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #fff;
}

.ytpl-item:hover .ytpl-play,
.ytpl-item:focus-visible .ytpl-play {
	background: #f00;
}

.ytpl-title {
	display: block;
	margin-top: 10px;
	font-weight: 600;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: break-word;
}

.ytpl-date {
	display: block;
	margin-top: 3px;
	font-size: 0.85em;
	opacity: 0.65;
}

.ytpl-hidden {
	display: none;
}

.ytpl-more-wrap {
	text-align: center;
	margin-top: 28px;
}

.ytpl-more {
	display: inline-block;
	padding: 11px 28px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.ytpl-more:hover,
.ytpl-more:focus-visible {
	background: currentColor;
}

.ytpl-more:hover {
	color: #fff;
	background: #171717;
	border-color: #171717;
}

/* Lightbox */

.ytpl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.88);
}

.ytpl-lightbox-inner {
	position: relative;
	width: min(1080px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.ytpl-lightbox-inner iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ytpl-close {
	position: absolute;
	top: -4px;
	right: 0;
	transform: translateY(-100%);
	padding: 8px 4px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.85;
}

.ytpl-close:hover,
.ytpl-close:focus-visible {
	opacity: 1;
}

.ytpl-lightbox-wrap {
	position: relative;
	width: min(1080px, 100%);
}

/* Responsive initial counts (matched by data attributes set by the shortcode) */

@media (min-width: 1180px) {
	.ytpl-feed[data-ytpl-d="1"] .ytpl-item:nth-child(n+2) { display: none; }
	.ytpl-feed[data-ytpl-d="2"] .ytpl-item:nth-child(n+3) { display: none; }
	.ytpl-feed[data-ytpl-d="3"] .ytpl-item:nth-child(n+4) { display: none; }
	.ytpl-feed[data-ytpl-d="4"] .ytpl-item:nth-child(n+5) { display: none; }
	.ytpl-feed[data-ytpl-d="5"] .ytpl-item:nth-child(n+6) { display: none; }
	.ytpl-feed[data-ytpl-d="6"] .ytpl-item:nth-child(n+7) { display: none; }
	.ytpl-feed[data-ytpl-d="7"] .ytpl-item:nth-child(n+8) { display: none; }
	.ytpl-feed[data-ytpl-d="8"] .ytpl-item:nth-child(n+9) { display: none; }
	.ytpl-feed[data-ytpl-d="9"] .ytpl-item:nth-child(n+10) { display: none; }
	.ytpl-feed[data-ytpl-d="10"] .ytpl-item:nth-child(n+11) { display: none; }
	.ytpl-feed[data-ytpl-d="11"] .ytpl-item:nth-child(n+12) { display: none; }
	.ytpl-feed[data-ytpl-d="12"] .ytpl-item:nth-child(n+13) { display: none; }
	.ytpl-feed[data-ytpl-d="13"] .ytpl-item:nth-child(n+14) { display: none; }
	.ytpl-feed[data-ytpl-d="14"] .ytpl-item:nth-child(n+15) { display: none; }
	.ytpl-feed[data-ytpl-d="15"] .ytpl-item:nth-child(n+16) { display: none; }
	.ytpl-feed[data-ytpl-d="16"] .ytpl-item:nth-child(n+17) { display: none; }
	.ytpl-feed[data-ytpl-d="17"] .ytpl-item:nth-child(n+18) { display: none; }
	.ytpl-feed[data-ytpl-d="18"] .ytpl-item:nth-child(n+19) { display: none; }
	.ytpl-feed[data-ytpl-d="19"] .ytpl-item:nth-child(n+20) { display: none; }
	.ytpl-feed[data-ytpl-d="20"] .ytpl-item:nth-child(n+21) { display: none; }
	.ytpl-feed[data-ytpl-d="21"] .ytpl-item:nth-child(n+22) { display: none; }
	.ytpl-feed[data-ytpl-d="22"] .ytpl-item:nth-child(n+23) { display: none; }
	.ytpl-feed[data-ytpl-d="23"] .ytpl-item:nth-child(n+24) { display: none; }
	.ytpl-feed[data-ytpl-d="24"] .ytpl-item:nth-child(n+25) { display: none; }
}

@media (min-width: 768px) and (max-width: 1179px) {
	.ytpl-feed[data-ytpl-t="1"] .ytpl-item:nth-child(n+2) { display: none; }
	.ytpl-feed[data-ytpl-t="2"] .ytpl-item:nth-child(n+3) { display: none; }
	.ytpl-feed[data-ytpl-t="3"] .ytpl-item:nth-child(n+4) { display: none; }
	.ytpl-feed[data-ytpl-t="4"] .ytpl-item:nth-child(n+5) { display: none; }
	.ytpl-feed[data-ytpl-t="5"] .ytpl-item:nth-child(n+6) { display: none; }
	.ytpl-feed[data-ytpl-t="6"] .ytpl-item:nth-child(n+7) { display: none; }
	.ytpl-feed[data-ytpl-t="7"] .ytpl-item:nth-child(n+8) { display: none; }
	.ytpl-feed[data-ytpl-t="8"] .ytpl-item:nth-child(n+9) { display: none; }
	.ytpl-feed[data-ytpl-t="9"] .ytpl-item:nth-child(n+10) { display: none; }
	.ytpl-feed[data-ytpl-t="10"] .ytpl-item:nth-child(n+11) { display: none; }
	.ytpl-feed[data-ytpl-t="11"] .ytpl-item:nth-child(n+12) { display: none; }
	.ytpl-feed[data-ytpl-t="12"] .ytpl-item:nth-child(n+13) { display: none; }
	.ytpl-feed[data-ytpl-t="13"] .ytpl-item:nth-child(n+14) { display: none; }
	.ytpl-feed[data-ytpl-t="14"] .ytpl-item:nth-child(n+15) { display: none; }
	.ytpl-feed[data-ytpl-t="15"] .ytpl-item:nth-child(n+16) { display: none; }
	.ytpl-feed[data-ytpl-t="16"] .ytpl-item:nth-child(n+17) { display: none; }
	.ytpl-feed[data-ytpl-t="17"] .ytpl-item:nth-child(n+18) { display: none; }
	.ytpl-feed[data-ytpl-t="18"] .ytpl-item:nth-child(n+19) { display: none; }
	.ytpl-feed[data-ytpl-t="19"] .ytpl-item:nth-child(n+20) { display: none; }
	.ytpl-feed[data-ytpl-t="20"] .ytpl-item:nth-child(n+21) { display: none; }
	.ytpl-feed[data-ytpl-t="21"] .ytpl-item:nth-child(n+22) { display: none; }
	.ytpl-feed[data-ytpl-t="22"] .ytpl-item:nth-child(n+23) { display: none; }
	.ytpl-feed[data-ytpl-t="23"] .ytpl-item:nth-child(n+24) { display: none; }
	.ytpl-feed[data-ytpl-t="24"] .ytpl-item:nth-child(n+25) { display: none; }
}

@media (max-width: 767px) {
	.ytpl-feed[data-ytpl-m="1"] .ytpl-item:nth-child(n+2) { display: none; }
	.ytpl-feed[data-ytpl-m="2"] .ytpl-item:nth-child(n+3) { display: none; }
	.ytpl-feed[data-ytpl-m="3"] .ytpl-item:nth-child(n+4) { display: none; }
	.ytpl-feed[data-ytpl-m="4"] .ytpl-item:nth-child(n+5) { display: none; }
	.ytpl-feed[data-ytpl-m="5"] .ytpl-item:nth-child(n+6) { display: none; }
	.ytpl-feed[data-ytpl-m="6"] .ytpl-item:nth-child(n+7) { display: none; }
	.ytpl-feed[data-ytpl-m="7"] .ytpl-item:nth-child(n+8) { display: none; }
	.ytpl-feed[data-ytpl-m="8"] .ytpl-item:nth-child(n+9) { display: none; }
	.ytpl-feed[data-ytpl-m="9"] .ytpl-item:nth-child(n+10) { display: none; }
	.ytpl-feed[data-ytpl-m="10"] .ytpl-item:nth-child(n+11) { display: none; }
	.ytpl-feed[data-ytpl-m="11"] .ytpl-item:nth-child(n+12) { display: none; }
	.ytpl-feed[data-ytpl-m="12"] .ytpl-item:nth-child(n+13) { display: none; }
	.ytpl-feed[data-ytpl-m="13"] .ytpl-item:nth-child(n+14) { display: none; }
	.ytpl-feed[data-ytpl-m="14"] .ytpl-item:nth-child(n+15) { display: none; }
	.ytpl-feed[data-ytpl-m="15"] .ytpl-item:nth-child(n+16) { display: none; }
	.ytpl-feed[data-ytpl-m="16"] .ytpl-item:nth-child(n+17) { display: none; }
	.ytpl-feed[data-ytpl-m="17"] .ytpl-item:nth-child(n+18) { display: none; }
	.ytpl-feed[data-ytpl-m="18"] .ytpl-item:nth-child(n+19) { display: none; }
	.ytpl-feed[data-ytpl-m="19"] .ytpl-item:nth-child(n+20) { display: none; }
	.ytpl-feed[data-ytpl-m="20"] .ytpl-item:nth-child(n+21) { display: none; }
	.ytpl-feed[data-ytpl-m="21"] .ytpl-item:nth-child(n+22) { display: none; }
	.ytpl-feed[data-ytpl-m="22"] .ytpl-item:nth-child(n+23) { display: none; }
	.ytpl-feed[data-ytpl-m="23"] .ytpl-item:nth-child(n+24) { display: none; }
	.ytpl-feed[data-ytpl-m="24"] .ytpl-item:nth-child(n+25) { display: none; }
}

/* Items revealed by Load More override the breakpoint hiding above */
.ytpl-feed .ytpl-item.ytpl-revealed { display: block !important; }