/**
 * seamlessmd/product-academy-videos — video thumbnail strip.
 *
 * Same column mechanism as the clinical journey library: the grid track
 * MINIMUM is one share of the row —
 *
 *     minmax( calc( ( 100% - (N - 1) * gap ) / N ), 1fr )
 *
 * — so at most N tracks can fit, `auto-fit` collapses the tracks the editor has
 * not filled, and any count below N stretches to fill the row instead of
 * leaving empty columns. Each breakpoint only changes
 * `--seamlessmd-pav-cols`.
 *
 * Every offset uses logical properties, so RTL mirrors the panel, the header
 * and the duration chip without a second stylesheet and without a language
 * branch in PHP.
 *
 * Load order: this file loads BEFORE assets/css/seamlessmd-theme.css, so any
 * rule that has to beat the bundle is escalated deliberately (noted inline).
 */

.seamlessmd-product-academy-videos {
	--seamlessmd-pav-blue: #2563eb;
	--seamlessmd-pav-navy: var( --seamlessmd-dark-navy, #0b1b3a );
	--seamlessmd-pav-panel-bg: #fff;
	--seamlessmd-pav-panel-border: #e6ecf6;
	--seamlessmd-pav-panel-shadow: 0 8px 24px rgba( 15, 32, 68, 0.05 );
	--seamlessmd-pav-radius: clamp( 1rem, 1.6vw, 1.4rem );
	--seamlessmd-pav-pad: clamp( 0.95rem, 1.7vw, 1.5rem );
	--seamlessmd-pav-gap: clamp( 0.6rem, 1.05vw, 1rem );

	/* Column cap — the only value the breakpoints below change. */
	--seamlessmd-pav-cols: 6;

	padding-block: clamp( 1rem, 2vw, 1.6rem );
}

/* (0,2,0) — matches the widened inner of the sections above so the whole page
 * shares one content column. Scoped to this block; `.seamlessmd-container` is
 * untouched. */
.seamlessmd-product-academy-videos .seamlessmd-product-academy-videos__inner {
	/* Follows the shared page-margin token (full-bleed site layout). */
	max-inline-size: var( --seamlessmd-container-max, 1340px );
}

/* ---------- panel ---------- */

.seamlessmd-product-academy-videos__panel {
	padding: var( --seamlessmd-pav-pad );
	background: var( --seamlessmd-pav-panel-bg );
	border: 1px solid var( --seamlessmd-pav-panel-border );
	border-radius: var( --seamlessmd-pav-radius );
	box-shadow: var( --seamlessmd-pav-panel-shadow );
}

/* ---------- header ---------- */

.seamlessmd-product-academy-videos__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-block-end: clamp( 0.7rem, 1.2vw, 1rem );
}

.seamlessmd-product-academy-videos__heading {
	margin: 0;
	color: var( --seamlessmd-pav-navy );
	font-size: clamp( 1.15rem, 1.6vw, 1.4rem );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-align: start;
}

/* Arabic letters join; negative tracking breaks the joins. */
[dir="rtl"] .seamlessmd-product-academy-videos__heading {
	letter-spacing: normal;
	line-height: 1.4;
}

.seamlessmd-product-academy-videos__action {
	color: var( --seamlessmd-pav-blue );
	font-size: clamp( 0.82rem, 0.95vw, 0.9rem );
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

a.seamlessmd-product-academy-videos__action:hover,
a.seamlessmd-product-academy-videos__action:focus-visible {
	text-decoration: underline;
}

/* ---------- grid ---------- */

.seamlessmd-product-academy-videos__grid {
	display: grid;
	/* `auto-fill` — not `auto-fit` — so unused tracks stay reserved. Under a
	 * search that leaves one or two videos, `auto-fit` would collapse the
	 * remaining tracks and stretch the surviving cards across the whole row,
	 * blowing a single 16:9 thumbnail up to full-container width. `auto-fill`
	 * keeps every track at its natural share of the row, so a lone result
	 * shows at the same card size it has when the grid is full and the extra
	 * space stays empty next to it. */
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			calc(
				( 100% - ( var( --seamlessmd-pav-cols ) - 1 ) * var( --seamlessmd-pav-gap ) )
				/ var( --seamlessmd-pav-cols )
			),
			1fr
		)
	);
	gap: var( --seamlessmd-pav-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

.seamlessmd-product-academy-videos__item {
	display: flex;
	min-inline-size: 0;
}

/* ---------- card ---------- */

.seamlessmd-product-academy-videos__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	inline-size: 100%;
	min-inline-size: 0;
	text-decoration: none;
}

.seamlessmd-product-academy-videos__media {
	position: relative;
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0.6rem;
	background: #dbe3f0;
}

/* (0,2,0) — theme.css sets `img { max-width: 100%; height: auto }` after this
 * file; `height: auto` would drop the thumbnail back to its intrinsic ratio
 * instead of filling the 16:9 frame, so the sizing is re-stated here. */
.seamlessmd-product-academy-videos .seamlessmd-product-academy-videos__thumb {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	object-position: 50% 42%;
}

/* Decorative badge — not a control at this stage. */
.seamlessmd-product-academy-videos__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate( -50%, -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: clamp( 1.9rem, 2.6vw, 2.5rem );
	block-size: clamp( 1.9rem, 2.6vw, 2.5rem );
	border: 2px solid rgba( 255, 255, 255, 0.95 );
	border-radius: 50%;
	/* Several of the thumbnails are bright product screenshots, so the badge
	 * carries its own contrast rather than relying on a dark still. */
	background: rgba( 12, 22, 46, 0.5 );
	box-shadow: 0 2px 10px rgba( 12, 22, 46, 0.3 );
	color: #fff;
}

