/* sites/v3/php/css/styles.css
   Единый стиль-лист для нового фронтенда afisha.pl (sites/v3) — раньше жил тремя отдельными
   <style>-блоками в _mod/fw.php/home.php/event.php, вынесен сюда одним файлом, чтобы браузер
   кэшировал его отдельно от HTML и чтобы не дублировать общие правила (.af-badge, .af-term
   и т.п.) между страницами.

   Брейкпоинты (mobile-first — база это телефон, дальше только досказываем):
     >=768px  — планшет (tablet)
     >=1024px — десктоп (см. Claude Design HomepageDesktop.dc.html/EventDesktop.dc.html)
*/

:root {
	--af-red: #E4002B;
	--af-red-dark: #B00021;
	--af-ink: #14110F;
	--af-muted: #7A736C;
	--af-muted-2: #4A443E;
	--af-border: #E4DED7;
	--af-border-2: #EFEBE6;
	--af-bg: #F7F5F2;
	--af-bg-2: #F2EEE9;
	--af-radius-sm: 10px;
	--af-radius-md: 14px;
	--af-radius-lg: 18px;
	--af-radius-pill: 999px;
	--af-shadow-card: 0 1px 2px rgba(20,17,15,.05), 0 12px 32px rgba(20,17,15,.07);
	--af-font-display: 'Archivo', sans-serif;
	--af-font-body: 'Figtree', Helvetica, sans-serif;
	--af-font-mono: 'JetBrains Mono', monospace;
}

