/* ============================================================================
 * LobbyBrand — Real Product Proof layer (Phase 1+2 staging)
 *
 * Namespaced `.lb-real-proof*`. Matches the existing premium brand rhythm
 * by reusing the architectural-visual palette (stone-100 + thin border +
 * mono caption badge). URL-gated: loaded only on the four target pages
 * via `wp_enqueue_scripts` in `includes/real-product-proof.php`.
 *
 * TASK-LOBBYBRAND-PRODUCT-PROOF-LAYOUT-MOTION-UPGRADE-002: the
 * product-proof composition was upgraded to an explicit
 *   ROW 1: large lead image
 *   ROW 2: side-by-side supporting pair
 * with deliberate vertical rhythm (lead ≈ 580px at 1440 desktop,
 * supporting ≈ 360px desktop, mobile collapses to single column).
 *
 * This file is intentionally NOT imported from style.css. A live WP
 * environment that does not enqueue this stylesheet renders identically
 * to today.
 * ========================================================================== */

.lb-real-proof {
	position: relative;
	display: block;
	width: min(100%, var(--lb-wide));
	margin: clamp(40px, 6vw, 80px) auto;
	background: var(--lb-stone-100);
	border: 1px solid var(--lb-border);
	overflow: hidden;
	color: var(--lb-ink-950);
	will-change: transform, opacity;
}

.lb-real-proof img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	background: var(--lb-stone-100);
}

/* ---------- cover variants ---------- */

.lb-real-proof--wide img {
	aspect-ratio: 21 / 9;
}
.lb-real-proof--standard img {
	aspect-ratio: 4 / 3;
}
.lb-real-proof--stacked {
	margin: clamp(28px, 4vw, 48px) auto;
}
.lb-real-proof--stacked img {
	aspect-ratio: 16 / 9;
}

/* ---------- label (used on Reception R1 row A / B / C) ---------- */

.lb-real-proof__label {
	position: absolute;
	left: 18px;
	top: 14px;
	font-family: var(--lb-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lb-ink-950);
	background: rgba(255, 255, 255, .82);
	padding: 6px 12px;
	border-radius: 999px;
	backdrop-filter: blur(4px);
	z-index: 2;
}

/* ---------- caption badge (lower-right) ---------- */

.lb-real-proof figcaption {
	position: absolute;
	right: 18px;
	bottom: 14px;
	font-family: var(--lb-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lb-ink-950);
	background: rgba(255, 255, 255, .82);
	padding: 4px 10px;
	border-radius: 999px;
	z-index: 2;
}

.lb-real-proof--labeled figcaption {
	bottom: 56px;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
	.lb-real-proof--wide img {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 720px) {
	.lb-real-proof {
		margin: clamp(28px, 5vw, 44px) auto;
	}
	.lb-real-proof--wide img,
	.lb-real-proof--stacked img,
	.lb-real-proof--standard img {
		aspect-ratio: 4 / 3;
	}
	.lb-real-proof__label {
		left: 12px;
		top: 10px;
		font-size: 10px;
		padding: 5px 10px;
	}
	.lb-real-proof figcaption {
		right: 12px;
		bottom: 10px;
		font-size: 10px;
	}
	.lb-real-proof--labeled figcaption {
		bottom: 44px;
	}
}

/* ---------- print: keep caption readable; drop the floating chips ---------- */

@media print {
	.lb-real-proof__label,
	.lb-real-proof figcaption {
		position: static;
		display: inline-block;
		margin: 8px 12px 16px;
	}
}

/* ============================================================================
 * Product-page proof composition (Polish-002 + Layout-Motion-Upgrade-002)
 *
 * Owner-spec composition:
 *   ROW 1: large lead image (full section width, 16:9 dominant)
 *   ROW 2: two supporting images in a 1:1 (or editorial 55:45) side-by-side pair
 *
 * Height calibration per Owner spec:
 *   Lead     ≈ 580px max at 1440 desktop, 16:9 (clamped 380–580)
 *   Supporting ≈ 360px max at 1440 desktop, 4:3 (clamped 280–360)
 *
 * Lives inside the locked `lb-product-detail` article via the
 * `do_shortcode_tag` filter in `includes/real-product-proof.php`.
 *
 * Motion integration: `.lb-real-proof--lead` and `.lb-real-proof--supporting`
 * both carry `data-lb-real-proof-target` so motion.js can wire stronger,
 * asymmetric reveals + subtle post-reveal parallax.
 * ========================================================================== */

.lb-product-real-proof {
	position: relative;
	width: min(100%, var(--lb-wide));
	margin: clamp(64px, 8vw, 128px) auto;
	padding: 0;
	background: transparent;
	border: none;
	display: block;
}

/* Header strip — single mono chip, no paragraphs. */
.lb-product-real-proof__head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 clamp(0px, 1vw, 12px);
	margin-bottom: clamp(20px, 2vw, 32px);
}

