/* ── AB Banner Builder — Frontend Styles ──────────────────────────────────
   Container query units (cqw) require the .ab-banner wrapper to have
   container-type: inline-size, which is set here.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Banner container ────────────────────────────────────────────────── */
.ab-banner {
	position: relative;
	container-type: inline-size;
	overflow: hidden;
	background: #111;
	width: 100%;
	display: block;
}

/* ── Background image ─────────────────────────────────────────────────── */
.ab-banner-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Text overlay block ───────────────────────────────────────────────── */
.ab-banner-text {
	position: absolute;
	display: flex;
	flex-direction: column;
	max-width: 55%;
	box-sizing: border-box;
}

/* ── Zone positions ───────────────────────────────────────────────────── */
.ab-zone-top-left    { top: 8%; left: 5%; }
.ab-zone-top-center  { top: 8%; left: 50%; transform: translateX(-50%); }
.ab-zone-top-right   { top: 8%; right: 5%; }

.ab-zone-mid-left    { top: 50%; left: 5%; transform: translateY(-50%); }
.ab-zone-mid-center  { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ab-zone-mid-right   { top: 50%; right: 5%; transform: translateY(-50%); }

.ab-zone-bot-left    { bottom: 8%; left: 5%; }
.ab-zone-bot-center  { bottom: 8%; left: 50%; transform: translateX(-50%); }
.ab-zone-bot-right   { bottom: 8%; right: 5%; }

/* ── Panel backgrounds ────────────────────────────────────────────────── */
.ab-panel-dark-scrim {
	background: linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 100%);
	padding: 20px 32px 20px 20px;
	border-radius: 3px;
}

.ab-panel-light-scrim {
	background: linear-gradient(to right, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 100%);
	padding: 20px 32px 20px 20px;
	border-radius: 3px;
}

.ab-panel-white-card {
	background: rgba(255,255,255,.96);
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(0,0,0,.15);
	max-width: 48%;
}

.ab-panel-black-card {
	background: rgba(0,0,0,.88);
	padding: 20px;
	border-radius: 4px;
	max-width: 48%;
}

.ab-panel-none {
	padding: 8px 0;
}

/* ── Text elements ────────────────────────────────────────────────────── */
.ab-eyebrow {
	font-size: 1.4cqw;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: .4em;
	opacity: .85;
	color: var(--ab-text-color, #ffffff);
	display: block;
}

.ab-headline {
	font-size: calc(var(--ab-hl-size, 4) * 1cqw);
	font-weight: var(--ab-hl-weight, 800);
	line-height: 1.1;
	margin-bottom: .3em;
	color: var(--ab-text-color, #ffffff);
}

.ab-subhead {
	font-size: 1.8cqw;
	line-height: 1.4;
	margin-bottom: .8em;
	opacity: .9;
	color: var(--ab-text-color, #ffffff);
}

.ab-cta {
	display: inline-block;
	padding: .5em 1.2em;
	border-radius: 3px;
	font-size: 1.5cqw;
	font-weight: 700;
	text-decoration: none;
	background: var(--ab-cta-color, #c8102e);
	color: #ffffff;
	width: fit-content;
	transition: opacity .15s;
}

.ab-cta:hover {
	opacity: .88;
	color: #ffffff;
}

.ab-cta:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.5);
}

/* ── Container query: narrow/mobile ──────────────────────────────────── */
@container (max-width: 600px) {
	.ab-banner-text {
		max-width: 80%;
	}

	.ab-eyebrow  { font-size: 2.5cqw; }
	.ab-headline { font-size: calc(var(--ab-hl-size, 4) * 1.75cqw); }
	.ab-subhead  { font-size: 3.2cqw; }
	.ab-cta      { font-size: 2.6cqw; }
}