/*
 * Block: sn/casino-cards
 * Quick-picks list from the casino CPT, built in the pricing-card language of
 * this skin: a white card with a 2px ink frame, a solid ink offset shadow and
 * an orange header bar carrying the rank. Position — not the badge — decides
 * which card leads, because an editor may badge as many casinos as they like
 * and the "one action leads" hierarchy has to survive that.
 */

.x3f5e16c7 {
	margin: var(--sn-sp-12) 0;
}

/* Section-label pill. */
.xc50af02b {
	display: inline-block;
	margin: 0 0 var(--sn-sp-2);
	padding: var(--sn-sp-1) var(--sn-sp-4);
	background: var(--sn-heading);
	border-radius: var(--sn-radius-pill);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font);
	font-size: .75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1.6;
}

.x566ade88 {
	margin: 0 0 var(--sn-sp-4);
}

@media (min-width: 760px) {
	.x566ade88 {
		margin-bottom: var(--sn-sp-4);
	}
}

.x05994503 {
	list-style: none;
	display: grid;
	gap: var(--sn-sp-8) var(--sn-sp-6);
	margin: 0;
	padding: 0;
	counter-reset: xcdde1baf;
}

.xc555863e {
	counter-increment: xcdde1baf;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sn-sp-1);
	padding: 0 var(--sn-sp-6) var(--sn-sp-3);
	background: var(--sn-surface);
	border: var(--sn-rule) solid var(--sn-heading);
	border-radius: var(--sn-radius);
	box-shadow: var(--sn-shadow);
	overflow: hidden; /* the header bar has to clip to the rounded corners */
	text-align: center;
	transition: transform .12s ease, box-shadow .12s ease;
}

/* Header bar: the rank, printed in the display font on a toned strip. The
   leader gets the orange. Ink on orange reads 5.3:1, so this label — unlike
   the button label — does not need to be large to stay legible. */
.xc555863e::before {
	content: '#' counter(xcdde1baf);
	display: block;
	align-self: stretch;
	margin: 0 calc(-1 * var(--sn-sp-6)) var(--sn-sp-4);
	padding: var(--sn-sp-2) var(--sn-sp-4);
	background: var(--sn-surface-2);
	border-bottom: var(--sn-rule) solid var(--sn-heading);
	color: var(--sn-heading);
	font-family: var(--sn-font-display);
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-align: left;
	text-transform: uppercase;
}

/* The leader: orange bar, a heavier shadow and a one-degree tilt — the
   handmade signal, and the only card that is filled. */
.xc555863e:first-child {
	box-shadow: var(--sn-shadow-lg);
	transform: rotate(-1deg);
}

.xc555863e:first-child::before {
	background: var(--sn-primary);
}

.xc555863e:hover {
	transform: translate(2px, 2px);
	box-shadow: var(--sn-shadow-sm);
}

.xc555863e:first-child:hover {
	transform: rotate(-1deg) translate(2px, 2px);
	box-shadow: var(--sn-shadow);
}

/* Badge sits at the right end of the header bar, like the reference's radio
   dot — a printed tab, not a floating chip. */
.x3efaa954 {
	position: absolute;
	top: var(--sn-sp-2);
	right: var(--sn-sp-4);
	padding: 1px var(--sn-sp-3);
	background: var(--sn-heading);
	border-radius: var(--sn-radius-pill);
	color: var(--sn-on-chrome);
	font-family: var(--sn-font);
	font-size: .625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	white-space: nowrap;
	line-height: 1.7;
}

.xaeadc21d {
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: var(--sn-rule) solid var(--sn-heading);
	border-radius: 12px;
	background: var(--sn-surface-2);
}

.xaeadc21d img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Sub-heading role: Fredoka, no stroke, title case. */
.x20215654 {
	margin: var(--sn-sp-2) 0 0;
	color: var(--sn-heading);
	font-family: var(--sn-font-display);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.2;
}

.x1f16fec3 {
	margin: var(--sn-sp-1) 0 var(--sn-sp-4);
	color: var(--sn-text-muted);
	font-size: var(--sn-fs-sm);
	line-height: 1.6;
}

.x7d9f769d {
	display: block;
	width: 100%;
	margin-top: auto; /* pins the buttons to a common baseline */
	padding-left: var(--sn-sp-4);
	padding-right: var(--sn-sp-4);
	font-size: 1.1875rem; /* white-on-orange needs the large-text size */
}

