/* ==========================================================
   Yell — главная на телефоне
   Всё, что на десктопе сетка, здесь — горизонтальная карусель со снапом.
   Маркап не меняется — только CSS.
   ========================================================== */

@media (max-width: 767px) {

.yh { --yh-gut: 18px; }

/* ---------- базовый скроллер в край экрана ---------- */
.yh-cats,
.yh-cards,
.yh-areas,
.yh-revs,
.yh-often {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin-inline: calc(-1 * var(--yh-gut));
	padding-inline: var(--yh-gut);
	scroll-padding-inline: var(--yh-gut);
	padding-bottom: 2px;
}
.yh-cats::-webkit-scrollbar,
.yh-cards::-webkit-scrollbar,
.yh-areas::-webkit-scrollbar,
.yh-revs::-webkit-scrollbar,
.yh-often::-webkit-scrollbar { display: none; }

.yh-cats > *,
.yh-cards > *,
.yh-areas > *,
.yh-revs > *,
.yh-often > * { scroll-snap-align: start; }

/* хвост карусели подтаивает — видно, что есть продолжение */
.yh-cats,
.yh-cards,
.yh-areas {
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}

/* ---------- герой ---------- */
.yh-hero { padding: 24px 0 28px; }
.yh-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.yh-h1 {
	font-size: clamp(29px, 8.6vw, 42px);
	letter-spacing: -0.04em;
	max-width: none;
	margin-bottom: 10px;
}
.yh-lede { font-size: 15.5px; line-height: 1.45; margin-bottom: 16px; max-width: none; }
.yh-search { margin-bottom: 14px; }

/* «часто ищут» — лента чипсов */
.yh-often {
	grid-auto-columns: max-content;
	align-items: center;
	gap: 8px;
}
.yh-often .sep { display: none; }
.yh-often-label { white-space: nowrap; padding-right: 2px; }
.yh-often a {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--yell-border);
	border-radius: 999px;
	background: var(--yell-surface);
	white-space: nowrap;
	font-size: 13.5px;
}
.yh-often a:hover,
.yh-often a:active { border-color: var(--yell-ink); }

/* тёмная панель сводки — горизонтальная лента цифр */
.yh-pulse { position: static; padding: 18px 0 18px 18px; border-radius: 18px; }
.yh-pulse-title { margin-bottom: 14px; font-size: 13.5px; }
.yh-pulse-list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	gap: 28px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-right: 18px;
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
}
.yh-pulse-list::-webkit-scrollbar { display: none; }
.yh-pulse-list > * { scroll-snap-align: start; }
.yh-stat-num { font-size: 27px; }
.yh-stat-lbl { font-size: 12.5px; white-space: nowrap; }
.yh-pulse-foot { display: none; }

/* ---------- секции ---------- */
.yh-sec { padding: 30px 0; }
.yh-sec-head { margin-bottom: 16px; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.yh-h2 { font-size: clamp(23px, 6.6vw, 30px); }
.yh-sec-note { font-size: 13.5px; }
.yh-sec-link { font-size: 13.5px; }

/* ---------- категории: две строки, свайп вбок ---------- */
.yh-cats {
	grid-template-rows: repeat(2, 1fr);
	grid-auto-columns: min(60vw, 240px);
	gap: 10px;
}
.yh-cat { padding: 13px 14px; gap: 11px; border-radius: 13px; }
.yh-cat img { width: 30px; height: 30px; flex: 0 0 30px; }
.yh-cat-name {
	font-size: 14.5px;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.yh-cat-count { font-size: 12px; }

/* ---------- карточки «открыто сейчас» ---------- */
.yh-cards {
	grid-auto-columns: min(74vw, 290px);
	gap: 12px;
}
.yh-card-body { padding: 13px 14px 15px; }
.yh-card-title { font-size: 15.5px; }
.yh-card-foot { font-size: 12.5px; }

/* ---------- секторы города ---------- */
.yh-areas {
	grid-auto-columns: min(44vw, 180px);
	gap: 10px;
}
.yh-area { padding: 16px 16px 18px; border-radius: 13px; }
.yh-area-name { font-size: 15px; }
.yh-area-count { font-size: 12.5px; }

/* ---------- отзывы: один на экран с подглядыванием ---------- */
.yh-revs {
	grid-auto-columns: min(84vw, 340px);
	gap: 16px;
	align-items: start;
	scroll-snap-type: x mandatory;
}
.yh .yh-rev { padding: 16px 0 0 !important; }
.yh-rev-text { font-size: 15.5px; line-height: 1.45; margin-bottom: 12px; }
.yh-rev-stars { font-size: 14px; margin-bottom: 9px; }
.yh-rev-foot { font-size: 13px; }

/* точки под любой каруселью (рисует yell-carousel.js) */
.yh-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
}
.yh-dots i {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #D6CFC0;
	transition: width .2s ease, background .2s ease;
}
.yh-dots i.is-on { width: 20px; background: var(--yell-ink); }

/* ---------- блок для бизнеса ---------- */
.yh-cta { padding: 26px 20px; border-radius: 18px; gap: 20px; }
.yh-cta-h2 { font-size: clamp(21px, 6.2vw, 27px); max-width: none; }
.yh-cta-text { font-size: 14.5px; }
.yh-cta-btn { width: 100%; text-align: center; padding: 15px 20px; }

}

/* у кого выключены анимации — без инерционного снапа */
@media (prefers-reduced-motion: reduce) {
	.yh-cats, .yh-cards, .yh-areas, .yh-revs, .yh-often, .yh-pulse-list { scroll-snap-type: none; }
}

@media (max-width: 767px) {
.yh-quick {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 130;
	padding: 8px 14px;
	background: rgba(255,255,255,.96);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--yell-border);
	transform: translateY(-102%);
	transition: transform .22s ease;
	pointer-events: none;
}
.yh-quick.is-on { transform: translateY(0); pointer-events: auto; }
.admin-bar .yh-quick { top: 46px; }
.yh-quick button {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--yell-border);
	border-radius: 999px;
	background: var(--yell-surface);
	color: var(--yell-muted);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 6px 18px -14px rgba(21,23,27,.6);
}
.yh-quick button svg { color: var(--yell-ink); flex: 0 0 auto; }
}