/* ==========================================================================
   wp101-video.css — chunked-video learner surface
   Loaded conditionally by inc/enqueue.php on `sfwd-lessons` singulars only.

   This file owns the .wp101-video-module poster card, the inline player
   surface, the sticky-on-scroll mini-player, and the placeholder
   "Video coming soon" state. The lesson-scoped CSS custom properties live
   in the theme's single-lesson.css (which loads before this file via the
   conditional CSS enqueue), so this file consumes them via var(--name).
   It also degrades to sensible brand-token fallbacks when single-lesson.css
   is absent (e.g. plugin active under a different theme).

   Token mapping (designer pass 2026-05-17):
     --color-surface-lesson  → theme alias, falls back to #F5F4F0
     --radius-video-module   → theme alias, falls back to 12px
     --sticky-video-width    → theme alias, falls back to 360px
     All other colours / type ladder use the existing brand tokens declared
     in the theme's tokens.css.
   ========================================================================== */

/* ----------------------------------------------------------------------
   .sr-only — visually-hidden-but-AT-readable utility
   Used by wp101-video.js for the polite aria-live status region that
   announces sticky-pin and lesson-completion events. Scoped to this
   plugin (not added to the theme) until a second consumer appears.
   Canonical clip-path / 1px box pattern — display:none would hide the
   element from AT, which defeats the purpose. Per a11y review 2026-05-17
   (RISK 1 / WATCH 3).
   ---------------------------------------------------------------------- */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------------------
   .wp101-video-module — inline video card inside the lesson body
   ---------------------------------------------------------------------- */

