/* archive-video-consent.css — the no-consent state of an imported video mount.
 * ---------------------------------------------------------------------------
 * js/brightcove-hydrate.js renders .relevo-video-consent INSIDE the
 * [data-voc-video-player] mount for readers who have not accepted cookies, in
 * place of the Brightcove player (Asana 1218448080721432, RL-12).
 *
 * !! NO LAYOUT SHIFT BY CONSTRUCTION, and that is the whole reason the card lives
 * inside the mount rather than replacing it: archive-video.css + koi have already
 * given .video-player its aspect-ratio box (16/9, or 404/720 when portrait), so the
 * card and the player occupy the SAME box. Hydration after a late accept swaps the
 * contents of a box whose height never changes — unlike the social embeds, which
 * needed a measured reservation because the widget's height is unknown until it
 * renders. Hence `height:100%`; the card's own aspect-ratio is only the fallback
 * for a mount that somehow resolves to auto height.
 *
 * Palette matches ig-includes/cookie-notice.php (surface #181c27, #5b3fd6 -> #ff2f8e
 * gradient, focus #b3a5ff) so the two consent surfaces read as one system.
 *
 * Enqueued by ig-includes/video-consent.php, only where the hydrator is loaded.
 * Retire with js/brightcove-hydrate.js at the R2 / media.relevo.com cutover.
 * --------------------------------------------------------------------------- */

.relevo-video-consent {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;          /* fallback only — the mount normally sets the box */
	overflow: hidden;
	background: #181c27;
	box-sizing: border-box;
	/* The card must fit whatever box the mount resolves to, and that is NOT a
	 * function of the viewport: a portrait reel measures 193x344 on a 1280px
	 * desktop (koi's 344px min-height drives the width through the 404/720 ratio
	 * — same box the real player gets, verified, so this is not something the card
	 * introduced). A viewport media query cannot see that; a container query can. */
	container-type: inline-size;
}

.video-player--vertical > .relevo-video-consent,
.multimedia-video--portrait .relevo-video-consent {
	aspect-ratio: 404 / 720;
}

/* Poster: the article hero, stamped onto the mount by video-consent.php. Same
 * host as the hero image itself (s2.sportstatics.com), which sets no cookies. */
.relevo-video-consent__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Dimmed so the panel's white text keeps its contrast over any frame. */
	opacity: 0.55;
}

.relevo-video-consent__panel {
	position: relative;           /* above the poster */
	width: 100%;
	box-sizing: border-box;
	padding: 16px 18px;
	background: linear-gradient(180deg, rgba(24, 28, 39, 0) 0%, rgba(24, 28, 39, 0.92) 55%);
	color: #fff;
	text-align: center;
}

.relevo-video-consent__text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: #e6e8f0;
}

.relevo-video-consent__btn {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	height: 44px;
	padding: 0 22px;
	border: 2px solid transparent;
	border-radius: 8px;
	background: linear-gradient(90deg, #5b3fd6, #ff2f8e);
	background-origin: border-box;
	color: #fff;
	cursor: pointer;
	white-space: nowrap;
	transition: filter .15s ease;
}

.relevo-video-consent__btn:hover {
	filter: brightness(1.08);
}

.relevo-video-consent__btn:focus-visible {
	outline: 2px solid #b3a5ff;
	outline-offset: 2px;
}

.relevo-video-consent__note {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #b9bece;
}

.relevo-video-consent__note a {
	color: #b3a5ff;
	text-decoration: underline;
}

.relevo-video-consent__note a:hover {
	color: #ff2f8e;
}

/* Narrow boxes: portrait reels (193px wide on desktop), and any mount on a phone.
 * Drop the explanatory line — the button already says what it does — but KEEP the
 * note: it is the sentence that makes the consent an informed one, so it is the
 * last thing that may be dropped, not the first. */
@container (max-width: 420px) {
	.relevo-video-consent__panel {
		padding: 12px 10px 14px;
	}

	.relevo-video-consent__text {
		display: none;
	}

	.relevo-video-consent__btn {
		height: 40px;
		padding: 0 16px;
		font-size: 13px;
		white-space: normal;
	}

	.relevo-video-consent__note {
		margin-top: 8px;
		font-size: 11px;
	}
}

/* Same trim for browsers without container queries, keyed on the viewport. Covers
 * the phone case (every mount is narrow there); a desktop portrait reel simply
 * keeps the full copy, which is the harmless direction to fall back in. */
@supports not (container-type: inline-size) {
	@media (max-width: 480px) {
		.relevo-video-consent__panel {
			padding: 12px 10px 14px;
		}

		.relevo-video-consent__text {
			display: none;
		}

		.relevo-video-consent__note {
			font-size: 11px;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.relevo-video-consent__btn {
		transition: none;
	}
}