/*
 * Block: sn/cta-banner
 * Conversion banner in two styles: "green" (the loud full-width band) and
 * "navy" (the quiet panel). The choice keys are historical — they mean
 * "loud" and "quiet" and are kept so pages saved on earlier markets still
 * resolve. Reuses the shared .x4b925f13.
 *
 * THE BAND IS THE ACCENT, AND IT IS THE ONLY BLOCK ON THE SITE THAT FLOODS
 * WITH IT. Every market has had to solve the same problem differently: on the
 * light-paper skin the band was petrol and its button had to be aqua
 * (petrol-on-petrol measured 2.63:1); on the first dark skin it was acid
 * yellow with dark ink; on the light MD3 skin it was violet with white ink and
 * an inverted near-white button.
 *
 * Here the band is vermillion and EVERYTHING ON IT IS NEAR-BLACK (5.58:1) —
 * the reverse of the sibling skin, because white on this accent is 3.40:1 and
 * fails. That single inversion is the most likely thing to be got wrong by
 * anyone porting a change across from eng-asset, where the same rule correctly
 * said #FFFFFF.
 *
 * The button then inverts the other way: a near-black block carrying a warm
 * white label (18.97:1), which is the loudest, simplest object available and
 * the only way a control still reads as "the action" once its surroundings are
 * already the action colour.
 *
 * NO SOFTENED INK ON THE BAND. Mixing the ink back toward its ground buys
 * almost no visual softening and spends real contrast, and the note line is
 * compliance text that must not be softened at all.
 *
 * The button's ink is set through --sn-btn-ink, never `color`: setting `color`
 * from a context loses the specificity race against `.x4b925f13:visited` in
 * base.css, and the label vanishes the moment the visitor has followed the
 * link. That bug shipped twice on this theme.
 *
 * THE NOTE LINE IS COMPLIANCE FURNITURE (the 18+ badge and the safer-gambling
 * notice, from sterrennacht_gambling_warning()). It is static, it is full
 * strength on the band, and it must never be given a reveal animation or a
 * hover-only state (CLAUDE.md §7).
 */

.x6692a05e {
	position: relative;
	margin: var(--sn-sp-16) 0;
	padding: var(--sn-sp-12) var(--sn-sp-8);
	border-radius: 0;
}

@media (max-width: 767px) {
	.x6692a05e {
		padding: var(--sn-sp-8) var(--sn-sp-6);
	}
}

/* "Green" (loud): the flooded accent band. */
.x6feadba0 {
	background: var(--sn-primary);
	border: 0;
	color: var(--sn-primary-dark);
	box-shadow: none;
}

/* The inverse button: near-black block, warm white label. */
.x6feadba0 .x4b925f13 {
	background: var(--sn-bg);
	border-color: var(--sn-bg);
	--sn-btn-ink: var(--sn-heading);
}

/* Hover flips it to the warm white block with near-black ink — the same full
   inversion .x4b925f13 performs everywhere else, just one step further along the
   same three-colour system. */
.x6feadba0 .x4b925f13:hover,
.x6feadba0 .x4b925f13:focus {
	background: var(--sn-heading);
	border-color: var(--sn-heading);
	--sn-btn-ink: var(--sn-bg);
}

/*
 * The quiet panel: a region inside a heavy rule, no fill. The sibling skin
 * used a tonal card because its system separated by tone; this one has no
 * usable second tone (a #0F0F0F card on a #0A0A0A page is 1.14:1), so the
 * boundary has to be a line.
 */
.xa296dc0a {
	background: transparent;
	border: var(--sn-border-thick) solid var(--sn-heading);
	color: var(--sn-text);
	box-shadow: none;
}

.x4625f64a {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sn-sp-8);
}

.x2c452e08 {
	min-width: 0;
}

/*
 * Deliberately a styled <p>, not a heading tag: it is promotional and must stay
 * out of the document outline and the ToC. This is the block where the poster
 * scale is spent — the biggest type on any page after the H1, at the tightest
 * tracking in the system.
 */
.x719cf20e {
	margin: 0 0 var(--sn-sp-4);
	font-family: var(--sn-font-display);
	font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
	font-weight: 600;
	line-height: var(--sn-lh-display);
	letter-spacing: var(--sn-tracking-tighter);
	overflow-wrap: break-word;
	text-wrap: balance;
}

.x6feadba0 .x719cf20e { color: var(--sn-primary-dark); }
.xa296dc0a .x719cf20e { color: var(--sn-heading); }

.x54f73322 {
	margin: 0;
	max-width: 52ch;
	font-size: var(--sn-fs-lead);
	line-height: 1.5;
}

.x6feadba0 .x54f73322 { color: var(--sn-primary-dark); }
.xa296dc0a .x54f73322 { color: var(--sn-text-muted); }

.x7cc7577c {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sn-sp-4);
	flex: 0 0 auto;
}

.x7cc7577c .x4b925f13 {
	white-space: nowrap;
}

.x1b4e4e42 {
	font-size: var(--sn-fs-sm);
	font-weight: 400;
	line-height: 1.45;
	max-width: 46ch;
}

/* Full-strength ink, not a muted mix: this is the safer-gambling notice. */
.x6feadba0 .x1b4e4e42 { color: var(--sn-primary-dark); }
.xa296dc0a .x1b4e4e42 { color: var(--sn-text-muted); }

/* The 18+ badge sits on the band and has to invert with it — the shared
   .x2de1da19 is outlined in --sn-border-strong, which measures 1.34:1
   against vermillion and would all but disappear. */
.x6feadba0 .x2de1da19 {
	border-color: var(--sn-primary-dark);
	color: var(--sn-primary-dark);
}

/* ---------- Cut-out image ---------- */
/*
 * Hidden below 768px on purpose: on a phone the band is full width, and a
 * figure would either shrink to nothing or push the button below the fold.
 * It is aria-hidden and alt-empty in render.php — decorative, because the band
 * already carries its heading, copy and button.
 */
.xb8e16138 {
	display: none;
}

@media (min-width: 768px) {
	.x4625f64a {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--sn-sp-8);
	}

	.x7cc7577c {
		align-items: flex-end;
	}

	.xe58912ed {
		/* Room for the cut-out at the right end. */
		padding-right: 260px;
	}

	/*
	 * A DIRECT CHILD of the band, not of .x4625f64a — the inner is
	 * position:relative so it can sit above the band, and a figure nested
	 * inside it would anchor to the inner box and float above the band's
	 * bottom edge instead of standing on it.
	 */
	.xb8e16138 {
		display: block;
		position: absolute;
		right: var(--sn-sp-8);
		bottom: 0;
		width: 220px;
		margin: 0;
		z-index: 0;
		pointer-events: none;
	}

	/*
	 * NO PLATE, NO FRAME, and that is handled upstream rather than here.
	 * img-prompt.md pins a ground colour per slot, and the CTA cut-out is
	 * generated on #FF3D00 — the band's own colour — so the asset sits on the
	 * band with nothing drawn around it. An earlier market had to paint a hard
	 * plate behind this figure precisely because its image guide specified one
	 * ground for the whole site.
	 */
	.xb8e16138 img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 0;
	}
}

@media (min-width: 1024px) {
	.xe58912ed {
		padding-right: 300px;
	}

	.xb8e16138 {
		width: 260px;
	}
}