/* ============================================================
   СидрФест RealBrew — стили (версия 2: точные координаты макета)
   
   Координаты всех элементов взяты напрямую из исходного макета
   5442.5 × 12274.7 через inkscape --query-all.
   
   Секции:
   - hero  : Y 0..3250,     aspect 5442.5/3250 = 1.675
   - about : Y 3250..5850,  aspect 5442.5/2600 = 2.093
   - parts : Y 5850..9050,  aspect 5442.5/3200 = 1.701
   - foot  : Y 9050..12274, aspect 5442.5/3224 = 1.688
   ============================================================ */

:root {
	--c-red:    #e5431a;
	--c-yellow: #f0b503;
	--c-white:  #ffffff;

	--font-display: "Peace Sans", "Arial Black", system-ui, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--hero-aspect: 1.675;
	--about-aspect: 2.093;
	--participants-aspect: 1.701;
	--footer-aspect: 1.688;
}

@font-face {
	font-family: "Peace Sans";
	src: url("../fonts/PeaceSans.woff2") format("woff2"),
	     url("../fonts/PeaceSans.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ============ Сброс ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	background: var(--c-red);
	color: var(--c-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .8; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
address { font-style: normal; }

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; z-index: 9999;
	background: var(--c-yellow); color: var(--c-red);
	padding: 8px 16px; border-radius: 4px; font-family: var(--font-display);
}
.skip-link:focus { left: 20px; top: 20px; }

/* ============ Пре-хедер (анонс) ============ */
.site-preheader {
	background: var(--c-yellow);
	color: var(--c-red);
	text-align: center;
	padding: 9px 16px;
	line-height: 1.3;
	z-index: 100;
}
.site-preheader__text {
	margin: 0;
	font-size: clamp(12px, 2.5vw, 14px);
	font-weight: 600;
}

/* ============ Общие правила секций ============ */
.hero, .about, .participants, .site-footer {
	position: relative;
	width: 100%;
	container-type: inline-size;
}
.hero, .participants, .site-footer { overflow: hidden; }
.about { overflow: visible; }  /* облака about торчат вверх в hero */

.hero, .about, .site-footer { background: var(--c-red); }
.participants { background: var(--c-white); }

.hero > img,
.about > img,
.participants > img,
.site-footer > img {
	position: absolute;
	pointer-events: none;
	user-select: none;
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
	aspect-ratio: var(--hero-aspect);
	min-height: 100vh;  /* гарантирует что hero всегда минимум в высоту окна */
	max-height: none;
}

/* --- Декоративные SVG --- */
/* Лого в шапке: L=2.65%, T=4.02%, W=13.51% */
.hero__logo-small {
	top: 4%;
	left: 2.65%;
	width: 13.5%;
	z-index: 3;
}

/* Большое облако в правом верхнем углу hero (el_1): L=82.68%, T=-14.8%, W=24.22%.
   Идёт сверху от края и уходит за пределы hero вверх. */
.hero__cloud-top-right {
	top: -15%;
	left: 82%;
	width: 25%;
	z-index: 2;
}

/* Облако для бэджа даты (el_61 cloud-hero-right → переименовано):
   L=-1.55%, T=23.58%, W=16.20% */
.hero__date-cloud {
	top: 23.5%;
	left: -1.5%;
	width: 16.2%;
	z-index: 2;
}

/* Большая композиция «дерево + облако»: L=32.64%, T=14.76%, W=39.41% */
.hero__tree {
	top: 14.75%;
	left: 32.6%;
	width: 39.4%;
	z-index: 2;
}

/* Большой лого СидрФест: L=56.12%, T=47.46%, W=32.73% */
.hero__logo-big {
	top: 47.5%;
	left: 56.1%;
	width: 32.7%;
	z-index: 3;
}

.hero__cork {
	top: 46%;
	left: 25%;
	width: 5%;
	z-index: 3;
}

/* --- Шапка (меню + кнопка) --- */
/* Меню: T=6.12-6.17%, пункты L=19.65%, 40.96%, 59.96% */
.site-nav {
	position: absolute;
	top: 6.1%;
	left: 19.65%;
	right: 27%;  /* кнопка с 75%, оставляю 2% зазора */
	z-index: 10;
}

.site-nav__list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: clamp(10px, 2vw, 40px);
}

.site-nav__list a {
	font-family: var(--font-display);
	color: var(--c-white);
	font-size: clamp(11px, 2.35cqw, 30px);
	letter-spacing: 0.02em;
	white-space: nowrap;
	font-weight: 400;
}

.site-nav__toggle { display: none; }

/* Кнопка «Купить билет»: расширил до 22% для лучшей видимости */
.btn-ticket {
	position: absolute;
	top: 4%;
	left: 75%;
	width: 22%;
	aspect-ratio: 994 / 411;
	z-index: 10;
	transition: transform .15s;
	display: block;
}

.btn-ticket:hover {
	opacity: 1;
	transform: translateY(-2px);
}

.btn-ticket__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.btn-ticket__text {
	position: absolute;
	left: 10%;
	top: 50%;
	transform: translateY(-50%);
	width: 55%;
	color: var(--c-red);
	font-family: var(--font-display);
	font-size: clamp(12px, 2.2cqw, 30px);
	line-height: 1.05;
	text-align: left;
	font-weight: 400;
	white-space: normal;
}

.btn-ticket.qtickets-button {
	/* Отменяю возможные дефолтные стили qtickets.js, чтобы не влияли на нашу вёрстку */
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	color: var(--c-red) !important;
	width: 220px !important;
}

/* --- Бэдж даты «12 июня» ---
   Текст размещается прямо поверх белого облака date-cloud.svg (L=-1.55%, T=23.58%, W=16.2%).
   Центр облака по ширине ≈ (-1.55 + 16.2/2) = 6.55%, по высоте облака — около 40% его высоты.
*/
.hero__date-badge {
	position: absolute;
	top: 27%;
	left: 1%;  /* было 3% - сдвинул влево, центр на ~7% совпадает с центром облака */
	width: 13%;
	aspect-ratio: 882 / 769;  /* пропорции облака date-cloud */
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
}

.hero__date-num {
	font-family: var(--font-display);
	color: var(--c-red);
	font-size: clamp(22px, 6cqw, 80px);
	line-height: 0.9;
}

.hero__date-month {
	font-family: var(--font-display);
	color: var(--c-red);
	font-size: clamp(10px, 2.1cqw, 24px);
	line-height: 1;
	margin-top: 6%;
	text-transform: lowercase;
}

/* --- Адрес: L=15.73%, T=29.82%, W=19.17% --- */
.hero__address {
	position: absolute;
	top: 29.8%;
	left: 15.7%;
	width: 25%;
	font-family: var(--font-display);
	color: var(--c-yellow);
	font-size: clamp(13px, 2.5cqw, 30px);
	line-height: 1.2;
	z-index: 4;
}

/* --- Слоган «Фестиваль Традиционных Сидров»: L=75.18%, T=33.03%, W=14.66%
       Важно: текст выровнен по ЛЕВОМУ краю своего блока (каждая строка слева) */
.hero__slogan {
	position: absolute;
	top: 33%;
	left: 75.2%;
	width: 20%;
	font-family: var(--font-display);
	color: var(--c-yellow);
	font-size: clamp(15px, 1.95cqw, 36px);
	line-height: 1.2;
	text-align: left;
	z-index: 4;
}

/* --- Статистика: 
   stat1 (30+): L=12.52%, T=54.88%
   stat1-label (сидроделен): T=63.29% 
   stat2 (100+): L=12.81%, T=69.74%
   stat2-label: T=78.16%
   
   Цифры — ЖЁЛТЫЕ, подписи — БЕЛЫЕ
*/
.hero__stats {
	position: absolute;
	top: 48%;  /* подвинул выше, было 52% */
	left: 12.5%;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 2cqw, 40px);  /* меньше зазор между блоками */
}

