/**
 * Variant CSS: hero--arch-window-photo-center
 * Layer 2 — Variants Library (Path B Recipes architecture).
 *
 * Concept: premium "arch window" hero.
 *   TOP    — centered kicker + very large display H1 on the page surface.
 *   MIDDLE — ONE dominant LANDSCAPE photo (16/10) clipped into a wide ARCH
 *            WINDOW silhouette: a rounded cathedral top (border-radius
 *            50% 50% 0 0 / 18% 18% 0 0) with straight sides and a flat base,
 *            overflow hidden. The arched crop IS the signature premium device
 *            (echoes the arched gallery language, but as one hero photo).
 *   BOTTOM — deck + ONE primary CTA, centered under the window.
 *
 * Distinct from hero--wide-photo-rounded-soft-elevation (evenly rounded
 * floating rectangle with elevation shadow, CTA above the photo) and from
 * hero--headline-top-photo-band-bottom (full-bleed 21:9 letterbox band with
 * the CTA riding the band edge) — here the photo is a contained cathedral
 * arch and the deck + CTA step BELOW the window.
 *
 * KI-020: theme-surface text uses --ink / --text-secondary (never --bg-main
 * as foreground); CTA on accent fill uses --cta-text-primary / --on-accent
 * (NOT --on-dark — must stay legible on light accents like lime / butter).
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--arch-window-photo-center
 * because the theme loads ALL variant CSS globally (role selectors leak).
 *
 * Default photo: photo-1600585154340-be6161a56a0c — bright, calm modern
 * interior in a neutral palette (boutique hotel / interiors / premium brand);
 * the upper part of the frame survives the arched crop cleanly.
 *
 * @package AI_Base_Theme
 * @since 2026-06-11 (Path B Variants Library - arch window hero)
 */

/* === Section shell — page surface, generous editorial breathing room ====== */
body.aibt-universal .universal-hero--arch-window-photo-center {
	padding: clamp(var(--space-8, 64px), 9vh, var(--space-10, 128px)) clamp(var(--space-5, 24px), 6vw, var(--space-8, 64px));
	background: var(--bg-main, var(--background, #fff));
	text-align: center;
	overflow: hidden;
}

/* === TOP: intro (kicker + H1), centered =====================================
   Centered direct child of a constrained alignfull section → horizontal
   margins stay AUTO (A8/A9 — never zero them out). */
body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__intro {
	margin: 0 auto clamp(var(--space-6, 32px), 5vh, var(--space-8, 64px));
	max-width: 56rem;
}

/* Kicker — small caps eyebrow above the headline, accent-tinted. */
body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__kicker {
	display: block;
	font-family: var(--font-body) !important;
	font-size: var(--text-xs, 12px) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.2em) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 auto var(--space-4, 16px) !important;
}

/* Headline — display face, polarity-aware ink (light + dark themes). */
body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--ink, var(--text-primary, #1a1a1a)) !important;
	margin: 0 auto !important;
	max-width: 18ch;
	text-wrap: balance;
}
body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__headline em {
	font-style: italic;
	color: var(--accent);
	font-weight: inherit;
}

/* === MIDDLE — signature: the ARCH WINDOW ====================================
   A 16/10 frame whose top is a cathedral arch: huge horizontal radii (50%)
   with shallow vertical radii (18%) draw a wide, soft arch; the base stays
   flat. overflow:hidden clips the photo into the window. */
body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__arch {
	width: 100%;
	margin-inline: auto;
	border-radius: 50% 50% 0 0 / 18% 18% 0 0;
	overflow: hidden;
	/* New stacking context so the zooming photo never escapes the arched clip. */
	isolation: isolate;
}

body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__photo {
	margin: 0 !important;
	width: 100%;
	/* Inherit the arch silhouette so Safari clips the zooming img correctly. */
	border-radius: inherit;
	overflow: hidden;
}

body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
	/* Subtle zoom inside the arch on hover — under 250ms. */
	transition: transform var(--duration-fast, 150ms) var(--ease-standard, ease);
}

body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__arch:hover .universal-hero__photo img {
	transform: scale(1.03);
}

/* === BOTTOM: deck + primary CTA, centered under the window ================= */
body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__outro {
	margin: clamp(var(--space-6, 32px), 5vh, var(--space-8, 64px)) auto 0;
	max-width: 48rem;
}

/* Deck — supporting line, secondary ink, constrained measure. */
body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg, 20px) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--text-secondary, color-mix(in srgb, var(--ink, #1a1a1a) 72%, transparent)) !important;
	max-width: 52ch;
	margin: 0 auto clamp(var(--space-5, 24px), 4vh, var(--space-6, 32px)) !important;
}

/* Actions row — single centered primary CTA. */
body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__actions {
	margin: 0 auto !important;
	justify-content: center;
}

/* Primary CTA — accent fill; text uses --cta-text-primary / --on-accent
   (NOT --on-dark) so it stays legible on light accents (lime/butter/peach). */
body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base, 16px);
	letter-spacing: var(--tracking-wide, 0.02em);
	padding: 1rem 2.5rem;
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cta-text-primary, var(--on-accent, #fff));
	background: var(--cta-bg-primary, var(--accent));
	border: 1px solid var(--cta-bg-primary, var(--accent));
	border-radius: var(--decor-radius, 0);
	transition: background var(--duration-fast, 150ms) var(--ease-standard, ease), border-color var(--duration-fast, 150ms) var(--ease-standard, ease), transform var(--duration-fast, 150ms) var(--ease-standard, ease);
}

body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__cta .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--cta-bg-primary, var(--accent)) 86%, #000);
	border-color: color-mix(in srgb, var(--cta-bg-primary, var(--accent)) 86%, #000);
	transform: translateY(-2px);
}

/* Focus-visible — a11y ring on the CTA. */
body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: var(--focus-offset, 4px);
}

/* === Tablet ================================================================ */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__deck {
		font-size: var(--text-base, 16px) !important;
	}
}

/* === Mobile — arch curve softens, CTA full-width, no 375px overflow ======== */
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--arch-window-photo-center {
		padding: clamp(var(--space-7, 48px), 8vh, var(--space-8, 64px)) var(--space-4, 16px);
	}

	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__headline {
		font-size: clamp(2.1rem, 9vw, 3rem) !important;
		max-width: 100%;
	}

	/* Drop the widest uppercase tracking on the smallest screens. */
	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__kicker {
		letter-spacing: var(--tracking-wide, 0.12em) !important;
	}

	/* Softer, shallower arch — the full cathedral curve eats too much of the
	   photo on a narrow frame. */
	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__arch {
		border-radius: 50% 50% 0 0 / 10% 10% 0 0;
	}

	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__deck {
		font-size: var(--text-base, 16px) !important;
	}

	/* CTA becomes a comfortable full-width tap target. */
	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__cta,
	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__cta .wp-block-button__link {
		width: 100%;
	}
}

/* === Reduced motion ======================================================== */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__photo img,
	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__arch:hover .universal-hero__photo img {
		transform: none;
	}

	body.aibt-universal .universal-hero--arch-window-photo-center .universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}