/**
 * Стилі сторінки «Ярмарки в Києві сьогодні».
 * Мобайл-фьорст, префікс hy-, без зовнішніх залежностей.
 *
 * ВАЖЛИВО про специфічність. Наш блок виводиться всередині the_content(),
 * тому на нього падають стилі теми:
 *   .newstemplate p            { font-size: 20px; margin-bottom: 30px }  (0,1,1)
 *   .post_content ul           { padding: 15px 40px 10px 40px }         (0,1,1)
 *   .post_content ul li        { padding-bottom: 15px; padding-left: 5px } (0,1,2)
 * Одноклассові правила (0,1,0) їм програють — саме тому підказка про ціну
 * рендерилась 20-м кеглем, а бейджі роз'їжджались.
 * Тому КОЖНЕ правило картки скоупимо через .hy-app: два класи (0,2,0)
 * впевнено б'ють будь-яке однокласове правило теми незалежно від порядку
 * підключення файлів. Не прибирайте .hy-app з селекторів.
 *
 * Прозові блоки (інтро, довідка) свідомо лишені на стилях теми —
 * там кегль і ритм сайту доречні. Перебиваємо тільки службову дрібноту.
 */

.hy-app {
	--hy-accent: #c8102e;
	--hy-ink: #1a1a1a;
	--hy-muted: #6b6b6b;
	--hy-line: #e3e3e3;
	--hy-bg-soft: #f7f7f5;
	--hy-radius: 6px;

	/*
	 * Токени дизайн-хендоффа оголошені саме тут, на рівні всього блоку,
	 * а не на .hm-fairs. Секції мапи, довідки й понеділкового стану —
	 * СУСІДИ .hm-fairs, а не нащадки, тож зі змінних на .hm-fairs вони
	 * не успадкували б нічого і заголовки лишились би без кольору.
	 */
	--hm-navy: #35495e;
	--hm-red: #e74c3c;
	--hm-red-600: #d53e2e;
	--hm-red-link: #e94b35;
	--hm-label-gray: #5a6570;
	--hm-ink: #2c2c2c;
	--hm-ink-soft: #55606b;
	--hm-ink-faint: #8a929b;
	--hm-line: #e2e5e8;
	--hm-line-strong: #c9ced3;
	--hm-surface-alt: #f2f3f4;
	--hm-font-ui: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hm-font-serif: "Lora", Georgia, "Times New Roman", serif;

	max-width: 100%;
	color: var(--hy-ink);
}

/*
 * Заголовки секцій блоку — єдиний вигляд: той самий, що й адреса в картці
 * (navy 27px/1.2 Open Sans 800). Тема дає їм 23px через .newstemplate h2
 * (0,1,1), тому скоупу .hy-app (0,2,0) вистачає; ID-правил на h2/h3
 * у темі немає — перевірено аудитом усіх трьох підключених CSS.
 */
.hy-app .hy-map-section__title,
.hy-app .hy-info__title,
.hy-app .hy-info__subtitle,
.hy-app .hy-week__title,
.hy-app .hy-regular__title {
	font: 800 27px/1.2 var(--hm-font-ui);
	letter-spacing: -0.01em;
	color: var(--hm-navy);
}

.hy-app * {
	box-sizing: border-box;
}

/* --- плашка «дані станом на» --- */

.hy-app .hy-notice {
	margin: 0 0 24px;
	padding: 12px 16px;
	border-left: 3px solid var(--hy-line);
	background: var(--hy-bg-soft);
	border-radius: 0 var(--hy-radius) var(--hy-radius) 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--hy-muted);
}

.hy-app .hy-notice--warn {
	border-left-color: var(--hy-accent);
}

/* --- мапа --- */

.hy-app .hy-map-section {
	margin: 32px 0;
}

.hy-app .hy-map-section__title {
	margin: 0 0 12px;
}

