/**
 * Variant CSS: hero--asymmetric-offset-photo
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: art-directed, grid-breaking asymmetry. A very large display H1 spans
 * the upper-left and intentionally breaks the grid (kicker above, deck + ONE CTA
 * lower-left). A large photo is offset to the lower-right and OVERLAPS a solid
 * --accent color-block that peeks out behind its lower-left corner - depth via
 * layering + an elevated shadow. "Designed, not templated."
 *
 * Theme safety: text NEVER sits on the accent. The accent block is a purely
 * decorative pseudo-element behind the photo; all copy stays on --background
 * (upper-left), so contrast is AA in every theme regardless of accent value
 * (ink on white-minimal, lime on tech-dark, brass/champagne/yellow on dark, etc.).
 * The peeking sliver always reads because --accent contrasts --background by
 * definition. Hardcoded rgba is used ONLY for the photo scrim.
 *
 * Mobile (≤640px): the overlap dissolves into a clean vertical stack
 * (kicker → H1 → photo+accent → deck → CTA) - the photo never clips/overflows.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-hero--asymmetric-offset-photo
 * because the theme loads ALL variant CSS globally (role-level = leak, fatal).
 *
 * @package AI_Base_Theme
 * @since 2026-05-29 (Path B Variants Library)
 */

/* === Section shell ========================================================
   Generous editorial padding on the page background. overflow:clip keeps the
   offset photo + accent block from spilling past the section edge while still
   allowing the grid-break translate inside. */
body.aibt-universal .universal-hero--asymmetric-offset-photo {
	position: relative;
	overflow: clip;
	background: var(--background);
	padding-block: calc(clamp(var(--space-2xl), 11vh, var(--space-3xl)) * var(--density, 1)) !important;
	padding-inline: clamp(var(--space-md), 6vw, var(--space-2xl)) !important;
}

/* Hairline accent tick at the top-left margin - a small editorial signature
   that ties the masthead to the accent block below. UI graphic, not text. */
body.aibt-universal .universal-hero--asymmetric-offset-photo::before {
	content: "";
	position: absolute;
	top: 0;
	left: clamp(var(--space-md), 6vw, var(--space-2xl));
	width: clamp(40px, 7vw, 104px);
	height: 4px;
	background: var(--accent);
	z-index: 4;
}

/* === Asymmetric grid scaffold =============================================
   12 fluid columns, two rows. The text content claims the wide upper-left and
   overruns into the lower-left; the media claims the lower-right and pulls up
   into the text band so the photo + accent break the baseline grid. */
body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__grid {
	position: relative;
	max-width: var(--max-ultra, 1400px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto auto;
	column-gap: clamp(var(--space-md), 3vw, var(--space-xl));
	align-items: start;
}

/* Text: spans a wide majority (1/8) of the top row so the huge display type has
   room to wrap by WORD, never mid-character. Sits above the media (z-index). */
body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__content {
	grid-column: 1 / 8;
	grid-row: 1 / 2;
	position: relative;
	z-index: 3;
	padding-block: clamp(var(--space-md), 4vh, var(--space-xl)) 0;
	/* entrance: copy rises + fades, staggered before the photo settles */
	opacity: 0;
	transform: translateY(1.5rem);
	animation: aoffset-rise var(--duration-slow, 900ms) var(--ease-snappy, ease) 80ms forwards;
}

/* Media: lower-right, deliberately overlapping the grid. Starts at row 1 (col 7)
   and pulls UP + RIGHT so it reads as a grid-break, not a tidy column. The
   accent color-block lives on ::before, offset down-left BEHIND the photo. */
body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__media {
	grid-column: 7 / 13;
	grid-row: 1 / 3;
	position: relative;
	align-self: end;
	margin: 0;
	margin-top: clamp(2.5rem, 7vh, 6rem);
	z-index: 2;
	/* entrance: photo settles up after the copy */
	opacity: 0;
	transform: translateY(2rem);
	animation: aoffset-rise var(--duration-slow, 900ms) var(--ease-snappy, ease) 260ms forwards;
}

/* The --accent color-block. Offset down + left so it peeks out behind the
   photo's lower-left corner (depth). Sized larger than the offset so a clean
   band of pure accent is always visible. Never carries text → AA-safe. */
body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__media::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: clamp(-1.25rem, -2.5vw, -2.75rem);
	right: clamp(1.5rem, 3vw, 3rem);
	bottom: clamp(-1.25rem, -2.5vw, -2.75rem);
	top: clamp(2rem, 5vw, 4rem);
	background: var(--accent);
	border-radius: var(--decor-radius-photo, 0);
}

/* Photo: large dominant crop, elevated above the accent block with a soft
   shadow for layered depth. Real <img> so the recipe pipeline swaps src. */
