/* ================== TOKENS ================== */
:root {
	--bg-card: #fff;
	--bg-card-top: #fff9ea;
	--stroke-gray: #e6e6e6;
	--stroke-gold: #f2cc69;
	--text-1: #111418;
	--text-2: #5b6168;
	--accent-red: #e5233a;
	--accent-green: #35c46b;
	--bonus-bg: #fff5f5;
	--bonus-stroke: #f2d4d4;
	--chip-gold: #ffe7ad;
	--chip-gray: #f1f1f1;
	--r-xl: 18px;
	--r-lg: 14px;
	--r-pill: 999px;
	--shadow-soft: 0 6px 18px rgba(20,20,20,.06);
	/* desktop spacing */
	--pad-x: 28px;
	--pad-y: 18px;
	--col-gap: 32px;
}

/* ================== WRAPPER ================== */
.casino-listing {
	display: grid;
	gap: 22px;
	max-width: 1150px;
	margin: 0 auto;
	padding: 6px 12px;
}

/* ================== CARD — DESKTOP (6 columns) ================== */
.casino-card {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	border-radius: var(--r-xl);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr 1.6fr 1.3fr 1.3fr 1.2fr 1.2fr; /* title шире */
	column-gap: var(--col-gap);
	align-items: center;
	padding: var(--pad-y) var(--pad-x);
	min-height: 118px;
}

	/* фон/рамки */
	.casino-card::before,
	.casino-card::after {
		content: "";
		position: absolute;
		border-radius: var(--r-xl);
		z-index: -2;
		pointer-events: none;
	}

	.casino-card::before {
		inset: 0;
		background: var(--bg-card);
		box-shadow: inset 0 0 0 2px var(--stroke-gray), inset 0 -18px 26px rgba(0,0,0,.08), var(--shadow-soft);
	}

	.casino-card.is-top::before {
		background: var(--bg-card-top);
		box-shadow: inset 0 0 0 2px var(--stroke-gold), inset 0 -18px 26px rgba(179,137,0,.10), var(--shadow-soft);
	}

	.casino-card::after {
		top: calc(var(--pad-y) + 4px);
		bottom: calc(var(--pad-y) + 4px);
		left: calc((100% - (var(--pad-x)*2)) / 6 + var(--pad-x));
		right: var(--pad-x);
		background: #fff;
		z-index: -3;
	}

/* правая колонка развёрнута внутрь грида родителя */
.card-right {
	display: contents;
}

/* ===== col 1/6 — логотип + ранк + note */
.card-left {
	grid-column: 1;
	justify-self: start;
	position: relative;
	min-height: 80px;
}

.logo-wrap {
	margin-top: 32px;
}

.casino-logo {
	max-height: 66px;
	width: auto;
	display: block;
}

