/* ===== Hotel page specific: .hot-* ===== */

/* HERO COLLAGE */
.hot-hero {
	padding: 38px 0 6px;
	border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.hot-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 24px;
	align-items: center
}

.hot-hero__copy {
	max-width: 720px
}

.hot-badge {
	display: inline-block;
	background: rgba(255, 255, 255, .06);
	color: #a2b1c4;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px
}

.hot-hero__title {
	font-size: clamp(28px, 5.6vw, 48px);
	line-height: 1.08;
	margin: .3em 0 .5em
}

.hot-hero__lead {
	color: var(--muted);
	max-width: 62ch
}

.hot-hero__cta {
	display: flex;
	gap: 12px;
	margin-top: 14px;
	flex-wrap: wrap
}

.hot-hero__mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 12px
}

.hot-hero__a {
	grid-column: 1/3;
	height: 260px;
	object-fit: cover;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .08)
}

.hot-hero__b,
.hot-hero__c {
	height: 180px;
	object-fit: cover;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .08)
}

/* STORYLINE (timeline-style) */
.hot-steps {
	counter-reset: hot;
	margin: 16px 0 0;
	padding-left: 0
}

.hot-step {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 12px;
	align-items: start;
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, .06)
}

.hot-step:first-child {
	border-top: 0
}

.hot-step__num {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #221b10;
	border: 1px solid #6b5524;
	color: #ffdca6;
	font-weight: 800;
	letter-spacing: .6px
}

.hot-step__body {
	color: var(--text)
}

/* AMENITIES GRID (текстовая сетка) */
.hot-amen__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none
}

.hot-amen__grid li {
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	background: linear-gradient(180deg, #1a1207, #120c05);
	color: var(--text)
}

.hot-amen__grid b {
	color: #ffdca6
}

/* ROOM TYPES via DL */
.hot-dl {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 10px 18px;
	margin: 10px 0
}

.hot-dl dt {
	color: #ffdca6;
	font-weight: 800
}

.hot-dl dd {
	margin: 0;
	color: var(--text);
	border-bottom: 1px dashed rgba(255, 255, 255, .12);
	padding-bottom: 10px
}

.hot-dl dd:last-child {
	border-bottom: 0
}

/* RIBBON + inclusions table */
.hot-ribbon {
	display: flex;
	gap: 28px;
	overflow: auto;
	white-space: nowrap;
	padding: 10px 16px;
	background: #0a0d10;
	border-top: 1px solid rgba(255, 255, 255, .06);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	scrollbar-width: thin
}

.hot-ribbon span {
	color: #ffdca6;
	font-weight: 800;
	letter-spacing: .4px
}

.hot-table {
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	overflow: hidden
}

.hot-row {
	display: grid;
	grid-template-columns: 1.4fr .6fr .6fr .8fr;
	background: linear-gradient(180deg, #1a1207, #130c05);
	border-top: 1px solid rgba(255, 255, 255, .06)
}

.hot-row--head {
	background: #0f0b05;
	color: #ffdca6;
	font-weight: 700;
	border-top: 0
}

.hot-row>* {
	padding: 12px 14px
}

.hot-note {
	color: var(--muted);
	font-size: 14px;
	margin-top: 8px
}

/* CTA */
.hot-cta__grid {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 24px;
	align-items: center
}

.hot-cta__actions {
	display: flex;
	gap: 12px;
	justify-content: flex-start;
	flex-wrap: wrap
}

/* FAQ */
.hot-faq__item {
	border-top: 1px solid rgba(255, 255, 255, .06);
	padding: 10px 0
}

.hot-faq__q {
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	color: #fff;
	font-weight: 700;
	padding: 8px 0;
	cursor: pointer
}

.hot-faq__a {
	display: none;
	color: var(--muted);
	padding: 0 0 4px
}

/* Responsive */
@media (max-width:1100px) {
	.hot-hero__grid {
		grid-template-columns: 1fr
	}

	.hot-amen__grid {
		grid-template-columns: 1fr 1fr
	}

	.hot-dl {
		grid-template-columns: 1fr
	}

	.hot-cta__grid {
		grid-template-columns: 1fr
	}
}

@media (max-width:720px) {
	.hot-hero__a {
		height: 200px
	}

	.hot-hero__b,
	.hot-hero__c {
		height: 150px
	}

	.hot-amen__grid {
		grid-template-columns: 1fr
	}

	.hot-row {
		grid-template-columns: 1fr 1fr
	}

	.hot-row>*:nth-child(n+3) {
		display: none
	}

	/* на мобиле: Item + Classic */
}