.lb-product-real-proof__head .lb-real-proof__label {
	position: relative;
	left: auto;
	top: auto;
	background: transparent;
	backdrop-filter: none;
	padding: 0;
	color: var(--lb-brass-600);
	border: none;
	font-family: var(--lb-mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ---------- ROW 1: lead image (dominant) ---------- */

.lb-product-real-proof .lb-real-proof--lead {
	width: 100%;
	margin: 0 0 clamp(20px, 2.4vw, 32px) 0;
	background: var(--lb-ink-950);
	border: 1px solid var(--lb-ink-900);
	position: relative;
	overflow: hidden;
}

.lb-product-real-proof .lb-real-proof--lead img {
	aspect-ratio: 16 / 9;
	min-height: clamp(360px, 38vw, 580px);
	max-height: 680px;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* The lead caption reads as a brass mono chip in the lower right of the
 * dominant image — same vocabulary as the locked architecture visual. */
.lb-product-real-proof .lb-real-proof--lead figcaption {
	right: 28px;
	bottom: 24px;
	font-size: 12px;
	padding: 8px 14px;
	background: rgba(16, 23, 29, .82);
	color: var(--lb-stone-50);
	backdrop-filter: blur(8px);
}

/* ---------- ROW 2: supporting pair (50/50 desktop, stack on mobile) ---------- */

.lb-product-real-proof__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(12px, 1.6vw, 24px);
	width: 100%;
	margin: 0;
}

.lb-product-real-proof .lb-real-proof--supporting {
	width: 100%;
	margin: 0;
	background: var(--lb-stone-100);
	border: 1px solid var(--lb-border);
	position: relative;
}

.lb-product-real-proof .lb-real-proof--supporting img {
	aspect-ratio: 4 / 3;
	min-height: clamp(240px, 22vw, 360px);
	max-height: 420px;
	object-fit: cover;
}

/* Mobile: collapse the pair into a single column so each image remains
 * wide enough to read. */
@media (max-width: 720px) {
	.lb-product-real-proof__pair {
		grid-template-columns: 1fr;
		gap: clamp(12px, 3vw, 20px);
	}
	.lb-product-real-proof .lb-real-proof--lead img,
	.lb-product-real-proof .lb-real-proof--supporting img {
		min-height: 0;
		max-height: none;
		aspect-ratio: 4 / 3;
	}
}

/* ---------- DARK VARIANT for product proof (selective Owner accent) ----------
 * The owning product template (single-lb_product.html) does NOT add this
 * class by itself; site-level code (or a per-product modifier under
 * `data-product="..."`) decides when to use it. Currently applied to
 * Premium Reception Logo Signs only via the JSON `dark_product_proof`
 * hook implemented in includes/real-product-proof.php.
 * -------------------------------------------------------------------------- */

.lb-product-real-proof--dark {
	background: var(--lb-ink-950);
	color: var(--lb-white);
	padding: clamp(64px, 8vw, 128px) clamp(24px, 4vw, 56px);
	margin-top: clamp(48px, 6vw, 96px);
	margin-bottom: clamp(48px, 6vw, 96px);
	border-top: 1px solid var(--lb-ink-800);
	border-bottom: 1px solid var(--lb-ink-800);
}

.lb-product-real-proof--dark .lb-product-real-proof__head .lb-real-proof__label {
	color: var(--lb-brass-500);
}

.lb-product-real-proof--dark .lb-real-proof--lead {
	background: var(--lb-ink-900);
	border-color: rgba(255, 255, 255, .08);
}

.lb-product-real-proof--dark .lb-real-proof--lead figcaption {
	background: rgba(0, 0, 0, .55);
	color: var(--lb-stone-50);
}

.lb-product-real-proof--dark .lb-real-proof--supporting {
	background: var(--lb-ink-900);
	border-color: rgba(255, 255, 255, .08);
}

.lb-product-real-proof--dark .lb-real-proof--supporting figcaption {
	background: rgba(0, 0, 0, .55);
	color: var(--lb-stone-50);
}

/* Anchor the locked article behind the proof section so visual rhythm
 * continues even when the proof goes dark. */
.lb-product-real-proof + section.lb-section,
.lb-product-real-proof + .lb-facts,
.lb-product-real-proof + .lb-product-hero {
	margin-top: clamp(40px, 6vw, 72px);
}