.hero__stat {
	line-height: 1;
}

.hero__stat-num {
	display: block;
	font-family: var(--font-display);
	color: var(--c-yellow);
	font-size: clamp(44px, 7.5cqw, 140px);
	line-height: 0.85;
	letter-spacing: 0.01em;
}

.hero__stat-label {
	display: block;
	font-family: var(--font-display);
	color: var(--c-white);
	font-size: clamp(12px, 3cqw, 40px);
	line-height: 1;
	margin-top: 4%;  /* было 8% — уменьшил */
}

/* --- Партнёр в about-секции (торчит вверх в hero над облаком about__cloud-tr).
   Раньше было в hero, перенёс в about чтобы облако не дублировалось.
   Облако cloud-tr (el_59) в about: top=-29%, left=82.5%, width=20.6%
   Лого Сигма должен стоять НА этом облаке, подпись слева от облака.
*/
.about__partner {
	position: absolute;
	top: -15%;  /* торчит вверх в hero */
	left: 55%;
	right: 0;
	height: 15%;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(8px, 1.5cqw, 30px);
}

.about__partner-label {
	font-family: var(--font-display);
	color: var(--c-yellow);
	font-size: clamp(13px, 2.5cqw, 26px);
	line-height: 1.1;
	white-space: nowrap;
	margin-bottom: 19%;
	margin-right: 10%;
}

.about__partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(70px, 8cqw, 130px);
	margin-right: 13%;
	margin-bottom: 25%;
}

.about__partner-logo img {
	max-width: 100%;
	max-height: clamp(50px, 5cqw, 100px);
	width: auto;
	height: auto;
}

