/* Artemev Dojo — палитра снята с логотипа: графит маски, золото лучей, красный киокушин */
:root {
  --ink: #0B0B0D;
  --graphite: #141519;
  --steel: #24262D;
  --steel-line: #33363F;
  --smoke: #9BA0A9;
  --bone: #ECE9E2;
  --gold: #FFC01E;
  --amber: #F59300;
  --blood: #D22B2B;

  --font-display: "Oswald", "PT Sans Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 4px;
  --section-y: clamp(56px, 8vw, 112px);
}

/* Шрифты лежат локально, без CDN. Каждое начертание разбито на латиницу и
   кириллицу: без латинского файла слова вроде «MAX» и «Artemev Dojo»
   отваливались на системный шрифт и выглядели чужеродно. */
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Длинные слова (адреса, «Верхнепышминской») не должны распирать колонку */
  overflow-wrap: break-word;
}

/* Липкая шапка перекрывает якорь — компенсируем прыжок при переходе по меню */
:target, [id] { scroll-margin-top: 92px; }
/* У самой шапки отступ не нужен: клик по логотипу должен поднимать
   ровно в начало страницы, а не останавливаться ниже него */
#top { scroll-margin-top: 0; }

img { max-width: 100%; height: auto; display: block; }
/* <picture> — только контейнер для <source>, своего бокса ему иметь не нужно.
   display: contents убирает обёртку из потока, и все правила вида
   `.gallery__item img`, `.coach__photo img`, `.hero__mask` работают ровно так же,
   как до перевода картинок на WebP (проценты, grid/flex, absolute — без изменений). */
picture { display: contents; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.15;
  margin: 0;
}
/* Плотный интерлиньяж уместен только на крупных наборных заголовках */
.hero__title { line-height: .95; }
.section__title { line-height: 1.02; }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--ink); padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- Шапка -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 13, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--steel-line);
}
.site-header__inner {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  min-height: 76px; padding-block: 10px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.brand__mark { width: 48px; height: 48px; object-fit: contain; }
.brand__text {
  font-family: var(--font-display); text-transform: uppercase;
  line-height: 1; display: grid;
}
.brand__text b { font-size: 20px; letter-spacing: .06em; }
.brand__text i {
  font-style: normal; font-size: 13px; letter-spacing: .28em; color: var(--gold);
}

.nav { display: flex; gap: clamp(10px, 1.6vw, 22px); margin-left: auto; }
.nav a {
  text-decoration: none; font-size: 15px; color: var(--smoke);
  padding: 6px 2px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--bone); border-bottom-color: var(--gold); }
/* На широком экране цель дублирует кнопка в шапке — пункт нужен только
   в свёрнутом меню */
.nav__cta { display: none; }
@media (max-width: 900px) {
  .nav__cta { display: block; color: var(--gold); font-weight: 600; }
}

.tel { text-decoration: none; font-weight: 600; white-space: nowrap; font-size: 15px; }
.tel:hover { color: var(--gold); }

.nav-toggle { display: none; }

/* ---- Нижняя панель действий (только мобильный) -------------------------- */
/* Главное целевое действие не должно исчезать вместе с шапкой на телефоне */
.mobile-cta { display: none; }

/* ---- Кнопки ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px; border-radius: var(--radius); text-decoration: none;
  font-family: var(--font-display); font-size: 16px; text-transform: uppercase;
  letter-spacing: .06em; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
  min-height: 44px; /* тач-таргет */
}
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--gold { background: var(--gold); color: var(--ink); font-weight: 600; }
.btn--gold:hover { background: var(--amber); transform: translateY(-1px); }
.btn--ghost { border-color: var(--steel-line); color: var(--bone); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---- Герой -------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 96px); }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--steel-line);
}
/* Знак в герое — цветной и в полную силу: это единственная картинка
   первого экрана, приглушать её незачем */
.hero__mask {
  position: absolute; right: max(-4vw, -60px); top: 50%; translate: 0 -50%;
  width: min(780px, 52vw); pointer-events: none;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .55));
}
.hero__inner { position: relative; }

