/* Videos library (videos.html). Builds on why-readylinks.css: hero, sections and CTA come from there. */

.rl-video-grid { margin-top: 34px; row-gap: 28px; }

.rl-video-card {
	background: #fff; border: 1px solid #e3e9ef; border-radius: 14px; overflow: hidden;
	height: 100%; display: flex; flex-direction: column;
	transition: box-shadow .18s ease;
}
.rl-video-card:hover { box-shadow: 0 14px 34px -18px rgba(6,63,91,.35); }

/* 16:9 media box. Self-hosted videos letterbox (contain); YouTube thumbnails crop their 4:3 bars (cover). */
.rl-video-frame { position: relative; aspect-ratio: 16 / 9; background: #0b1620; }
.rl-video-frame video,
.rl-video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rl-video-frame video { object-fit: contain; background: #000; }
.rl-video-frame img { object-fit: cover; }

.rl-video-thumb { display: block; color: inherit; }
.rl-video-play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(180deg, rgba(6,63,91,0) 55%, rgba(6,63,91,.35));
}
.rl-video-play span {
	width: 64px; height: 64px; border-radius: 50%; background: rgba(6,63,91,.88); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 1.35rem; padding-left: 4px;
	box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .15s ease;
}
.rl-video-thumb:hover .rl-video-play span,
.rl-video-thumb:focus-visible .rl-video-play span { transform: scale(1.08); }

.rl-video-body { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; }
/* No text-transform: it would turn model names like GL-8xEP into GL-8XEP. */
.rl-video-meta { font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: #0b6fa4; margin-bottom: 6px; }
.rl-video-body h3 { font-size: 1.15rem; font-weight: 700; color: #063F5B; margin: 0; }
.rl-video-body p { color: #4a5b6a; font-size: .95rem; margin: 8px 0 16px; }

/* Pill links: big enough to tap on a phone (44px there), quiet enough to sit three to a card. */
.rl-video-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.rl-video-links a {
	display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 13px;
	border: 1px solid #d5e1ea; border-radius: 999px; background: #f6f9fb;
	font-weight: 600; color: #0b5ed7; text-decoration: none; font-size: .9rem; line-height: 1.2;
}
.rl-video-links a:hover,
.rl-video-links a:focus-visible { background: #eaf2fb; border-color: #9cc0e6; }

.rl-video-more { margin-top: 26px; margin-bottom: 0; }
.rl-video-more a { display: inline-block; padding: 10px 0; font-weight: 600; color: #0d6efd; text-decoration: none; }
.rl-video-more a:hover { text-decoration: underline; }

/* One wide feature card (the interview): video beside its text on large screens, stacked below that. */
@media (min-width: 992px) {
	.rl-video-card--wide { flex-direction: row; }
	.rl-video-card--wide .rl-video-frame { flex: 0 0 62%; }
	.rl-video-card--wide .rl-video-body { padding: 30px 32px; justify-content: center; }
	.rl-video-card--wide .rl-video-body h3 { font-size: 1.35rem; }
	.rl-video-card--wide .rl-video-links { margin-top: 4px; }
}

@media (max-width: 575.98px) {
	.rl-video-grid { margin-top: 24px; row-gap: 20px; }
	.rl-video-body { padding: 16px 18px 18px; }
	.rl-video-links a { min-height: 44px; }
	.rl-video-play span { width: 54px; height: 54px; font-size: 1.15rem; }
}