body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__photo {
	margin: 0;
	position: relative;
	z-index: 1;
	box-shadow: var(--decor-shadow-elevated, 0 24px 60px rgba(0, 0, 0, 0.18));
	border-radius: var(--decor-radius-photo, 0);
	overflow: hidden;
}

body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: inherit;
}

/* Subtle scrim along the photo's lower edge - keeps a busy art-directed image
   from clashing with the accent band peeking beneath. Photo-only → rgba is OK. */
body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.16) 100%);
}

/* === Type ================================================================= */
body.aibt-universal .universal-hero--asymmetric-offset-photo .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) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-hero--asymmetric-offset-photo h1.universal-hero__headline,
body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-lg) 0 !important;
	/* Wide enough to break by word at the huge display size; overruns the grid
	   column on purpose so the masthead pushes past the media's left edge. */
	max-width: 14ch;
	text-wrap: balance;
	/* font-size + line-height inherited from the block inline style.typography */
}

body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, 600);
}

body.aibt-universal .universal-hero--asymmetric-offset-photo .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) !important;
	max-width: 36ch;
	margin: 0 0 var(--space-lg) 0 !important;
}

/* === CTA - solid token button (AA on every theme), accent on hover ======== */
body.aibt-universal .universal-hero--asymmetric-offset-photo .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.05rem 2.4rem;
	color: var(--cta-text-primary, #fff);
	background: var(--cta-bg-primary, var(--text-primary));
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, var(--text-primary));
	border-radius: var(--decor-radius, 0);
	transition: background var(--duration-fast, 240ms) var(--ease-snappy, ease),
		border-color var(--duration-fast, 240ms) var(--ease-snappy, ease),
		color var(--duration-fast, 240ms) var(--ease-snappy, ease),
		transform var(--duration-fast, 240ms) var(--ease-snappy, ease);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
}

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

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

/* === Entrance keyframes =================================================== */
@keyframes aoffset-rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* === Tablet (≤959px): ease the overlap so the type isn't crushed ========== */
@media (max-width: 959px) {
	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__content {
		grid-column: 1 / 7;
		max-width: none;
	}

	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__media {
		grid-column: 6 / 13;
		margin-top: clamp(2rem, 6vh, 4.5rem);
	}

	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__headline {
		max-width: 12ch;
		/* 8.5vw ≈ 65px at 768px is too big for the offset layout's ~286px text column,
		   so an 8-char cluster word ("Nagrobki", no syllable break) overflowed. Cap the
		   tablet size to keep it on one line. 2026-06-09 tablet display-correctness fix. */
		font-size: clamp(2.6rem, 7vw, 3.7rem) !important;
	}

	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__photo img {
		aspect-ratio: 1 / 1;
	}
}

/* === Mobile (≤640px): asymmetry collapses to a clean vertical stack =======
   Source order is content-then-media, which already gives the right stack:
   kicker → H1 → deck → CTA, then photo + accent below. No clip/overflow. */
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--asymmetric-offset-photo {
		padding-block: calc(clamp(var(--space-xl), 9vh, var(--space-2xl)) * var(--density, 1)) !important;
	}

	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__grid {
		display: flex;
		flex-direction: column;
		gap: clamp(var(--space-lg), 7vw, var(--space-xl));
	}

	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__content {
		padding-block: var(--space-md) 0;
	}

	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__headline {
		font-size: clamp(2.6rem, 13vw, 4rem) !important;
		max-width: 15ch;
	}

	/* Media: full width, modest accent peek to the lower-left only - never the
	   right edge (would clip against the section padding). */
	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__media {
		grid-column: auto;
		grid-row: auto;
		width: 100%;
		margin-top: 0;
		align-self: stretch;
	}

	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__media::before {
		left: clamp(-0.75rem, -3vw, -1.25rem);
		right: auto;
		width: clamp(45%, 55vw, 62%);
		bottom: clamp(-0.75rem, -3vw, -1.25rem);
		top: clamp(1.25rem, 6vw, 2.25rem);
	}

	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__photo img {
		aspect-ratio: 4 / 3;
	}

	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-hero--asymmetric-offset-photo .wp-block-button.universal-hero__cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* === Reduced motion + editor: show final state, no entrance =============== */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__content,
	body.aibt-universal .universal-hero--asymmetric-offset-photo .universal-hero__media {
		animation: none;
		opacity: 1;
		transform: none;
	}

	body.aibt-universal .universal-hero--asymmetric-offset-photo .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--asymmetric-offset-photo .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* Block editor canvas doesn't run the entrance JS-less reveal - force the
   final state so the hero isn't stuck invisible inside wp-admin. */
.editor-styles-wrapper .universal-hero--asymmetric-offset-photo .universal-hero__content,
.editor-styles-wrapper .universal-hero--asymmetric-offset-photo .universal-hero__media {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}