.eyebrow {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .22em; font-size: 13px; color: var(--gold); margin: 0 0 20px;
}

.hero__title {
  /* На 320–390px 58px не помещался в колонку 288–358px — нижнюю границу снизили */
  font-size: clamp(44px, 12.5vw, 148px);
  letter-spacing: -.01em;
  margin-bottom: 24px;
}
.hero__title span { color: var(--gold); }

/* Держим текст левее знака, чтобы строки не ложились на маску */
.hero__lead { max-width: min(46ch, 52%); font-size: clamp(17px, 2vw, 20px); color: var(--smoke); margin: 0 0 32px; }
@media (max-width: 900px) { .hero__lead { max-width: 46ch; } }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(40px, 6vw, 72px); }

.hero__facts { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 64px); margin: 0; }
.hero__facts div { display: grid; gap: 4px; }
.hero__facts dt { font-family: var(--font-display); font-size: clamp(38px, 5vw, 56px); color: var(--bone); line-height: 1; }
.hero__facts dd { margin: 0; font-size: 15px; color: var(--smoke); max-width: 16ch; }

/* ---- Секции ------------------------------------------------------------- */
.section { padding-block: var(--section-y); border-bottom: 1px solid var(--steel-line); }
.section--alt { background: var(--graphite); }

.section__title { font-size: clamp(32px, 5vw, 56px); margin-bottom: 16px; }
.section__lead { color: var(--smoke); max-width: 62ch; margin: 0 0 clamp(32px, 4vw, 48px); }
.section__head { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; }
.section__head .section__lead { margin-bottom: clamp(24px, 3vw, 40px); }

.link-more { color: var(--gold); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; margin-bottom: clamp(24px, 3vw, 40px); }

/* ---- Карточки направлений ---------------------------------------------- */
/* Раньше разделители рисовались фоном контейнера и зазором 1px. При неполном
   последнем ряде пустые ячейки показывали этот фон серыми прямоугольниками,
   поэтому границы теперь у самих карточек. */
/* min(300px, 100%) вместо 300px: на 320px экране колонка контента 288px, а
   auto-fit всё равно строит трек не уже минимума — ряд вылезал на 12px вправо
   и тянул горизонтальный скролл всей страницы. Тот же приём во всех сетках. */
