/**
 * Variant CSS: before-after--quad-vertical-split-tiles
 * Layer 2 — Path B before-after role (2026-06-10).
 * A 2x2 grid of framed tiles — exactly FOUR transformations. Each tile =
 * a numbered badge + title + a VERTICAL before/after stack: the "Przed" photo
 * sits on top, the "Po" photo directly below, the two halves meeting on a
 * horizontal seam whose labels (pills) straddle the join.
 * The vertical (top/bottom) per-tile split is the distinguishing silhouette
 * vs quad-grid-cards (HORIZONTAL left|right split in one landscape frame).
 */

body.aibt-universal .universal-before-after--quad-vertical-split-tiles {
	background: var(--background-alt);
	color: var(--text-primary);
}

/* Intro — centred block, A8-safe. */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__intro {
	margin-bottom: var(--space-xl);
	text-align: center;
}

body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__intro > * {
	margin-inline: auto !important;
}

body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__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-sm) 0 !important;
}

body.aibt-universal .universal-before-after--quad-vertical-split-tiles h2.universal-before-after__headline,
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* Quad — native grid block; force a robust 2-col track so the four tiles
   always read as a 2x2 matrix (minmax(0,1fr) prevents image-driven overflow). */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__quad {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: var(--space-lg) !important;
	align-items: stretch;
}

/* Tile — bordered container holding the head row + vertical split stack. */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--space-sm) !important;
	background: var(--background, #fff);
	border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
	border-radius: var(--decor-radius);
	transition: transform 220ms var(--ease-default, ease),
		box-shadow 220ms var(--ease-default, ease);
}

/* Lift the tile on hover — reads as a tappable portfolio entry
   (reduced-motion is handled globally by the skeleton). */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--decor-shadow-soft);
}

/* Head row — numbered badge + title on one baseline. */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__head {
	gap: var(--space-sm) !important;
	margin-bottom: var(--space-sm);
}

body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__num {
	flex: 0 0 auto;
	font-family: var(--font-display) !important;
	font-size: var(--text-sm) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	color: var(--on-accent, #fff) !important;
	background: var(--accent);
	border-radius: var(--decor-radius);
	padding: 0.4em 0.7em !important;
	margin: 0 !important;
}

body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__card-title {
	font-family: var(--font-display) !important;
	font-size: var(--text-lg) !important;
	font-weight: 600 !important;
	line-height: var(--leading-snug, 1.2) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
	min-width: 0;
}

/* Split — the two halves stack VERTICALLY (default block flow): before on top,
   after below, meeting on a horizontal seam. gap:0 so the photos kiss; the
   seam is painted as a divider line. */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__split {
	position: relative;
	border-radius: var(--decor-radius);
	overflow: hidden;
}

/* Horizontal centre seam between the top and bottom halves. */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__split::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: var(--accent);
	z-index: 2;
}

body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__half {
	position: relative;
	min-width: 0;
	overflow: hidden;
}

body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__img {
	margin: 0 !important;
	display: block;
}

body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__img img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	filter: var(--photo-filter, none);
	transition: transform 240ms var(--ease-default, ease);
}

/* Gentle paired zoom on the tile's photos on hover — tactile result cue. */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__card:hover .universal-before-after__img img {
	transform: scale(1.04);
}

/* Seam labels — pills that straddle the horizontal join. "Przed" sits just
   above the seam (bottom-pinned in the top half), "Po" just below it
   (top-pinned in the bottom half), both centred on the seam line.
   Accent pill → text MUST be --on-accent so light-accent themes stay legible. */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__tag {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	padding: 0.3em 0.85em !important;
	border-radius: var(--decor-radius);
}

/* "Przed" — neutral chip, pinned to the bottom of the TOP half (above seam). */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__tag--before {
	bottom: var(--space-xs);
	background: var(--background-dark, #141414);
	color: var(--on-dark, #fff) !important;
}

/* "Po" — accent chip to signal the win, pinned to the top of the BOTTOM half. */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__tag--after {
	top: var(--space-xs);
	background: var(--accent);
	color: var(--on-accent, #fff) !important;
}

/* Phone — collapse the 2x2 to a single column; keep the vertical split.
   Also cap wide tracking (A5) so labels/kicker don't overrun at 375px. */
@media (max-width: 700px) {
	body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__quad {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: var(--space-md) !important;
	}
}

@media (max-width: 640px) {
	body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__kicker,
	body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__tag {
		letter-spacing: 0 !important;
	}
}

/* Keyboard affordance — tile focus-within mirrors the hover lift; image focus-visible. */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__card:focus-within {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

body.aibt-universal .universal-before-after--quad-vertical-split-tiles a:focus-visible,
body.aibt-universal .universal-before-after--quad-vertical-split-tiles .universal-before-after__img img:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* A8/A9 left-shift fix (2026-06-10): centered intro children (kicker/headline) were
   max-width-capped by WP constrained layout but had horizontal margin 0, pinning them
   to the left. Force margin-inline:auto. The section class is doubled to lift
   specificity to (0,4,1) so this beats element-tag-qualified rules like
   h2.__headline (0,3,2); harmless on already-centered elements (auto margins
   compute to 0). Only left/right are overridden, top/bottom margins are preserved. */
body.aibt-universal .universal-before-after--quad-vertical-split-tiles.universal-before-after--quad-vertical-split-tiles .universal-before-after__kicker,
body.aibt-universal .universal-before-after--quad-vertical-split-tiles.universal-before-after--quad-vertical-split-tiles .universal-before-after__headline { margin-inline: auto !important; }