/* Hallmark · genre: editorial · component styles for the Highstakes blocks.
 * Colours reference the theme.json presets set by the active theme (with plain
 * fallbacks so the blocks still read if the theme is swapped). No inline OKLCH.
 */

:root {
	--hs-accent:         var(--wp--preset--color--accent, #2f7d4f);
	--hs-accent-strong:  var(--wp--preset--color--accent-strong, #276a43);
	--hs-accent-ink:     var(--wp--preset--color--accent-ink, #fbfefc);
	--hs-accent-on-band: var(--wp--preset--color--accent-on-band, #6cc596);
	--hs-ink:            var(--wp--preset--color--contrast, #16181f);
	--hs-ink-2:          var(--wp--preset--color--ink-2, #4a4f5c);
	--hs-muted:          var(--wp--preset--color--muted, #5b5f6b);
	--hs-rule:           var(--wp--preset--color--line, #d9dce2);
	--hs-surface:        var(--wp--preset--color--surface, #ffffff);
	--hs-paper-2:        var(--wp--preset--color--surface-2, #f1f3f2);
	--hs-band:           var(--wp--preset--color--accent-2, #14172a);
	--hs-on-band:        var(--wp--preset--color--on-band, #eef1ef);
	--hs-mono:           var(--wp--preset--font-family--mono, ui-monospace, monospace);
	--hs-display:        var(--wp--preset--font-family--display, Georgia, serif);
	--hs-body:           var(--wp--preset--font-family--body, system-ui, sans-serif);
	--hs-ease:           cubic-bezier(0.16, 1, 0.3, 1);

	/* Surface language — the theme's "shape" levers, kept separate from colour.
	 * The defaults below are the Highstakes editorial voice: square corners,
	 * unfilled cards, a heavy ink rule instead of a border. A swapped theme
	 * (see the 123Bet child theme) re-declares these six and gets filled,
	 * rounded, low-contrast surfaces without re-writing every component rule. */
	--hs-radius-card:    0;
	--hs-radius-media:   0;
	--hs-radius-chip:    2px;
	--hs-card-bg:        var(--hs-surface); /* a card sits one step above paper */
	--hs-card-rule:      var(--hs-ink); /* the heavy rule that tops a card */
	--hs-tint-base:      var(--hs-surface); /* what soft-tinted chips mix toward */

	/* Category-label signal colours (functional, per vertical) */
	--hs-cat-sports-betting: oklch(52% 0.14 250);
	--hs-cat-casino:         oklch(52% 0.15 305);
	--hs-cat-poker:          oklch(54% 0.16 25);
	--hs-cat-slots:          oklch(60% 0.13 65);
	--hs-cat-online:         oklch(55% 0.11 200);
	--hs-cat-land-based:     oklch(52% 0.12 45);
	--hs-cat-horse-racing:   oklch(50% 0.11 165);
	--hs-cat-sweepstakes:    oklch(58% 0.13 105);
}

/* --- Banner ----------------------------------------------------------- */
.hs-banner { border: 1px solid var(--hs-rule); }
.hs-banner img,
.hs-banner-block img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--hs-radius-media);
}
.hs-banner a { display: inline-block; }

/* Composed promo banner — background + overlaid eyebrow / heading / CTA */
.hs-banner--promo {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 220px;
	padding: clamp(1.5rem, 4vw, 3.25rem);
	background-color: var(--hs-band);
	background-size: cover;
	background-position: center;
	border-radius: var(--hs-radius-card);
	overflow: hidden;
	color: var(--hs-on-band);
}
.hs-banner--promo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		color-mix(in oklch, var(--hs-band) 90%, transparent) 0%,
		color-mix(in oklch, var(--hs-band) 55%, transparent) 55%,
		transparent 100%
	);
}
.hs-banner__inner {
	position: relative;
	z-index: 1;
	max-width: 620px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}
.hs-banner__eyebrow {
	margin: 0;
	font-family: var(--hs-mono);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--hs-accent-on-band);
}
.hs-banner__heading {
	margin: 0;
	font-family: var(--hs-display);
	font-weight: 900;
	font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--hs-accent-ink);
}
/* Newsletter cards only today, but scoped to the banner rather than to the card
 * so a newsletter banner that later gains an image still reads on the scrim. */
.hs-banner__blurb {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--hs-accent-ink);
}
.hs-banner__cta {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.72rem 1.6rem;
	border-radius: 999px;
	background: var(--hs-accent-strong);
	color: var(--hs-accent-ink);
	font-family: var(--hs-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background 200ms var(--hs-ease);
}
.hs-banner--promo .hs-banner__cta:hover { background: var(--hs-paper, #fff); color: var(--hs-band); }
@media (max-width: 640px) {
	.hs-banner--promo { min-height: 0; padding: 1.6rem; }
	.hs-banner--promo::before {
		background: linear-gradient(180deg, color-mix(in oklch, var(--hs-band) 78%, transparent), color-mix(in oklch, var(--hs-band) 90%, transparent));
	}
}

/* Image-less composed banner → light card (e.g. a newsletter / CTA box) */
.hs-banner--card {
	min-height: 0;
	padding: var(--wp--preset--spacing--40, 1.5rem);
	background: var(--hs-paper-2);
	border-top: 2px solid var(--hs-card-rule);
	border-radius: var(--hs-radius-card);
	color: var(--hs-ink);
}
.hs-banner--card::before { display: none; }
.hs-banner--card .hs-banner__inner { max-width: none; }
.hs-banner--card .hs-banner__eyebrow { color: var(--hs-accent-strong); }
.hs-banner--card .hs-banner__heading {
	color: var(--hs-ink);
	font-family: var(--hs-display);
	font-size: 1.3rem;
}
.hs-banner--card .hs-banner__blurb { color: var(--hs-ink-2); }
.hs-banner--card .hs-banner__cta { background: var(--hs-accent-strong); color: var(--hs-accent-ink); }
.hs-banner--card .hs-banner__cta:hover { background: var(--hs-band); color: var(--hs-accent-ink); }

/* --- Banner colour theme + button style -------------------------------- */
/* Set per banner in the admin (banner_theme, banner_button_style) and rendered
 * as `hs-banner--themed hs-banner--theme-* hs-banner--btn-*`.
 *
 * The *values* are a brand matter and live with the skin: 123Bet's purple, teal
 * and lime are in blocks-night.css. What lives here is the contract and the
 * structure, so the block never renders broken on a skin that has not opted in.
 *
 * On this editorial skin all three themes resolve to the house accent, because
 * the Highstakes palette has no purple, teal or lime to offer and inventing them
 * would be a second brand rather than a fallback. Choosing a theme on a banner
 * shown here is therefore a no-op — deliberately. A future light-brand child that
 * wants real themes re-declares these five custom properties per theme class and
 * every rule below repaints, exactly as the night skin does. */
.hs-banner--themed {
	--hs-signal: var(--hs-accent-strong);
	--hs-signal-fill: var(--hs-accent-strong);
	--hs-signal-ink: var(--hs-accent-ink);
	--hs-signal-hover: var(--hs-band);
	--hs-signal-glow: none;
}

.hs-banner--btn-solid .hs-banner__cta {
	background: var(--hs-signal-fill);
	color: var(--hs-signal-ink);
	border: 1px solid transparent;
}
.hs-banner--btn-solid .hs-banner__cta:hover {
	background: var(--hs-signal-hover);
	color: var(--hs-signal-ink);
}

/* Ghost. `color-mix` with `transparent` gives the outline and the hover plate
 * without needing a second colour token per theme, and degrades to the flat
 * signal colour on a browser that lacks it. */
.hs-banner--btn-ghost .hs-banner__cta {
	background: transparent;
	color: var(--hs-signal);
	border: 1px solid color-mix(in oklch, var(--hs-signal) 55%, transparent);
}
.hs-banner--btn-ghost .hs-banner__cta:hover {
	background: color-mix(in oklch, var(--hs-signal) 14%, transparent);
	border-color: var(--hs-signal);
	color: var(--hs-signal);
}

/* On a promo the button sits over the image scrim, which is dark in both light
 * and dark mode. The theme still shows through there — a ghost is not forced to
 * on-band ink — because the signals are re-pointed to their night values inside
 * that scrim; see the band scope in the theme's palette-day.css. */

/* --- Newsletter signup form ------------------------------------------- */
/* Rendered inline inside a newsletter banner card, so the card supplies the
 * eyebrow, heading, blurb and surround; everything below is the form itself and
 * is deliberately container-agnostic — it should look right anywhere a card-like
 * box will hold it. */
.hs-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	width: 100%;
	margin-top: 0.35rem;
}
.hs-newsletter__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
}
.hs-newsletter__field label {
	font-family: var(--hs-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--hs-ink-2);
}
/* Paper, not paper-2: the card the form sits in is already paper-2 on the light
 * skin, and a field the same colour as its card is a 1px border away from not
 * looking like a field at all. The night skin repoints this to its own recess. */
.hs-newsletter__field input {
	box-sizing: border-box; /* or the padding pushes the field out of the card */
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--hs-rule);
	border-radius: var(--radius-field, var(--hs-radius-chip));
	background: var(--hs-paper, #fff);
	color: var(--hs-ink);
	font-family: var(--hs-body);
	font-size: 1rem;
}
.hs-newsletter__field input:focus-visible {
	outline: 2px solid var(--hs-accent-strong);
	outline-offset: 1px;
}
/* Off-canvas rather than display:none — a bot filling in what it can't see is the
 * whole point, and a hidden input is the one thing they reliably skip. */
.hs-newsletter__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
}
/* Full width rather than shrink-to-fit: it is the last thing in a stack of
 * full-width fields, and a button narrower than the box above it reads as an
 * afterthought. */
.hs-newsletter__submit {
	width: 100%;
	margin-top: 0.2rem;
	padding: 0.8rem 1.4rem;
	border: 0;
	border-radius: var(--radius-cta, 999px);
	background: var(--hs-accent-strong);
	color: var(--hs-accent-ink);
	font-family: var(--hs-body);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}
.hs-newsletter__submit[disabled] { opacity: 0.6; cursor: progress; }
.hs-newsletter__status {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 600;
}
.hs-newsletter__status:empty { display: none; }
.hs-newsletter__status[data-state="busy"] { color: var(--hs-muted); }
.hs-newsletter__status[data-state="success"] { color: var(--wp--preset--color--status-legal, #2f7d4f); }
.hs-newsletter__status[data-state="error"] { color: var(--wp--preset--color--status-illegal, #b3261e); }
.hs-newsletter__fineprint {
	margin: 0;
	color: var(--hs-muted);
	font-size: 0.75rem;
}
/* The privacy link takes the card's signal rather than the page's link colour, so
 * it belongs to the box it sits in. `--hs-signal` is the *line* token — the step
 * tuned to carry text in both modes — not the button fill; on a teal card that is
 * cyan at night and its darker paper step by day. */
.hs-newsletter__fineprint a {
	color: var(--hs-signal, var(--hs-accent-strong));
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.hs-newsletter__fineprint a:hover { text-decoration-thickness: 2px; }
/* Once it has sent, the form's job is done — leave the confirmation, not the boxes. */
.hs-newsletter__form[data-sent="true"] .hs-newsletter__field,
.hs-newsletter__form[data-sent="true"] .hs-newsletter__submit { display: none; }

/* Sidebar banner stack */
.hs-sidebar-banners {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50, 2.5rem);
}

/* --- Rating ----------------------------------------------------------- */
.hs-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--hs-accent-strong);
	font-weight: 600;
	letter-spacing: 0.02em;
}
.hs-rating__num {
	color: var(--hs-ink);
	font-family: var(--hs-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.9em;
}

/* --- Mega menu (sits on the navy nav bar) ----------------------------- */
.hs-megamenu { position: static; }
.hs-megamenu__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hs-megamenu__top > a,
.hs-megamenu__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.7rem 0;
	font-family: var(--hs-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: currentColor;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
}
.hs-megamenu__top > a:hover,
.hs-megamenu__trigger:hover,
.hs-megamenu__trigger[aria-expanded="true"] {
	color: var(--hs-accent-on-band);
	border-bottom-color: var(--hs-accent-on-band);
}
.hs-megamenu__caret { font-size: 0.65em; transition: transform 0.15s var(--hs-ease); }
.hs-megamenu__trigger[aria-expanded="true"] .hs-megamenu__caret { transform: rotate(180deg); }
.hs-megamenu__panel {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 60;
	margin-top: 0;
	padding: var(--wp--preset--spacing--40, 1.5rem);
	background: var(--hs-surface);
	color: var(--hs-ink);
	border-top: 2px solid var(--hs-accent);
	border-bottom: 1px solid var(--hs-rule);
	box-shadow: 0 24px 40px color-mix(in oklch, var(--hs-band) 22%, transparent);
}
.hs-megamenu__panel[hidden] { display: none; }
.hs-megamenu__grid {
	max-width: var(--hs-shell, 1600px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(var(--hs-cols, 4), minmax(0, 1fr));
	gap: 0.15rem 2rem;
}
.hs-megamenu__link {
	display: block;
	padding: 0.4rem 0;
	color: var(--hs-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--hs-rule);
	font-size: 0.95rem;
}
.hs-megamenu__link:hover { color: var(--hs-accent-strong); }

/* Burger + full-page overlay — neutral on desktop, mobile menu at ≤782px.
 * On desktop the overlay wrapper is display:contents (no box), so the bar and
 * panels lay out exactly as before; the mobile-only chrome is hidden. */
.hs-megamenu__burger,
.hs-megamenu__ohead,
.hs-megamenu__ofoot,
.hs-megamenu__searchview,
.hs-megamenu__preview,
.hs-megamenu__back { display: none; }
.hs-megamenu__overlay { display: contents; }
body.hs-menu-open { overflow: hidden; }

@media (max-width: 782px) {
	/* --- Condensed header: burger relocates beside the logo (view.js);
	 * search moves into the menu; the now-empty navy bar collapses. --- */
	.hs-megamenu { display: flex; justify-content: flex-end; }
	.hs-navbar { padding-top: 0 !important; padding-bottom: 0 !important; }
	.hs-masthead__brand .hs-search,
	.hs-masthead__brand .wp-block-search { display: none; }

	.hs-megamenu__burger {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.4rem 0;
		background: none;
		border: 0;
		color: currentColor;
		cursor: pointer;
		font-family: var(--hs-mono);
		font-size: 0.78rem;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	.hs-megamenu__burger-lines { position: relative; width: 22px; height: 2px; background: currentColor; }
	.hs-megamenu__burger-lines::before,
	.hs-megamenu__burger-lines::after {
		content: "";
		position: absolute;
		left: 0;
		width: 22px;
		height: 2px;
		background: currentColor;
	}
	.hs-megamenu__burger-lines::before { top: -6px; }
	.hs-megamenu__burger-lines::after { top: 6px; }

	/* --- The overlay: a full-page sliding panel with a persistent header
	 * (logo + close) and footer (search toggle); the middle holds three
	 * stacked layers — root list, drill-down panels, and the search view. --- */
	.hs-megamenu__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 200;
		background: var(--hs-surface);
		color: var(--hs-ink);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s var(--hs-ease), visibility 0.3s var(--hs-ease);
	}
	.hs-megamenu.is-open .hs-megamenu__overlay { transform: none; visibility: visible; }
	/* Clear the WP admin toolbar so the header/close stay reachable when logged in. */
	body.admin-bar .hs-megamenu__overlay { top: 46px; }

	.hs-megamenu__ohead {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 60px;
		padding: 0 1.25rem;
		background: var(--hs-surface);
		border-bottom: 1px solid var(--hs-rule);
		z-index: 3;
	}
	.hs-megamenu__ologo {
		font-family: var(--hs-display);
		font-weight: 800;
		font-size: 1.15rem;
		color: var(--hs-ink);
		text-decoration: none;
	}
	.hs-megamenu__close {
		background: none;
		border: 0;
		color: var(--hs-ink);
		font-size: 2rem;
		line-height: 1;
		padding: 0.1rem 0.3rem;
		cursor: pointer;
	}

	.hs-megamenu__ofoot {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 84px;
		padding: 1rem 1.25rem;
		background: var(--hs-band);
		border-top: 1px solid var(--hs-rule);
		z-index: 3;
	}
	.hs-megamenu__searchtoggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		padding: 0.9rem 1rem;
		border: 0;
		cursor: pointer;
		background: var(--hs-accent-strong);
		color: var(--hs-accent-ink);
		font-family: var(--hs-mono);
		font-size: 0.85rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
	.hs-megamenu__searchtoggle-open,
	.hs-megamenu__searchtoggle-close { display: inline-flex; align-items: center; gap: 0.5rem; }
	.hs-megamenu__searchtoggle-close { display: none; }
	.hs-megamenu.is-searching .hs-megamenu__searchtoggle-open { display: none; }
	.hs-megamenu.is-searching .hs-megamenu__searchtoggle-close { display: inline-flex; }

	/* Three stacked layers filling the space between header and footer. */
	.hs-megamenu__bar,
	.hs-megamenu__panel,
	.hs-megamenu__searchview {
		position: absolute;
		top: 60px;
		bottom: 84px;
		left: 0;
		right: 0;
		margin: 0;
		padding: 0.5rem 1.25rem 1.5rem;
		background: var(--hs-surface);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.hs-megamenu__bar { display: flex; flex-direction: column; align-items: stretch; gap: 0; z-index: 1; }

	/* Drill-down panels + search view slide in from the right, over the root. */
	.hs-megamenu__panel {
		display: block !important; /* override desktop [hidden]{display:none}; we slide instead */
		z-index: 2;
		border: 0;
		box-shadow: none;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.28s var(--hs-ease), visibility 0.28s var(--hs-ease);
	}
	.hs-megamenu__panel.is-subopen { transform: none; visibility: visible; }
	.hs-megamenu__searchview {
		display: block;
		z-index: 2;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.28s var(--hs-ease), visibility 0.28s var(--hs-ease);
	}
	.hs-megamenu.is-searching .hs-megamenu__searchview { transform: none; visibility: visible; }

	/* Vertical-hub link grid stacks in the drill-down. */
	.hs-megamenu__grid { grid-template-columns: 1fr; gap: 0; }

	/* Top-level rows. */
	.hs-megamenu__top { width: 100%; border-bottom: 1px solid var(--hs-rule); }
	.hs-megamenu__top > a,
	.hs-megamenu__trigger {
		width: 100%;
		justify-content: space-between;
		padding: 1rem 0;
		color: var(--hs-ink);
		border-bottom: 0;
		font-family: var(--hs-body);
		font-weight: 600;
		font-size: 1rem;
		letter-spacing: 0;
		text-transform: none;
	}
	.hs-megamenu__top > a:hover,
	.hs-megamenu__trigger:hover,
	.hs-megamenu__trigger[aria-expanded="true"] {
		color: var(--hs-accent-strong);
		border-bottom-color: transparent;
	}
	/* Drill chevron (›) instead of the desktop dropdown caret. */
	.hs-megamenu__caret { font-size: 0; }
	.hs-megamenu__caret::after { content: "\203A"; font-size: 1.5rem; line-height: 1; color: var(--hs-muted); }

	.hs-megamenu__back {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		background: none;
		border: 0;
		cursor: pointer;
		margin: 0.4rem 0 0.9rem; /* consistent gap below the header, before content */
		padding: 0.25rem 0;
		color: var(--hs-accent-strong);
		font-family: var(--hs-body);
		font-weight: 600;
		font-size: 0.95rem;
	}
	.hs-megamenu__back::before { content: "\2039"; font-size: 1.3rem; line-height: 1; }

	/* Search view — styled form (replaces the bare WP default). */
	.hs-megamenu__searchview .search-form,
	.hs-megamenu__searchview form {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		margin: 0;
	}
	.hs-megamenu__searchview label { display: block; }
	.hs-megamenu__searchview .search-field,
	.hs-megamenu__searchview input[type="search"] {
		width: 100%;
		padding: 0.85rem 1rem;
		font-family: var(--hs-body);
		font-size: 1rem;
		color: var(--hs-ink);
		background: var(--hs-surface);
		border: 1px solid var(--hs-rule);
		border-radius: 0;
	}
	.hs-megamenu__searchview .search-field:focus,
	.hs-megamenu__searchview input[type="search"]:focus {
		outline: 2px solid var(--hs-accent-strong);
		outline-offset: 1px;
		border-color: transparent;
	}
	.hs-megamenu__searchview .search-submit,
	.hs-megamenu__searchview input[type="submit"],
	.hs-megamenu__searchview button[type="submit"] {
		padding: 0.85rem 1rem;
		border: 0;
		cursor: pointer;
		background: var(--hs-accent-strong);
		color: var(--hs-accent-ink);
		font-family: var(--hs-mono);
		font-size: 0.85rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	/* "Latest" preview strip at the top of a drill-down sub-view. */
	.hs-megamenu__preview { display: block; margin-bottom: 1.1rem; }
	.hs-megamenu__previewlabel {
		margin: 0 0 0.5rem;
		font-family: var(--hs-mono);
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--hs-muted);
	}
	.hs-megamenu__previewcard {
		display: flex;
		gap: 0.85rem;
		align-items: center;
		padding: 0.6rem 0;
		text-decoration: none;
		color: var(--hs-ink);
		border-top: 1px solid var(--hs-rule);
	}
	.hs-megamenu__previewthumb { flex: 0 0 84px; }
	.hs-megamenu__previewthumb img { width: 84px; height: 60px; object-fit: cover; display: block; border-radius: var(--hs-radius-media); }
	.hs-megamenu__previewbody { min-width: 0; }
	.hs-megamenu__previewtitle {
		display: block;
		font-family: var(--hs-display);
		font-weight: 700;
		font-size: 0.95rem;
		line-height: 1.2;
	}
	.hs-megamenu__previewcard:hover .hs-megamenu__previewtitle { color: var(--hs-accent-strong); }
	.hs-megamenu__previewdate {
		display: block;
		margin-top: 0.25rem;
		font-family: var(--hs-mono);
		font-size: 0.7rem;
		color: var(--hs-muted);
	}

	/* Tagline relocated into the root list (view.js). */
	.hs-masthead .hs-masthead__dateline { display: none; }
	.hs-megamenu__meta {
		margin-top: auto;
		padding-top: 1.25rem;
		border-top: 1px solid var(--hs-rule);
	}
	.hs-megamenu__meta .hs-masthead__dateline {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.hs-megamenu__meta .hs-dateline__tag {
		margin: 0;
		color: var(--hs-muted);
		font-family: var(--hs-mono);
		font-size: 0.72rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
}

/* --- Mega-menu "wire" panel: section rail + recent-article cards ------- */
@media (min-width: 783px) { /* desktop dropdown: let the wire fill the panel */
	.hs-megamenu__panel--wire { padding-top: 0; padding-bottom: 0; }
}
.hs-wire {
	max-width: var(--hs-shell, 1600px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(170px, 15%) 1fr;
}
.hs-wire__rail {
	list-style: none;
	margin: 0;
	padding: 1.6rem 1.75rem 1.6rem 0;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--hs-rule);
}
.hs-wire__cat {
	display: block;
	padding: 0.62rem 0;
	color: var(--hs-ink);
	text-decoration: none;
	font-family: var(--hs-body);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.2;
	border-bottom: 1px solid var(--hs-rule);
	transition: color 0.15s var(--hs-ease);
}
.hs-wire__cat:hover,
.hs-wire__cat.is-active { color: var(--hs-accent-strong); }
.hs-wire__railitem--all { margin-top: auto; padding-top: 0.9rem; }
.hs-wire__viewall {
	display: inline-block;
	font-family: var(--hs-mono);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hs-accent-strong);
	text-decoration: none;
}
.hs-wire__viewall:hover { text-decoration: underline; }
.hs-wire__stage { padding: 1.6rem 0 1.8rem 2rem; min-width: 0; }
.hs-wire__cards {
	display: none;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.75rem;
}
.hs-wire__cards.is-active { display: grid; }
.hs-wire__card { display: block; text-decoration: none; color: var(--hs-ink); }
.hs-wire__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--hs-radius-media);
	background: var(--hs-band);
	margin-bottom: 0.7rem;
}
.hs-wire__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 420ms var(--hs-ease);
}
.hs-wire__card:hover .hs-wire__thumb img { transform: scale(1.05); }
.hs-wire__cardtitle {
	display: block;
	font-family: var(--hs-display);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem;
}
.hs-wire__card:hover .hs-wire__cardtitle { color: var(--hs-accent-strong); }
.hs-wire__carddate {
	display: block;
	font-family: var(--hs-mono);
	font-size: 0.72rem;
	letter-spacing: 0.03em;
	color: var(--hs-muted);
}
.hs-wire__empty { color: var(--hs-muted); font-size: 0.95rem; margin: 0; }
@media (max-width: 1024px) { /* tablet: 3 cards across */
	.hs-wire__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hs-wire__cards .hs-wire__card:nth-child(4) { display: none; }
}
@media (max-width: 782px) { /* in the overlay: hide cards, rail = link list */
	.hs-wire { grid-template-columns: 1fr; }
	.hs-wire__stage { display: none; }
	.hs-wire__rail {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.15rem 0 0.6rem;
		border-right: 0;
	}
	.hs-wire__cat {
		border-bottom: 0;
		padding: 0.55rem 0;
		font-weight: 500;
		font-size: 0.95rem;
	}
	/* No "active section" concept on mobile (all links show) — keep them uniform. */
	.hs-wire__cat.is-active { color: var(--hs-ink); }
	.hs-wire__cat:hover { color: var(--hs-accent-strong); }
	.hs-wire__railitem--all { margin-top: 0; padding: 0.55rem 0 0.2rem; }
}

/* --- "View all states" index page grid -------------------------------- */
.hs-states-index {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0 2rem;
}
.hs-states-index__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	border-bottom: 1px solid var(--hs-rule);
}
.hs-states-index__link {
	display: block;
	flex: 1 1 auto;
	padding: 0.8rem 0;
	color: var(--hs-ink);
	text-decoration: none;
	font-size: 1.05rem;
}
.hs-states-index__link:hover { color: var(--hs-accent-strong); }
.hs-states-index__status {
	flex: none;
	font-family: var(--hs-mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.12rem 0.4rem;
	border-radius: var(--hs-radius-chip);
}
.hs-states-index__status--legal   { background: color-mix(in oklch, var(--wp--preset--color--status-legal) 16%, var(--hs-tint-base)); color: var(--wp--preset--color--status-legal); }
.hs-states-index__status--pending { background: color-mix(in oklch, var(--wp--preset--color--status-pending) 20%, var(--hs-tint-base)); color: color-mix(in oklch, var(--wp--preset--color--status-pending) 70%, var(--hs-ink)); }
.hs-states-index__status--partial { background: color-mix(in oklch, var(--wp--preset--color--status-partial) 16%, var(--hs-tint-base)); color: var(--wp--preset--color--status-partial); }
.hs-states-index__status--illegal { background: color-mix(in oklch, var(--wp--preset--color--status-illegal) 14%, var(--hs-tint-base)); color: var(--wp--preset--color--status-illegal); }

/* Legal-status filter bar (CSS-only, radio + :has). */
.hs-states-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; }
.hs-states-filter__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.hs-states-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--hs-rule);
	font-family: var(--hs-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hs-ink);
	cursor: pointer;
	transition: background var(--dur-short, 200ms) var(--hs-ease), border-color var(--dur-short, 200ms) var(--hs-ease);
}
.hs-states-filter__btn:hover { border-color: var(--hs-ink); }
.hs-states-filter__count { color: var(--hs-muted); }
.hs-states-filter__input:checked + label {
	background: var(--hs-ink);
	border-color: var(--hs-ink);
	color: var(--hs-on-band, #fff);
}
.hs-states-filter__input:checked + label .hs-states-filter__count { color: inherit; opacity: 0.7; }
.hs-states-filter__input:focus-visible + label { outline: 2px solid var(--hs-focus, var(--hs-accent-strong)); outline-offset: 2px; }

/* Filtering: a checked status radio hides every item not in that status. */
.hs-states-wrap:has( #hs-sf-legal:checked )   .hs-states-index__item:not([data-status="legal"]),
.hs-states-wrap:has( #hs-sf-pending:checked )  .hs-states-index__item:not([data-status="pending"]),
.hs-states-wrap:has( #hs-sf-partial:checked )  .hs-states-index__item:not([data-status="partial"]),
.hs-states-wrap:has( #hs-sf-illegal:checked )  .hs-states-index__item:not([data-status="illegal"]) {
	display: none;
}

/* --- Operator list · filtered vertical hub (stack of review cards) ---- */
.hs-operator-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 1.5rem);
}
.hs-operator-list__heading {
	margin: 0;
	font-family: var(--hs-display);
	font-size: 1.75rem;
}
.hs-operator-list .hs-op-summary {
	margin: 0;
}
.hs-operator-list__empty {
	padding: 1rem;
	border: 1px dashed var(--hs-rule);
	color: var(--hs-muted);
	font-size: 0.9rem;
}
/* Cards column (used in grid + sub-nav layout; falls back to a stack). */
.hs-operator-list__cards {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

/* Grid + sub-nav variant — the vertical category "Operator Reviews" block. */
.hs-operator-list--grid .hs-operator-list__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: var(--wp--preset--spacing--50, 2rem);
	align-items: start;
}
.hs-operator-list--grid .hs-operator-list__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 1.25rem);
}

/* Operator Reviews archive: the same compact tile, but in a paginated Query Loop
 * grid (archive-operator.html + the highstakes/operator-card block). The Post
 * Template supplies the columns; stretch each tile to fill its cell so rows line
 * up regardless of content length. */
.hs-operator-archive .wp-block-post-template.is-layout-grid {
	gap: 1.75rem;
}
.hs-operator-archive .hs-op-tile {
	height: 100%;
	/* height:100% fills the grid cell for equal-row heights, but the tile is
	   content-box — without this the padding + border would be added on top of
	   100% and overflow the cell. */
	box-sizing: border-box;
	/* Roomier than the category grid: this archive stands alone (no sidebar), so
	   give the top accent rule, logo and the footer link more breathing space. */
	padding: 1.5rem 1.4rem;
	gap: 0.7rem;
}

/* Compact operator tile (grid mode) — key info up front, detail behind a
 * "Show details" disclosure so tiles stay short. */
.hs-op-tile {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	background: var(--hs-card-bg);
	border: var(--rule-hair, 1px) solid var(--hs-rule);
	border-top: 3px solid var(--hs-card-rule);
	border-radius: var(--hs-radius-card);
	padding: var(--wp--preset--spacing--40, 1.25rem);
}
.hs-op-tile__head {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: center;
	padding-bottom: 0.55rem;
	border-bottom: var(--rule-hair, 1px) solid var(--hs-rule);
}
.hs-op-tile__brand { min-width: 0; }
.hs-op-tile__meta { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end; text-align: right; }
.hs-op-tile__logo { max-width: 130px; max-height: 40px; width: auto; object-fit: contain; }
.hs-op-tile__name { font-family: var(--hs-display); font-weight: 800; font-size: 1.15rem; }
.hs-op-tile__rating { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.hs-op-tile__count { color: var(--hs-muted); font-size: 0.8rem; }
.hs-op-tile__badge {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	background: var(--hs-band);
	color: var(--hs-on-band, #fff);
	font-family: var(--hs-mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.hs-op-tile__offer { display: flex; flex-direction: column; gap: 0.25rem; }
.hs-op-tile__eyebrow {
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: color-mix(in oklch, var(--hs-accent-strong) 14%, var(--hs-tint-base));
	color: var(--hs-accent-strong);
	font-size: 0.68rem;
	font-weight: 600;
}
.hs-op-tile__bonus { font-family: var(--hs-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.hs-op-tile__facts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; font-size: 0.82rem; color: var(--hs-muted); }
.hs-op-tile__facts strong { color: var(--hs-ink); font-weight: 600; }
.hs-op-tile__actions { display: flex; flex-direction: column; gap: 0.45rem; margin-top: auto; }
.hs-op-tile__cta {
	display: block;
	text-align: center;
	padding: 0.7rem 1rem;
	border-radius: var(--radius-cta, 3px);
	background: var(--hs-accent-strong);
	color: var(--hs-accent-ink);
	font-weight: 700;
	text-decoration: none;
}
.hs-op-tile__cta:hover { background: var(--hs-band); }
.hs-op-tile__review { text-align: center; color: var(--hs-accent-strong); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.hs-op-tile__review:hover { text-decoration: underline; }
.hs-op-tile__ticks {
	list-style: none;
	margin: 0.4rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem 0.8rem;
}
.hs-op-tile__ticks li { position: relative; padding-left: 1.4rem; font-size: 0.82rem; }
.hs-op-tile__ticks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1rem;
	height: 1rem;
	border-radius: 999px;
	background: color-mix(in oklch, var(--wp--preset--color--status-legal) 18%, var(--hs-tint-base));
	color: var(--wp--preset--color--status-legal);
	font-size: 0.6rem;
	line-height: 1rem;
	text-align: center;
}

/* Filter-pages sub-nav (right rail). */
.hs-operator-list__nav {
	position: sticky;
	top: 1rem;
	border-top: 3px solid var(--hs-card-rule);
	padding-top: 0.9rem;
}
.hs-operator-list__navtitle {
	margin: 0 0 0.4rem;
	font-family: var(--hs-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hs-muted);
}
.hs-operator-list__nav ul { list-style: none; margin: 0; padding: 0; }
.hs-operator-list__nav a {
	display: block;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--hs-rule);
	color: var(--hs-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}
.hs-operator-list__nav a:hover { color: var(--hs-accent-strong); }

@media (max-width: 900px) {
	.hs-operator-list--grid .hs-operator-list__layout { grid-template-columns: 1fr; }
	.hs-operator-list--grid .hs-operator-list__cards { grid-template-columns: 1fr; }
	.hs-operator-list__nav { position: static; }
}

/* --- Operator table · F3 Tabular spec sheet --------------------------- */
.hs-operator-table__heading {
	margin: 0 0 1.25rem;
	font-family: var(--hs-display);
}
.hs-operator-table__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--hs-card-rule);
}
.hs-operator-table__row {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1.4fr) minmax(0, 2fr) auto;
	align-items: center;
	gap: 1.25rem;
	padding: 1.15rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--hs-rule);
	border-radius: var(--hs-radius-card);
}
.hs-operator-table__row:first-child {
	border-left: 3px solid var(--hs-accent);
	padding-left: 1.1rem;
	background: var(--hs-paper-2);
}
.hs-operator-table__rank {
	font-family: var(--hs-mono);
	font-size: 1.15rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--hs-muted);
	text-align: center;
}
.hs-operator-table__row:first-child .hs-operator-table__rank { color: var(--hs-accent-strong); }
.hs-operator-table__brand { display: flex; flex-direction: column; gap: 0.4rem; }
.hs-operator-table__logo { max-width: 150px; max-height: 46px; width: auto; height: auto; object-fit: contain; }
.hs-operator-table__name { font-family: var(--hs-display); font-weight: 700; font-size: 1.1rem; }
.hs-operator-table__bonus { display: block; font-weight: 600; }
.hs-operator-table__terms { display: block; font-size: 0.78rem; color: var(--hs-muted); }
.hs-operator-table__cta {
	display: inline-block;
	white-space: nowrap;
	padding: 0.65rem 1.35rem;
	border-radius: var(--radius-cta, 3px);
	background: var(--hs-accent-strong);
	color: var(--hs-accent-ink);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background var(--dur-short, 200ms) var(--hs-ease);
}
.hs-operator-table__cta:hover { background: var(--hs-band); }
.hs-operator-table__empty {
	padding: 1rem;
	background: var(--hs-paper-2);
	border-left: 3px solid var(--hs-rule);
	color: var(--hs-muted);
}
@media (max-width: 782px) {
	.hs-operator-table__row {
		grid-template-columns: 2rem 1fr;
		grid-template-areas:
			"rank brand"
			"offer offer"
			"action action";
		gap: 0.75rem 1rem;
	}
	.hs-operator-table__row:first-child { padding-left: 0.85rem; }
	.hs-operator-table__rank { grid-area: rank; text-align: left; }
	.hs-operator-table__brand { grid-area: brand; }
	.hs-operator-table__offer { grid-area: offer; }
	.hs-operator-table__action { grid-area: action; }
	.hs-operator-table__cta { display: block; text-align: center; }
}

/* --- Post Feed · magazine modules ------------------------------------- */
.hs-mag-heading {
	font-family: var(--hs-display);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.015em;
	margin: 0 0 1.25rem;
	border-bottom: 1px solid var(--hs-rule);
}
.hs-mag-heading__text {
	display: inline-block;
	padding-bottom: 0.4rem;
	margin-bottom: -1px;
	border-bottom: 3px solid var(--hs-accent);
}
.hs-mag-heading a { color: inherit; text-decoration: none; }
.hs-mag-heading a:hover { color: var(--hs-accent-strong); }
.hs-mag-empty { color: var(--hs-muted); padding: 0.75rem 0; }

/* Category label */
.hs-cat--sports-betting { --hs-c: var(--hs-cat-sports-betting); }
.hs-cat--casino { --hs-c: var(--hs-cat-casino); }
.hs-cat--poker { --hs-c: var(--hs-cat-poker); }
.hs-cat--slots { --hs-c: var(--hs-cat-slots); }
.hs-cat--online { --hs-c: var(--hs-cat-online); }
.hs-cat--land-based { --hs-c: var(--hs-cat-land-based); }
.hs-cat--horse-racing { --hs-c: var(--hs-cat-horse-racing); }
.hs-cat--sweepstakes { --hs-c: var(--hs-cat-sweepstakes); }
.hs-mag-card__cat {
	align-self: start;
	display: inline-block;
	font-family: var(--hs-mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hs-c, var(--hs-accent-strong));
	background: color-mix(in oklch, var(--hs-c, var(--hs-accent-strong)) 13%, transparent);
	padding: 0.15rem 0.45rem;
	border-radius: var(--hs-radius-chip);
	text-decoration: none;
}
.hs-mag-card__cat:hover {
	background: color-mix(in oklch, var(--hs-c, var(--hs-accent-strong)) 22%, transparent);
	color: var(--hs-c, var(--hs-accent-strong));
}

/* Card (grid) */
.hs-mag-grid {
	display: grid;
	grid-template-columns: repeat(var(--hs-cols, 2), minmax(0, 1fr));
	gap: 1.9rem 1.5rem;
}
.hs-mag-card { display: flex; flex-direction: column; gap: 0.5rem; }
.hs-mag-card__media { display: block; margin: 0 0 0.3rem; }
.hs-mag-card__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--hs-radius-media);
}
.hs-mag-card__body { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 auto; }
.hs-mag-card__title {
	font-family: var(--hs-body);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}
.hs-mag-card__title a {
	color: var(--hs-ink);
	text-decoration: none;
	transition: color 200ms var(--hs-ease);
}
.hs-mag-card__title a:hover { color: var(--hs-accent-strong); }
.hs-mag-card__excerpt { color: var(--hs-muted); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.hs-mag-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.6rem;
	margin-top: auto;
	font-family: var(--hs-mono);
	font-size: 0.68rem;
	letter-spacing: 0.03em;
	color: var(--hs-muted);
}
.hs-mag-card__author::after { content: "·"; margin-left: 0.5rem; color: var(--hs-rule); }

/* Featured lead */
.hs-mag-lead { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2rem; align-items: start; }
.hs-mag-card--lead .hs-mag-card__media img { aspect-ratio: 16 / 9; }
.hs-mag-card--lead .hs-mag-card__title {
	font-family: var(--hs-display);
	font-weight: 900;
	font-size: clamp(1.6rem, 1.05rem + 1.7vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
}
.hs-mag-card--lead .hs-mag-card__excerpt { font-size: 1rem; }
.hs-mag-lead__rail { display: flex; flex-direction: column; }
/* Image-top mosaic tiles leading the rail (beside a tall lead) */
.hs-mag-lead__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin-bottom: 1.1rem;
}
.hs-mag-lead__tiles .hs-mag-tile { aspect-ratio: 4 / 3; }
.hs-mag-lead__tiles .hs-mag-tile__title { font-size: 1.05rem; line-height: 1.18; }

/* Compact list (rail + sidebar) */
.hs-mag-list { display: flex; flex-direction: column; }
.hs-mag-card--list {
	flex-direction: row;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 0.9rem 0;
	border-top: 1px solid var(--hs-rule);
}
.hs-mag-lead__rail .hs-mag-card--list:first-child,
.hs-mag-list .hs-mag-card--list:first-child { border-top: 0; padding-top: 0; }
.hs-mag-card--list .hs-mag-card__media { flex: 0 0 104px; margin: 0; }
.hs-mag-card--list .hs-mag-card__media img { width: 104px; height: 74px; aspect-ratio: auto; object-fit: cover; border-radius: var(--hs-radius-media); }
.hs-mag-card--list .hs-mag-card__title { font-size: 0.92rem; line-height: 1.2; }

/* Trending — responsive: horizontal strip when wide, vertical when narrow */
.hs-mag-trending {
	list-style: none;
	margin: -0.9rem 0 0; /* absorb the first row's top padding so the gap under the heading matches the grid modules */
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
}
.hs-mag-trending__item {
	flex: 1 1 260px;
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--hs-rule);
}
.hs-mag-trending__rank {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--hs-mono);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.2;
	color: var(--hs-accent-strong);
	font-variant-numeric: tabular-nums;
}
.hs-mag-trending__media { flex: 0 0 104px; margin: 0; }
.hs-mag-trending__media img {
	width: 104px;
	height: 74px;
	aspect-ratio: auto;
	object-fit: cover;
	display: block;
	border-radius: var(--hs-radius-media);
}
.hs-mag-trending__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.hs-mag-trending__title {
	font-family: var(--hs-body);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.3;
	margin: 0;
}
.hs-mag-trending__title a { color: var(--hs-ink); text-decoration: none; }
.hs-mag-trending__title a:hover { color: var(--hs-accent-strong); }

/* "What's Hot" — more prominent than the other trending areas */
.hs-whats-hot .hs-mag-trending__title { font-size: 1.2rem; line-height: 1.4; }
.hs-whats-hot .hs-mag-trending__rank { font-size: 1.2rem; }
.hs-whats-hot .hs-mag-trending__media { flex-basis: 120px; }
.hs-whats-hot .hs-mag-trending__media img { width: 120px; height: 82px; }

/* ---- Front-page hero + "What's Hot" responsive tiers ----
 * Four steps, wide → narrow: desktop (default) · tablet · compact · mobile.
 *   desktop  lead 1.55fr/1fr · rail tiles 2-up · What's Hot 4-across
 *   tablet   lead 1fr/1fr (50/50) · What's Hot 2×2
 *   compact  lead stacks (image above the rail) · tiles still 2-up
 *   mobile   rail tiles 1-up · What's Hot 1-up
 */
@media (max-width: 1024px) { /* tablet */
	.hs-mag-lead { grid-template-columns: 1fr 1fr; }
	.hs-whats-hot .hs-mag-trending__item { flex: 1 1 calc(50% - 0.75rem); }
}
@media (max-width: 768px) { /* compact */
	.hs-mag-lead { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 640px) {
	.hs-mag-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { /* mobile */
	.hs-mag-lead__tiles { grid-template-columns: 1fr; }
	.hs-whats-hot .hs-mag-trending__item { flex: 1 1 100%; }
}

/* Posts-list layout — large horizontal list items (SmartMag category style) */
.hs-mag-postlist { display: flex; flex-direction: column; }
.hs-mag-card--feature {
	flex-direction: row;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 1.75rem 0;
	border-top: 1px solid var(--hs-rule);
}
.hs-mag-postlist .hs-mag-card--feature:first-child { border-top: 0; padding-top: 0; }
.hs-mag-card--feature .hs-mag-card__media { flex: 0 0 260px; margin: 0; }
.hs-mag-card--feature .hs-mag-card__media img { aspect-ratio: 16 / 10; }
.hs-mag-card--feature .hs-mag-card__body { flex: 1 1 auto; gap: 0.5rem; }
.hs-mag-card--feature .hs-mag-card__title { font-size: 1.4rem; line-height: 1.15; }
.hs-mag-card--feature .hs-mag-card__excerpt { font-size: 0.95rem; }
@media (max-width: 640px) {
	.hs-mag-card--feature { flex-direction: column; gap: 0.75rem; }
	.hs-mag-card--feature .hs-mag-card__media { flex-basis: auto; width: 100%; }
}

/* Featured mosaic — 1 large tile + 2×2 of smaller tiles, image with overlaid text */
.hs-mag-mosaic {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	height: clamp(440px, 45vw, 660px);
}
.hs-mag-tile--lead { grid-column: 1; grid-row: 1 / span 2; }
.hs-mag-tile {
	position: relative;
	overflow: hidden;
	border-radius: var(--hs-radius-media);
	background: var(--hs-band);
}
.hs-mag-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms var(--hs-ease);
}
.hs-mag-tile:hover .hs-mag-tile__img { transform: scale(1.04); }
/* The three image-led cards share one hover, so they share one opt-out. */
@media (prefers-reduced-motion: reduce) {
	.hs-mag-tile:hover .hs-mag-tile__img,
	.hs-ocard:hover .hs-ocard__bg img,
	.hs-wire__card:hover .hs-wire__thumb img { transform: none; }
}
.hs-mag-tile__link {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	padding: clamp(0.9rem, 1.3vw, 1.5rem);
	text-decoration: none;
}
.hs-mag-tile__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in oklch, var(--hs-band) 92%, transparent) 0%,
		color-mix(in oklch, var(--hs-band) 25%, transparent) 45%,
		transparent 72%
	);
}
.hs-mag-tile__cat {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	background: var(--hs-c, var(--hs-accent-strong));
	color: var(--hs-accent-ink);
	font-family: var(--hs-mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.22rem 0.5rem;
}
.hs-mag-tile__foot { position: relative; z-index: 1; }
.hs-mag-tile__title {
	margin: 0 0 0.35rem;
	font-family: var(--hs-display);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--hs-accent-ink);
}
.hs-mag-tile--lead .hs-mag-tile__title { font-size: clamp(1.5rem, 1rem + 1.7vw, 2.3rem); }
.hs-mag-tile__meta {
	margin: 0;
	font-family: var(--hs-mono);
	font-size: 0.7rem;
	letter-spacing: 0.03em;
	color: color-mix(in oklch, var(--hs-accent-ink) 78%, transparent);
}
@media (max-width: 782px) {
	.hs-mag-mosaic {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
		height: auto;
	}
	.hs-mag-tile { aspect-ratio: 3 / 2; }
	.hs-mag-tile--lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) {
	.hs-mag-mosaic { grid-template-columns: 1fr; }
}