.cards { display: grid; gap: clamp(12px, 1.4vw, 16px); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.card {
  background: var(--ink); padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--steel-line); border-radius: var(--radius);
}
.section--alt .card { background: var(--graphite); }
.card h3 { font-size: 24px; margin-bottom: 12px; }
.card p { margin: 0 0 10px; color: var(--smoke); font-size: 17px; }
.card__hours {
  font-size: 17px; color: var(--bone);
  border-left: 2px solid var(--gold); padding-left: 12px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
/* Строка с ценой — конверсионная, серый #6B707A давал 3.96:1 при норме 4.5:1 */
.card__meta { font-size: 15px; color: var(--smoke); margin-bottom: 0; }
/* Шахматка: чередуем акцентную карточку (золотой заголовок и тёплая подсветка)
   с обычной. При трёх колонках чередование по DOM даёт шахматный порядок,
   при одной — обычное чередование сверху вниз. */
.cards .card:nth-child(even) {
  background: linear-gradient(160deg, rgba(255, 192, 30, .11), transparent 62%), var(--graphite);
}
.cards .card:nth-child(even) h3 { color: var(--gold); }

/* Карточка-призыв замыкает сетку во всю ширину ряда: так последний ряд всегда
   заполнен при любом числе направлений, а призыв читается как акцентная полоса */
.card--cta {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px;
  background: linear-gradient(120deg, rgba(255, 192, 30, .16), transparent 60%), var(--graphite);
  border-color: rgba(255, 192, 30, .35);
}
/* min-width: 0 — иначе flex-элемент не сжимается уже своего содержимого
   и длинный заголовок распирает карточку на узком экране */
.card--cta h3 { color: var(--gold); flex: 1 1 320px; min-width: 0; }
.card--cta p { flex: 1 1 340px; min-width: 0; margin: 0; }
@media (max-width: 560px) { .card--cta .btn { width: 100%; } }

/* ---- Расписание --------------------------------------------------------- */
.tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tabs__btn {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 15px; padding: 13px 22px; cursor: pointer; min-height: 44px;
  background: transparent; color: var(--smoke);
  border: 1px solid var(--steel-line); border-radius: var(--radius);
}
/* На планшетах таблица шире колонки — даём ей собственную прокрутку,
   чтобы не тянуть горизонтальный скролл всей страницы */
.tabs__panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs__btn[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 600; }
.tabs__btn:hover[aria-selected="false"] { color: var(--bone); border-color: var(--smoke); }

.sched { width: 100%; border-collapse: collapse; font-size: 16px; }
.sched caption { text-align: left; }
.sched th, .sched td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--steel-line); vertical-align: top; }
.sched thead th {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: 13px; color: var(--smoke); font-weight: 600; border-bottom-color: var(--smoke);
}
.sched tbody th {
  font-family: var(--font-display); text-transform: uppercase; font-size: 15px;
  letter-spacing: .04em; color: var(--gold); white-space: nowrap; font-weight: 600;
  border-right: 1px solid var(--steel-line);
}
.sched td:first-of-type { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sched tbody tr:hover td { background: rgba(255, 255, 255, .03); }
/* Дубль дня для карточек на мобильном: на десктопе скрыт, там работает th с rowspan */
.sched__day { display: none; }

/* ---- Тренеры ------------------------------------------------------------ */
.coaches { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
/* Все карточки устроены одинаково: фото сверху, тело снизу.
   Карточка руководителя — та же схема, просто шире и с фото слева. */
.coach {
  background: var(--graphite); border: 1px solid var(--steel-line);
  border-radius: var(--radius); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
}
.section--alt .coach { background: var(--ink); }

.coach--lead {
  background: linear-gradient(160deg, rgba(255, 192, 30, .10), transparent 55%), var(--graphite);
}
/* Карточка руководителя отличается только подсветкой: размеры, кадр и
   раскладка у всех тренеров одинаковые, поэтому ряд выравнивается сам */

.coach__photo {
  background: var(--steel);
  /* Портретная рамка: при горизонтальной пояс не помещался в кадр.
     Карточки одной ширины, поэтому высота у всех совпадает автоматически. */
  aspect-ratio: 3 / 4;
}
/* Исходники после кропа очень узкие (1:2.5) — кадрируем по верхней трети,
   чтобы в карточку попадали лицо и корпус, а не только голова */
.coach__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.coach__body { padding: clamp(20px, 2.5vw, 30px); display: grid; align-content: start; gap: 0; }
.coach__role { margin: 0 0 6px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-family: var(--font-display); }
.coach h3 { font-size: clamp(20px, 2.4vw, 28px); margin-bottom: 16px; }
.coach__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.coach__list li { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.5; color: var(--smoke); }
.coach__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--blood); }
/* Расписание в карточке тренера пока скрыто: оно дублирует таблицу залов
   и местами с ней расходится. Разметка сохранена — вернуть можно этой строкой. */
.coach__when { display: none; }
/* Карточка без снимка не должна выглядеть сломанной — просто больше воздуха тексту */
.coach--nophoto .coach__body { padding-top: clamp(26px, 3vw, 38px); }

@media (max-width: 900px) {
  .coach--lead { grid-column: auto; }

}

/* ---- Пояса -------------------------------------------------------------- */
.section--belt { background: var(--graphite); }
.belts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.belt {
  --ink-on-belt: var(--ink, #0B0B0D);
  border-radius: var(--radius); padding: 18px 16px 16px;
  background: var(--steel); border: 1px solid var(--steel-line);
  position: relative; overflow: hidden;
}
.belt::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--belt); }
.belt__kyu { display: block; font-family: var(--font-display); font-size: 20px; text-transform: uppercase; color: var(--bone); }
.belt__name { display: block; font-size: 14px; color: var(--smoke); margin-top: 2px; }

