/**
 * Variant CSS: cta-banner--ticket-coupon
 *
 * Call-to-action as a voucher: an accent-tinted ticket split by a dashed
 * perforation (with punched-hole notches) into an offer side — kicker, headline,
 * one line — and a tear-off action stub holding the buttons. The recognisable
 * coupon shape sets it apart from the full-width and boxed banners. Text stays
 * --ink (polarity-aware) on the tinted surface; kicker, em and the primary
 * button take --accent. A local `--ticket-bg` is used for BOTH the section and
 * the notch fills so the punched holes always match the surface behind the
 * ticket, in any theme. The perforation turns horizontal on mobile. Part of the
 * `cta-banner` role.
 */

body.aibt-universal .universal-cta-banner--ticket-coupon {
	--ticket-bg: var(--bg-main);
	background: var(--ticket-bg);
	padding-block: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1));
}

/* The ticket card. */
body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__ticket {
	position: relative;
	gap: 0 !important;
	align-items: stretch !important;
	border-radius: clamp(16px, 2vw, 22px);
	background: color-mix(in srgb, var(--accent) 9%, var(--ticket-bg));
	border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
	box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.42);
}

/* Offer side. */
body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__main {
	flex: 1 1 auto !important;
	min-width: 0;
	padding: clamp(1.8rem, 4vw, 3rem);
}

body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__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-cta-banner--ticket-coupon .universal-cta-banner__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--ink) !important;
	opacity: 0.76;
	max-width: 44ch;
	margin: 0 !important;
}

/* Tear-off action stub + vertical perforation. */
body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__stub {
	position: relative;
	flex: 0 0 auto !important;
	width: clamp(210px, 30%, 270px);
	padding: clamp(1.6rem, 3vw, 2.2rem);
	border-left: 2px dashed color-mix(in srgb, var(--accent) 42%, transparent);
}

/* Punched holes at the ends of the perforation. */
body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__stub::before,
body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__stub::after {
	content: "";
	position: absolute;
	left: -1px;
	z-index: 2;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ticket-bg);
}

body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__stub::before {
	top: 0;
	transform: translate(-50%, -50%);
}

body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__stub::after {
	bottom: 0;
	transform: translate(-50%, 50%);
}

/* Buttons fill the stub, stacked. */
body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__stub .wp-block-buttons {
	width: 100%;
	gap: 0.7rem !important;
}

body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta {
	width: 100%;
}

body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	padding: 0.72rem 1.2rem !important;
	border-radius: var(--decor-radius-pill, 999px) !important;
	transition: background var(--duration-fast, 0.18s) var(--ease-default, ease),
		transform var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta--primary .wp-block-button__link {
	background: var(--cta-bg-primary, var(--accent)) !important;
	color: var(--cta-text-primary, #ffffff) !important;
	border: 1px solid var(--cta-bg-primary, var(--accent)) !important;
}

body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta--primary .wp-block-button__link:hover,
body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta--primary .wp-block-button__link:focus-visible {
	background: var(--accent-hover, var(--accent)) !important;
	transform: translateY(-1px);
}

body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta--ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--accent) !important;
	border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important;
}

body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta--ghost .wp-block-button__link:hover,
body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta--ghost .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

/* Keyboard focus ring — accent ring on the ticket's tinted surface. */
body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* Mobile: stack offer over stub; perforation runs horizontally. */
@media (max-width: 700px) {
	body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__ticket {
		flex-direction: column !important;
	}
	body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__stub {
		width: auto !important;
		border-left: 0;
		border-top: 2px dashed color-mix(in srgb, var(--accent) 42%, transparent);
	}
	body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__stub::before {
		top: 0;
		left: 0;
		transform: translate(-50%, -50%);
	}
	body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__stub::after {
		top: 0;
		bottom: auto;
		left: auto;
		right: 0;
		transform: translate(50%, -50%);
	}
	body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__stub .wp-block-buttons {
		flex-direction: row !important;
		flex-wrap: wrap;
	}
	body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta {
		flex: 1 1 160px;
		width: auto;
	}
}

/* Small mobile: drop kicker tracking so the uppercase eyebrow never forces overflow (A5). */
@media (max-width: 640px) {
	body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__kicker {
		letter-spacing: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta .wp-block-button__link {
		transition: none;
	}
	body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta--primary .wp-block-button__link:hover,
	body.aibt-universal .universal-cta-banner--ticket-coupon .universal-cta-banner__cta--primary .wp-block-button__link:focus-visible {
		transform: none;
	}
}