/* --- Post Feed · overlay tiles (layout: "overlay") --------------------- */
/* Image-led cards: the copy sits on the featured image behind a scrim, with a
 * category chip and author pill at the top and the meta row at the bottom. The
 * photography reads at full colour — the category signal is the chip's job. */
.hs-mag-ogrid {
	display: grid;
	grid-template-columns: repeat(var(--hs-cols, 2), minmax(0, 1fr));
	gap: 1.5rem;
}
.hs-ocard {
	position: relative;
	/* Keeps the card's internal layers (image → scrim → copy) from competing with
	 * anything else on the page. */
	isolation: isolate;
	display: flex;
	height: 100%;
	min-height: 20rem;
	/* height:100% fills the grid cell for even rows; without border-box the
	 * padding would be added on top of it and overflow the cell. */
	box-sizing: border-box;
	padding: clamp(1.1rem, 2vw, 1.6rem);
	overflow: hidden;
	border-radius: var(--hs-radius-card);
	background: var(--hs-paper-2);
}
.hs-ocard__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}
/* Hover is the image easing forward under a card that stays put — the same move
 * the mosaic tile and the wire thumb make, and the only hover treatment the
 * image-led cards use. It replaced a translateY lift on the card itself: two
 * families of photo tile sat side by side on the home page, one zooming and one
 * rising, and reading as two components rather than one. */