/* ---- Цены --------------------------------------------------------------- */
.prices { display: grid; gap: clamp(10px, 1.2vw, 14px); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.price {
  background: var(--ink); padding: clamp(22px, 3vw, 30px);
  display: grid; align-content: start; gap: 6px;
  border: 1px solid var(--steel-line); border-radius: var(--radius);
}
.price__name { margin: 0; font-size: 15px; color: var(--smoke); }
.price__value { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 4vw, 42px); line-height: 1; }
.price__value span { font-size: .6em; color: var(--smoke); }
.price__note { margin: 6px 0 0; font-size: 15px; color: var(--smoke); }
.price--main { background: linear-gradient(160deg, rgba(255, 192, 30, .12), transparent 65%), var(--ink); }
.price--main .price__value { color: var(--gold); }
.prices__foot { margin: 0; color: var(--smoke); font-size: 15px; }

/* Повторные точки входа в запись: между героем и формой было семь экранов пути */
.section__cta {
  display: flex; flex-wrap: wrap; gap: 16px 32px;
  align-items: center; justify-content: space-between;
  margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--steel-line);
}
.section__cta p { margin: 0; color: var(--smoke); max-width: 52ch; }
@media (max-width: 560px) { .section__cta .btn { width: 100%; } }

/* ---- Новости ------------------------------------------------------------ */
/* auto-fill, а не auto-fit: при одной-двух новостях пустые колонки остаются,
   и карточка сохраняет нормальный размер вместо растягивания на всю ширину */
.news {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  align-items: start;
}
.news__loading, .news__empty { color: var(--smoke); grid-column: 1 / -1; margin: 0; }
.news-item {
  background: var(--ink); border: 1px solid var(--steel-line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.news-item__img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; background: var(--steel); }
.news-item__body { padding: 22px; display: grid; gap: 10px; align-content: start; }
.news-item__date { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-family: var(--font-display); }
.news-item__title { font-size: 21px; }
.news-item__text { margin: 0; color: var(--smoke); font-size: 16px; }
.news-item__link { color: var(--gold); text-decoration: none; font-size: 15px; border-bottom: 1px solid currentColor; justify-self: start; }

/* ---- Галерея ------------------------------------------------------------ */
.gallery { display: grid; gap: clamp(10px, 1.4vw, 16px); grid-template-columns: repeat(2, 1fr); }
.gallery__item {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--steel-line);
}
.gallery__item--wide { grid-column: span 2; }
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 3 / 2; transition: transform .5s ease;
}
.gallery__item--wide img { aspect-ratio: 21 / 9; }
.gallery__item:hover img { transform: scale(1.03); }
@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__item--wide { grid-column: auto; }
  .gallery__item--wide img { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) { .gallery__item:hover img { transform: none; } }

/* ---- Запись ------------------------------------------------------------- */
/* Фон с кубками работает на доверие, поэтому текст кладём на плотную подложку */
.signup {
  position: relative; isolation: isolate;
  background: linear-gradient(140deg, rgba(255, 192, 30, .08), transparent 55%), var(--ink);
}
.signup::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Фолбэк для браузеров без image-set(): обычный JPEG. Должен идти первым —
     тот, кто не понимает следующие строки, останется на нём. */
  background: url("../img/cups-1600.jpg") center / cover no-repeat;
  /* -webkit-image-set нужен старым Safari (< 14), синтаксис без type() */
  background-image: -webkit-image-set(url("../img/cups-1600.webp") 1x);
  /* Стандартный image-set: WebP первым, JPEG — запасной вариант.
     Браузер выбирает первый формат, который умеет декодировать. */
  background-image: image-set(
    url("../img/cups-1600.webp") type("image/webp"),
    url("../img/cups-1600.jpg") type("image/jpeg")
  );
  opacity: .18; filter: grayscale(.35);
}
.signup::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--ink) 18%, rgba(11, 11, 13, .72) 62%, rgba(11, 11, 13, .85));
}
.signup__inner { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1.3fr 1fr; align-items: start; }
.signup__phone { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 46px); margin: 0 0 24px; }
.signup__phone a { text-decoration: none; }
.signup__phone a:hover { color: var(--gold); }
.signup__links { display: flex; flex-wrap: wrap; gap: 12px; }
.signup__halls { display: grid; gap: 12px; }
.hall { border: 1px solid var(--steel-line); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 20px 22px; }
.hall h3 { font-size: 19px; margin-bottom: 6px; }
.hall p { margin: 0; color: var(--smoke); font-size: 15px; }