/*
 * Ярмарки розкидані по місту на 10-15 км, а самі майданчики — 50-100 м,
 * тому в низькому й вузькому контейнері fitBounds відкривався на масштабі
 * області. На мобільному рятує висота (70vh), на десктопі — ширина всієї
 * колонки: 1180x520 дає той самий зум, що й квадрат, але без прокрутки
 * на два екрани. Самі маркери мають фіксований розмір у пікселях,
 * тож видимі на будь-якому зумі.
 */
.hy-app .hy-map {
	height: 70vh;
	min-height: 420px;
	max-height: 560px;
	border: 1px solid var(--hy-line);
	border-radius: var(--hy-radius);
	background: var(--hy-bg-soft);
}

/*
 * Монохромна підкладка без стороннього тайлового сервісу: знебарвлюємо
 * самі тайли OSM. Фільтр стоїть САМЕ на .leaflet-tile-pane, а не на
 * контейнері мапи, бо пейни Leaflet — сусіди, а не вкладені один в одного
 * (tile 200, overlay 400, marker 600, popup 700 усередині .leaflet-map-pane).
 * Тому полігони, маркери й попапи лишаються кольоровими, а атрибуція OSM
 * узагалі поза .leaflet-map-pane і теж не зачеплена.
 * brightness/contrast трохи підіймають тон, щоб сіре не читалось брудним
 * і червоні маркери лишались домінантою.
 */
.hy-app .hy-map .leaflet-tile-pane {
	filter: grayscale(1) brightness(1.03) contrast(0.95);
}

/* Маркер локації — той самий фірмовий червоний, що й кнопки. */
.hy-app .hy-map .hy-marker {
	stroke: #fff;
	stroke-width: 3;
	fill: var(--hy-accent);
	fill-opacity: 1;
}

.hy-app .hy-map__noscript,
.hy-app .hy-map__error {
	margin: 0;
	padding: 16px;
	font-size: 14px;
	color: var(--hy-muted);
}

/*
 * Попап Leaflet кладе у свій pane ВСЕРЕДИНІ #hy-map, тобто всередині .hy-app.
 * Тому скоупимо так само: інакше .newstemplate p (0,1,1) і власне
 * .leaflet-popup-content p теми/Leaflet переб'ють однокласові правила
 * і рядки попапа поїдуть у 20px.
 */
.hy-app .hy-popup__address {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hy-ink);
}

.hy-app .hy-popup__detail,
.hy-app .hy-popup__district,
.hy-app .hy-popup__date,
.hy-app .hy-popup__hours {
	margin: 0 0 4px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--hy-muted);
}

.hy-app .hy-popup p:last-child {
	margin-bottom: 0;
}

/* --- порожній / понеділковий стан --- */

/*
 * Ритм понеділкових блоків. Крок узятий співмірно до буднього стану:
 * там групи районів розділені 44px, а картки в сітці — 24px.
 * Тут: 44px між блоками, 24px після H2, 28px між групами районів,
 * 8px між назвою району і списком адрес.
 */
.hy-app .hy-week__title,
.hy-app .hy-regular__title {
	margin: 44px 0 24px;
}

/* У блоці регулярних локацій після H2 йде вступний абзац,
   тому повітря переносимо на нього. */
.hy-app .hy-regular__title {
	margin-bottom: 8px;
}

.hy-app .hy-regular__intro {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--hy-muted);
}

.hy-app .hy-week__district,
.hy-app .hy-regular__district {
	margin: 0 0 28px;
}

.hy-app .hy-week__district:last-child,
.hy-app .hy-regular__district:last-child {
	margin-bottom: 0;
}

/* Назви районів — navy, як усі інші заголовки блоку.
   Розмір лишається дрібним: це підзаголовок, а не заголовок секції. */
.hy-app .hy-week__district-title,
.hy-app .hy-regular__district-title {
	margin: 0 0 8px;
	font: 700 16px/1.3 var(--hm-font-ui);
	color: var(--hm-navy);
}

/* ---------- секція «Де будуть ярмарки цього тижня» ---------- */

.hy-app .hy-week {
	margin: 44px 0 0;
}

.hy-app .hy-week__intro {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--hy-muted);
}

.hy-app .hy-week__day {
	margin: 0 0 32px;
}

