/**
 * Vídeos — cartão (.sp-vcard) e faixa horizontal (.sp-vstrip).
 *
 * Carrega na homepage (faixas «Golos da jornada» e «Lances») e nas
 * categorias do ramo Vídeos (faixa do topo do hub e filas do sub-hub).
 * Mobile-first com min-width (docs/RESPONSIVO.md); as faixas rolam dentro do
 * próprio contentor e nunca fazem rolar o body a 320px.
 */

/* ==========================================================================
   Cartão de vídeo
   ========================================================================== */
.sp-vcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	color: var(--sp-ink);
	text-decoration: none;
	background: var(--sp-surface);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius);
	overflow: hidden;
	transition: box-shadow 0.2s, border-color 0.2s;
}

.sp-vcard:hover {
	border-color: var(--sp-porto-light);
	box-shadow: var(--sp-shadow-panel);
}

.sp-vcard:focus-visible {
	outline: 2px solid var(--sp-porto);
	outline-offset: 2px;
}

.sp-vcard__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--sp-navy-mid);
	overflow: hidden;
}

.sp-vcard__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.sp-vcard:hover .sp-vcard__img {
	transform: scale(1.03);
}

.sp-vcard__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, var(--sp-porto-bright) 0%, var(--sp-navy-mid) 70%, var(--sp-navy-soft) 100%);
}

.sp-vcard__play {
	position: absolute;
	left: 0.625rem;
	bottom: 0.625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--sp-radius-pill);
	background: var(--sp-porto);
	color: var(--sp-surface);
}

.sp-vcard__duracao {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	padding: 0.125rem 0.375rem;
	border-radius: var(--sp-radius-xs);
	background: color-mix(in srgb, var(--sp-navy) 80%, transparent);
	color: var(--sp-surface);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sp-vcard__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	padding: 0.75rem 0.875rem 0.875rem;
}

/* Também serve o cartão da grelha do hub (video-hub/video-feed-card.php). */
.sp-vcard__kicker {
	display: block;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-kicker);
	color: var(--sp-porto);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sp-vcard__titulo {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sp-ink);
}

.sp-vcard:hover .sp-vcard__titulo {
	color: var(--sp-porto);
}

.sp-vcard__jogo {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: var(--sp-ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   Faixa horizontal
   ========================================================================== */
.sp-vstrip {
	min-width: 0;
	margin: 0 0 2rem;
}

.sp-vstrip__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	margin-bottom: 0.75rem;
}

.sp-vstrip__titulo {
	margin: 0;
	flex: 0 1 auto;
	min-width: 0;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-kicker-xl);
	color: var(--sp-porto);
}

.sp-vstrip__linha {
	flex: 1 1 auto;
	min-width: 1rem;
	height: 1px;
	background: var(--sp-border);
}

.sp-vstrip__mais {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
	min-height: 44px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sp-porto);
	text-decoration: none;
	white-space: nowrap;
}

.sp-vstrip__mais:hover {
	color: var(--sp-porto-hover);
	text-decoration: underline;
}

.sp-vstrip__sub {
	margin: -0.5rem 0 0.75rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--sp-ink-strong);
}

.sp-vstrip__sub a {
	color: inherit;
	text-decoration: none;
}

.sp-vstrip__sub a:hover {
	color: var(--sp-porto);
	text-decoration: underline;
}

/* A fila rola dentro de si: colunas fixas, snap suave. */
.sp-vstrip__fila {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 15rem;
	gap: 1rem;
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.sp-vstrip__item {
	min-width: 0;
	scroll-snap-align: start;
}

/* A partir de md: sombra nas pontas quando há mais para ver (§5.10). As
   camadas `local` tapam a sombra quando a fila está no fim. */
@media (min-width: 768px) {
	.sp-vstrip__fila {
		grid-auto-columns: 14.5rem;
		background-image:
			linear-gradient(to right, var(--sp-surface-muted) 30%, transparent),
			linear-gradient(to left, var(--sp-surface-muted) 30%, transparent),
			radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--sp-navy) 14%, transparent), transparent),
			radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--sp-navy) 14%, transparent), transparent);
		background-position: left center, right center, left center, right center;
		background-repeat: no-repeat;
		background-size: 2.5rem 100%, 2.5rem 100%, 0.875rem 100%, 0.875rem 100%;
		background-attachment: local, local, scroll, scroll;
	}
}