@media (max-width: 800px) {
  .signup__inner { grid-template-columns: 1fr; }
  /* Фон снят под широкий экран: на телефоне кроп кубков всё равно не читается,
     поэтому берём вдвое лёгкий файл (104 КБ вместо 342 КБ) и уводим его глубже
     в тень. Затемнение из бокового делаем вертикальным — колонка одна, и текст
     идёт сверху вниз, а не слева направо. */
  .signup::before {
    background-image: url("../img/cups-800.jpg");
    background-image: -webkit-image-set(url("../img/cups-800.webp") 1x);
    background-image: image-set(
      url("../img/cups-800.webp") type("image/webp"),
      url("../img/cups-800.jpg") type("image/jpeg")
    );
    opacity: .12;
  }
  .signup::after { background: linear-gradient(180deg, var(--ink) 6%, rgba(11, 11, 13, .78) 55%, rgba(11, 11, 13, .9)); }
}

/* ---- Контакты ----------------------------------------------------------- */
.contacts { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin-bottom: 32px; }
/* Колонки выравниваем по верху и держим одинаковый ритм строк */
.contacts__col { display: grid; align-content: start; gap: 8px; }
.contacts__label {
  margin: 0; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--smoke); font-family: var(--font-display);
  padding-bottom: 10px; border-bottom: 1px solid var(--steel-line);
}
.contacts__value { margin: 0; font-size: 18px; }
.contacts__value a { text-decoration: none; border-bottom: 1px solid var(--steel-line); }
.contacts__value a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ---- Карта -------------------------------------------------------------- */
.map { display: grid; gap: 16px; }
.map__halls { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.map__hall {
  border: 1px solid var(--steel-line); border-left: 3px solid var(--steel-line);
  border-radius: var(--radius); padding: 20px 22px;
  display: grid; gap: 8px; align-content: start;
  transition: border-color .15s ease;
}
.map__hall { border-left-color: var(--gold); }
.map__hall h3 { font-size: 19px; }
.map__hall p { margin: 0; color: var(--smoke); font-size: 15px; }
.map__route {
  color: var(--gold); font-size: 15px; text-decoration: none;
  border-bottom: 1px solid currentColor; justify-self: start; margin-top: 4px;
}
.map__frame { width: 100%; max-width: 100%; height: clamp(320px, 52vh, 480px); border: 0; border-radius: var(--radius); display: block; }

/* Палец, попавший в карту при прокрутке страницы, начинает таскать карту —
   человек «залипает» в iframe. Пока карту не включили тапом, она не принимает
   касания, а поверх лежит кнопка. Обёртку и кнопку ставит main.js и только на
   сенсорных экранах: на мыши карта работает как обычно. */
.map__shell { position: relative; }
.map__shell .map__frame { pointer-events: none; }
.map__shell.is-active .map__frame { pointer-events: auto; }
.map__unlock {
  position: absolute; inset: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 11, 13, .5); border: 0; border-radius: var(--radius);
  padding: 0; cursor: pointer; color: var(--bone);
}
.map__unlock span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 12px 22px;
  background: var(--gold); color: var(--ink); border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  text-transform: uppercase; letter-spacing: .06em;
}

