/* ============================================================
   Phase B.2 — "Watch & learn more" YouTube section on PDP.

   Three layout variants driven by the parent modifier class:
     .lpk-yt-section--single → 1 video, 16:9 hero + meta column
     .lpk-yt-section--grid   → 2 videos, 2-up grid
     .lpk-yt-section--rail   → 3+ videos, horizontal carousel rail

   Lite-YouTube facade: each card shows a JPEG thumbnail + play button.
   On click, the companion JS (pdp-youtube-lite.js) swaps the thumb for
   a real <iframe> pointing at youtube-nocookie.com.

   When a product has 0 YouTube videos the PHP renderer emits nothing,
   so this file's selectors have nothing to target — zero visual cost.
   ============================================================ */

.lpk-yt-section {
	/* No max-width and no horizontal padding: the section fills the parent
	   .container's content area, matching the gallery+info row above and the
	   tabs row below. Previous max-width: 1180px + padding: 0 16px made the
	   section ~30-100px narrower than its neighbours depending on viewport,
	   plus 16px more inset than other sections on mobile. */
	margin: var(--space-8) auto var(--space-6);
}

.lpk-yt-section__head {
	margin-bottom: var(--space-6);
	/* Sits at section's content edge (= container's content edge),
	   matching every other PDP section's left alignment. */
}
.lpk-yt-section__heading {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h2);
	margin: 0 0 var(--space-2);
	color: var(--color-text-primary);
	letter-spacing: -0.01em;
	line-height: 1.15;
}
.lpk-yt-section__sub {
	font-size: var(--fs-body);
	color: var(--color-text-secondary);
	margin: 0;
}

/* === Shared card structure ================================== */
.lpk-yt-card {
	display: block;
	cursor: pointer;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--color-border-subtle);
	transition: transform var(--motion-slow) ease, box-shadow var(--motion-slow) ease;
}
.lpk-yt-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.lpk-yt-card:focus-visible {
	outline: 2px solid var(--color-accent-mint-dark);
	outline-offset: 3px;
}
.lpk-yt-card-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-bg-inverse, #0b0b0b);
	overflow: hidden;
	display: block;
}
.lpk-yt-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--motion-slow) ease;
}
.lpk-yt-card:hover .lpk-yt-card-thumb img {
	transform: scale(1.04);
}
/* When JS swaps in the real iframe, it replaces the inner contents of
   .lpk-yt-card-thumb — the iframe will fill the 16:9 container. */
.lpk-yt-card-thumb iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* YouTube-red play button overlay. The visual style is intentionally
   YouTube-native so users recognise "this is a YouTube video" at a glance. */
.lpk-yt-play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 68px; height: 68px;
	background: #FF0000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
	transition: transform var(--motion-slow) ease, background var(--motion-slow) ease;
	pointer-events: none;
}
.lpk-yt-card:hover .lpk-yt-play {
	transform: translate(-50%, -50%) scale(1.08);
	background: #FF1F1F;
}
.lpk-yt-play svg {
	margin-left: 4px; /* optical-centre the play triangle */
}

.lpk-yt-card-meta {
	padding: var(--space-3) var(--space-4);
}
.lpk-yt-card-title {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body);
	margin: 0;
	color: var(--color-text-primary);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* === Variant A — single video (1 video) ===================== */
.lpk-yt-section--single .lpk-yt-single {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: center;
}
@media (min-width: 900px) {
	.lpk-yt-section--single .lpk-yt-single {
		grid-template-columns: 1.6fr 1fr;
		gap: var(--space-8);
	}
}
.lpk-yt-section--single .lpk-yt-card--hero {
	background: transparent;
	border: 0;
	box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}
.lpk-yt-section--single .lpk-yt-card--hero .lpk-yt-card-meta {
	display: none; /* meta column is rendered separately as .lpk-yt-single__copy */
}
.lpk-yt-single__copy {
	font-size: var(--fs-body);
	color: var(--color-text-secondary);
}
.lpk-yt-single__title {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h3);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-3);
	line-height: 1.25;
}
.lpk-yt-single__lead {
	margin: 0 0 var(--space-4);
	line-height: 1.55;
}

