/**
 * The unified video card — poster, duration/short badge, title, optional meta line.
 *
 * Extracted from watch.css when the homepage shipped: the same markup
 * (ek_video_render_card) is now rendered by the watch page's related rail, the /videos
 * archive, the homepage grid, and /categories. Those surfaces load different
 * stylesheets, so the card had to stop living inside the watch page's.
 *
 * Layout (how many columns, what gap) belongs to each surface's own stylesheet — this
 * file styles ONE card and nothing around it.
 */

.ek-card { display: block; color: inherit; text-decoration: none; }

.ek-card__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
	background: #17171b;
}
.ek-card--short .ek-card__thumb { aspect-ratio: 9 / 16; }

.ek-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}
.ek-card:hover .ek-card__thumb img { transform: scale(1.04); }

.ek-card__badge {
	position: absolute;
	right: 6px;
	bottom: 6px;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: rgba(0, 0, 0, 0.78);
}
.ek-card__badge--short {
	top: 6px;
	right: auto;
	bottom: auto;
	left: 6px;
	background: #e91e63;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ek-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.35;
	color: #dcdce2;
}

/* Optional sub-title line ("1.2M views · 3 days ago") — only surfaces that pass a
   `meta` key to ek_video_render_card() render it. */
.ek-card__meta {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	color: #8a8a92;
}