/* Компоненты страницы. Логические свойства, мобильный первым. */

/* Ссылка «к содержанию» — первое, что получает клавиатура. Прячется до фокуса,
   но не через display:none: скрытое так не фокусируется. */
.skip{
  position:absolute;inset-block-start:-100%;inset-inline-start:var(--edge);
  z-index:100;padding:12px 18px;
  background:var(--fill);color:var(--accent-ink);text-decoration:none;
  border-radius:var(--radius);
}
.skip:focus{inset-block-start:var(--space-2)}

.visually-hidden{
  position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ── заглушка под фотографию ──
   Настоящие фото заказчик пока не дал. Генерировать человека нельзя (AGENTS.md, п.7),
   поэтому здесь честный прямоугольник, а не выдуманный тренер.

   Тона считаются от --ink и --bg, а не забиты числами: светлый конец
   градиента был #F5F5F1 — фон прежнего направления. В светлом направлении
   он совпал с фоном страницы, и половина заглушки исчезала. */
.photo{
  position:relative;min-block-size:clamp(280px,42vw,520px);overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);
  background-image:
    radial-gradient(circle at 72% 28%,rgba(255,255,255,.28) 0 8%,transparent 9% 100%),
    linear-gradient(145deg,transparent 0 38%,rgba(255,255,255,.12) 38% 40%,transparent 40% 100%),
    linear-gradient(160deg,
      var(--ink) 0%,
      color-mix(in srgb,var(--ink) 55%,var(--bg)) 54%,
      color-mix(in srgb,var(--ink) 24%,var(--bg)) 54.2%,
      color-mix(in srgb,var(--ink) 10%,var(--bg)) 100%);
}
.photo::before{content:"";position:absolute;inset:16px;
  border:1px solid color-mix(in srgb,var(--ink) 34%,var(--bg))}
.photo::after{
  content:attr(data-label);position:absolute;
  inset-block-end:10px;inset-inline-start:12px;
  font-family:var(--font-data),monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);opacity:.75;
}

/* ── первый экран ── */
.hero{display:grid;gap:var(--space-4);align-items:end;padding-block-start:clamp(42px,8vw,104px)}
.hero-copy{position:relative;z-index:1}
.hero h1{max-inline-size:11ch}
.hero .lede{max-inline-size:47ch}
.photo-hero{aspect-ratio:4 / 5}
@media (min-width:820px){
  .hero{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);align-items:stretch;
    min-block-size:min(780px,calc(100vh - 90px))}
  .hero-copy{justify-content:center;padding-block:var(--space-4)}
  .hero .photo{block-size:100%}
}

/* ── развилка аудиторий ── */
.section-fork h2{max-inline-size:14ch}
.fork{display:grid;gap:var(--space-2)}
@media (min-width:760px){ .fork{grid-template-columns:1fr 1fr} }
.fork-card{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-3);text-decoration:none;
  min-block-size:230px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);
}
.fork-card:hover{border-color:var(--accent)}
.fork-card h3{color:var(--ink)}
.fork-go{
  margin-block-start:auto;padding-block-start:var(--space-1);
  font-family:var(--font-data),var(--font-heb),monospace;
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
/* Стрелка — украшение: скринридер её не читает (после «/» пустой текст),
   а на иврите она смотрит по ходу чтения — влево. Первое content — для
   браузеров, которые не знают записи через «/». */
.fork-go::after{content:" ↗";content:" ↗" / "";font-size:1.15em}
[dir="rtl"] .fork-go::after{content:" ↖";content:" ↖" / ""}

/* ── прайс ──
   Строка прайса — карточка-ссылка. Заказчик просил переход к товару из
   любого места и «без долгих застоев», а таблица цифр этого не даёт. */
.section-prices{position:relative}
.prices{display:grid;gap:8px}
.price{
  display:grid;gap:var(--space-1);
  padding:var(--space-3);
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-2);text-decoration:none;color:var(--ink);
  transition:border-color .18s ease,transform .18s ease;
}
.price:hover{border-color:var(--accent);transform:translateY(-1px)}
.price-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2)}
.price-name{
  font-family:var(--font-display),var(--font-heb),serif;font-weight:var(--disp-weight);
  font-size:var(--step-1);line-height:1.15;color:var(--ink);
  text-transform:var(--disp-case);
}
/* Цена — на акцентной плашке. Открытый прайс здесь не просто есть,
   а бьёт в глаза: это обещание проекта, а не строчка мелким шрифтом.
   Плашка безопасна в любом направлении — пару «надпись на плашке»
   сборка проверяет на контраст. */