.hs-ocard__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 420ms var(--hs-ease);
}
.hs-ocard:hover .hs-ocard__bg img { transform: scale(1.04); }
/* The scrim is what buys legibility — it is not decorative. */
.hs-ocard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		color-mix(in oklch, var(--hs-band) 96%, transparent) 0%,
		color-mix(in oklch, var(--hs-band) 62%, transparent) 42%,
		color-mix(in oklch, var(--hs-band) 10%, transparent) 100%
	);
}
.hs-ocard__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.25rem;
}
.hs-ocard__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.hs-ocard__foot { display: flex; flex-direction: column; gap: 0.6rem; }
.hs-ocard__title {
	margin: 0;
	font-family: var(--hs-display);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--hs-on-band);
	overflow-wrap: anywhere;
	min-width: 0;
}
.hs-ocard__title a { color: inherit; text-decoration: none; }
.hs-ocard__excerpt {
	margin: 0;
	color: color-mix(in oklch, var(--hs-on-band) 78%, transparent);
	font-size: 0.92rem;
	line-height: 1.55;
}
.hs-ocard__rule {
	margin: 0.15rem 0 0;
	width: 100%;
	border: 0;
	border-top: 1px solid color-mix(in oklch, var(--hs-on-band) 22%, transparent);
	opacity: 1;
}

