/* ====================================================================
 * /content/ — the video grid (inc/content-videos.php)
 * --------------------------------------------------------------------
 * Tiles are facades: a locally served thumbnail, a play mark, the title.
 * Portrait, because two of the three platforms are portrait; a YouTube
 * tile letterboxes inside the same frame rather than breaking the grid.
 * The section is omitted entirely when the list is empty, so nothing here
 * has to cope with zero tiles.
 * ==================================================================== */

.alrasly-videos { margin-block: 0 0.5rem; }
.alrasly-videos > h2 { margin-block-end: 1.25rem; }

.alrasly-videos__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
@media (min-width: 700px) { .alrasly-videos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

.alrasly-video { margin: 0; min-inline-size: 0; }

.alrasly-video__facade {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card, 12px);
	background: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	outline-offset: 3px;
}
.alrasly-video__thumb {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 240ms ease;
}
.alrasly-video__facade:hover .alrasly-video__thumb,
.alrasly-video__facade:focus-visible .alrasly-video__thumb { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .alrasly-video__thumb { transition: none; } .alrasly-video__facade:hover .alrasly-video__thumb { transform: none; } }

/* The play mark: 44px minimum, the accent, the dark ground for the glyph so
   it reads on any thumbnail. */
.alrasly-video__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ground);
	display: grid;
	place-items: center;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
html[dir="rtl"] .alrasly-video__play { transform: translate(50%, -50%); }
.alrasly-video__play svg { inline-size: 1.5rem; block-size: 1.5rem; }
/* Not mirrored in RTL: a play mark points the way the video runs, in every script. */

/* Title and platform over the bottom of the thumbnail. */
.alrasly-video__meta {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 2.5rem 0.9rem 0.85rem;
	background: linear-gradient(to top, rgba(14, 10, 36, 0.92), rgba(14, 10, 36, 0));
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.alrasly-video__platform {
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text-2);
}
html[dir="rtl"] .alrasly-video__platform { letter-spacing: 0; }
.alrasly-video__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* A link card: the platform said no, or never said. No thumbnail, no play
   mark; the platform name and the title on the alt ground, still a link. */
.alrasly-video--card .alrasly-video__facade {
	display: flex;
	align-items: flex-end;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.alrasly-video--card .alrasly-video__meta { position: static; background: none; padding: 1rem; }

.alrasly-video__link {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
}
.alrasly-video__link a { color: var(--wp--preset--color--text-2); text-decoration: none; }
.alrasly-video__link a:hover, .alrasly-video__link a:focus-visible { color: var(--wp--preset--color--text); text-decoration: underline; }

/* After the tap: the player takes the tile's frame. */
.alrasly-video__player {
	aspect-ratio: 9 / 16;
	border-radius: var(--wp--custom--radius--card, 12px);
	overflow: hidden;
	background: #000;
}
.alrasly-video__player--youtube { aspect-ratio: 16 / 9; }
.alrasly-video__player iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }
.alrasly-video__player blockquote { margin: 0 !important; min-inline-size: 0 !important; max-inline-size: none !important; }

/* The platform row that follows the grid: rtl-guards.css styles .alrasly-plats
   as a 2-up grid for the page as first written; with three one-line cards it
   is 3-up from 700px. Scoped so the guards file is not touched. */
@media (min-width: 700px) { .alrasly-content-plats.alrasly-plats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.alrasly-content-plats .alrasly-plat-card p { margin: 0.35rem 0 0; }