.price-fig{
  font-family:var(--font-data),var(--font-heb),monospace;
  font-size:var(--step-1);white-space:nowrap;
  background:var(--fill);color:var(--accent-ink);
  padding-block:2px;padding-inline:9px;border-radius:var(--radius);
}
.price-meta{font-size:var(--step--1);color:var(--ink-2)}
.price-packs{display:flex;flex-wrap:wrap;gap:6px}
.pack{
  font-family:var(--font-data),var(--font-heb),monospace;font-size:var(--step--1);
  color:var(--ink-2);border:1px solid var(--line);border-radius:999px;
  padding-block:2px;padding-inline:10px;white-space:nowrap;
}
.price-go{
  font-family:var(--font-data),var(--font-heb),monospace;font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
/* Стрелка — украшение: скринридер её не читает, на иврите смотрит влево. */
.price-go::after{content:" →";content:" →" / "";font-size:1.1em}
[dir="rtl"] .price-go::after{content:" ←";content:" ←" / ""}

/* Цены нет — карточка остаётся живой ссылкой и честно это говорит. */
.price-pending .price-fig{background:none;color:var(--ink-2);padding-inline:0}
.pack-pending{font-style:italic}
/* Факт цены, а не украшение: первая групповая действительно бесплатна. */
.pack-free{background:var(--fill);color:var(--accent-ink);border-color:var(--fill)}

@media (min-width:760px){
  .prices{grid-template-columns:1fr 1fr;gap:var(--space-2)}
}

/* ── расписание ── */
/* ── расписание недели ──
   Оформлено расписанием, а не списком: дни отдельными блоками, внутри —
   часы столбиком. Неделя читается целиком, а на широком экране дни встают
   рядом, как в настоящем расписании зала. */
.week{display:grid;gap:var(--space-2)}
.week-day{
  display:grid;gap:var(--space-2);padding:var(--space-3);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);
}
.week-day-name{
  margin:0;font-family:var(--font-data),var(--font-heb),monospace;
  font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);font-weight:400;
}
.week-slots{list-style:none;margin:0;padding:0;display:grid}
.week-slot{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-2);
  align-items:baseline;min-block-size:var(--tap);
  padding-block:10px;border-block-start:1px solid var(--line);
  text-decoration:none;color:var(--ink);
}
.week-slots li:first-child .week-slot{border-block-start:0}
.week-slot:hover .week-time{color:var(--accent)}
.week-time{
  font-family:var(--font-data),var(--font-heb),monospace;font-size:var(--step-0);
  color:var(--ink);white-space:nowrap;transition:color .18s ease;
}
.week-what{font-size:var(--step--1);color:var(--ink-2)}
.week-state{
  font-family:var(--font-data),var(--font-heb),monospace;font-size:var(--step--1);
  white-space:nowrap;
}
.sched-note{font-size:var(--step--1)}

@media (min-width:760px){
  .week{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--space-2)}
}

/* ── тренер и закрывающий блок ── */
.coach{display:grid;gap:var(--space-4);align-items:center}
@media (min-width:760px){
  .coach{grid-template-columns:.9fr 1.1fr;align-items:stretch}
  .coach .photo{block-size:100%}
}
.coach h2{max-inline-size:18ch}
.photo-coach{background-image:
  linear-gradient(30deg,transparent 0 46%,rgba(255,255,255,.16) 46% 48%,transparent 48%),
  linear-gradient(150deg,
    var(--ink),
    color-mix(in srgb,var(--ink) 62%,var(--bg)) 48%,
    color-mix(in srgb,var(--ink) 18%,var(--bg)) 48.2%,
    color-mix(in srgb,var(--ink) 10%,var(--bg)) 100%)}