.hy-app .hy-week__day:last-child {
	margin-bottom: 0;
}

/* Підзаголовок дня — проміжний рівень: між H2 секції (27px)
   і назвами районів (16px). */
.hy-app .hy-week__daytitle {
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--hm-line);
	font: 700 19px/1.25 var(--hm-font-ui);
	color: var(--hm-navy);
}

/* Тема дає спискам у контенті padding 15px 40px — гасимо,
   інакше адреси провалюються вправо і ритм розсипається. */
.hy-app .hy-week__list,
.hy-app .hy-regular__list {
	margin: 0;
	padding: 0 0 0 20px;
}

.hy-app .hy-week__list li,
.hy-app .hy-regular__list li {
	margin: 0 0 4px;
	padding: 0;
	line-height: 1.5;
}

/* --- довідковий блок --- */

.hy-app .hy-info {
	margin: 40px 0 0;
	padding-top: 24px;
	border-top: 2px solid var(--hy-line);
}

.hy-app .hy-info__title {
	margin: 0 0 12px;
}

.hy-app .hy-info__subtitle {
	margin: 24px 0 10px;
}

.hy-app .hy-faq__item {
	border-bottom: 1px solid var(--hy-line);
}

.hy-app .hy-faq__q {
	padding: 12px 0;
	min-height: 44px;
	font-weight: 600;
	cursor: pointer;
}

.hy-app .hy-faq__a {
	padding: 0 0 12px;
}

/* --- від планшета й ширше --- */

@media (min-width: 700px) {
	/* На десктопі мапа — на всю ширину колонки (1180px) і невисока:
	   при такій пропорції (~2:1) місто видно цілком, а сторінка
	   не розтягується на два екрани, як було з квадратом. */
	.hy-app .hy-map {
		height: 520px;
		min-height: 0;
		max-height: none;
	}
}

/* ============================================================
   ДИЗАЙН-ХЕНДОФФ: секція списку ярмарків (класи hm-*)
   Значення взяті з design_handoff_yarmarky/yarmarky.css як є.
   Відмінність від файлу дизайнера рівно одна: КОЖНЕ правило
   скоупнуте через .hy-app — інакше .newstemplate p (0,1,1)
   і .post_content ul li (0,1,2) теми переб'ють однокласові
   правила, як це вже було з підказкою про ціну і бейджами.
   Шрифти Open Sans / Lora на сайті вже підключені — не дублюємо.
   ============================================================ */

.hy-app .hm-fairs {
	/* Токени підняті на .hy-app — див. коментар там. */

	/* Ширину й центрування дає колонка шаблону (.hy-page-width),
	   тому власних max-width і бокових padding тут немає.
	   Верхні 60px — це рівно той відступ, який тема дає звичайній статті
	   (.newstemplate h1.newstitle { margin-top: 60px }), інакше кікер
	   злипався б із меню сайту. */
	padding: 60px 0 8px;
	font-family: var(--hm-font-ui);
	color: var(--hm-ink);
	-webkit-font-smoothing: antialiased;
}

/* ---------- шапка ---------- */

.hy-app .hm-fairs__head {
	margin-bottom: 44px;
	padding-bottom: 26px;
	border-bottom: 3px solid var(--hm-navy);
}

.hy-app .hm-fairs__kicker {
	font: 700 12px/1 var(--hm-font-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hm-red);
}

.hy-app .hm-fairs__title {
	margin: 12px 0 0;
	font: 800 46px/1.08 var(--hm-font-ui);
	letter-spacing: -0.015em;
	color: var(--hm-navy);
}

/* max-width: 58ch з макета знято: вся сторінка однієї ширини,
   лід не звужуємо окремо. */
.hy-app .hm-fairs__lead {
	margin: 14px 0 0;
	font: 400 18px/1.6 var(--hm-font-serif);
	color: var(--hm-ink-soft);
	text-wrap: pretty;
}

/* ---------- групи по районах ---------- */

