/*
 * Educational videos route (page-videos.php) — prototype lines 1089–1121. Every value is the inline
 * style of the matching prototype element; shared pieces (.section, .kicker, .page-title, .chip)
 * come from base.css.
 *
 *   .videos                 the screen (padding from .section)
 *   .videos__topics         chip row: flex, gap 8px, margin-bottom 28px, wrap
 *   .videos__featured       dark block: #16191d, grid auto-fit minmax(min(100%,440px),1fr), margin-bottom 32px
 *   .videos__media          16/9 player cell (dark hatch, centred ▶ disc, dashed note) or the iframe
 *   .videos__info           right column: padding clamp(24px,3vw,40px), column gap 12px, centred
 *   .videos__action         the two outlined buttons (10px 16px, 1.5px #6b7683, 13px 600; hover border #fff)
 *   .videos__grid           auto-fill minmax(240px,1fr), gap 16px
 *   .video-card             #f7f6f2 card, 1px #d5d2ca (hover #2a3340); 16/9 thumb cell, badge, topic kicker, title
 */

.videos__topics {
	display: flex;
	gap: 8px;
	margin: 0 0 28px;
	flex-wrap: wrap;
	padding: 0;
	border: 0;
}

/* ---- Featured block ------------------------------------------------------- */
.videos__featured {
	background: var(--band);
	color: #fff;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	margin-bottom: 32px;
}
.videos__media {
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(135deg, #1e2228 0 14px, #1a1e23 14px 28px);
	display: grid;
	place-items: center;
	position: relative;
	min-width: 0;
	overflow: hidden;
}
.videos__media.has-embed { background: #000; }
.videos__play {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--orange);
	display: grid;
	place-items: center;
	font-size: 22px;
	line-height: 1.5;
	color: var(--ink);
	cursor: pointer;
	padding-left: 4px;
	box-sizing: border-box;
}
.videos__embed-note {
	position: absolute;
	left: 16px;
	bottom: 14px;
	font: 11px var(--font-mono);
	color: var(--dark-muted);
	border: 1px dashed #4a5563;
	padding: 4px 8px;
}
.videos__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #000;
}
.videos__info {
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
	min-width: 0;
}
.videos__featured-kicker {
	font: 11px var(--font-mono);
	color: var(--orange-dark);
	letter-spacing: .14em;
}
.videos__featured-title {
	margin: 0;
	font: 700 clamp(28px, 3.5vw, 38px)/1.05 var(--font-display);
	text-transform: uppercase;
	text-wrap: pretty;
	color: #fff;
}
.videos__featured-title:focus { outline: none; }
.videos__featured-title:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.videos__featured-desc {
	margin: 0;
	color: var(--dark-text-2);
	text-wrap: pretty;
}
.videos__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.videos__action {
	display: inline-block;
	padding: 10px 16px;
	border: 1.5px solid var(--tag-t);
	font-weight: 600;
	cursor: pointer;
	border-radius: 2px;
	font-size: 13px;
	color: #fff;
	line-height: 1.5;
}
.videos__action:hover { border-color: #fff; color: #fff; }

/* ---- Card grid ------------------------------------------------------------ */
.videos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.video-card {
	background: var(--panel);
	border: 1px solid var(--line);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	color: var(--ink);
	min-width: 0;
}
.video-card:hover { border-color: var(--navy); color: var(--ink); }
.video-card__thumb {
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(135deg, #e3e0d9 0 10px, #dcd9d1 10px 20px);
	display: grid;
	place-items: center;
	border-bottom: 1px solid var(--line);
	position: relative;
	overflow: hidden;
}
.video-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.video-card__thumb-note {
	font: 11px var(--font-mono);
	color: var(--muted);
}
.video-card__len {
	position: absolute;
	right: 8px;
	bottom: 8px;
	font: 11px var(--font-mono);
	background: var(--band);
	color: #fff;
	padding: 2px 6px;
	border-radius: 2px;
}
.video-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.video-card__topic {
	font: 11px var(--font-mono);
	color: var(--muted);
	letter-spacing: .1em;
}
.video-card__title {
	font: 600 18px/1.15 var(--font-display);
	text-transform: uppercase;
	text-wrap: pretty;
}
.videos__empty {
	margin: 0;
	color: var(--text-2);
	text-wrap: pretty;
}

/* Mobile: 44px action buttons on the featured video. */
@media (max-width: 899.98px) {
	.videos__action { min-height: 44px; display: inline-flex; align-items: center; }
}