/* Category chip + author pill + meta row — shared by the overlay tiles and by a
 * theme's own image-led surfaces (the magazine theme's hero slider uses them). */
.hs-chip {
	display: inline-block;
	padding: 0.34rem 0.75rem;
	border-radius: var(--hs-radius-chip);
	background: color-mix(in oklch, var(--hs-band) 82%, transparent);
	color: var(--hs-c, var(--hs-accent-strong));
	font-family: var(--hs-body);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--dur-short, 200ms) var(--hs-ease);
}
.hs-chip:hover { background: var(--hs-band); color: var(--hs-c, var(--hs-accent-strong)); }
.hs-byline {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.24rem 0.7rem 0.24rem 0.28rem;
	border-radius: var(--hs-radius-chip);
	background: color-mix(in oklch, var(--hs-band) 82%, transparent);
	color: var(--hs-on-band);
	font-family: var(--hs-body);
	font-size: 0.72rem;
	font-weight: 600;
}
.hs-byline__avatar { border-radius: 999px; display: block; flex: none; }
.hs-byline__text { white-space: nowrap; }
.hs-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	font-family: var(--hs-body);
	font-size: 0.78rem;
	color: color-mix(in oklch, var(--hs-on-band) 72%, transparent);
}
.hs-meta .hs-meta__readtime { display: inline-flex; align-items: center; gap: 0.35em; }
.hs-meta .hs-meta__icon { flex-shrink: 0; opacity: 0.75; }

