/**
 * upcomer/ranked-offer-list — comparison toplist of offers.
 *
 * One shared "offer" design system (rating chip, bonus, gold CTA) also used by
 * offer-teaser-grid and offer-review-spotlight. Sharp corners; the accent is
 * the theme's chip-tertiary brand gold. The rank rides the logo's top-left
 * corner as a medallion; badges ride the top edge; the offer's stats render in
 * the .offer__facts row; a single gold CTA closes each row.
 *
 * The <section> bleeds full-width via .alignwide; .upcomer-block__inner holds
 * the content on the same column grid as the gamurs footer.
 */

.upcomer-block--ranked-offer-list {
	--card: #FEFEFE;
	--inset: color-mix(in srgb, currentColor 4%, transparent);
	--line: color-mix(in srgb, currentColor 12%, transparent);
	--line-2: color-mix(in srgb, currentColor 7%, transparent);
	--ink-2: color-mix(in srgb, currentColor 62%, transparent);
	--ink-3: color-mix(in srgb, currentColor 52%, transparent);

	/* Brand accent = theme chip-tertiary gold (mode-aware token, with fallback). */
	--accent: var(--wp--custom--chip--tertiary--enabled--color-fg--minimal, #A58C52);
	--on-accent: #171717;

	--logo-bg: var(--inset); /* per-row override via inline --logo-bg */
	--row-gap: clamp(0.85rem, 2vw, 1.15rem);

	--ranked-content-max: calc(1px * var(--wp--custom--bottom-nav--container--desktop--max-width, 1200));

	color: #171717;
	padding-inline: 0;
	box-sizing: border-box;
}

.upcomer-block--ranked-offer-list *,
.upcomer-block--ranked-offer-list *::before,
.upcomer-block--ranked-offer-list *::after {
	box-sizing: border-box;
}

/* Content column (the inner wrapper) — matches the gamurs footer column. */
.upcomer-block--ranked-offer-list .upcomer-block__inner {
	max-width: var(--ranked-content-max);
	margin-inline: auto;
}

/* `latpop` typo is intentional — mirrors the canonical token name. */
@media (min-width: 992px) and (max-width: 1248px) {
	.upcomer-block--ranked-offer-list .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--latpop--max-width, 1200));
	}
}

@media (max-width: 991px) {
	.upcomer-block--ranked-offer-list .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--mobile--max-width, 720));
		padding-inline: 15px;
	}
}

.ranked-offer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--row-gap);
}

/* ---- Row -------------------------------------------------------------- */

