/* Base grid - every card style that reuses the shared .captfyt-card-list
 * wrapper (style-1, style-2, style-8) must define this itself since each
 * style's CSS file is enqueued independently (no shared dependency), not
 * loaded together. Without it, the "Columns" setting's inline
 * grid-template-columns override has no grid to apply to and cards just
 * stack one per row. Kept identical to style-1/style-2's version. */
.captfyt-card-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	max-width: 1250px;
	gap: 20px;
}

.yt-s8-card {
	background: #fafafa;
	border-radius: 14px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	position: relative;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
	cursor: pointer;
}

.yt-s8-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.yt-s8-thumb-wrap {
	position: relative;
	overflow: hidden;
	display: block;
	line-height: 0;
	border-radius: 14px 14px 0 0;
}

.yt-s8-thumbnail {
	width: 100% !important;
	height: 195px !important;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.yt-s8-card:hover .yt-s8-thumbnail {
	transform: scale(1.03);
}

.yt-s8-play-btn {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.15);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.yt-s8-card:hover .yt-s8-play-btn {
	opacity: 1;
}

.yt-s8-play-btn svg {
	width: 48px;
	height: 48px;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.yt-s8-duration {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 4px;
	z-index: 2;
}

.yt-s8-content {
	padding: 14px 16px 16px;
}

.yt-s8-title {
	margin: 0 0 14px;
	font-size: 14px;
	color: #555555;
	font-weight: 400;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Avatar + channel name + time-ago row ─────────────────────────── */
.yt-s8-meta-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.yt-s8-avatar-wrap {
	position: relative;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: block;
}

.yt-s8-avatar {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.yt-s8-avatar-fallback {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff4e4e, #cc0000);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
}

.yt-s8-yt-badge {
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 16px;
	height: 16px;
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}

.yt-s8-meta-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.yt-s8-channel-name {
	font-size: 15px;
	font-weight: 700;
	color: #0f0f0f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.yt-s8-time-ago {
	font-size: 13px;
	color: #8a8a8a;
	font-weight: 400;
}

/* ── Stats row (views / likes / comments) ─────────────────────────── */
.yt-s8-stats-row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-top: 12px;
	border-top: 1px solid #e8e8e8;
}

.yt-s8-stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 500;
	color: #4a4a4a;
	white-space: nowrap;
}

.yt-s8-stat svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.yt-s8-stat--views svg  { color: #6b6b6b; }
.yt-s8-stat--likes svg  { color: #6b6b6b; }
.yt-s8-stat--comments svg { color: #6b6b6b; }

/* Inline play (added via Video Play Mode = "Play Inline on Page") */
.captfyt-inline-iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.captfyt-inline-close { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; line-height: 0; }
.captfyt-inline-close:hover { background: rgba(0, 0, 0, 0.85); }

/* Equal Card Height (Behaviors tab) - see the captfyt-equal-h class added in
 * class-captfyt-shortcode.php. Grid items already stretch to the row's height;
 * this makes the card's content fill it, reserves 2 title lines so the channel
 * row lines up across cards, and pins the bottom row to the card's bottom. */
.captfyt-equal-h .yt-s8-card { display: flex; flex-direction: column; }
.captfyt-equal-h .yt-s8-content { flex: 1 1 auto; display: flex; flex-direction: column; }
.captfyt-equal-h .yt-s8-title { min-height: 3em; /* 2 lines at line-height 1.5 */ }
.captfyt-equal-h .yt-s8-content > :last-child { margin-top: auto; }