/*
 * Collection page styles — extracted verbatim from ref/ru/collection.html
 * inline <style> block (the styled-components-emitted rules for the hero
 * banner and description block).
 *
 * Selectors here MUST match the exact hashed styled-component class names
 * used in app/[lang]/[slug]/page.tsx (Header__Outer / emHEpL, etc.).
 */

.emHEpL {
	display: flex;
	flex-direction: column;
	-webkit-box-pack: end;
	justify-content: flex-end;
	position: relative;
	width: 100%;
	height: 66vh;
}
@media (min-width: 48em) {
	.emHEpL {
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
	}
}
.emHEpL .LazyImage-sc-1irpqj2-0 {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.jQemZv {
	position: absolute;
	z-index: 1;
	background: linear-gradient(
		rgba(12, 57, 63, 0) 0%,
		rgba(12, 57, 63, 0.5) 70%,
		rgb(12, 57, 63) 100%
	);
	inset: 0px;
}

.iDXIRE {
	width: 100%;
	max-width: 1300px;
	margin-bottom: 40px;
	z-index: 2;
	padding: 0px 16px;
}

.gHpEDK {
	color: rgb(255, 255, 255);
	font-size: 18px;
	font-weight: 300;
	margin-bottom: 16px;
}
@media (min-width: 48em) {
	.gHpEDK {
		font-size: 24px;
	}
}

.dOPVSI {
	color: rgb(255, 255, 255);
	font-size: 30px;
	font-weight: 400;
	margin-bottom: 0px;
}
@media (min-width: 48em) {
	.dOPVSI {
		font-size: 40px;
	}
}

.cdqgXo {
	line-height: 1.5;
	margin: 40px 0px;
	max-width: 600px;
}

.jImfWL {
	font-size: 16px;
	font-weight: 300;
}
@media (min-width: 48em) {
	.jImfWL {
		font-size: 18px;
	}
}

/*
 * Per-card slot widths inside the collection grid.
 * Ported verbatim from ref/ru/collection.html .fEGkAG (the styled-component
 * class that sized the slot in the original React-rendered page). We apply it
 * to .cards-wrapper > .title__item__wrapper so it only affects the collection
 * page, not anywhere else .title__item__wrapper appears.
 */
.cards-wrapper > .title__item__wrapper {
	box-sizing: border-box;
	padding: 0px 16px;
	width: 100%;
}
@media (min-width: 48em) {
	.cards-wrapper > .title__item__wrapper {
		padding: 0px 14px;
		width: 50%;
	}
}
@media (min-width: 62em) {
	.cards-wrapper > .title__item__wrapper {
		width: 33.3333%;
	}
}
@media (min-width: 100em) {
	.cards-wrapper > .title__item__wrapper {
		width: 33.33%;
	}
}

/*
 * Bottom collections-section spacing (the gap to the footer + above the
 * "Коллекции глемпингов" heading). Ported verbatim from ref's .iqCkrH.
 */
.iqCkrH {
	margin: 40px 0px;
}

/*
 * Force the card grid container to flex-wrap on the collection page.
 * collections.css (loaded after main-page-styles.css) sets
 * `.cards-wrapper { display: block; }` at the same specificity as
 * `.iJSVBS { display: flex; flex-wrap: wrap; }`, so block wins —
 * killing the grid. `.iJSVBS.cards-wrapper` has specificity 0,2,0,
 * which beats both. Also drops the extra 20px top margin our
 * main-page-styles.css adds (ref has 0 top margin here), so the
 * description↔grid gap matches live.
 */
.iJSVBS.cards-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin-top: 0;
}
@media (min-width: 48em) {
	.iJSVBS.cards-wrapper {
		margin: 0px -14px;
	}
}

/* ────────────────────────────────────────────────────────────
   COLLECTION MAP (v0.16) — "Show map / Hide map" toggle + Mapbox.
   Page-specific: linked only by CollectionPageView.
   ──────────────────────────────────────────────────────────── */

.collection-map {
	margin: 24px 0 16px;
}

/* Toggle pill — floats bottom-center on the viewport, sticky over the
   grid while the user scrolls. */
.collection-map__toggle {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 500;
	color: white;
	background-color: rgb(12, 103, 118);
	border: 1px solid rgb(12, 103, 118);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(12, 57, 63, 0.28);
	cursor: pointer;
	transition: background-color 0.18s ease-out;
}

.collection-map__toggle:hover,
.collection-map__toggle:focus,
.collection-map__toggle:focus-visible {
	outline: none;
	background-color: rgb(9, 80, 92);
}

.collection-map__toggle-icon {
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12 2C7.6 2 4 5.6 4 10c0 5.5 7 11.5 7.3 11.8.4.3.9.3 1.3 0C12.9 21.5 20 15.5 20 10c0-4.4-3.6-8-8-8zm0 10.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.collection-map__container {
	position: relative;
	width: 100%;
	height: 560px;
	margin-top: 0;
	border-radius: 8px;
	overflow: hidden;
}

@media (max-width: 47.9375em) {
	.collection-map__container {
		height: 420px;
	}
}

/* When the map toggle is ON, the CollectionMap client component adds
   `body.collection-map-on`. Hide the SSR cards grid so the map fills the
   content slot in place. The grid stays in the DOM (good for SEO) — only
   the visual rendering is suppressed. */
body.collection-map-on #collection-grid {
	display: none;
}

/* Popup card inside the Mapbox popup — clean, no underlines, lightning
   price row. Matches the live legacy reference. */
.collection-map-popup-wrapper .mapboxgl-popup-content {
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
.collection-map-popup-wrapper .mapboxgl-popup-close-button {
	font-size: 22px;
	color: white;
	padding: 4px 8px;
	z-index: 2;
}

.collection-map-popup,
.collection-map-popup:hover,
.collection-map-popup:focus,
.collection-map-popup:visited,
.collection-map-popup * {
	text-decoration: none !important;
}

.collection-map-popup {
	display: block;
	width: 260px;
	color: rgb(29, 29, 29);
	background-color: white;
}

.collection-map-popup__img-wrap {
	position: relative;
	width: 100%;
	height: 150px;
	overflow: hidden;
	background-color: rgb(229, 229, 229);
}

.collection-map-popup__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.collection-map-popup__img--placeholder {
	background-image: linear-gradient(135deg, #e6e6e6 0%, #cfcfcf 100%);
}

.collection-map-popup__body {
	padding: 12px 14px 14px;
}

.collection-map-popup__name {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	color: rgb(12, 57, 63);
	line-height: 1.25;
}

.collection-map-popup__sub {
	margin: 0 0 10px;
	font-size: 12px;
	color: rgb(118, 118, 118);
	line-height: 1.3;
}

.collection-map-popup__price {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	font-size: 15px;
	color: rgb(12, 103, 118);
}

.collection-map-popup__price-icon {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 2px;
	background-image: url(/assets/img/lightning-fill.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.collection-map-popup__price strong {
	font-weight: 700;
}

.collection-map-popup__price span {
	color: rgb(118, 118, 118);
	font-size: 12px;
	font-weight: 400;
}