/* The promoted lead: full width, with the copy in an inset panel. */
.hs-mag-ogrid--lead > .hs-ocard--lead { grid-column: 1 / -1; }
.hs-ocard--lead {
	/* Stepped down in line with the standard tile's 24rem → 20rem. */
	min-height: clamp(20rem, 40vw, 28rem);
	align-items: center;
	padding: clamp(1.25rem, 3vw, 2.5rem);
}
.hs-ocard--lead::after {
	background: linear-gradient(
		95deg,
		color-mix(in oklch, var(--hs-band) 60%, transparent) 0%,
		color-mix(in oklch, var(--hs-band) 26%, transparent) 55%,
		color-mix(in oklch, var(--hs-band) 6%, transparent) 100%
	);
}
.hs-ocard--lead .hs-ocard__inner {
	max-width: min(34rem, 58%);
	margin-right: auto;
	gap: 0.9rem;
	padding: clamp(1.25rem, 2.4vw, 2rem);
	border-radius: var(--hs-radius-card);
	background: color-mix(in oklch, var(--hs-band) 88%, transparent);
	border: 1px solid color-mix(in oklch, var(--hs-on-band) 12%, transparent);
	justify-content: flex-start;
}
.hs-ocard--lead .hs-ocard__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); }
.hs-ocard--lead .hs-ocard__excerpt { font-size: 1rem; }