/* ---------- base ---------- */
body { margin: 0; background: #fff; font-family: var(--af-font-body); color: var(--af-ink); -webkit-font-smoothing: antialiased; }
a { color: var(--af-red); text-decoration: none; }
a:hover { color: var(--af-red-dark); }
a, button { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
:focus-visible { outline: 2px solid var(--af-red); outline-offset: 2px; }
.af-scroll::-webkit-scrollbar { display: none; }
.af-scroll { scrollbar-width: none; }

/* ---------- header (_mod/fw.php) ---------- */
.af-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--af-border-2); }
.af-logo { display: flex; align-items: center; gap: 8px; font-family: var(--af-font-display); font-weight: 500; font-size: 22px; color: var(--af-ink); text-decoration: none; flex: 0 0 auto; }
.af-logo span { color: #A39C94; font-weight: 400; }
.af-header-actions { display: flex; align-items: center; gap: 2px; }
.af-icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; border-radius: var(--af-radius-pill); color: var(--af-ink); }
.af-icon-btn:hover { background: var(--af-bg); }
.af-menu { position: fixed; inset: 60px 0 0; z-index: 29; background: #fff; padding: 8px 16px 32px; overflow: auto; display: none; }
.af-menu.af-menu-open { display: block; }
.af-menu a { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; border-bottom: 1px solid var(--af-border-2); font-family: var(--af-font-display); font-weight: 700; font-size: 19px; color: var(--af-ink); }
.af-container { max-width: 1100px; margin: 0 auto; }

/* .af-header-inner держит логотип/навигацию/иконки в один ряд на ЛЮБОЙ ширине — это база,
   а не только десктопное поведение (ошибка более ранней версии: flex был объявлен только
   внутри @media (min-width:1024px), из-за чего на мобильном шапка складывалась в столбик). */
.af-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.af-nav-desktop, .af-search-desktop, .af-login-desktop { display: none; }

@media (min-width: 768px) {
	.af-header { height: 64px; padding: 0 24px; }
	.af-logo { font-size: 23px; }
	.af-menu { inset: 64px 0 0; padding: 8px 24px 32px; }
}

@media (min-width: 1024px) {
	.af-header { height: 76px; padding: 0 32px; }
	.af-header-inner { gap: 28px; max-width: 1280px; margin: 0 auto; }
	.af-logo { font-size: 26px; }
	.af-nav-desktop { display: flex; align-items: center; gap: 18px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
	.af-nav-desktop a { font-size: 15px; font-weight: 600; color: var(--af-ink); white-space: nowrap; }
	.af-nav-desktop a:hover { color: var(--af-red); }
	.af-search-desktop { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 150px; max-width: 290px; height: 44px; padding: 0 14px; border: 1px solid var(--af-border); border-radius: var(--af-radius-pill); background: var(--af-bg); }
	.af-search-desktop input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--af-font-body); font-size: 14.5px; color: var(--af-ink); }
	.af-login-desktop { display: flex; align-items: center; height: 44px; padding: 0 20px; border-radius: var(--af-radius-pill); background: var(--af-red); color: #fff; font-family: var(--af-font-display); font-weight: 700; font-size: 15px; white-space: nowrap; }
	.af-login-desktop:hover { background: var(--af-red-dark); color: #fff; }
	.af-header-actions { flex: 1 1 auto; justify-content: flex-end; }
	.af-menu-toggle { display: none; }
}

/* ---------- shared components ---------- */
.af-badge { display: inline-block; padding: 5px 10px; border-radius: var(--af-radius-pill); background: var(--af-red); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 6px 8px 0; }
.af-badge-outline { background: transparent; border: 1px solid rgba(255,255,255,.4); }
.af-term { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--af-border); border-radius: var(--af-radius-md); background: #fff; cursor: pointer; }
.af-term:hover { border-color: var(--af-ink); }
.af-term-on, .af-term-on:hover { border-color: var(--af-red); border-width: 2px; background: #FFF5F6; }
.af-term-on .af-term-date { background: var(--af-red); }
.af-term-on .af-term-date b, .af-term-on .af-term-date span { color: #fff; }
.af-term-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; background: var(--af-bg); }
.af-term-date b { font-family: var(--af-font-display); font-weight: 700; font-size: 18px; }
.af-term-date span { font-size: 10.5px; text-transform: uppercase; color: var(--af-muted); }
.af-term-info { flex: 1; min-width: 0; }
.af-term-datetime { font-family: var(--af-font-display); font-weight: 700; font-size: 15.5px; }
.af-term-loc { font-size: 13px; color: var(--af-muted); padding-top: 2px; }
.af-cta-btn { flex: 0 0 auto; padding: 15px 28px; border-radius: 12px; background: var(--af-red); color: #fff; font-family: var(--af-font-display); font-weight: 700; font-size: 16px; }
.af-cta-btn:hover { background: var(--af-red-dark); color: #fff; }
.af-cta-btn-block { display: block; text-align: center; }

/* ---------- homepage (home.php) ---------- */
.af-home { max-width: 1100px; margin: 0 auto; font-family: var(--af-font-body); color: var(--af-ink); padding: 0 16px 0; }
.af-home h1, .af-home h2, .af-home h3 { font-family: var(--af-font-display); letter-spacing: -.02em; margin: 0; }
.af-hero-section { padding: 0; }
.af-hero-container { position: relative; }
.af-hero { display: flex; gap: 14px; overflow-x: auto; padding: 16px 0; scrollbar-width: none; scroll-snap-type: x mandatory; }
.af-hero::-webkit-scrollbar { display: none; }
.af-hero-card { position: relative; flex: 0 0 82%; max-width: 340px; scroll-snap-align: center; border-radius: var(--af-radius-lg); overflow: hidden; aspect-ratio: 4/5; background: var(--af-border-2); color: #fff; }
.af-hero-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.af-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-hero-overlay { position: absolute; inset: auto 0 0 0; padding: 20px 18px; background: linear-gradient(to top, rgba(12,10,9,.92) 0%, rgba(12,10,9,.72) 45%, rgba(12,10,9,0) 100%); }
.af-hero-title { font-size: 22px; color: #fff; margin: 0 0 4px; text-wrap: balance; }
.af-hero-meta { font-size: 13px; color: rgba(255,255,255,.82); }
.af-hero-actions { display: none; }
.af-hero-btn { display: flex; align-items: center; justify-content: center; height: 54px; padding: 0 32px; border-radius: 12px; font-family: var(--af-font-display); font-weight: 700; font-size: 17px; position: relative; z-index: 2; }
.af-hero-btn-primary { background: var(--af-red); color: #fff; }
.af-hero-btn-primary:hover { background: var(--af-red-dark); color: #fff; }
.af-hero-btn-outline { padding: 0 28px; font-weight: 600; border: 1px solid rgba(255,255,255,.35); color: #fff; }
.af-hero-btn-outline:hover { border-color: #fff; color: #fff; }
.af-hero-stretched-link { position: absolute; inset: 0; z-index: 1; }
.af-hero-dots { display: flex; justify-content: center; gap: 7px; padding: 2px 0 4px; }
.af-hero-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--af-radius-pill); background: #D9D3CC; cursor: pointer; }
.af-hero-dot-on { width: 22px; background: var(--af-ink); }
/* Карусель категорий — не сетка фиксированной ширины (та обрезала бы список до заранее
   выбранного числа плиток или уродливо переносила остаток на вторую строку), а горизонтальный
   скролл, показывающий ровно столько, сколько помещается в видимой ширине, — как у .af-days.
   Одна и та же схема на всех брейкпоинтах, только размер самой плитки/иконки меняется. */
.af-cats { display: flex; gap: 6px; overflow-x: auto; padding: 26px 0 4px; scrollbar-width: none; }
.af-cats::-webkit-scrollbar { display: none; }
/* .af-cat рендерится и как <a> (SSR-заглушка до гидратации, sites/v3/php/home.php), и как
   <button> (React CategoryGrid.tsx, реальный фильтр) — общие правила работают для обоих,
   плюс сброс браузерных стилей кнопки и подсветка активной категории. */
.af-cat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; width: 72px; padding: 12px 2px; border: 0; border-radius: var(--af-radius-md); background: transparent; color: var(--af-ink); text-decoration: none; font-family: var(--af-font-body); cursor: pointer; box-sizing: border-box; }
.af-cat:hover { background: var(--af-bg); }
.af-cat-icon { width: 46px; height: 46px; border-radius: var(--af-radius-pill); background: var(--af-bg-2); color: var(--af-ink); display: grid; place-items: center; flex: 0 0 auto; }
.af-cat-label { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.af-cat-on .af-cat-icon { background: var(--af-red); color: #fff; }
.af-cat-on .af-cat-label { color: var(--af-red); }
.af-section-heading, .af-section-title { padding-top: 20px; font-size: 19px; }

/* Общий стиль пилюли для React-фильтров (RangeChips-часть DayPicker.tsx и т.п.). */
.af-chips { display: flex; gap: 8px; overflow-x: auto; padding: 20px 0 4px; scrollbar-width: none; }
.af-chips::-webkit-scrollbar { display: none; }
.af-chip { flex: 0 0 auto; height: 38px; padding: 0 16px; border-radius: var(--af-radius-pill); border: 1px solid var(--af-border); background: #fff; font-family: var(--af-font-body); font-size: 14px; font-weight: 600; color: var(--af-ink); cursor: pointer; white-space: nowrap; }
.af-chip:hover { border-color: var(--af-ink); }
.af-chip-on, .af-chip-on:hover { border-color: var(--af-ink); background: var(--af-ink); color: #fff; }

/* Выбор города (CityPicker.tsx) — строка с кнопкой поиска ("Cała Polska"), 16 быстрых кнопок
   столиц воеводств и кнопкой "…" в конце. Горизонтальный скролл, как у .af-cats/.af-days.
   Стиль намеренно другой, чем у категорий (.af-cat — квадратная плитка, иконка над подписью):
   тут узкая горизонтальная пилюля, иконка сбоку от названия, чтобы визуально не путать
   "фильтр по категории" и "быстрый выбор города" даже мельком. */
.af-city-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 20px 0 4px; scrollbar-width: none; }
.af-city-row::-webkit-scrollbar { display: none; }
.af-city-picker-trigger { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.af-city-picker-trigger-on, .af-city-picker-trigger-on:hover { border-color: var(--af-red); background: var(--af-red); color: #fff; }
.af-city-chip { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--af-border); border-radius: var(--af-radius-pill); background: #fff; font-family: var(--af-font-body); font-size: 13.5px; font-weight: 600; color: var(--af-ink); cursor: pointer; white-space: nowrap; }
.af-city-chip:hover { border-color: var(--af-ink); }
.af-city-chip-icon { display: flex; flex: 0 0 auto; width: 18px; height: 18px; color: var(--af-muted); }
.af-city-chip-on, .af-city-chip-on:hover { border-color: var(--af-red); background: var(--af-red); color: #fff; }
.af-city-chip-on .af-city-chip-icon { color: #fff; }
/* Панель поиска — портал в document.body (см. CityPicker.tsx), position:fixed с координатами
   из getBoundingClientRect(), верх/лево подставляются инлайн-стилем из JS. Не обычный потомок
   .af-city-row — та строка теперь horizontal-scroll (overflow-x:auto неявно даёт и
   overflow-y:auto), которая обрезала бы панель по вертикали, будь она вложена туда напрямую. */
.af-city-picker-panel { position: fixed; z-index: 40; width: 260px; max-width: 80vw; border: 1px solid var(--af-border); border-radius: var(--af-radius-md); background: #fff; box-shadow: var(--af-shadow-card); overflow: hidden; }
.af-city-picker-search { display: block; width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--af-border-2); outline: 0; font-family: var(--af-font-body); font-size: 14.5px; color: var(--af-ink); }
.af-city-picker-list { max-height: 280px; overflow-y: auto; padding: 6px; }
.af-city-picker-item { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-family: var(--af-font-body); font-size: 14.5px; color: var(--af-ink); cursor: pointer; }
.af-city-picker-item:hover { background: var(--af-bg); }
.af-city-picker-item-on { background: var(--af-bg-2); font-weight: 600; }
.af-city-picker-empty { padding: 12px 10px; color: var(--af-muted); font-size: 13.5px; }
.af-days { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.af-days::-webkit-scrollbar { display: none; }
/* Кнопки диапазонов (Najbliższe 3 dni/Tydzień/.../Wszystkie) — 7 штук фиксированной сеткой в
   3 колонки (значит и 3 строки: 3+3+1), отдельным блоком под лентой дней, не в одну строку с
   ней (там бы не влезло "3 строки" при любой ширине). */
/* Кнопки диапазонов (Najbliższe 3 dni/Tydzień/.../Wszystkie) — продолжение той же строки, что
   и дни (после них, не отдельный ряд). Надписи длиннее, чем помещается в одну строку внутри
   квадратной кнопки — переносим текст, до 3 строк (line-clamp), а не ужимаем в одну строку. */
.af-range-chip { flex: 0 0 auto; width: 78px; height: 64px; padding: 6px 6px; border-radius: var(--af-radius-md); border: 1px solid var(--af-border); background: #fff; font-family: var(--af-font-body); font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--af-ink); cursor: pointer; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: center; -webkit-box-pack: center; -webkit-line-clamp: 3; overflow: hidden; }
.af-range-chip:hover { border-color: var(--af-ink); }
.af-range-chip.af-day-on { border-color: var(--af-red); background: var(--af-red); color: #fff; }
.af-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; flex: 0 0 auto; width: 52px; height: 64px; border-radius: var(--af-radius-md); border: 1px solid var(--af-border); background: #fff; cursor: pointer; }
.af-day:hover { border-color: var(--af-ink); }
.af-day-on, .af-day-on:hover { border-color: var(--af-red); background: var(--af-red); }
.af-day-dow { font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: var(--af-muted); }
.af-day-on .af-day-dow { color: rgba(255,255,255,.82); }
.af-day-num { font-family: var(--af-font-display); font-weight: 700; font-size: 17px; color: var(--af-ink); }
.af-day-on .af-day-num { color: #fff; }
.af-day-mon { font-size: 10.5px; color: var(--af-muted); }
.af-day-on .af-day-mon { color: rgba(255,255,255,.82); }
.af-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding-top: 14px; }
.af-card { border: 1px solid var(--af-border-2); border-radius: var(--af-radius-md); overflow: hidden; background: #fff; text-decoration: none; color: var(--af-ink); display: block; }
.af-card:hover { border-color: var(--af-ink); box-shadow: var(--af-shadow-card); }
.af-card-img { aspect-ratio: 2/3; background: var(--af-border-2); }
.af-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-card-body { padding: 10px 11px 13px; }
.af-card-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--af-red); padding-bottom: 5px; }
.af-card-title { font-family: var(--af-font-display); font-weight: 700; font-size: 15px; line-height: 1.2; margin: 0 0 6px; }
.af-card-meta { font-size: 12.5px; color: var(--af-muted); }
.af-grid-status { padding: 20px 0; color: var(--af-muted); font-size: 14px; }
.af-load-more { display: block; margin: 20px auto 0; height: 46px; padding: 0 26px; border: 1px solid var(--af-border); border-radius: var(--af-radius-pill); background: #fff; font-family: var(--af-font-body); font-size: 14.5px; font-weight: 600; color: var(--af-ink); cursor: pointer; }
.af-load-more:hover { border-color: var(--af-ink); }
.af-load-more:disabled { opacity: .6; cursor: default; }

/* Общий футер для всех страниц v3 (_mod/footer.php) — независим от отступов/ширины родителя:
   full-bleed на любой ширине экрана через calc(50%-50vw) (та же техника, что и у hero-секции),
   поэтому подключается одинаково и в узкий .af-home, и в другую разметку без переделки под
   каждую страницу. .af-footer — сам разлив цвета во всю ширину, .af-footer-inner — уже
   центрированное и с отступами содержимое поверх него. */
.af-footer { margin-top: 32px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; background: var(--af-ink); color: #fff; }
.af-footer-inner { max-width: 1100px; margin: 0 auto; padding: 32px 16px 8px; }
.af-footer a { display: block; color: rgba(255,255,255,.85); text-decoration: none; font-size: 14px; padding: 4px 0; }
.af-footer a:hover { color: #fff; }
.af-footer h4 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 10px; }
.af-footer-logo { display: flex; align-items: center; gap: 10px; font-family: var(--af-font-display); font-weight: 500; font-size: 23px; color: #fff; padding: 0; }
.af-footer-logo span { color: rgba(255,255,255,.55); font-weight: 400; }
.af-footer-logo:hover { color: #fff; }
/* Подпись под лого — только в десктопном макете (HomepageDesktop.dc.html); в мобильном
   (Homepage.dc.html) её нет вовсе, не просто спрятана поменьше. */
.af-footer-tagline { display: none; }
.af-subscribe-text { margin: 6px 0 0; font-size: 13.5px; color: rgba(255,255,255,.6); }
.af-subscribe-form { display: flex; gap: 8px; padding-top: 12px; }
.af-subscribe-form input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--af-radius-pill); background: rgba(255,255,255,.06); color: #fff; font-family: var(--af-font-body); font-size: 15px; }
.af-subscribe-form input:focus-visible { outline-color: #fff; }
.af-subscribe-form button { flex: 0 0 auto; height: 46px; padding: 0 22px; border: 0; border-radius: var(--af-radius-pill); background: var(--af-red); color: #fff; font-family: var(--af-font-display); font-weight: 700; font-size: 15px; cursor: pointer; }
.af-subscribe-form button:hover { background: var(--af-red-dark); }
.af-footer-mono { color: rgba(255,255,255,.55); font-family: var(--af-font-mono); font-size: 12px; letter-spacing: .06em; padding: 0; }
.af-social { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.af-social-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.af-social-links { display: flex; gap: 8px; }
.af-social-links a { width: 36px; height: 36px; border-radius: var(--af-radius-pill); border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; font-family: var(--af-font-display); font-weight: 700; font-size: 12px; padding: 0; }
.af-social-links a:hover { background: #fff; color: var(--af-ink); border-color: #fff; }
.af-copyright { margin: 0; padding: 0 0 12px; font-size: 12px; color: rgba(255,255,255,.45); }

/* Раскладка колонок — одна и та же сетка для любой ширины экрана, только области/границы
   меняются на брейкпоинте (ровно 2 варианта: мобильный порядок 1:1 с Claude Design
   Homepage.dc.html и десктопный с HomepageDesktop.dc.html — без промежуточного планшетного).
   Мобильный порядок: Brand на всю ширину → Miasta+Kategorie парой → AFISHA+Kontakt парой
   (с разделителем сверху) → Subscribe на всю ширину (с разделителем сверху). */
.af-footer-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"brand     brand"
		"miasta    kategorie"
		"afisha    kontakt"
		"subscribe subscribe";
	gap: 0 20px;
}
.af-footer-brand { grid-area: brand; padding-bottom: 22px; }
.af-footer-miasta { grid-area: miasta; padding-bottom: 26px; }
.af-footer-kategorie { grid-area: kategorie; padding-bottom: 26px; }
.af-footer-afisha { grid-area: afisha; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.14); }
.af-footer-kontakt { grid-area: kontakt; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.14); }
.af-footer-subscribe { grid-area: subscribe; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.14); }
/* Нижняя строка (Social Network + copyright) — Social первым, с разделителем сверху; copyright
   сразу под ним, без своего разделителя (см. порядок в Homepage.dc.html). */
.af-footer-bottom { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.af-footer-bottom .af-copyright { padding-top: 12px; }

/* Планшет (>=768px, <1024px) — переходная плотность: больше воздуха и колонок, чем на
   телефоне, но ещё не полноразмерный десктоп с раздвоенным hero. */
@media (min-width: 768px) {
	.af-home { padding: 0 24px 0; }
	.af-hero-card { flex: 0 0 62%; max-width: 420px; aspect-ratio: 16/10; }
	.af-cats { gap: 10px; }
	.af-cat { width: 84px; }
	.af-cat-icon { width: 52px; height: 52px; }
	.af-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.af-footer-inner { padding: 36px 24px 8px; }
}

/* Десктоп (>=1024px) — та же разметка, но реорганизованная под HomepageDesktop.dc.html:
   широкий контейнер, hero на тёмной подложке с текстом рядом с картинкой (не поверх),
   сетка категорий в ряд, 5-колоночная сетка событий, многоколоночный футер. */
@media (min-width: 1024px) {
	.af-home { max-width: 1280px; padding: 0 32px 0; }

	/* Первый hero — на всю ширину экрана (не ограничен контейнером .af-home), как в
	   HomepageDesktop.dc.html: тёмная секция "пробивает" боковые отступы родителя через
	   отрицательные margin в half-viewport-width, а .af-hero-container внутри неё снова
	   центрирует контент до 1280px. */
	.af-hero-section { background: var(--af-ink); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; }
	.af-hero-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
	.af-hero { gap: 0; padding: 0; }
	.af-hero-card { position: static; flex: 0 0 100%; max-width: none; aspect-ratio: auto; border-radius: 0; background: transparent; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 56px 0 60px; }
	.af-hero-media { position: static; order: 2; aspect-ratio: 4/3; border-radius: var(--af-radius-lg); overflow: hidden; background: #2A2522; cursor: pointer; }
	/* Портретное фото — блок (рамка/скругление/высота) остаётся ровно тем же 4:3-боксом, что и
	   для ландшафтных фото; меняется только вписывание самой картинки: во всю высоту блока без
	   отступов сверху/снизу (height:100%, как и раньше), у той же левой границы, что и был бы
	   у cover-варианта (justify-content:flex-start — не по центру и не справа), горизонтально
	   обрезается только то, что не влезло по ширине. Слева лёгкий затемняющий градиент до центра. */
	.af-hero-media-portrait { position: relative; justify-content: flex-start; }
	.af-hero-media-portrait img { width: auto; height: 100%; object-fit: contain; }
	.af-hero-media-portrait::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(20,17,15,.5) 0%, rgba(20,17,15,0) 50%); pointer-events: none; }
	.af-hero-overlay { position: static; order: 1; padding: 0; background: none; }
	.af-hero-overlay .af-badge { padding: 6px 12px; font-size: 11.5px; }
	.af-hero-title { font-size: 60px; font-weight: 800; line-height: 1; letter-spacing: -.03em; margin: 16px 0 14px; }
	.af-hero-meta { font-size: 17px; color: rgba(255,255,255,.75); }
	.af-hero-actions { display: flex; gap: 12px; padding-top: 4px; }
	.af-hero-stretched-link { display: none; }
	.af-hero-dots { justify-content: flex-start; padding: 0 0 28px; }
	.af-hero-dot { background: rgba(255,255,255,.32); }
	.af-hero-dot-on { background: #fff; }
	/* Та же ширина, что у .af-city-row чуть ниже — обычный контейнер .af-home, без full-bleed
	   за пределы экрана. justify-content:space-between — не растягиваем плитки по ширине
	   (flex:1 тут не нужен), а раздвигаем их равными промежутками: первая у левого края
	   контейнера, последняя у правого. */
	.af-cats {
		padding: 34px 0 0;
		gap: 12px;
		justify-content: space-between;
		overflow-x: visible;
	}
	.af-cat { flex: 0 0 auto; width: auto; flex-direction: row; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--af-border-2); border-radius: 16px; }
	.af-cat-icon { width: 42px; height: 42px; }
	.af-cat-label { font-size: 15px; font-weight: 700; font-family: var(--af-font-display); text-align: left; white-space: nowrap; }
	.af-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; padding-top: 18px; }
	.af-card-body { padding: 14px 14px 16px; }
	.af-card-title { font-size: 16.5px; }
	.af-footer { margin-top: 48px; }
	.af-footer-inner { max-width: 1280px; padding: 48px 32px 28px; }
	/* Тот же грид, что и на мобильном (.af-footer-cols выше), только области перекладываются
	   в один ряд из 5 колонок — Kontakt без своего заголовка (см. .af-footer-kontakt h4 ниже)
	   уходит вторым рядом под Subscribe в её же колонке, как в HomepageDesktop.dc.html. */
	.af-footer-cols {
		grid-template-columns: 1.2fr 1fr 1fr 1fr 1.4fr;
		grid-template-areas:
			"brand miasta kategorie afisha subscribe"
			"brand miasta kategorie afisha kontakt";
		gap: 32px;
		align-items: start;
	}
	.af-footer-brand, .af-footer-miasta, .af-footer-kategorie, .af-footer-afisha, .af-footer-subscribe { padding: 0; border-top: 0; }
	.af-footer-tagline { display: block; }
	.af-footer-kontakt { padding: 18px 0 0; border-top: 0; }
	.af-footer-kontakt h4 { display: none; }
	/* Порядок в DOM — Social потом copyright (совпадает с мобильным Homepage.dc.html); на
	   десктопе HomepageDesktop.dc.html показывает их в обратную сторону — copyright слева,
	   Social справа — переставляем визуально через order, не трогая разметку. */
	.af-footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; }
	.af-footer-bottom .af-social { order: 2; }
	.af-footer-bottom .af-copyright { order: 1; padding-top: 0; }
}

/* ---------- event page (event.php) ---------- */
.af-event-page { font-family: var(--af-font-body); color: var(--af-ink); }
.af-event-page h1, .af-event-page h2 { font-family: var(--af-font-display); letter-spacing: -.02em; margin: 0; }
.af-breadcrumbs { display: none; }
.af-event { max-width: 720px; margin: 0 auto; padding-bottom: 96px; }
.af-poster { position: relative; aspect-ratio: 4/5; max-height: 520px; background: var(--af-border-2); }
.af-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-poster-overlay { position: absolute; inset: auto 0 0 0; padding: 22px 16px 20px; background: linear-gradient(to top, rgba(12,10,9,.94) 0%, rgba(12,10,9,.74) 48%, rgba(12,10,9,0) 100%); color: #fff; }
.af-poster-title { font-size: 28px; color: #fff; margin: 8px 0; }
.af-poster-loc { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.84); }
.af-section { padding: 26px 16px 0; }
.af-section-tight { padding-top: 14px; }
.af-section h2 { font-size: 21px; padding-bottom: 12px; }
.af-gallery-scroll { display: flex; gap: 10px; overflow-x: auto; }
.af-gallery-thumb { width: 90px; height: 90px; object-fit: cover; border-radius: var(--af-radius-sm); flex: 0 0 auto; }
.af-artists { padding-top: 14px; color: var(--af-muted); font-size: 14px; }
.af-terms { display: flex; flex-direction: column; gap: 8px; }
.af-desc { font-size: 15.5px; line-height: 1.55; color: var(--af-muted-2); }
.af-venue { border: 1px solid var(--af-border-2); border-radius: 16px; padding: 14px; }
.af-venue-name { font-family: var(--af-font-display); font-weight: 700; font-size: 16px; }
.af-venue-addr { font-size: 14px; color: var(--af-muted); padding-top: 3px; }
.af-cta-bar { position: fixed; inset: auto 0 0 0; z-index: 40; max-width: 720px; margin: 0 auto; padding: 10px 16px 14px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--af-border-2); display: flex; align-items: center; gap: 12px; }
.af-cta-info { flex: 1; min-width: 0; }
.af-cta-date { font-size: 12px; color: var(--af-muted); }
.af-cta-price { font-family: var(--af-font-display); font-weight: 700; font-size: 15px; }

.af-aside, .af-similar { display: none; }
.af-aside-card { border: 1px solid var(--af-border-2); border-radius: var(--af-radius-lg); box-shadow: var(--af-shadow-card); overflow: hidden; background: #fff; }
.af-aside-head { padding: 20px 20px 8px; }
.af-aside-head h2 { font-size: 20px; }
.af-aside-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.af-aside-count { font-size: 13px; color: var(--af-muted); }
.af-aside-terms { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 4px; max-height: 330px; overflow-y: auto; }
.af-aside-cta { padding: 16px 20px 20px; border-top: 1px solid var(--af-border-2); margin-top: 12px; }
.af-aside-cta-row { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; }
.af-aside-date { font-size: 14px; color: var(--af-muted); }
.af-aside-price { font-family: var(--af-font-display); font-weight: 700; font-size: 20px; }

.af-similar-card { display: flex; flex-direction: column; border: 1px solid var(--af-border-2); border-radius: 16px; overflow: hidden; color: var(--af-ink); }
.af-similar-card:hover { border-color: var(--af-ink); box-shadow: var(--af-shadow-card); }
.af-similar-img { aspect-ratio: 2/3; background: var(--af-border-2); }
.af-similar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-similar-body { padding: 13px 13px 15px; }
.af-similar-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--af-red); padding-bottom: 5px; }
.af-similar-title { font-family: var(--af-font-display); font-weight: 700; font-size: 15.5px; line-height: 1.2; }
.af-similar-meta { font-size: 13px; color: var(--af-muted); padding-top: 4px; }
.af-similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.af-similar-heading { font-size: 26px; padding-bottom: 16px; }

/* Планшет (>=768px, <1024px) — поднимаем плакат в карточку с закруглением вместо
   "во весь край телефона", даём читаемому тексту чуть больше воздуха и ширины. */
@media (min-width: 768px) {
	.af-event { max-width: 620px; padding-top: 20px; }
	.af-poster { aspect-ratio: 16/10; max-height: 420px; border-radius: var(--af-radius-lg); overflow: hidden; }
	.af-cta-bar { border-radius: 16px 16px 0 0; }
	.af-similar-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Десктоп (>=1024px) — двухколоночный layout по EventDesktop.dc.html: хлебные крошки,
   основной контент слева, приклеенная карточка выбора термина/покупки справа. Нижний
   плавающий CTA-бар — только мобильный (на десктопе его роль играет сайдбар). */
@media (min-width: 1024px) {
	.af-breadcrumbs { display: flex; align-items: center; gap: 8px; max-width: 1280px; margin: 0 auto; padding: 18px 32px 0; font-size: 13.5px; color: var(--af-muted); }
	.af-breadcrumbs a { color: var(--af-muted); }
	.af-breadcrumbs a:hover { color: var(--af-red); }
	.af-breadcrumb-current { color: var(--af-ink); font-weight: 600; }
	.af-event-layout { max-width: 1280px; margin: 0 auto; padding: 20px 32px 56px; display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }
	.af-event { max-width: none; margin: 0; padding-top: 0; padding-bottom: 0; }
	.af-poster { aspect-ratio: 16/9; max-height: none; border-radius: var(--af-radius-lg); }
	.af-cta-bar { display: none; }
	.af-terms-section-mobile { display: none; }
	.af-aside { display: block; position: sticky; top: 96px; }
	.af-similar { display: block; max-width: 1280px; margin: 0 auto; padding: 8px 32px 56px; }
	.af-similar-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

/* ---------- документы (documents.php: Polityka Prywatności/Regulamin/RODO) ---------- */
.af-doc-page { font-family: var(--af-font-body); color: var(--af-ink); }
.af-doc { max-width: 720px; margin: 0 auto; padding: 28px 16px 56px; }
.af-doc-loading { color: var(--af-muted); font-size: 14.5px; }
/* Содержимое приходит готовым HTML прямо из опубликованного Google Doc (тот же источник,
   что и у old.afisha.pl) — задаём только базовую типографику на случай, если в документе нет
   собственных инлайн-стилей; реальные теги/классы там сами по себе непредсказуемы. */
.af-doc-body { font-size: 15.5px; line-height: 1.65; color: var(--af-muted-2); }
.af-doc-body p { margin: 0 0 14px; }
.af-doc-body h1, .af-doc-body h2, .af-doc-body h3 { font-family: var(--af-font-display); color: var(--af-ink); letter-spacing: -.01em; margin: 28px 0 12px; }
.af-doc-body a { color: var(--af-red); }
.af-doc-body ul, .af-doc-body ol { padding-left: 22px; margin: 0 0 14px; }

@media (min-width: 768px) {
	.af-doc { max-width: 760px; padding: 36px 24px 64px; }
}

@media (min-width: 1024px) {
	.af-doc { max-width: 800px; padding: 48px 32px 72px; }
}