/**
 * Variant CSS: hero--big-type-thin-photo-strip
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: TYPE-DOMINANT hero.
 *   COPY  - a kicker + a VERY large 2-line display H1 + a short deck + ONE
 *           primary CTA sit (left-aligned, editorial) on the page --background.
 *           The oversized headline is the focal point of the whole section.
 *   STRIP - a THIN cinematic photo ribbon runs across the bottom: full content
 *           width but a SHORT fixed height (clamp 120-220px) with object-fit
 *           cover, so it reads as a visual accent / foundation, never as the
 *           hero subject. Real <img> so the recipe pipeline can swap its src per
 *           industry (a CSS background can't be overridden).
 *   Mobile - type scales down (clamp stays readable at 375px via overflow-wrap),
 *            the ribbon gets a touch shorter, and the CTA goes full-width.
 *
 * Distinct from hero--headline-top-photo-band-bottom: there a TALL 21:9 letterbox
 * band is the focal visual and a CTA rides its edge; HERE the photo is only a
 * slim accent ribbon and the TYPOGRAPHY dominates (no CTA on the photo).
 *
 * AA strategy: all copy sits on --background and uses --text-primary /
 * --text-secondary / --accent (theme-audited), so contrast is the theme's job,
 * never hardcoded (KI-020: we never use --bg-main as a foreground colour). The
 * CTA is a SOLID filled button on the audited --cta-bg-primary / --cta-text-primary
 * pair, self-contained AA regardless of the theme. The thin strip carries NO
 * text, so the photo pixels never need to clear any contrast ratio.
 *
 * Centering note (A8/A9): the copy column is LEFT-aligned (align-items:flex-start,
 * no has-text-align-center), so the "centered child of a full-width constrained
 * section needs margin-inline:auto" rule does not apply here - left alignment is
 * the intended editorial look.
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--big-type-thin-photo-strip
 * because the theme loads ALL variant CSS globally (role-level selectors leak).
 * Only @media / @keyframes are left unscoped.
 *
 * @package AI_Base_Theme
 * @since 2026-06-11 (Path B Variants Library)
 *
 * Default photo: photo-1481833761820-0509d3217039 - a warm, low-lit bar /
 * restaurant interior seen through a street window with "RELAX" lettering and
 * bokeh evening lighting. Verified subject by reading the JPEG 2026-06-11. A
 * wide, cinematic lifestyle frame that crops cleanly to a slim landscape ribbon
 * and suits hospitality / lifestyle / agency / premium brand heroes.
 * Pool (all landscape, slim-crop friendly):
 *   photo-1486406146926-c627a92ad1ab - glass skyscrapers looking up (corporate)
 *   photo-1469474968028-56623f02e42e - misty mountain panorama at golden hour
 *   photo-1517836357463-d25dfeac3438 - gym deadlift, dark moody floor (fitness)
 *   photo-1521017432531-fbd92d768814 - industrial-style cafe interior, daylight
 */

/* === Section shell ========================================================
   Neutralize the default section padding-inline (inner blocks own their
   gutters). Generous editorial top so the big type breathes; NO bottom padding
   so the slim ribbon closes the section on a clean line. */
body.aibt-universal .universal-hero--big-type-thin-photo-strip {
	position: relative;
	background: var(--background, #fff);
	color: var(--text-primary, #111);
	overflow: hidden;
	padding-block: clamp(var(--space-2xl), 13vh, var(--space-3xl)) 0 !important;
	padding-inline: 0 !important;
}

/* === The typographic block (the star) ===================================== */
body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__copy {
	width: 100%;
	max-width: var(--max-wide, 1280px);
	margin-inline: auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	/* Breathing room before the slim ribbon drops in at the bottom. */
	margin-bottom: clamp(var(--space-2xl), 9vh, var(--space-3xl));
}

/* Kicker - small accent label with a leading rule (editorial signature). */
body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--accent, currentColor) !important;
	margin: 0 0 var(--space-lg) 0 !important;
	padding-left: calc(var(--space-lg) + var(--space-2xs));
	position: relative;
	line-height: 1;
}

body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--space-lg);
	height: 2px;
	background: var(--accent, currentColor);
	transform: translateY(-50%);
}

/* Headline - VERY large display, the focal point. font-size / line-height /
   tracking come from the block inline style.typography; this sets family +
   colour + measure + safe wrapping so big PL words never overflow at 375px. */
body.aibt-universal .universal-hero--big-type-thin-photo-strip h1.universal-hero__headline,
body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary, #111) !important;
	margin: 0 0 var(--space-lg) 0 !important;
	max-width: 15ch;
	text-wrap: balance;
	/* Long Polish words must wrap, not push a horizontal scrollbar on mobile. */
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent, currentColor));
	font-weight: inherit;
}