/* ============================================================
   О ФЕСТИВАЛЕ
   Секция Y=3250..5850, h=2600.
   Плашка el_69: L=5.25%, T=1.50%, W=90.35%, H=77.10%
   Красное облако el_70 (слева сверху): L=-8.76%, T=64.33%, W=22.64%
   Переопределил: el_70 координаты в hero (T=87.5%, L=-9%), в about его нет напрямую.
   Красное облако слева от плашки — беру в about с переопределением
   ============================================================ */
.about {
	aspect-ratio: var(--about-aspect);
	min-height: 400px;
	z-index: 5;
}

/* Облака вокруг плашки — координаты точно из исходного макета
   (секция about Y=3250..5850, высота 2600):
   - cloud-tl:  el_79 (-182, 2809) → top=-17%, left=-3.3%, width=16.5% (торчит в hero)
   - cloud-tr:  el_59 (4490, 2486) → top=-29%, left=82.5%, width=20.6% (торчит в hero)
*/
.about__cloud-tl {
	top: -17%;
	left: -3.3%;
	width: 16.5%;
	z-index: 2;
}

.about__cloud-tr {
	top: -29%;
	left: 82.5%;
	width: 20.6%;
	z-index: 2;
}

.about__ticket-bg {
	top: 1.5%;
	left: 5.25%;
	width: 90.35%;
	z-index: 1;
}

.about__content {
	position: absolute;
	top: 9%;
	left: 9%;
	width: 52%;  /* текст не залезает на дырочки билета (начинаются с ~66%) */
	z-index: 5;
	color: var(--c-red);
	font-family: var(--font-display);
}

.about__title {
	margin: 0 0 4% 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(36px, 7cqw, 120px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	color: var(--c-red);
}

.about__text {
	font-family: var(--font-display);
	font-size: clamp(11px, 1.1cqw, 20px);
	line-height: 1.35;
	color: var(--c-red);
}

.about__text p {
	margin: 0 0 0.9em;
}
.about__text p:last-child { margin-bottom: 0; }

/* ============================================================
   ПРОГРАММА
   Новая секция (не из исходного макета): продолжает красный фон
   «О фестивале», сверху на неё ложится красная волна «Участников».
   Высота по контенту — количество событий не ограничено.
   ============================================================ */
.program {
	position: relative;
	width: 100%;
	container-type: inline-size;
	background: var(--c-red);
	overflow: hidden;
	padding: clamp(40px, 6cqw, 110px) 6% clamp(50px, 7cqw, 130px);
}

.program > img {
	position: absolute;
	pointer-events: none;
	user-select: none;
}

/* Декоративные облака по краям — те же SVG, что в about/футере */
.program__cloud-left {
	top: 6%;
	left: -4%;
	width: 17%;
	z-index: 1;
}
.program__cloud-right {
	bottom: 4%;
	left: 84%;
	width: 20%;
	z-index: 1;
}

.program__content {
	position: relative;
	z-index: 5;
	max-width: 62%;
	margin: 0 auto;
	font-family: var(--font-display);
}

.program__title {
	margin: 0 0 0.5em;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(36px, 7cqw, 120px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	color: var(--c-yellow);
	text-align: center;
}

/* Пункты разделены пунктирной жёлтой линией — в духе линии отрыва билета */
.program__item {
	padding: clamp(14px, 1.6cqw, 28px) 0;
	border-bottom: 2px dashed rgba(240, 181, 3, 0.55);
}
.program__item:last-child { border-bottom: 0; }

.program__row {
	display: flex;
	align-items: baseline;
	gap: clamp(14px, 2cqw, 36px);
}

.program__time {
	flex: 0 0 clamp(70px, 8cqw, 140px);
	font-size: clamp(20px, 2.6cqw, 44px);
	line-height: 1;
	color: var(--c-yellow);
}

.program__event {
	font-size: clamp(16px, 1.9cqw, 32px);
	line-height: 1.2;
	color: var(--c-white);
}

/* Карточка спикера под событием, со сдвигом под колонку события */
.program__speaker {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.4cqw, 24px);
	margin-top: clamp(10px, 1.2cqw, 20px);
	margin-left: clamp(84px, 10cqw, 176px); /* время + gap */
}

.program__speaker-photo {
	flex: 0 0 auto;
	width: clamp(56px, 5.5cqw, 96px);
	height: clamp(56px, 5.5cqw, 96px);
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--c-yellow);
	background: var(--c-white);
}