/* Only the leader is filled; the rest are cream pills with an ink label, so
   one action reads as THE action. */
.xc555863e:not(:first-child) .x7d9f769d {
	--sn-btn-ink: var(--sn-heading);
	background: var(--sn-surface);
	font-family: var(--sn-font);
	font-size: var(--sn-fs-md);
	font-weight: 700;
}

.xc555863e:not(:first-child) .x7d9f769d:hover,
.xc555863e:not(:first-child) .x7d9f769d:focus {
	--sn-btn-ink: var(--sn-heading);
	background: var(--sn-gold);
}

/* One row on desktop. auto-fit rather than a fixed column count: three or
   four picks sit in a single row, and a longer list wraps instead of
   shrinking into unreadable slivers. */
@media (min-width: 760px) {
	.x05994503 {
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
		align-items: stretch;
	}
}

/* ---------- Phones: the card lies down ---------- */
/* The centred stack is 351px tall, which puts the first CTA ~280px below the
   fold on a 375x667 screen — on a money page that is the whole ball game. On
   a phone the same card becomes a compact row: logo and name side by side,
   benefit under them, CTA full width. ~170px instead of 351px.
   FLEX-WRAP, NOT GRID PLACEMENT, ON PURPOSE: badge, logo, benefit and CTA are
   all optional and are flat siblings, so explicit grid-row placement collapses
   into nonsense as soon as one is missing (this exact bug, 2026-07-29). With
   wrapping, a missing child simply takes no space. */
@media (max-width: 759px) {
	.xc555863e {
		display: flex;
		/* The base rule is flex-direction: column — it MUST be reset here or
		   the card stays a stack that merely wraps, which is what it did the
		   first time. */
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--sn-sp-1) var(--sn-sp-3);
		padding: 0 var(--sn-sp-4) var(--sn-sp-4);
		text-align: left;
	}

	/* The rank bar keeps its full-bleed row at the top. The basis has to
	   include BOTH negative margins: in column mode `align-self: stretch`
	   sized the bar, but in row mode flex-basis fixes the main size, so a
	   plain 100% lands 32px short on the right — invisible on a badged card,
	   because the badge sits over the gap. */
	.xc555863e::before {
		flex: 0 0 calc(100% + var(--sn-sp-8));
		margin: 0 calc(-1 * var(--sn-sp-4)) var(--sn-sp-3);
	}

	.xaeadc21d {
		flex: 0 0 auto;
		width: 56px;
		height: 56px;
	}

	/* Sits next to the logo; falls back to the full row when there is none. */
	.x20215654 {
		flex: 1 1 auto;
		margin: 0;
		font-size: 1.125rem;
	}

	.x1f16fec3 {
		flex: 0 0 100%;
		margin: var(--sn-sp-2) 0 var(--sn-sp-3);
	}

	.x7d9f769d {
		flex: 0 0 100%;
		/* 24px line + 8px padding x2 + 2px border x2 = 44px — the minimum
		   comfortable tap target, so this must not shrink further. */
		padding-top: var(--sn-sp-2);
		padding-bottom: var(--sn-sp-2);
	}

	/* The tilt is a desktop flourish — full width against the screen edge it
	   just reads as broken. */
	.xc555863e:first-child,
	.xc555863e:first-child:hover {
		transform: none;
	}

	.xc555863e:first-child:hover {
		transform: translate(2px, 2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.xc555863e,
	.xc555863e:hover {
		transition: none;
		transform: none;
		box-shadow: var(--sn-shadow);
	}

	.xc555863e:first-child,
	.xc555863e:first-child:hover {
		transform: none;
		box-shadow: var(--sn-shadow-lg);
	}
}

/* ---------- Directly after the hero ---------- */
/* Tighten the gap and stand the hero's fact list down, so the first pick
   stays high on the page (the whole point of the compact hero). */

/* Directly after the hero the two are ONE unit: collapse the gap to nothing
   so the list clears the fold. (Negative margin + the hero's own bottom
   margin collapse to 48 - 48 = 0.) */
.xc2e3f41d + .x3f5e16c7 {
	margin-top: calc(-1 * var(--sn-sp-12));
}

.xc2e3f41d:has(+ .x3f5e16c7) .x459c6a45 {
	display: none;
}