.close{align-items:flex-start}
/* Закрывающий блок — вывернутый: плашка цвета текста, текст цвета фона.
   Через --bg, а не через --accent-ink: в светлом кислотном направлении
   надпись на кнопке тоже тёмная, и блок получался чёрным по чёрному.
   Пара ink/bg уже проверяется сборкой на контраст, поэтому вывернутый
   блок читается в любом направлении по построению. */
.close{margin-block-end:var(--space-5);padding-inline:var(--space-3);background:var(--ink);color:var(--bg);border:0}
.close p,.close .eyebrow{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.close .btn{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.close .btn-off{background:transparent;color:color-mix(in srgb,var(--bg) 60%,transparent);border-color:color-mix(in srgb,var(--bg) 24%,transparent)}

/* ── перечисление «что входит» ──
   Маркер — акцентная плашка, а не типографская точка: список тут продаёт,
   а не оформляет. Отступ логический, иначе в иврите маркеры уедут не туда. */
.listing{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);max-inline-size:var(--measure)}
.listing li{position:relative;padding-inline-start:22px}
.listing li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.6em;
  inline-size:10px;block-size:3px;background:var(--fill);
}

/* ── пустое состояние ── */
.empty{
  padding:var(--space-3);border:1px dashed var(--line);border-radius:var(--radius);background:var(--bg-2);
  color:var(--ink-2);max-inline-size:var(--measure);
}

/* ── вход страницы ──
   Анимируется только первый экран и только на загрузке: без наблюдателей
   прокрутки, без «появись когда доскроллишь». Остальная страница статична —
   лишнее движение читается как спецэффект, а не как премиум.
   Состояние покоя — видимое: fill-mode both, анимация стартует сразу. */
@media (prefers-reduced-motion:no-preference){
  .hero .stack > *,
  .hero .photo{ animation:rise .55s cubic-bezier(.2,.6,.2,1) both }
  .hero .stack > :nth-child(1){ animation-delay:.02s }
  .hero .stack > :nth-child(2){ animation-delay:.08s }
  .hero .stack > :nth-child(3){ animation-delay:.14s }
  .hero .stack > :nth-child(4){ animation-delay:.20s }
  .hero .photo{ animation-delay:.14s;animation-duration:.7s }
}
@keyframes rise{
  from{ opacity:0;transform:translateY(10px) }
  to  { opacity:1;transform:none }
}

/* ── микровзаимодействия ── */
.fork-card{transition:border-color .18s ease,transform .18s ease}
.fork-card:hover{transform:translateY(-2px)}
.price{transition:background-color .18s ease}

/* Действие, которого пока нет: канал не подключён. Не притворяется ссылкой —
   ни курсора, ни подчёркивания, ни фокуса. Видно, что это заглушка. */
.btn-off{
  background:transparent;color:var(--ink-2);border-color:var(--line);
  cursor:not-allowed;
}

/* ── живые страницы: расписание и личная ссылка ── */

.slots, .balances{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column}

.slot{
  display:grid;grid-template-columns:1fr auto;gap:var(--space-1) var(--space-2);
  align-items:baseline;
  padding-block:var(--space-3);border-block-end:1px solid var(--line);
}
.slot:first-child{border-block-start:1px solid var(--line)}
.slot-when{grid-column:1;font-family:var(--font-data),var(--font-heb),monospace;
  font-size:var(--step-0);color:var(--ink)}
.slot-what{grid-column:1;grid-row:2;font-size:var(--step-1);color:var(--ink);
  font-family:var(--font-display),var(--font-heb),serif;font-weight:var(--disp-weight)}
.slot-where{grid-column:1;grid-row:3;font-size:var(--step--1);color:var(--ink-2)}
.slot-act{grid-column:2;grid-row:1 / span 3;align-self:center}
.slot-state{font-size:var(--step--1);color:var(--ink-2);white-space:nowrap}

/* Остаток — единственное число, которое клиенту показывать можно. */
.balance{
  display:flex;align-items:baseline;gap:var(--space-2);
  padding-block:var(--space-2);border-block-end:1px solid var(--line);
}
.balance-num{font-family:var(--font-display),var(--font-heb),serif;
  font-weight:var(--disp-weight);font-size:var(--step-2);color:var(--ink)}