.program__speaker-info {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.program__speaker-name {
	font-size: clamp(15px, 1.5cqw, 26px);
	color: var(--c-yellow);
}

.program__speaker-desc {
	font-family: var(--font-body);
	font-size: clamp(12px, 1.1cqw, 18px);
	line-height: 1.35;
	color: var(--c-white);
	opacity: 0.9;
}


/* ============================================================
   КАРТА ФЕСТИВАЛЯ
   Единая вёрстка для десктопа и мобильных: ширинно-адаптивная
   карточка с SVG-схемой. Размеры заданы в cqw/% от контейнера,
   поэтому секция выглядит одинаково на любой ширине экрана.
   ============================================================ */
.festival-map {
	position: relative;
	width: 100%;
	container-type: inline-size;
	background: var(--c-red);
	overflow: hidden;
	padding: clamp(40px, 6cqw, 110px) 6% clamp(50px, 7cqw, 130px);
}

.festival-map__inner {
	position: relative;
	z-index: 5;
	max-width: 1100px;
	margin: 0 auto;
}

.festival-map__title {
	margin: 0 0 0.5em;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(36px, 7cqw, 120px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	color: var(--c-yellow);
	text-align: center;
}

.festival-map__frame {
	background: var(--c-white);
	border-radius: clamp(12px, 2cqw, 28px);
	padding: clamp(10px, 2cqw, 28px);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

.festival-map__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: clamp(6px, 1cqw, 16px);
}

/* Легенда: номера на карте. Многоколоночная раскладка — нумерация идёт
   по столбцам (сверху вниз), затем следующий столбец. Адаптивно по ширине,
   одинаково на мобиле и десктопе. */
.festival-map__legend {
	columns: clamp(200px, 22cqw, 260px);
	column-gap: clamp(16px, 2.4cqw, 44px);
	margin: clamp(24px, 4cqw, 56px) 0 0;
	padding: 0;
	list-style: none;
}

.festival-map__legend-item {
	display: flex;
	align-items: baseline;
	gap: clamp(8px, 1cqw, 14px);
	margin: 0 0 clamp(8px, 1.4cqw, 18px);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	font-family: var(--font-body);
	font-size: clamp(14px, 1.5cqw, 22px);
	line-height: 1.25;
	color: var(--c-white);
}

.festival-map__legend-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(22px, 2.4cqw, 34px);
	height: clamp(22px, 2.4cqw, 34px);
	padding: 0 0.3em;
	border-radius: 999px;
	background: var(--c-yellow);
	color: var(--c-red);
	font-family: var(--font-display);
	font-size: clamp(12px, 1.4cqw, 20px);
	line-height: 1;
	align-self: flex-start;
}


/* ============================================================
   УЧАСТНИКИ
   Секция Y=5850..9050, h=3200.
   Дерево el_46: L=1.89%, T=23.18%, W=27.81%
   Заголовок el_9 "Участники": L=51.78%, T=5.76%
   
   Красная волна сверху — переход от красной секции О фестивале.
   Красная волна снизу — переход в красный футер.
   Оба элемента - отдельные SVG (red-wave-top, red-wave-bottom).
   ============================================================ */
.participants {
	aspect-ratio: var(--participants-aspect);
	min-height: 500px;
	background: var(--c-white);
}

/* Красная волна сверху: привязана к верху секции, выходит выступом слева */
.participants__wave-top {
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

/* Красная волна снизу: внизу секции */
.participants__wave-bottom {
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

/* Дерево-скамейка: сидит на нижней волне. По макету низ дерева 
   примерно на y=8713, что в % от высоты секции = (8713-5850)/3200 = 89.5% */
.participants__tree {
	top: 23.2%;
	left: 1.9%;
	width: 27.8%;
	z-index: 2;
}

.participants__content {
	position: relative;
	z-index: 5;
	height: 100%;
}

/* Заголовок L=51.78%, T=5.76% — уезжает к верхнему краю секции, но секция обрезана красной волной.
   Приподнимаю заголовок на ~12% чтобы не упёрся в волну */
.participants__title {
	position: absolute;
	top: 10%;
	left: 52%;
	right: 2%;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 8cqw;
	line-height: 0.95;
	color: var(--c-red);
	letter-spacing: 0.01em;
}

/* Сетка логотипов (плагин или placeholder) */
.participants__grid {
	position: absolute;
	top: 30%;
	left: 30%;
	right: 2%;
	bottom: 15%;
}

.participants__grid .ciderfest-participants__list,
.participants__grid > ul,
.participants__grid > ol {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(8px, 1.2cqw, 26px) clamp(4px, 0.8cqw, 18px);
	align-items: center;
	justify-items: center;
	height: 100%;
}

.participants__grid .ciderfest-participants__item,
.participants__grid > ul > li {
	width: 100%;
	aspect-ratio: 16 / 10;
	display: flex; align-items: center; justify-content: center;
}

.participants__grid img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.ciderfest-participants__placeholder {
	grid-column: 1 / -1;
	align-self: center;
	text-align: center;
	font-family: var(--font-display);
	color: var(--c-red);
	opacity: 0.5;
	padding: 20px;
	border: 2px dashed rgba(229,67,26,.3);
	border-radius: 12px;
}

/* ============================================================
   ФУТЕР
   Секция Y=9050..12274, h=3224.
   logo-big el_60:    L=10.94%, T=4.56%, W=32.73%
   ribbons el_47:     L=62.78%, T=46.38%, W=28.38%
   title el_10:       L=55.44%, T=10.40%, W=38.21%
   address el_71:     L=55.54%, T=31.27%, W=36.11%
   organizers el_53:  L=29.26%, T=52.80%, W=31.74%  (в нашем pересобранном org только логотипы)
   email-block el_52: L=29.19%, T=84.08%, W=26.46%
   ============================================================ */
.site-footer {
	aspect-ratio: var(--footer-aspect);
	min-height: 500px;
}

/* Облака — слои фона */
.site-footer__cloud-left {
	top: 66%;
	left: -6%;
	width: 23.4%;
	z-index: 1;
}
.site-footer__cloud-bl {
	top: 87%;
	left: -3%;
	width: 22.2%;
	z-index: 1;
}
.site-footer__cloud-mid {
	top: 53%;
	left: -9%;
	width: 29%;
	z-index: 1;
}
/* Пробка в левой части футера (el_51 79,10432, 716x745 → L=1.4%, T=42.9%, W=13.2%) */
.site-footer__cork {
	top: 43%;
	left: 1.4%;
	width: 13.2%;
	z-index: 2;
}

.site-footer__yellow-clouds {
	top: 24.8%;
	left: 62.2%;
	width: 31.2%;
	z-index: 1;
}
.site-footer__cloud-right {
	top: 66%;
	left: 77%;
	width: 32.3%;
	z-index: 1;
}
.site-footer__ribbons {
	top: 46.4%;
	left: 62.8%;
	width: 28.4%;
	z-index: 2;
}
.site-footer__logo-big {
	top: 4.5%;
	left: 11%;
	width: 32.7%;
	z-index: 3;
}

/* Заголовок «Контакты»: L=55.44%, T=10.40% */
.site-footer__title {
	position: absolute;
	top: 10%;
	left: 55%;
	right: 2.5%;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 8cqw;
	line-height: 0.95;
	color: var(--c-white);
	letter-spacing: 0.01em;
	z-index: 5;
}

/* Адрес: L=55.54%, T=31.27% */
.site-footer__address {
	position: absolute;
	top: 33%;
	left: 55.5%;
	right: 2.5%;
	font-family: var(--font-display);
	color: var(--c-white);
	font-size: clamp(13px, 2.5cqw, 30px);
	line-height: 1.3;
	z-index: 5;
}

/* Блок в левой нижней части футера: «Организаторы» → логотипы → «Связь с организаторами» → email
   Всё выровнено по одной вертикальной линии слева (L=29%).
   Использую один общий контейнер вместо трёх отдельных position:absolute — так все элементы
   действительно оказываются на одной линии без плаваний. */
.site-footer__organizers,
.site-footer__contact {
	position: static;  /* переопределяю прошлые absolute */
}

.site-footer__contact-block {
	position: absolute;
	top: 52%;
	left: 29%;
	width: 40%;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4%;
	font-family: var(--font-display);
	color: var(--c-white);
}

.site-footer__organizers-label {
	font-family: var(--font-display);
	color: var(--c-white);
	font-size: clamp(13px, 1.5cqw, 28px);
	margin: 0;
}

.site-footer__organizers-logos {
	width: 100%;
	max-width: 500px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4%;
}

.site-footer__org-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s ease;
}

.site-footer__org-link:hover,
.site-footer__org-link:focus-visible {
	opacity: .8;
}

.site-footer__org-link img {
	display: block;
	width: 100%;
	height: auto;
}

.site-footer__org-link--realbrew {
	flex: 0 1 60%;
}

.site-footer__org-link--association {
	flex: 0 0 32%;
}

.site-footer__contact-label {
	color: var(--c-white);
	font-size: clamp(14px, 1.6cqw, 30px);
	margin: 0;
	line-height: 1.2;
}

.site-footer__email {
	color: var(--c-white);
	font-size: clamp(14px, 1.6cqw, 30px);
	display: inline-block;
	line-height: 1.2;
	margin-top: 2%;
}

.site-footer__socials {
	list-style: none;
	margin: 2% 0 0;
	padding: 0;
	display: flex;
	gap: clamp(10px, 1.2cqw, 22px);
}

.site-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(28px, 2.4cqw, 44px);
	height: clamp(28px, 2.4cqw, 44px);
	color: var(--c-white);
	transition: opacity .2s ease, transform .2s ease;
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
	opacity: .8;
	transform: translateY(-1px);
}

.site-footer__social svg {
	width: 100%;
	height: 100%;
	display: block;
}



/* ============ Fallback страницы ============ */
.site-main--page, .site-main--fallback {
	background: var(--c-white);
	color: #333;
	padding: 160px 5% 80px;
	min-height: 80vh;
}
.site-main__inner {
	max-width: 800px;
	margin: 0 auto;
	font-family: var(--font-body);
}
.entry-title { font-family: var(--font-display); color: var(--c-red); }


/* ============================================================
   ПЕРЕКЛЮЧАТЕЛЬ desktop / mobile раскладок
   ============================================================ */

/* По умолчанию (десктоп) — показываем десктопную, прячем мобильную */
.desktop-layout { display: block; }
.mobile-layout { display: none; }

/* На мобильных (<=767px) — наоборот */
@media (max-width: 767px) {
	.desktop-layout { display: none !important; }
	.mobile-layout { display: block; }
}

/* ============================================================
   МОБИЛЬНАЯ РАСКЛАДКА (изолированные стили с префиксом .m-)
   Никаких пересечений с десктопными классами — полная изоляция.
   ============================================================ */
@media (max-width: 767px) {

	.mobile-layout {
		background: var(--c-red);
		color: var(--c-white);
		font-family: var(--font-display);
	}


	/* -------------- m-hero -------------- */
	.m-hero {
		position: relative;
		padding: 64px 16px 40px;
		overflow: hidden;
		background: var(--c-red);
	}

	/* Шапка — лого и бургер (absolute) */
	.m-topbar {
		position: absolute;
		top: 12px;
		left: 14px;
		display: flex;
		align-items: center;
		gap: 10px;
		z-index: 10;
	}
	.m-topbar__logo {
		width: 52px;
		height: auto;
		display: block;
	}
	.m-topbar__burger {
		background: transparent;
		border: 0;
		padding: 4px;
		width: 36px;
		height: 36px;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
	.m-topbar__burger span {
		display: block;
		width: 22px;
		height: 3px;
		background: var(--c-white);
		border-radius: 2px;
		margin: 2px 0;
	}
	.m-nav-list {
		display: none;
		position: absolute;
		top: 48px;
		left: 0;
		min-width: 200px;
		background: rgba(229,67,26,0.96);
		padding: 6px 16px;
		margin: 0;
		border-radius: 10px;
		box-shadow: 0 6px 16px rgba(0,0,0,.25);
		list-style: none;
		z-index: 11;
	}
	.m-nav-list.is-open { display: block; }
	.m-nav-list li a {
		display: block;
		padding: 10px 0;
		font-family: var(--font-display);
		font-size: 16px;
		color: var(--c-white);
		text-decoration: none;
		border-bottom: 1px solid rgba(255,255,255,.15);
	}
	.m-nav-list li:last-child a { border-bottom: 0; }

	/* 1. Шапка «лого + дерево-облако» — вместе наверху hero (как на десктопе).
	   Дерево-облако выступает декоративным фоном, логотип поверх него.
	   Обёртка .m-hero-top держит обоих в одном блоке. */
	.m-hero-top {
		position: relative;
		width: 100%;
		margin: 0 0 12px;
	}
	.m-hero-tree {
		display: block;
		width: 65%;
		height: auto;
		margin: 0;
		position: relative;
		z-index: 1;
	}
	.m-logo-big {
		position: absolute;
		top: 40%;
		right: 0;
		width: 60%;
		max-width: 240px;
		height: auto;
		z-index: 2;
	}

	/* 2. Слоган + дата в 2 колонки: слева текст-слоган, справа облачко */
	.m-slogan-row {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 12px;
		margin: 18px 4px 0;
	}
	.m-slogan {
		font-family: var(--font-display);
		color: var(--c-yellow);
		font-size: 17px;
		line-height: 1.2;
		text-align: left;
		margin: 0;
	}
	.m-date-wrap {
		position: relative;
		width: 130px;
		flex-shrink: 0;
	}
	.m-date-wrap img {
		display: block;
		width: 100%;
		height: auto;
		margin-bottom: 15%;
	}
	.m-date-text {
		position: absolute;
		top: 30%;
		left: 0;
		right: 0;
		text-align: center;
		color: var(--c-red);
		line-height: 1;
	}
	.m-date-num {
		display: block;
		font-family: var(--font-display);
		font-size: 34px;
		line-height: .9;
	}
	.m-date-month {
		display: block;
		font-family: var(--font-display);
		font-size: 13px;
		margin-top: 2px;
		text-transform: lowercase;
	}

	/* 3. Кнопка «Купить билет» — большая, надпись ХL */
	/* Обёртка для центрирования кнопки (надёжнее чем margin: auto в Safari) */
	.m-ticket-btn-wrap {
		display: flex;
		justify-content: center;
		margin-top: 22px;
	}
	.m-ticket-btn {
		display: block;
		position: relative;
		width: 100%;
		max-width: 420px;
		aspect-ratio: 994/411;
		margin: 0;
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
		text-decoration: none;
	}
	.m-ticket-btn__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		display: block;
	}
	.m-ticket-btn__text {
		position: absolute;
		left: 8%;
		top: 50%;
		transform: translateY(-50%);
		width: 56%;
		font-family: var(--font-display);
		font-size: 50px;
		line-height: 0.5;
		text-align: left;
		color: var(--c-red);
		white-space: pre-line;
	}
	.m-ticket-btn.qtickets-button {
		width: 100% !important;
		max-width: 420px !important;
	}

	/* 4. Адрес под кнопкой */
	.m-address {
		font-family: var(--font-display);
		color: var(--c-yellow);
		font-size: 17px;
		line-height: 1.25;
		text-align: center;
		margin: 22px 0 0;
	}

	/* 5. Статистика 2 колонки */
	.m-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px 14px;
		margin: 24px 0 0;
		padding: 0;
		list-style: none;
	}
	.m-stat {
		text-align: center;
	}
	.m-stat__num {
		display: block;
		font-family: var(--font-display);
		font-size: 52px;
		line-height: .9;
		color: var(--c-yellow);
	}
	.m-stat__label {
		display: block;
		font-family: var(--font-display);
		font-size: 14px;
		margin-top: 6px;
		color: var(--c-white);
	}

	/* 6. Партнёр: подпись и облако с Сигмой — центрированы, близко друг к другу */
	.m-partner {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		margin: 26px auto 0;
		max-width: 320px;
	}
	.m-partner__label {
		font-family: var(--font-display);
		font-size: 17px;
		color: var(--c-yellow);
		line-height: 1.2;
		text-align: right;
		flex: 1;
	}
	.m-partner__cloud-wrap {
		position: relative;
		width: 160px;
		flex-shrink: 0;
	}
	.m-partner__cloud {
		display: block;
		width: 100%;
		height: auto;
	}
	.m-partner__logo {
		position: absolute;
		top: 61%;
		left: 59%;
		transform: translate(-50%, -50%);
		width: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.m-partner__logo img {
		max-width: 100%;
		max-height: 60px;     /* увеличил с 40 до 60 */
		width: auto;
		height: auto;
	}


	/* -------------- m-about -------------- */
	.m-about {
		position: relative;
		background: var(--c-red);
		padding: 0 12px 0;
		overflow: hidden;
	}
	.m-about__ticket {
		position: relative;
		background-image: url(../images/about-ticket-mobile.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		padding: 75px 80px 30px 50px;
		min-height: 240px;
	}
	/* Оригинальная плашка-img на мобильном не нужна */
	.m-about__ticket-bg {
		display: none;
	}
	.m-about__content {
		position: relative;
		z-index: 2;
		color: var(--c-red);
	}
	.m-about__title {
		font-family: var(--font-display);
		font-size: 34px;
		line-height: .95;
		margin: 0 0 14px;
		color: var(--c-red);
	}
	.m-about__text {
		font-family: var(--font-display);
		font-size: 16px;
		line-height: 1.4;
		color: var(--c-red);
	}

	/* -------------- m-program -------------- */
	.m-program {
		position: relative;
		background: var(--c-red);
		padding: 36px 16px 44px;
		overflow: hidden;
		font-family: var(--font-display);
	}
	.m-program__title {
		font-family: var(--font-display);
		font-size: 42px;
		line-height: 1;
		text-align: center;
		color: var(--c-yellow);
		margin: 0 0 22px;
	}
	.m-program .program__item {
		padding: 14px 0;
		border-bottom: 2px dashed rgba(240, 181, 3, 0.55);
	}
	.m-program .program__item:last-child { border-bottom: 0; }
	.m-program .program__row {
		display: flex;
		align-items: baseline;
		gap: 12px;
	}
	.m-program .program__time {
		flex: 0 0 64px;
		font-size: 22px;
		line-height: 1;
		color: var(--c-yellow);
	}
	.m-program .program__event {
		font-size: 17px;
		line-height: 1.25;
		color: var(--c-white);
	}
	.m-program .program__speaker {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-top: 10px;
		margin-left: 76px; /* под колонку события */
	}
	.m-program .program__speaker-photo {
		flex: 0 0 auto;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		object-fit: cover;
		border: 3px solid var(--c-yellow);
		background: var(--c-white);
	}
	.m-program .program__speaker-name {
		display: block;
		font-size: 15px;
		color: var(--c-yellow);
	}
	.m-program .program__speaker-desc {
		display: block;
		font-family: var(--font-body);
		font-size: 13px;
		line-height: 1.35;
		color: var(--c-white);
		opacity: 0.9;
	}

	/* -------------- m-participants -------------- */
	.m-participants {
		position: relative;
		background: var(--c-white);
		padding: 54px 16px 70px;
		overflow: hidden;
	}
	.m-participants__wave-top {
		display: none;
	}
	.m-participants__wave-bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		z-index: 1;
	}
	.m-participants__tree {
		position: absolute;
		bottom: 24px;
		left: -10px;
		width: 100px;
		height: auto;
		z-index: 2;
	}
	.m-participants__title {
		position: relative;
		z-index: 3;
		font-family: var(--font-display);
		font-size: 42px;
		line-height: 1;
		text-align: center;
		color: var(--c-red);
		margin: 20px 0 24px;
	}
	.m-participants__grid {
		position: relative;
		z-index: 3;
		min-height: 220px;
	}
	/* Сетка от плагина */
	.m-participants__grid .ciderfest-participants__list,
	.m-participants__grid > ul,
	.m-participants__grid .participants-grid,
	.m-participants__grid > .participants-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.m-participants__grid img {
		max-width: 100%;
		height: auto;
	}
	.m-participants__placeholder {
		text-align: center;
		font-family: var(--font-display);
		color: var(--c-red);
		opacity: .5;
		padding: 30px 10px;
		grid-column: 1 / -1;
	}

	/* -------------- m-footer -------------- */
	.m-footer {
		position: relative;
		background: var(--c-red);
		padding: 54px 16px 40px;
		overflow: hidden;
		color: var(--c-white);
	}

	/* Декоративные облака по углам */
	.m-footer__cloud-yellow-top {
		position: absolute;
		top: 10px;
		right: -50px;
		width: 140px;
		height: auto;
		z-index: 1;
	}
	.m-footer__decor-right {
		display: none;
	}
	.m-footer__ribbons {
		position: absolute;
		bottom: -30px;
		right: -20px;
		width: 145px;
		height: auto;
		z-index: 2;
	}
	/* Жёлтое облачко слева убрано по просьбе клиента */
	.m-footer__cloud-left {
		display: none;
	}
	.m-footer__cloud-mid {
		position: absolute;
		bottom: 180px;
		left: -30px;
		width: 140px;
		height: auto;
		z-index: 1;
	}
	.m-footer__cloud-bl {
		position: absolute;
		bottom: -20px;
		left: -40px;
		width: 150px;
		height: auto;
		z-index: 1;
	}
	.m-footer__cork {
		position: absolute;
		bottom: 180px;
		left: 8px;
		width: 52px;
		height: auto;
		z-index: 3;
	}

	/* Содержимое футера */
	.m-footer__logo {
		display: block;
		width: 60%;
		max-width: 220px;
		height: auto;
		margin: 0 auto 20px;
		position: relative;
		z-index: 4;
	}
	.m-footer__title {
		font-family: var(--font-display);
		font-size: 46px;
		line-height: 1;
		text-align: center;
		color: var(--c-white);
		margin: 0 0 16px;
		position: relative;
		z-index: 4;
	}
	.m-footer__address {
		font-family: var(--font-display);
		font-size: 15px;
		line-height: 1.35;
		text-align: center;
		color: var(--c-white);
		max-width: 280px;
		margin: 0 auto 26px;
		position: relative;
		z-index: 4;
		font-style: normal;
	}
	.m-footer__contact-block {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		max-width: 300px;
		margin: 0 auto;
		text-align: center;
		z-index: 4;
	}
	.m-footer__contact-block p {
		font-family: var(--font-display);
		font-size: 15px;
		margin: 0;
		color: var(--c-white);
	}
	.m-footer__organizers-logos {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		width: 80%;
		max-width: 240px;
		margin: 0 auto;
	}
	.m-footer__org-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: opacity .2s ease;
	}
	.m-footer__org-link:hover,
	.m-footer__org-link:focus-visible {
		opacity: .8;
	}
	.m-footer__org-link img {
		display: block;
		width: 100%;
		height: auto;
	}
	.m-footer__org-link--realbrew {
		flex: 0 1 60%;
	}
	.m-footer__org-link--association {
		flex: 0 0 30%;
	}
	.m-footer__email {
		font-family: var(--font-display);
		font-size: 17px;
		color: var(--c-white);
		text-decoration: none;
	}

	.m-footer__socials {
		list-style: none;
		margin: 6px 0 0;
		padding: 0;
		display: flex;
		gap: 18px;
	}
	.m-footer__social {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		color: var(--c-white);
		transition: opacity .2s ease, transform .2s ease;
	}
	.m-footer__social:hover,
	.m-footer__social:focus-visible {
		opacity: .8;
		transform: translateY(-1px);
	}
	.m-footer__social svg {
		width: 100%;
		height: 100%;
		display: block;
	}

}

/* Очень узкие экраны */
@media (max-width: 380px) {
	.m-stat__num { font-size: 44px; }
	.m-ticket-btn__text { font-size: 20px; }
	.m-about__title { font-size: 22px; }
	.m-about__text { font-size: 9px; }
	.m-participants__title { font-size: 36px; }
	.m-footer__title { font-size: 40px; }
}