/* Channel chip — small visual anchor that this is from Logitech */
.lpk-yt-channel {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border-subtle);
}
.lpk-yt-channel__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #FF0000;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: 12px;
	flex-shrink: 0;
	letter-spacing: 0.04em;
}
.lpk-yt-channel__meta strong {
	display: block;
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
}
.lpk-yt-channel__meta span {
	display: block;
	font-size: var(--fs-caption);
	color: var(--color-text-secondary);
}

/* "Watch on YouTube" fallback link — only rendered in variant A. */
.lpk-yt-fallback-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: #fff;
	color: var(--color-text-primary);
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	padding: 10px 18px;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body-sm);
	text-decoration: none;
	transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.lpk-yt-fallback-link:hover {
	border-color: var(--color-text-primary);
}
.lpk-yt-fallback-link svg {
	color: #FF0000;
	flex-shrink: 0;
}
.lpk-yt-fallback-link:focus-visible {
	outline: 2px solid var(--color-accent-mint-dark);
	outline-offset: 2px;
}

/* === Variant B — 2-up grid (2 videos) ======================= */
.lpk-yt-section--grid .lpk-yt-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 720px) {
	.lpk-yt-section--grid .lpk-yt-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}
}

/* === Variant C — carousel rail (3+ videos) ================== */
.lpk-yt-section--rail .lpk-yt-rail-wrap {
	position: relative;
}
.lpk-yt-rail {
	display: flex;
	gap: var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--space-3);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.lpk-yt-rail::-webkit-scrollbar { height: 6px; }
.lpk-yt-rail::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 4px; }
.lpk-yt-rail::-webkit-scrollbar-track { background: transparent; }

.lpk-yt-rail .lpk-yt-card {
	flex: 0 0 calc((100% - var(--space-4)) / 1.5);
	scroll-snap-align: start;
}
@media (min-width: 720px) {
	.lpk-yt-rail .lpk-yt-card {
		flex-basis: calc((100% - var(--space-4) * 2) / 2.5);
	}
}
@media (min-width: 1080px) {
	.lpk-yt-rail .lpk-yt-card {
		flex-basis: calc((100% - var(--space-4) * 2) / 2.5);
	}
}

/* Arrows are vertically centered on the rail (which is the cards + a thin
   scrollbar at bottom). For cards without title meta the rail height equals
   the thumbnail height, so 50% is exact thumbnail center. For cards with a
   title block, 50% drifts a few pixels below thumbnail center — still close
   enough to read as "centered on the thumbnail" visually.

   Horizontally, arrows sit fully inside the rail with a small inset so they
   overlap the first/last visible card by ~30px (intentional — matches the
   YouTube / Best Buy / Apple carousel pattern). Half-clipped at -22px was
   the bug; clean inset at 8px is the fix. */
.lpk-yt-rail-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	background: #fff;
	border: 1px solid var(--color-border-subtle);
	border-radius: 50%;
	display: none; /* desktop-only by default — see media query */
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-text-primary);
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
	transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease;
}
@media (min-width: 900px) {
	.lpk-yt-rail-arrow { display: flex; }
}
.lpk-yt-rail-arrow:hover {
	background: var(--color-text-primary);
	color: #fff;
	transform: translateY(-50%) scale(1.05);
}
.lpk-yt-rail-arrow:focus-visible {
	outline: 2px solid var(--color-accent-mint-dark);
	outline-offset: 2px;
}
.lpk-yt-rail-arrow[hidden] { display: none !important; }
.lpk-yt-rail-arrow--prev { left: 8px; }
.lpk-yt-rail-arrow--next { right: 8px; }

/* === Mobile rail: edge-to-edge bleed =========================
   On a 375px iPhone, the rail without bleed would be constrained inside the
   container's 16px gutter, leaving thumbnails at ~111px tall — too small to
   evaluate a video. Apply the standard mobile-carousel pattern (Apple,
   Instagram, Logitech.com):

   - Heading stays at container content edge (16px from viewport on mobile),
     matching every other PDP section's left alignment.
   - Rail extends to viewport edges via the `margin: calc(50% - 50vw)` full-
     bleed trick.
   - First card's margin-left = container gutter, so the first card aligns
     exactly with the heading; subsequent cards peek off-right as the swipe
     affordance.
   - scroll-padding-left matches that offset so snap-scrolling honours it.
   - Each card is ~85vw so one card is fully visible at viewing size.

   Only applied to the rail variant (3+ videos). Single + grid variants
   stack vertically on mobile already and don't need this treatment. */