/* ---- Подвал ------------------------------------------------------------- */
.site-footer { padding-block: clamp(32px, 5vw, 56px); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.brand--footer img { width: 44px; height: 44px; object-fit: contain; }
.site-footer__note { margin: 0; color: var(--smoke); font-size: 14px; }
.site-footer__note a { text-decoration: none; }
.site-footer__note a:hover { color: var(--gold); }

/* ---- Появление при прокрутке -------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---- Мобильная навигация ------------------------------------------------ */
@media (max-width: 1080px) {
  .nav a { font-size: 14px; }
  .tel { display: none; }
}

@media (max-width: 900px) {
  .site-header__inner { flex-wrap: wrap; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-left: auto;
    background: transparent; border: 1px solid var(--steel-line); border-radius: var(--radius);
    color: var(--bone); padding: 10px 16px; cursor: pointer; min-height: 44px;
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 14px;
  }
  .nav-toggle__bars { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .nav {
    display: none; width: 100%; flex-direction: column; gap: 0;
    border-top: 1px solid var(--steel-line); margin: 8px 0 0;
  }
  .nav.is-open { display: flex; }
  /* 16px сверху и снизу + строка 22px = 54px на пункт: попадаем пальцем */
  .nav a { padding: 16px 2px; border-bottom: 1px solid var(--steel-line); font-size: 16px; }
  /* Телефон и кнопка переезжают в нижнюю панель — в шапке им тесно */
  .site-header .btn--sm { display: none; }

  .mobile-cta {
    display: flex; gap: 10px;
    position: fixed; inset: auto 0 0 0; z-index: 60;
    padding: 10px var(--gutter);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(11, 11, 13, .94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--steel-line);
    transition: transform .2s ease;
  }
  /* На секции записи те же кнопки есть в самой форме — панель уезжает вниз */
  .mobile-cta.is-hidden { transform: translateY(110%); }
  .mobile-cta .btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 12px 8px; font-size: 15px; }
  .mobile-cta .btn--ghost { border-color: var(--steel-line); background: rgba(255, 255, 255, .04); }
  /* Панель фиксированная — освобождаем ей место, чтобы не накрывала подвал */
  body { padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)); }

  /* Мелкие текстовые ссылки на телефоне тоже должны быть 44px по высоте */
  .link-more,
  .news-item__link,
  .map__route,
  .contacts__value a,
  .site-footer__note a {
    display: inline-block; padding-block: 10px;
    /* Высота набрана паддингом, и нижняя граница уехала бы от текста —
       подчёркиваем сам текст, а не коробку */
    border-bottom: 0; text-decoration: underline; text-underline-offset: 4px;
  }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  /* На узком экране знак уходит в фон, чтобы не спорить с заголовком */
  .hero__mask { opacity: .22; right: -22%; width: 92vw; top: 38%; }

  /* Таблица расписания на узком экране разворачивается в карточки.
     Дни недели заданы через th с rowspan — во второй и следующей строках группы
     их нет, поэтому день дублируется скриптом в .sched__day (см. main.js). */
  .tabs__panel { overflow-x: visible; }
  .sched, .sched tbody, .sched tr, .sched td, .sched th { display: block; }
  .sched thead { display: none; }
  .sched tbody tr {
    border: 1px solid var(--steel-line); border-radius: var(--radius);
    padding: 14px 16px; margin-bottom: 10px;
  }
  .sched th, .sched td { border: 0; padding: 0; }
  .sched tbody th, .sched__day {
    display: block; font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .14em; font-size: 12px; color: var(--gold);
    font-weight: 600; margin-bottom: 6px; white-space: normal;
  }
  /* Время — главное, что ищут глазами в расписании */
  .sched td:first-of-type { font-size: 21px; font-family: var(--font-display); letter-spacing: .02em; white-space: normal; }
  .sched td:first-of-type::before { content: none; }
  .sched td:nth-of-type(2) { font-size: 16px; color: var(--bone); margin-top: 2px; }
  .sched td:nth-of-type(2)::before { content: none; }
  .sched td:nth-of-type(3) { font-size: 14px; color: var(--smoke); margin-top: 4px; }
  .sched td::before { content: attr(data-label) " "; color: var(--smoke); font-size: 13px; }
}

@media (max-width: 480px) {
  /* В один столбец кнопки попадаются точнее, чем в два узких */
  .hero__cta .btn, .signup__links .btn { width: 100%; }
}