/* The badge is centred with a translate, so RTL must not flip it back. */
[dir="rtl"] .seamlessmd-product-academy-videos__play {
	transform: translate( 50%, -50% );
}

.seamlessmd-product-academy-videos__play svg {
	inline-size: 80%;
	block-size: 80%;
	/* Optical nudge toward the triangle's point (physical right). */
	margin-inline-start: 8%;
}

/* A Play glyph is a media control, not a reading-direction arrow: it
 * points right in both languages, so it is deliberately NOT mirrored
 * under RTL. Only the optical nudge swaps sides, so it stays on the
 * physical right (toward the point) in Arabic too. */
[dir="rtl"] .seamlessmd-product-academy-videos__play svg {
	margin-inline-start: 0;
	margin-inline-end: 8%;
}

.seamlessmd-product-academy-videos__duration {
	position: absolute;
	inset-block-end: 0.4rem;
	inset-inline-end: 0.4rem;
	padding-block: 0.1rem;
	padding-inline: 0.35rem;
	border-radius: 0.28rem;
	background: rgba( 12, 22, 46, 0.82 );
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.35;
	/* A duration is always read left-to-right, in both languages. */
	direction: ltr;
	unicode-bidi: isolate;
}

.seamlessmd-product-academy-videos__title {
	display: block;
	min-inline-size: 0;
	color: var( --seamlessmd-pav-navy );
	font-size: clamp( 0.8rem, 0.95vw, 0.9rem );
	font-weight: 700;
	line-height: 1.3;
	text-align: start;
	overflow-wrap: anywhere;
}

/* Hover and focus only where the card is genuinely a link. */
a.seamlessmd-product-academy-videos__card:hover .seamlessmd-product-academy-videos__play,
a.seamlessmd-product-academy-videos__card:focus-visible .seamlessmd-product-academy-videos__play {
	background: rgba( 12, 22, 46, 0.58 );
}

a.seamlessmd-product-academy-videos__card:hover .seamlessmd-product-academy-videos__title,
a.seamlessmd-product-academy-videos__card:focus-visible .seamlessmd-product-academy-videos__title {
	color: var( --seamlessmd-pav-blue );
}

a.seamlessmd-product-academy-videos__card:focus-visible {
	outline: 2px solid var( --seamlessmd-pav-blue );
	outline-offset: 3px;
	border-radius: 0.6rem;
}

/* ---------- responsive ---------- */

/* Medium desktop — three across. */
@media ( max-width: 1199px ) {
	.seamlessmd-product-academy-videos {
		--seamlessmd-pav-cols: 3;
	}
}

/* Tablet — two across. */
@media ( max-width: 991px ) {
	.seamlessmd-product-academy-videos {
		--seamlessmd-pav-cols: 2;
	}
}

/* Mobile — one across. */
@media ( max-width: 575px ) {
	.seamlessmd-product-academy-videos {
		--seamlessmd-pav-cols: 1;
		--seamlessmd-pav-pad: 0.85rem;
	}
}

/* ---------- in-site Vimeo playback ----------
 *
 * The only new visible UI is the dialog and its close control. A card that can
 * play becomes a <button>, which carries UA chrome an <a>/<span> does not, so
 * the reset below keeps it pixel-identical to the non-playable card — the card
 * design itself is unchanged.
 */

button.seamlessmd-product-academy-videos__card {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
}

button.seamlessmd-product-academy-videos__card:focus-visible {
	outline: 2px solid var( --seamlessmd-pav-accent, #2563eb );
	outline-offset: 3px;
	border-radius: 0.6rem;
}

/* ---------- dialog ---------- */

.seamlessmd-product-academy-videos__dialog {
	inline-size: min( 100% - 2rem, 62rem );
	max-inline-size: min( 100% - 2rem, 62rem );
	padding: 0;
	border: 0;
	border-radius: 0.9rem;
	background: #000;
	color: #fff;
	overflow: visible;
}

.seamlessmd-product-academy-videos__dialog::backdrop {
	background: rgba( 6, 12, 26, 0.78 );
}

.seamlessmd-product-academy-videos__dialog-inner {
	position: relative;
}

/* 16:9 is held by the box, not by the iframe, so the player scales with the
 * dialog at every width without a fixed height. */
.seamlessmd-product-academy-videos__player {
	position: relative;
	aspect-ratio: 16 / 9;
	inline-size: 100%;
	overflow: hidden;
	border-radius: 0.9rem;
	background: #000;
}

.seamlessmd-product-academy-videos__iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* Inside the panel, not above it: an iframe paints over any sibling it overlaps
 * and a control hanging off the top edge can also fall outside the viewport, so
 * the close button lived where it could not be clicked. Explicit stacking keeps
 * it above the player. Logical offsets, so RTL mirrors it. */
.seamlessmd-product-academy-videos__dialog-close {
	position: absolute;
	z-index: 2;
	inset-block-start: 0.6rem;
	inset-inline-end: 0.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 6, 12, 26, 0.65 );
	color: #fff;
	cursor: pointer;
}

.seamlessmd-product-academy-videos__dialog-close:hover,
.seamlessmd-product-academy-videos__dialog-close:focus-visible {
	background: rgba( 6, 12, 26, 0.85 );
}

.seamlessmd-product-academy-videos__dialog-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.seamlessmd-product-academy-videos__dialog-close svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

/* The Close video label beside the × icon is for assistive tech only. The
 * theme has no global `.screen-reader-text` rule, so without this the words
 * render visibly inside the close button and squeeze the SVG × out of its
 * 2.25rem circular box. Mirrors the pricing-table / card-grid pattern. */
.seamlessmd-product-academy-videos .screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	-webkit-clip-path: inset( 50% );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}