@media (max-width: 640px) {
	.hs-mag-ogrid { grid-template-columns: minmax(0, 1fr); }
	.hs-ocard--lead { align-items: flex-end; }
	.hs-ocard--lead .hs-ocard__inner {
		max-width: none;
		background: none;
		border: 0;
		padding: 0;
	}
	.hs-ocard--lead::after {
		background: linear-gradient(
			180deg,
			color-mix(in oklch, var(--hs-band) 15%, transparent) 0%,
			color-mix(in oklch, var(--hs-band) 70%, transparent) 45%,
			color-mix(in oklch, var(--hs-band) 96%, transparent) 100%
		);
	}
}

/* --- Category cloud ([hs_category_cloud]) ------------------------------ */
.hs-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hs-cats__pill {
	display: inline-block;
	padding: 0.42rem 0.85rem;
	border-radius: var(--hs-radius-chip);
	background: color-mix(in oklch, var(--hs-c, var(--hs-accent)) 16%, transparent);
	color: var(--hs-c, var(--hs-accent-strong));
	font-family: var(--hs-body);
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	transition: background var(--dur-short, 200ms) var(--hs-ease);
}
.hs-cats__pill:hover {
	background: color-mix(in oklch, var(--hs-c, var(--hs-accent)) 28%, transparent);
	color: var(--hs-c, var(--hs-accent-strong));
}