.hy-app .hm-fairs__groups {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.hy-app .hm-fairs__grouphead {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.hy-app .hm-fairs__districttitle {
	margin: 0;
	font: 800 13px/1 var(--hm-font-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hm-label-gray);
}

.hy-app .hm-fairs__rule {
	flex: 1;
	height: 1px;
	background: var(--hm-line);
}

.hy-app .hm-fairs__count {
	font: 600 13px/1 var(--hm-font-ui);
	color: var(--hm-ink-faint);
	white-space: nowrap;
}

.hy-app .hm-fairs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
	gap: 24px;
}

/* ---------- картка ---------- */

.hy-app .hm-fair {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hm-line);
	border-radius: 8px;
	transition: border-color 160ms ease-in-out, box-shadow 160ms ease-in-out;
}

.hy-app .hm-fair:hover {
	border-color: var(--hm-line-strong);
	box-shadow: 0 6px 26px rgba(53, 73, 94, 0.1);
}

.hy-app .hm-fair__body {
	padding: 26px 28px 24px;
}

.hy-app .hm-fair__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.hy-app .hm-fair__num {
	padding: 6px 8px;
	border-radius: 3px;
	background: var(--hm-red);
	color: #fff;
	font: 800 12px/1 var(--hm-font-ui);
	letter-spacing: 0.02em;
}

.hy-app .hm-fair__district {
	font: 700 12px/1 var(--hm-font-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hm-label-gray);
}

.hy-app .hm-fair__address {
	margin: 0;
	font: 800 27px/1.2 var(--hm-font-ui);
	letter-spacing: -0.01em;
	color: var(--hm-navy);
	text-wrap: balance;
}

/* Уточнення «в межах вулиць …» — не з макета: у даних КМДА такі хвости
   є, і в заголовку картки вони його ламали. Дрібним і приглушеним. */
.hy-app .hm-fair__addrnote {
	margin: 6px 0 0;
	font: 400 13px/1.4 var(--hm-font-serif);
	color: var(--hm-ink-faint);
}

/* ---------- чипи ---------- */

.hy-app .hm-fair__goods {
	margin-top: 20px;
}

.hy-app .hm-fair__label {
	margin-bottom: 11px;
	font: 700 11px/1 var(--hm-font-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hm-ink-faint);
}

.hy-app .hm-fair__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hy-app .hm-fair__chip {
	margin: 0;
	padding: 5px 10px;
	border-radius: 3px;
	background: var(--hm-surface-alt);
	font: 600 13px/1.3 var(--hm-font-ui);
	color: var(--hm-navy);
	list-style: none;
}

/* ---------- ціни (нативний details) ---------- */

.hy-app .hm-fair__prices {
	margin-top: 20px;
}

.hy-app .hm-fair__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 14px/1 var(--hm-font-ui);
	color: var(--hm-red);
	cursor: pointer;
	list-style: none;
	transition: color 160ms ease-in-out;
}

.hy-app .hm-fair__toggle::-webkit-details-marker {
	display: none;
}

.hy-app .hm-fair__toggle:hover {
	color: var(--hm-red-600);
}

.hy-app .hm-fair__toggle::after {
	content: "\25BE";
	font-size: 11px;
}

.hy-app .hm-fair__prices[open] .hm-fair__toggle::after {
	content: "\25B4";
}

.hy-app .hm-fair__pricebox {
	margin-top: 14px;
	padding: 14px 18px 16px;
	border-radius: 6px;
	background: var(--hm-surface-alt);
}

.hy-app .hm-fair__pricelist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	column-gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hy-app .hm-fair__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 7px 0;
	border-bottom: 1px dotted var(--hm-line-strong);
	list-style: none;
}

.hy-app .hm-fair__pricename {
	flex: 1;
	font: 400 15px/1.4 var(--hm-font-serif);
	color: var(--hm-ink);
}

.hy-app .hm-fair__priceval {
	font: 700 14px/1 var(--hm-font-ui);
	color: var(--hm-navy);
	white-space: nowrap;
}

.hy-app .hm-fair__note {
	margin: 14px 0 0;
	font: italic 400 13px/1.5 var(--hm-font-serif);
	color: var(--hm-ink-soft);
}