body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-normal) !important;
	color: var(--text-secondary, #555) !important;
	margin: 0 0 clamp(var(--space-lg), 4vh, var(--space-xl)) 0 !important;
	max-width: 52ch;
}

/* === ONE primary CTA - solid fill = self-contained AA ===================== */
body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__actions {
	margin: 0;
}

body.aibt-universal .universal-hero--big-type-thin-photo-strip .wp-block-button.universal-hero__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base);
	letter-spacing: var(--tracking-wide);
	padding: 1.15rem 2.6rem;
	color: var(--cta-text-primary, #fff);
	background: var(--cta-bg-primary, var(--text-primary, #111));
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, var(--cta-bg-primary, var(--text-primary, #111)));
	border-radius: var(--decor-radius, 0);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	box-shadow: var(--decor-shadow, none);
	transition: background var(--duration-fast, 240ms) var(--ease-snappy, ease),
		border-color var(--duration-fast, 240ms) var(--ease-snappy, ease),
		transform var(--duration-fast, 240ms) var(--ease-snappy, ease);
}

body.aibt-universal .universal-hero--big-type-thin-photo-strip .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent, currentColor));
	border-color: var(--accent-hover, var(--accent, currentColor));
	color: var(--on-accent, #fff);
	transform: translateY(-2px);
}

body.aibt-universal .universal-hero--big-type-thin-photo-strip .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent, currentColor);
	outline-offset: var(--focus-offset, 4px);
}

/* === The thin cinematic photo strip ======================================
   Full content width but a SHORT fixed height - the signature accent ribbon.
   object-fit:cover keeps any landscape photo composed inside the slim frame. */
body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__strip {
	width: 100%;
	max-width: var(--max-wide, 1280px);
	margin-inline: auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
}

body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__photo {
	position: relative;
	margin: 0;
	width: 100%;
	border-radius: var(--decor-radius-photo, var(--decor-radius, 0));
	overflow: hidden;
	box-shadow: var(--decor-shadow, none);
	/* Subtle reveal so the ribbon "lands" under the big type. */
	animation: aiss-hero-strip-rise var(--duration-slow, 900ms) var(--ease-expressive, ease) both;
}

body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__photo img {
	display: block;
	width: 100%;
	/* SLIM ribbon: a short fixed band, NOT an aspect-ratio focal visual. */
	height: clamp(120px, 18vh, 220px);
	object-fit: cover;
	object-position: center;
}

/* Hairline edge on the ribbon so it reads as a deliberate foundation rule even
   on very light themes (token-tinted, never a hardcoded surface colour). */
body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid var(--hairline, color-mix(in srgb, var(--ink, currentColor) 12%, transparent));
	pointer-events: none;
}

/* === Tablet =============================================================== */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--big-type-thin-photo-strip {
		padding-block: clamp(var(--space-xl), 9vh, var(--space-2xl)) 0 !important;
	}

	body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__copy {
		margin-bottom: clamp(var(--space-xl), 6vh, var(--space-2xl));
	}

	body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__headline {
		font-size: clamp(2.6rem, 9vw, 4.5rem) !important;
		max-width: 17ch;
	}

	body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__photo img {
		height: clamp(110px, 16vh, 180px);
	}
}

/* === Mobile ===============================================================
   Keep the big type readable at 375px (no overflow), shorten the ribbon, and
   let the single CTA go full-width for an easy tap target. */
@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__headline {
		font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
		letter-spacing: -0.025em !important;
		line-height: 1.02 !important;
		max-width: 100%;
	}

	body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__deck {
		font-size: var(--text-base) !important;
	}

	/* Full-width CTA for thumb reach. */
	body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__actions {
		width: 100%;
	}

	body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__actions .wp-block-button,
	body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}

	body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__photo img {
		/* Slightly shorter ribbon on phones so it stays an accent, not a block. */
		height: clamp(96px, 22vw, 150px);
	}
}

/* === Motion =============================================================== */
@keyframes aiss-hero-strip-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--big-type-thin-photo-strip .universal-hero__photo {
		animation: none;
	}

	body.aibt-universal .universal-hero--big-type-thin-photo-strip .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--big-type-thin-photo-strip .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper - block editor doesn't run the reveal animation; pin the
   ribbon visible so it isn't stuck transparent in the locked editor canvas. == */
.editor-styles-wrapper .universal-hero--big-type-thin-photo-strip .universal-hero__photo {
	animation: none;
}