.wp101-video-module {
	margin: 2rem 0 2.5rem;
	background: var(--color-surface-lesson, #F5F4F0);
	border-radius: var(--radius-video-module, 12px);
	overflow: hidden;
	box-shadow: var(--shadow-module, 0 8px 32px rgba(6, 15, 28, 0.12));
	position: relative;
}

.wp101-video-player {
	aspect-ratio: 16 / 9;
	background: #000;
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
}

/* Cloudflare Stream iframe — injected by JS when Play is clicked. The
   iframe replaces the poster card; we don't render it server-side. */
.wp101-video-player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ----------------------------------------------------------------------
   Poster card — what the learner sees before clicking Play
   ---------------------------------------------------------------------- */

.wp101-video-poster {
	position: absolute;
	inset: 0;
	background: var(--color-surface-lesson, #F5F4F0);
	display: grid;
	place-items: center;
	transition: opacity 0.3s var(--ease-standard, ease);
}

.wp101-video-poster.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.wp101-poster-content {
	text-align: center;
	width: 90%;
	max-width: 32rem;
	color: var(--color-text-strong, #0f2f4f);
}

.wp101-poster-mark {
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1rem;
	color: var(--color-accent, #123456);
}

/* Meta and duration use --color-text-strong rather than --color-muted.
   On the lesson surface (#F5F4F0) the muted token resolves to ~6.7:1
   (passes AA), but uppercase tracking at --fs-xs reads thin at that
   weight; the stronger ink resolves to ~12.4:1 and renders the labels
   crisp at the size. Per a11y review 2026-05-17 (WATCH 1). */
.wp101-poster-meta {
	font-family: var(--ff-body, "Sora", system-ui, sans-serif);
	font-size: var(--fs-xs, 0.75rem);
	color: var(--color-text-strong, #0f2f4f);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.wp101-poster-title {
	font-family: var(--ff-display, "Fraunces", Georgia, serif);
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 600;
	color: var(--color-text-strong, #0f2f4f);
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.wp101-poster-duration {
	font-family: var(--ff-body, "Sora", system-ui, sans-serif);
	font-size: var(--fs-xs, 0.75rem);
	color: var(--color-text-strong, #0f2f4f);
	margin-top: 0.75rem;
	font-variant-numeric: tabular-nums;
}

/* Placeholder badge: gold-soft renders ~F2E7D2 once blended on the
   F5F4F0 lesson surface. The theme's --color-gold-text (#8B6914) resolves
   to ~3.99:1 on that effective bg — fails 4.5:1. The component-level
   override #6B4E0A resolves to ~6.24:1 on the same bg, preserving the
   amber identity while passing AA. Per a11y review 2026-05-17 (WATCH 2);
   not promoted to a theme token because no other surface currently
   stacks gold-text on gold-soft. */
.wp101-poster-placeholder-note {
	margin-top: 1rem;
	padding: 0.25rem 0.75rem;
	display: inline-block;
	font-size: var(--fs-xs, 0.75rem);
	color: #6B4E0A;
	background: var(--color-gold-soft, rgba(226, 176, 74, 0.18));
	border-radius: var(--radius-pill, 999px);
	letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------
   Play button overlay — visible while poster is showing
   ---------------------------------------------------------------------- */

.wp101-play-button,
.wp101-mark-watched-button {
	position: absolute;
	z-index: 2;
	border: 0;
	cursor: pointer;
	font-family: var(--ff-body, "Sora", system-ui, sans-serif);
	transition:
		transform 0.2s var(--ease-standard, ease),
		background 0.2s var(--ease-standard, ease),
		box-shadow 0.2s var(--ease-standard, ease);
}

.wp101-play-button {
	width: 4.5rem;
	height: 4.5rem;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	display: grid;
	place-items: center;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.wp101-play-button:hover,
.wp101-play-button:focus-visible {
	transform: scale(1.08);
	outline: 2px solid var(--color-teal, #0e7490);
	outline-offset: 4px;
}

.wp101-play-button svg {
	width: 1.75rem;
	height: 1.75rem;
	margin-left: 4px;
	fill: var(--color-accent, #123456);
}

.wp101-mark-watched-button {
	min-width: 44px;
	min-height: 44px;
	padding: 0.6rem 1.2rem;
	background: var(--color-accent, #123456);
	color: #fff;
	border-radius: var(--radius-pill, 999px);
	font-size: var(--fs-sm, 0.875rem);
	font-weight: 500;
	bottom: 1rem;
}

.wp101-mark-watched-button:hover,
.wp101-mark-watched-button:focus-visible {
	background: var(--color-accent-strong, #0a2240);
	outline: 2px solid var(--color-teal, #0e7490);
	outline-offset: 4px;
}

.wp101-mark-watched-button[disabled],
.wp101-mark-watched-button.is-marked {
	background: var(--color-success, #1a7f37);
	cursor: default;
	pointer-events: none;
}

/* ----------------------------------------------------------------------
   Sticky video — pinned mini-player when inline scrolls out of view
   Positioned BOTTOM-LEFT (24px) to clear the chat widget (bottom-right).
   Renders only after a real video has been played (sticky element is
   created at click-time, not server-side).
   ---------------------------------------------------------------------- */

.wp101-sticky-video {
	position: fixed;
	bottom: 1.5rem;
	left: 1.5rem;
	width: var(--sticky-video-width, 360px);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--radius-video-module, 12px);
	overflow: hidden;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
	z-index: 100;
	cursor: pointer;
}

.wp101-sticky-video[hidden] {
	display: none;
}

.wp101-sticky-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	pointer-events: none;
}

.wp101-sticky-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.5rem 0.75rem;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
	color: #fff;
	font-family: var(--ff-body, "Sora", system-ui, sans-serif);
	font-size: var(--fs-xs, 0.75rem);
	pointer-events: none;
}

.wp101-sticky-label-title {
	display: block;
	font-weight: 600;
	margin-bottom: 0.125rem;
}

.wp101-sticky-label-action {
	display: block;
	color: rgba(255, 255, 255, 0.75);
}

/* Close button: visual circle stays 28px to keep the sticky chrome quiet,
   but the hit target meets WCAG 2.5.8 (44×44) via transparent padding plus
   matched negative margin so the visible circle stays anchored at the
   original top/right offsets. background-clip: content-box keeps the
   visible fill confined to the inner 28×28 while padding extends the hit
   target. Per a11y review 2026-05-17 (RISK 2). */
.wp101-sticky-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	box-sizing: content-box;
	width: 28px;
	height: 28px;
	padding: 8px;
	margin: -8px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.6);
	background-clip: content-box;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 2;
	transition: background 0.2s var(--ease-standard, ease);
}

.wp101-sticky-close:hover,
.wp101-sticky-close:focus-visible {
	background-color: rgba(0, 0, 0, 0.9);
	outline: 2px solid var(--color-teal, #0e7490);
	outline-offset: 2px;
}

.wp101-sticky-close svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ----------------------------------------------------------------------
   Mobile
   ---------------------------------------------------------------------- */

@media (max-width: 700px) {
	.wp101-sticky-video {
		width: var(--sticky-video-width-mobile, 260px);
		bottom: 1rem;
		left: 1rem;
	}
}

/* ----------------------------------------------------------------------
   Reduced motion — no transitions, no transforms on hover
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.wp101-video-poster,
	.wp101-play-button,
	.wp101-mark-watched-button,
	.wp101-sticky-close {
		transition: none;
	}

	.wp101-play-button:hover,
	.wp101-play-button:focus-visible {
		transform: none;
	}
}