/* ---------- підвал картки ---------- */

.hy-app .hm-fair__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	padding: 16px 28px;
	border-top: 1px solid var(--hm-line);
}

.hy-app .hm-fair__org {
	margin: 0;
	font: 400 14px/1.5 var(--hm-font-serif);
	color: var(--hm-ink-soft);
}

.hy-app .hm-fair__tel {
	font-family: var(--hm-font-ui);
	font-weight: 600;
	color: var(--hm-red-link);
	border-bottom: 0;
	box-shadow: none;
	text-decoration: none;
}

.hy-app .hm-fair__tel:hover {
	color: var(--hm-red-600);
	text-decoration: underline;
}

/* ---------- кнопка ---------- */

.hy-app .hm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 26px;
	border: 2px solid transparent;
	border-radius: 4px;
	font: 700 15px/1 var(--hm-font-ui);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background 160ms ease-in-out, color 160ms ease-in-out, border-color 160ms ease-in-out;
}

.hy-app .hm-btn--sm {
	padding: 8px 16px;
	font-size: 13px;
}

.hy-app .hm-btn--outline {
	background: transparent;
	color: var(--hm-red);
	border-color: var(--hm-red);
}

.hy-app .hm-btn--outline:hover {
	background: var(--hm-red);
	color: #fff;
}

/* ---------- стик із рештою сторінки ---------- */

/* Колонка шаблону: тема тримає 770px, сітці карток потрібно більше.
   Верхній padding знято — відступ від меню задає .hm-fairs одним місцем. */
.page_width.hy-page-width {
	max-width: 1180px;
	padding: 0 24px 15px;
}

/* Обмежень ширини всередині секції немає свідомо: вся сторінка йде
   однією шириною — плашка, сітка карток, мапа, довідка і FAQ
   однаково тягнуться на 1180px колонки. */

.hy-app .hy-map-section {
	margin: 44px 0;
}

/* ============================================================
   ПЕРЕБИВАЄМО ID-ПРАВИЛА ТЕМИ
   Тема має два правила з ID, а їх класами не перебити взагалі:

     #main article        { border-bottom: 0; padding: 0 0 9px; }   (1,0,1)
     #main article footer { border-top: none; margin-top: 0;
                            padding-top: 0; }                        (1,0,2)

   Перше з'їдало нижню рамку картки, друге —
   лінію над підвалом і margin-top:auto, через який підвал притискається
   донизу й картки в ряду виходять однакової висоти.
   Єдиний спосіб виграти — теж узяти ID у селектор.
   ============================================================ */

#main .hy-app .hm-fair {
	margin-bottom: 0;
	padding: 0;
	border: 1px solid var(--hm-line);
	border-radius: 8px;
}

#main .hy-app .hm-fair:hover {
	border-color: var(--hm-line-strong);
}

#main .hy-app .hm-fair__foot {
	margin-top: auto;
	padding: 16px 28px;
	border-top: 1px solid var(--hm-line);
}

/* ---------- адаптив ---------- */

@media (max-width: 900px) {
	.hy-app .hm-fairs__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.page_width.hy-page-width {
		padding: 0 16px 15px;
	}

	/* На мобільному відступ від меню менший — як у самої теми (40px). */
	.hy-app .hm-fairs {
		padding-top: 40px;
	}

	.hy-app .hm-fairs__title {
		font-size: 32px;
	}

	.hy-app .hm-fairs__lead {
		font-size: 17px;
	}

	.hy-app .hm-fair__body {
		padding: 20px 18px;
	}

	.hy-app .hm-fair__foot {
		padding: 14px 18px;
	}

	.hy-app .hm-fair__address {
		font-size: 22px;
	}

	/* Заголовки секцій — рівно як адреса картки на мобільному. */
	.hy-app .hy-map-section__title,
	.hy-app .hy-info__title,
	.hy-app .hy-info__subtitle,
	.hy-app .hy-week__title,
	.hy-app .hy-regular__title {
		font-size: 22px;
	}

	.hy-app .hm-fair__pricelist {
		grid-template-columns: 1fr;
	}
}