/* ============================================================
   Phase B — additions to the existing .lpk-story system.

   Two concerns:
   1. .lpk-story-verify — the auto-rendered "Verify on Logitech's
      official product page" block emitted at the bottom of every
      PDP description that has a _lpk_source_url meta. Mirrors the
      visual rhythm of .lpk-pdp__info-block--mint trust tile.
   2. Defensive video states for .lpk-story-section__video when
      data-lazy="1" — keeps the poster visible until the lazy-video
      IntersectionObserver promotes preload.
   ============================================================ */

/* === .lpk-story-verify ====================================== */
.lpk-story-verify {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	background: linear-gradient(135deg, #F0FDFA 0%, #ECFEFF 100%);
	border: 1px solid #99F6E4;
	border-radius: var(--radius-lg, 12px);
	padding: var(--space-5) var(--space-6);
	margin: var(--space-6) 0 var(--space-4);
}

.lpk-story-verify__icon {
	width: 44px;
	height: 44px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent-mint-dark);
	flex-shrink: 0;
	border: 1px solid #99F6E4;
}

.lpk-story-verify__body strong {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-body-lg, 17px);
	font-weight: var(--fw-bold, 700);
	color: var(--color-text-primary);
	margin: 0 0 4px;
	line-height: 1.35;
}

.lpk-story-verify__body p {
	font-size: var(--fs-body, 15px);
	line-height: 1.55;
	color: var(--color-text-secondary);
	margin: 0 0 10px;
	max-width: 720px;
}

.lpk-story-verify__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-body, 15px);
	font-weight: var(--fw-semibold, 600);
	color: var(--color-text-primary);
	border-bottom: 1.5px solid var(--color-accent-mint-dark);
	padding-bottom: 1px;
	text-decoration: none;
	transition: color var(--motion-fast, 0.15s) ease;
}

.lpk-story-verify__link:hover {
	color: var(--color-accent-mint-dark);
}

.lpk-story-verify__link:focus-visible {
	outline: none;
	border-bottom-color: transparent;
	box-shadow: 0 0 0 2px var(--color-accent-mint-dark);
	border-radius: 2px;
}

/* Mobile — stack vertically and tighten padding on small screens. */
@media (max-width: 540px) {
	.lpk-story-verify {
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-4);
	}
	.lpk-story-verify__icon {
		width: 36px;
		height: 36px;
	}
}

/* === Verified-buyer review gate ==============================
   Shown in place of the review-write form when the visitor isn't logged
   in or hasn't purchased this product (WC verified-owners-only setting
   is ON). Replaces what was a form-with-silent-rejection — user gets a
   clear "you can't review this and here's why" message up front. */
.lpk-pdp-reviews__gate {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-6);
	margin: var(--space-6) 0;
}
.lpk-pdp-reviews__gate-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--color-border-subtle);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent-mint-dark);
}
.lpk-pdp-reviews__gate-text {
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--color-text-primary);
	margin: 0;
	max-width: 720px;
}
.lpk-pdp-reviews__gate-text strong {
	display: block;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body-lg, 17px);
	margin: 0 0 4px;
	color: var(--color-text-primary);
}
.lpk-pdp-reviews__gate-text a {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
	border-bottom: 1.5px solid var(--color-accent-mint-dark);
	padding-bottom: 1px;
	text-decoration: none;
}
.lpk-pdp-reviews__gate-text a:hover {
	color: var(--color-accent-mint-dark);
}
.lpk-pdp-reviews__gate-text a:focus-visible {
	outline: 2px solid var(--color-accent-mint-dark);
	outline-offset: 2px;
	border-radius: 2px;
}
@media (max-width: 540px) {
	.lpk-pdp-reviews__gate {
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-4);
	}
	.lpk-pdp-reviews__gate-icon {
		width: 36px;
		height: 36px;
	}
}

/* === Lazy-video defensive states ============================
   The base .lpk-story-section__media + __video rules in
   theme-overrides.css already handle layout (aspect-ratio 4/3,
   object-fit cover). Phase B adds:
   - a dark fallback background so the poster has somewhere to
     paint while the MP4 hasn't been requested yet;
   - reduced-motion respect: the IntersectionObserver JS
     short-circuits when prefers-reduced-motion: reduce is set,
     so videos remain at their poster frame. CSS here is purely
     a layout / contrast safety net. */
.lpk-story-section__video[data-lazy="1"] {
	background-color: var(--color-bg-inverse, #0b0b0b);
}

/* === wpautop defence (2026-05-23 production regression fix) ==
   WordPress's wpautop filter wraps stand-alone <video>/<img> tags
   in <p> elements when the operator left blank lines around them
   in the post_content. Live rendered HTML ends up like:
       <div class="lpk-story-section__media">
         <p><video ...></p>
         <p></video></p>
       </div>
   That breaks `height: 100%` on the <video> (it resolves against
   the auto-height <p> parent = video's intrinsic ~150px) so the
   media paints at native size at the top of the 4:3 container
   and the dark `lpk-story-section__media--video` background fills
   the rest as a black bar.

   The server-side filter in lpk_unwrap_story_media() now strips
   these wrappers for newly-rendered HTML. This CSS is the belt-
   and-suspenders fallback for any HTML already cached by WP-Rocket
   or Cloudflare before the server fix took effect: `display:
   contents` removes the <p> from the box tree so the <video> /
   <img> becomes an effective direct child of the media div, and
   `height: 100%` resolves correctly against the 4:3 container.
   Safe on all evergreen browsers (Chrome 65+, FF 37+, Safari 11.1+). */
.lpk-story-section__media > p {
	margin: 0;
	padding: 0;
	display: contents;
}

/* === Section column-width fix (2026-05-23) ==================
   The base .lpk-story-section in theme-overrides.css uses asymmetric
   grid columns: `grid-template-columns: 1.1fr 1fr`. The --alt variant
   reorders cells with CSS `order`, so:
     - Normal section: media in col 1 (1.1fr = ~584px at 1180w)
     - --alt   section: media in col 2 (1fr  = ~531px at 1180w)
   That's a real 10% width difference (and ~10% height difference via
   aspect-ratio: 4/3) — alt-variant media looks smaller than normal-
   variant media on the SAME PDP. Not enterprise-grade.

   Fix: equal-split (1fr 1fr) so the media is the same width regardless
   of variant. Loaded AFTER theme-overrides.css so source order wins
   without !important. */
@media (min-width: 900px) {
	.lpk-story-section {
		grid-template-columns: 1fr 1fr;
	}
}