.offer {
	position: relative;
	background: var(--card);
	border: 1px solid var(--line);
	box-shadow: 0 1px 2px rgba(23, 23, 23, 0.05), 0 8px 24px rgba(23, 23, 23, 0.06);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.55rem 1rem 1rem;
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.offer:hover {
	box-shadow: 0 2px 4px rgba(23, 23, 23, 0.06), 0 16px 34px rgba(23, 23, 23, 0.12);
	transform: translateY(-1px);
}

.offer[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.offer,
	.offer:hover {
		transition: none;
		transform: none;
	}
}

/* ---- Badges (editor pick + exclusive) --------------------------------- */

.offer__badges {
	position: absolute;
	top: -0.62rem;
	left: 3.7rem;
	right: 0.9rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}

.badge {
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.66rem;
	line-height: 1;
	padding: 0.28rem 0.55rem;
	white-space: nowrap;
}

.badge--pick {
	background: var(--accent);
	color: var(--on-accent);
}

.badge--custom {
	background: var(--badge-color, var(--accent));
	color: #fff;
}

.badge--excl {
	background: #171717;
	color: #fff;
}

/* ---- Identity cluster ------------------------------------------------- */

.offer__id {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

/* Logo tile — sharp; the offer's logo image fills it edge to edge (no inner
   padding, no border). No overflow:hidden — the rank medallion is a child that
   overhangs the corner. */
.offer__logo {
	position: relative;
	width: 4.6rem;
	height: 4.6rem;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--logo-bg);
}

.offer__logo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Rank medallion — deliberately overlaps the logo's top-left corner. The
   card-coloured ring reads as intentional. */
.offer__rank {
	position: absolute;
	top: -0.62rem;
	left: -0.62rem;
	z-index: 3;
	width: 1.95rem;
	height: 1.95rem;
	display: grid;
	place-items: center;
	background: #171717;
	color: #fff;
	border: 2px solid var(--card);
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.offer__namewrap {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.offer__name {
	margin: 0;
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.offer__idmeta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* ---- Shared rating chip ---------------------------------------------- */

.upcomer-block--ranked-offer-list .o-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex: none;
}

.upcomer-block--ranked-offer-list .o-rating__star {
	width: 0.85rem;
	height: 0.85rem;
	color: var(--accent);
	flex: none;
}

.upcomer-block--ranked-offer-list .o-rating b {
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 800;
	font-size: 1rem;
	line-height: 1;
	color: inherit;
	font-variant-numeric: tabular-nums;
}

.upcomer-block--ranked-offer-list .o-rating span {
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: 0.72rem;
	color: var(--ink-3);
}

/* ---- Middle: bonus (hero) + stats ------------------------------------ */

.offer__mid {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.upcomer-block--ranked-offer-list .o-eyebrow {
	margin: 0;
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.66rem;
	color: var(--ink-3);
}

.upcomer-block--ranked-offer-list .o-bonus {
	display: block;
	min-width: 0;
}

.upcomer-block--ranked-offer-list .o-bonus .o-eyebrow {
	margin-bottom: 0.18rem;
}

.upcomer-block--ranked-offer-list .o-bonus__v {
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 700;
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: inherit;
	display: block;
}

.offer__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	align-items: baseline;
}

.fact {
	display: inline-flex;
	gap: 0.3rem;
	align-items: baseline;
	font-family: "Barlow", sans-serif;
	font-size: 0.9rem;
	min-width: 0;
}

.fact b {
	color: inherit;
	font-weight: 700;
}

.fact span {
	color: var(--ink-3);
}

/* ---- Action: CTA + terms --------------------------------------------- */

.offer__act {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Shared gold CTA. Lock the ink foreground across every link state so
   reboot.css's `a:hover { color: #0a58ca }` can't win (0,1,1 > class-only). */
.upcomer-block--ranked-offer-list .o-cta,
.upcomer-block--ranked-offer-list .o-cta:link,
.upcomer-block--ranked-offer-list .o-cta:visited,
.upcomer-block--ranked-offer-list .o-cta:hover,
.upcomer-block--ranked-offer-list .o-cta:focus,
.upcomer-block--ranked-offer-list .o-cta:focus-visible,
.upcomer-block--ranked-offer-list .o-cta:active {
	color: var(--on-accent);
	text-decoration: none;
}

.upcomer-block--ranked-offer-list .o-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 100%;
	background: var(--accent);
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.15rem;
	line-height: 1;
	padding: 0.85rem 1.35rem;
	min-height: 2.9rem;
	border: none;
	cursor: pointer;
	transition: background-color 160ms ease, transform 100ms ease;
}

.upcomer-block--ranked-offer-list .o-cta__arrow {
	width: 1rem;
	height: 1rem;
}

.upcomer-block--ranked-offer-list .o-cta:hover {
	background: color-mix(in srgb, var(--accent) 82%, #000);
}

.upcomer-block--ranked-offer-list .o-cta:focus-visible {
	background: color-mix(in srgb, var(--accent) 82%, #000);
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.upcomer-block--ranked-offer-list .o-cta:active {
	transform: translateY(1px);
}

.upcomer-block--ranked-offer-list .o-fine {
	margin: 0.4rem 0 0;
	font-family: "Barlow", sans-serif;
	font-size: 0.66rem;
	color: var(--ink-3);
	letter-spacing: 0.02em;
	text-align: center;
}

/* Secondary CTA (feature-flagged off in render.php). */
.offer__cta-secondary,
.offer__cta-secondary:link,
.offer__cta-secondary:visited,
.offer__cta-secondary:hover,
.offer__cta-secondary:focus,
.offer__cta-secondary:active {
	color: var(--ink-2);
	text-decoration: none;
}

.offer__cta-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.5rem;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.4rem 0.25rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

/* ---- Desktop-ish horizontal layout ----------------------------------- */

@media (min-width: 768px) {
	.offer {
		display: grid;
		align-items: center;
		gap: 1.2rem;
		padding: 1.35rem 1.2rem 1.2rem;
		grid-template-columns: auto minmax(0, 1fr) minmax(9.5rem, auto);
	}
	.offer__id {
		gap: 1.1rem;
	}
	.offer__logo {
		width: 5.1rem;
		height: 5.1rem;
	}
	.offer__act {
		min-width: 9.5rem;
	}
}

@media (min-width: 1000px) {
	.offer {
		grid-template-columns: minmax(13rem, auto) minmax(0, 1fr) minmax(10rem, auto);
		gap: 1.4rem;
	}
	.offer__id {
		gap: 1.2rem;
	}
	.offer__logo {
		width: 5.6rem;
		height: 5.6rem;
	}
}

/* ---- Show more button ------------------------------------------------ */

.ranked-offer-list__show-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: clamp(1rem, 2.5vw, 1.5rem) auto 0;
	background: transparent;
	color: inherit;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--line);
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease;
}

.ranked-offer-list__show-more:hover,
.ranked-offer-list__show-more:focus-visible {
	background: color-mix(in srgb, currentColor 4%, transparent);
	border-color: color-mix(in srgb, currentColor 25%, transparent);
}

.ranked-offer-list__show-more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ranked-offer-list__show-more-icon {
	width: 0.875rem;
	height: 0.875rem;
}

/* Responsible-gambling disclaimer (Admin CP → Global Content; per-block override). */
.upcomer-offer-disclaimer {
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid currentColor;
	font-family: "Barlow", sans-serif;
	font-size: 0.72rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-align: center;
	opacity: 0.55;
}