/* Operator table · grid of cards (for full-width "Editor's Picks" rows) */
.hs-operator-table--grid .hs-operator-table__list {
	border-top: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.25rem;
}
.hs-operator-table--grid .hs-operator-table__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 1.4rem;
	border: 1px solid var(--hs-rule);
	border-radius: var(--hs-radius-card);
}
.hs-operator-table--grid .hs-operator-table__row:first-child {
	border-left: 3px solid var(--hs-accent);
	background: var(--hs-paper-2);
}
.hs-operator-table--grid .hs-operator-table__rank {
	width: auto;
	font-size: 0.72rem;
	font-family: var(--hs-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hs-muted);
}
.hs-operator-table--grid .hs-operator-table__rank::before { content: "#"; }
.hs-operator-table--grid .hs-operator-table__brand { align-items: flex-start; }
.hs-operator-table--grid .hs-operator-table__offer { flex: 1 1 auto; }
.hs-operator-table--grid .hs-operator-table__action { width: 100%; margin-top: auto; }
.hs-operator-table--grid .hs-operator-table__cta { display: block; text-align: center; }

/* Operator table · review tiles — the same hs-op-tile the vertical category pages
 * use, sourced from featured/state picks instead of a feature filter. auto-fit so
 * one block serves both a full-width row and a sidebar rail: wide contexts get
 * columns, the 36% home rail collapses to a single stack. */
.hs-operator-table--cards .hs-operator-table__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--40, 1.25rem);
	align-items: start;
}
/* The tick list follows the tile's own width rather than the page's, so a rail
 * tile reads as one column without a media query guessing at the container. */
.hs-operator-table--cards .hs-op-tile__ticks {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}