.rank-badge {
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 40px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-weight: 800;
	color: #6a4b00;
	background: linear-gradient(180deg,#ffe7ad 0%,#ffd789 100%);
	box-shadow: inset 0 2px 0 rgba(255,255,255,.65), inset 0 -4px 8px rgba(0,0,0,.14), 0 1px 0 rgba(0,0,0,.02);
}

.casino-card:not(.is-top) .rank-badge {
	background: linear-gradient(180deg,#f6f6f6 0%,#eaeaea 100%);
	color: #444;
}

.rank-num {
	font-size: 16px;
}

.rank-label {
	position: absolute;
	top: 8px;
	left: 44px;
	padding: 7px 14px;
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 700;
	background: var(--chip-gold);
	color: #7a5a00;
	box-shadow: var(--shadow-soft);
	white-space: nowrap;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.casino-card:not(.is-top) .rank-label {
	background: var(--chip-gray);
	color: #333;
}

/* ===== col 2/6 — заголовок + рейтинг */
.card-top {
	grid-column: 2;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.casino-title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--text-1);
	/* --- allow wrapping on desktop so rating never squishes --- */
	white-space: normal;
	overflow: visible;
	text-overflow: initial;
	word-break: break-word;
	line-height: 1.2;
}

.rating-circle {
	/* фиксированный круг — не сжимается */
	flex: 0 0 auto;
	min-width: 64px;
	min-height: 64px;
	width: 64px;
	height: 64px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 4px solid var(--accent-green);
	background: #fff;
	color: #111;
	font-weight: 900;
	font-size: 17px;
	box-shadow: 0 0 0 4px rgba(53,196,107,.12);
}

/* ===== col 3–4/6 — бонус */
.bonus-box {
	grid-column: 3 / span 2;
	justify-self: start;
	display: grid;
	gap: 6px;
	background: var(--bonus-bg);
	border: 1px solid var(--bonus-stroke);
	border-radius: var(--r-lg);
	padding: 16px 18px;
	max-width: 520px;
}

.bonus-red {
	color: var(--accent-red);
	font-weight: 900;
	font-size: 22px;
	letter-spacing: .2px;
}

.bonus-black {
	color: var(--text-2);
	font-size: 14px;
}

/* ===== col 5/6 — перки */
.perks {
	grid-column: 5;
	justify-self: start;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	color: var(--text-1);
}

	.perks li {
		position: relative;
		padding-left: 24px;
		font-size: 15px;
	}

		.perks li::before {
			content: "✓";
			position: absolute;
			left: 0;
			top: 0;
			line-height: 1;
			font-weight: 900;
			font-size: 130%;
		}

	.perks i {
		display: none;
	}

/* ===== col 6/6 — кнопка */
.cta {
	grid-column: 6;
	justify-self: end;
}

.btn-register {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border-radius: var(--r-pill);
	background: var(--accent-red);
	color: #fff;
	font-weight: 900;
	font-size: 18px;
	text-decoration: none;
	box-shadow: 0 10px 18px rgba(229,35,58,.18);
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
	box-sizing: border-box;
}

	.btn-register:hover {
		transform: translateY(-1px);
		box-shadow: 0 14px 26px rgba(229,35,58,.25);
	}

/* защитa от распирания */
.casino-card, .card-left, .card-top, .bonus-box, .perks, .cta {
	min-width: 0;
}

	.casino-card *, .casino-card *::before, .casino-card *::after {
		box-sizing: border-box;
	}

/* ================== MEDIUM (760–1159px): одна КОМПАКТНАЯ (full width rows) ================== */
@media (min-width:760px) and (max-width:1159px) {
	.casino-listing {
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 20px;
	}

	.casino-card {
		--gap: 14px;
		--rs: 58px;
		/* одна колонка, чтобы ряды были шириной как кнопка */
		grid-template-columns: 1fr;
		grid-template-areas:
			"logo"
			"title"
			"bonus"
			"perks"
			"cta";
		row-gap: 16px;
		padding: 18px 16px 26px;
	}

		.casino-card::after {
			display: none;
		}

	.card-left {
		grid-area: logo;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 16px 14px 12px;
		background: #fff;
		border-radius: 16px;
		box-shadow: inset 0 0 0 2px rgba(242,204,105,.45);
	}

	.logo-wrap {
		margin-top: 10px;
	}

	.casino-logo {
		max-height: 68px;
	}

	.rank-badge {
		top: 8px;
		left: 12px;
	}

	.rank-label {
		top: 8px;
		right: 12px;
		left: auto;
	}

	.card-top {
		grid-area: title;
		width: 100%;
		position: relative; /* место под круг справа */
		padding-right: calc(var(--rs) + 12px);
		display: block; /* заголовок занимает всю строку */
	}

	.casino-title {
		text-align: left;
	}

	/* круг рейтинга — фиксирован справа, не влияет на ширину строки */
	.rating-circle {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		min-width: var(--rs);
		min-height: var(--rs);
		width: var(--rs);
		height: var(--rs);
		border-width: 4px;
	}

	.bonus-box {
		grid-area: bonus;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		position: relative;
	}

		.bonus-box::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -10px;
			border-bottom: 2px dashed rgba(0,0,0,.08);
		}

	.perks {
		grid-area: perks;
		width: 100%;
		max-width: 100%;
		position: relative;
	}

		.perks::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -10px;
			border-bottom: 2px dashed rgba(0,0,0,.08);
		}

	.cta {
		grid-area: cta;
		justify-self: stretch;
		width: 100%;
	}

	.btn-register {
		width: 100%;
		justify-content: center;
	}
}

/* ================== MOBILE (<=759px): одна КОМПАКТНАЯ (full width rows) ================== */
@media (max-width:759px) {
	.casino-listing {
		grid-template-columns: 1fr;
	}

	.casino-card {
		--gap: 12px;
		--rs: 60px;
		/* одна колонка + растяжение строк */
		grid-template-columns: 1fr;
		grid-template-areas:
			"logo"
			"title"
			"bonus"
			"perks"
			"cta";
		row-gap: 16px;
		padding: 18px 16px 30px;
		justify-items: stretch; /* без центрирования, строки на всю ширину */
	}

		.casino-card::after {
			display: none;
		}

	.card-left {
		grid-area: logo;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 16px 14px 12px;
		background: #fff;
		border-radius: 16px;
		box-shadow: inset 0 0 0 2px rgba(242,204,105,.45);
	}

	.logo-wrap {
		margin-top: 10px;
	}

	.casino-logo {
		max-height: 72px;
	}

	.rank-badge {
		top: 8px;
		left: 12px;
	}

	.rank-label {
		top: 8px;
		right: 12px;
		left: auto;
	}

	.card-top {
		grid-area: title;
		width: 100%;
		position: relative;
		padding-right: calc(var(--rs) + 12px);
	}

	.casino-title {
		text-align: left;
	}

	.rating-circle {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		min-width: var(--rs);
		min-height: var(--rs);
		width: var(--rs);
		height: var(--rs);
		border-width: 4px;
	}

	.bonus-box {
		grid-area: bonus;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		position: relative;
	}

		.bonus-box::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -10px;
			border-bottom: 2px dashed rgba(0,0,0,.08);
		}

	.perks {
		grid-area: perks;
		width: 100%;
		max-width: 100%;
		position: relative;
	}

		.perks::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -10px;
			border-bottom: 2px dashed rgba(0,0,0,.08);
		}

	.cta {
		grid-area: cta;
		justify-self: stretch;
		width: 100%;
	}

	.btn-register {
		width: 100%;
		justify-content: center;
	}
}
/* +10px сверху/снизу у блока title+rating */
.card-top {
	margin-block: 10px; /* 10px сверху и снизу */
}

/* на medium */
@media (min-width:760px) and (max-width:1159px) {
	.card-top {
		margin-block: 10px;
	}
}

/* на mobile */
@media (max-width:759px) {
	.card-top {
		margin-block: 10px;
	}
}