@media (max-width: 600px) {
	.lpk-yt-section--rail .lpk-yt-rail-wrap {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.lpk-yt-section--rail .lpk-yt-rail {
		scroll-padding-left: var(--gutter, var(--space-4));
		padding-right: var(--gutter, var(--space-4));
		padding-left: 0;
	}
	.lpk-yt-section--rail .lpk-yt-rail > .lpk-yt-card:first-child {
		margin-left: var(--gutter, var(--space-4));
	}
	.lpk-yt-section--rail .lpk-yt-rail .lpk-yt-card {
		flex-basis: 85vw;
	}
}

/* === Reduced-motion: kill hover lift + scroll-snap easing === */
@media (prefers-reduced-motion: reduce) {
	.lpk-yt-card,
	.lpk-yt-card:hover,
	.lpk-yt-card-thumb img,
	.lpk-yt-play,
	.lpk-yt-rail-arrow {
		transition: none;
		transform: none;
	}
	.lpk-yt-rail {
		scroll-behavior: auto;
	}
}

/* === Lightbox modal (2026-05-23) =============================
   Click any video card → modal opens with the YouTube player at the largest
   16:9 box that fits in the viewport (capped at 1280px wide). Backdrop is
   dimmed; ESC, click-outside, or the X button all dismiss. Same lite-facade
   performance — zero YouTube cost until the user actually clicks. */
.lpk-yt-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5, 24px);
}
.lpk-yt-modal[hidden] { display: none; }

.lpk-yt-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms ease;
}
.lpk-yt-modal.is-open .lpk-yt-modal__backdrop {
	opacity: 1;
}

/* Largest 16:9 box that fits in the viewport with safe-area padding.
   - Capped at 960px wide on desktop — matches Best Buy / B&H / Wirecutter
     PDP modal sizes. Premium without dominating the screen; backdrop
     remains visible around the player as a clear "viewing context."
   - 90vw cap so it never touches viewport edges on smaller screens.
   - calc(85vh * 16/9) cap so the resulting 16:9 box never overflows
     vertically (e.g. on short-wide viewports like landscape laptops).
   Whichever of the three is smallest wins — guarantees a properly-sized
   16:9 player in every viewport configuration. */
.lpk-yt-modal__content {
	position: relative;
	width: min(960px, 90vw, calc(85vh * 16 / 9));
	transform: scale(0.96);
	opacity: 0;
	transition: transform 200ms ease, opacity 200ms ease;
}
.lpk-yt-modal.is-open .lpk-yt-modal__content {
	transform: scale(1);
	opacity: 1;
}

.lpk-yt-modal__video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.lpk-yt-modal__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Close button sits just above the video, top-right. 44×44 = WCAG AA
   touch-target compliance. Translucent white with blur — visible against
   any video poster, matches premium lightbox conventions (Apple, B&H). */
.lpk-yt-modal__close {
	position: absolute;
	top: -54px;
	right: 0;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background 150ms ease, transform 150ms ease;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.lpk-yt-modal__close:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: scale(1.05);
}
.lpk-yt-modal__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	background: rgba(255, 255, 255, 0.25);
}
/* SVG icon is decorative — make sure clicks always register on the button,
   not on the inner SVG/line children. Without this, e.target inside the
   click handler could be the SVG and the close-detection logic might miss. */
.lpk-yt-modal__close svg,
.lpk-yt-modal__close svg * {
	pointer-events: none;
}

/* Mobile: tighter padding so the video gets maximum width. Close button
   shrinks slightly but stays at 40px (still WCAG AA — minimum touch
   target is 44×44 but 40px on a constrained viewport with backdrop tap
   as an alternative is acceptable per recent WCAG 2.2 success criterion
   2.5.8 minimum target size: AA threshold). */
@media (max-width: 720px) {
	.lpk-yt-modal {
		padding: var(--space-3, 12px);
	}
	.lpk-yt-modal__close {
		top: -50px;
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lpk-yt-modal__backdrop,
	.lpk-yt-modal__content,
	.lpk-yt-modal__close {
		transition: none;
		transform: none;
	}
}