.balance-what{font-size:var(--step-0);color:var(--ink)}
.balance-where{font-size:var(--step--1);color:var(--ink-2)}

.btn-sm{min-block-size:var(--tap);padding-inline:14px;font-size:var(--step--1)}

/* Отказ объясняется словами и заметен, но без красного крика:
   «мест нет» — это информация, а не авария (AGENTS.md, п.8). */
.alert{
  padding:var(--space-2) var(--space-3);
  border-inline-start:3px solid var(--accent);
  background:var(--bg-2);color:var(--ink);max-inline-size:var(--measure);
}

/* Вопрос перед необратимым (решение 0015). Сохраняющее действие — обычная
   кнопка, сжигающая — призрачная: заметная, но не та, на которую палец
   опускается по привычке. Ни красного крика, ни таймера. */
.pass-confirm{
  padding-block:var(--space-3);
  display:flex;flex-direction:column;gap:var(--space-2);
  border-block:1px solid var(--line);
}
.pass-confirm .alert{border-inline-start-color:var(--busy)}
.confirm-what{font-size:var(--step--1);color:var(--ink-2);margin:0}

/* Живые страницы короче маркетинговой главной: контент собран в спокойную
   колонку, а действия остаются крупными и достижимыми большим пальцем. */
.page-schedule .page-main,.page-pass .page-main{max-width:820px}
.live-intro{padding-block-start:clamp(42px,8vw,88px)}
.live-intro h1{max-inline-size:18ch}
.pass-intro h1{font-size:clamp(34px,10.5vw,64px);overflow-wrap:anywhere;hyphens:auto}
.live-section h2{font-size:var(--step-2)}
.live-note{padding-block-start:var(--space-3)}
.live-note .sched-note{padding:var(--space-3);background:var(--bg-2);border:1px solid var(--line)}

@media (max-width:419px){
  .slot{align-items:start}
  .slot-act{align-self:stretch}
  .slot-act form{block-size:100%;display:flex;align-items:center}
  .slot-act .btn{min-inline-size:92px}
  .balance{display:grid;grid-template-columns:auto minmax(0,1fr)}
  .balance-num{grid-row:1 / span 2}
  .balance-where{grid-column:2}
}

@media (min-width:760px){
  .fork-card{padding:var(--space-4);min-block-size:280px}
  .prices-note{max-inline-size:54ch}
  .close{padding-inline:var(--space-4)}
  .slot{grid-template-columns:1.2fr 1fr .7fr auto;gap:var(--space-3);align-items:center}
  .slot-when,.slot-what,.slot-where,.slot-act{grid-row:1;grid-column:auto}
  .slot-what{font-size:var(--step-0)}
  .slot-act{justify-self:end}
  .balance{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
}

/* Статус занятия — цветом и словом сразу. Заказчик просил красный и зелёный
   (Бриф 1); слово остаётся, потому что цвет видят не все. */
.week-state.is-free,.slot-state.is-free{color:var(--ok)}
.week-state.is-busy,.slot-state.is-busy{color:var(--busy)}

/* Кнопка «переход к товару», которая всегда под рукой (Бриф 1: «без долгих
   застоев»). Только на телефоне: на широком экране меню и так видно. */
.cta-bar{display:none}
@media (max-width:759px){
  .cta-bar{
    display:block;position:fixed;inset-inline:0;inset-block-end:0;z-index:10;
    padding:10px var(--edge);
    padding-block-end:calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    border-block-start:1px solid var(--line);backdrop-filter:blur(8px);
  }
  .cta-bar .btn{inline-size:100%}
  /* Чтобы полоса не накрывала подвал. */
  .foot{padding-block-end:calc(var(--space-5) + 64px)}
}

/* ── внутренние страницы ──
   Собраны из тех же блоков, что главная: карточки услуг, значки цен,
   карточки аудитории. Своего здесь — только ширины строк и пояснение
   внутри карточки. */
.detail-intro h1{max-inline-size:16ch}
.detail-intro .lede{max-inline-size:52ch}
.detail-price .price-text{
  font-size:var(--step--1);color:var(--ink-2);max-inline-size:46ch;
  margin-block-start:2px;
}
.detail-next .row{flex-wrap:wrap}