/* ============================================================
   Новичок: «Клуб» (/contacts), заявка и «спасибо».
   1.22, волна «новичок» (4.1b): макеты NewcomerContactsPhone/Desktop,
   NewcomerApplyPhone, NewcomerThanksPhone. Грузят только эти три
   страницы (PageCSS). .contact-list, form.card-form и .primer — в
   style.css: ими пользуются и другие страницы (участник, вход, подписка,
   лицензия). Цвета — только токенами: страницы живут в обеих темах.
   ============================================================ */

/* ---- Общее трём страницам ------------------------------------------ */

/* Тихая ссылка: служебным шрифтом, но касанию — 44 px. */
.club-quiet {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-family: var(--grotesk); font-size: 13px; letter-spacing: 0.04em;
  color: var(--gold);
}
.club-quiet:hover { color: var(--ink); }

/* Факты зала: подпись слева, значение справа, строка под строкой.
   Жирные линейки сверху и снизу — как у раздела. */
.club-facts {
  margin: 22px 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.club-facts .row {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--rule);
}
.club-facts .row:first-child { border-top: 0; }
.club-facts dt {
  padding-top: 4px;
  font-family: var(--grotesk); font-size: 11px; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--service);
}
.club-facts dd { margin: 0; font-size: 1.1rem; line-height: 1.5; overflow-wrap: anywhere; }
.club-facts dd .club-quiet { display: flex; width: fit-content; min-height: 44px; margin: -6px 0 -10px; }

/* Фото входа: без приглушения, в тёмной теме — тонкая рамка. Дверь
   бывает и вертикальной — режем по высоте, а не по пропорции. */
.club-entrance img,
.thanks-entrance img {
  display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover;
  outline: 1px solid var(--photo-rule); outline-offset: -1px;
}
.club-entrance-text { font-size: 0.95rem; line-height: 1.55; }
.club-entrance-text p { margin: 8px 0 0; }

/* ---- «Клуб» ----------------------------------------------------------- */

/* Разметка идёт в порядке телефона; широкий экран раскладывает её
   сеткой: первый экран и двери слева, «как добраться» колонкой справа,
   ниже во всю ширину — «кто ведёт» и «о клубе». Второй ряд — 1fr: лишняя
   высота правой колонки уходит под двери, а не в зазор под кнопкой. */
.club {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    "first  route"
    "doors  route"
    "people people"
    "about  about";
  column-gap: 46px;
  align-items: start;
}
.club-first  { grid-area: first; }
.club-route  { grid-area: route; }
.club-doors  { grid-area: doors; }
.club-people { grid-area: people; }
.club-about  { grid-area: about; }

.club-first h1 { font-size: 2.9rem; margin: 10px 0 12px; }
.club-first .dek { max-width: 36rem; margin: 0; }
.club-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
/* Две кнопки рядом: запись и памятка (1.27). inline-flex и 44 точки —
   цель нажатия по WCAG 2.2 (2.5.8): у .btn высота выходит 41 точка, а
   памятка до этого была ссылкой в 22 точки — на телефоне по ней
   промахивались. Те же 44 стоят у ссылки «как найти вход» ниже. */
.club-cta .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }

.club-route { border: 1px solid var(--rule); background: var(--inset); padding: 20px 22px 22px; }
.club-route .address { font-family: var(--display); font-size: 1.35rem; line-height: 1.25; margin: 10px 0 14px; }
.club-entrance { margin: 0 0 16px; }
.club-route .route-buttons { display: flex; flex-direction: column; gap: 10px; }
.club-route .route-buttons .btn { text-align: center; }
.club-route .hint { font-size: 13px; margin: 12px 0 0; }

.club-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 34px; }
.club-doors .primer { margin: 0; max-width: none; }

.club-people,
.club-about { border-top: 1px solid var(--rule-strong); padding-top: 14px; margin-top: 46px; }
.club-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 14px; }
.club-trainers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 34px; margin-top: 12px; }
.club-trainer { display: flex; gap: 14px; align-items: flex-start; }
.club-trainer img { flex: none; width: 72px; height: 90px; object-fit: cover; outline: 1px solid var(--photo-rule); outline-offset: -1px; }
.club-trainer .name { display: block; font-family: var(--display); font-size: 1.2rem; line-height: 1.2; }
.club-trainer .role { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }

.club-about { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px 46px; }
.club-about p { max-width: 36rem; margin: 10px 0 0; }
.club-about .hint { margin: 10px 0 0; }
.club-contacts { margin: 0; border: 0; }
.club-contacts dd { font-size: 1rem; }

/* ---- Заявка ---------------------------------------------------------- */

.club-apply h1 { font-size: 2.6rem; margin: 10px 0; }
.club-apply .dek { max-width: 36rem; }
.club-apply .club-facts,
.club-apply .hint { max-width: 520px; }
.club-apply form.card-form { margin-top: 20px; }

/* ---- «Спасибо» -------------------------------------------------------- */

/* Колонка меры статьи; шапка по центру, как у «спасибо» до 1.22. */
.club-thanks { max-width: var(--measure); margin: 0 auto; }
.thanks-head { text-align: center; margin: 6px 0 30px; }
.thanks-mark {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold);
}
.thanks-mark::before,
.thanks-mark::after { content: ""; width: 42px; border-top: 1px solid var(--rule); }
.thanks-head h1 { font-size: 2.6rem; margin: 12px 0; }
.thanks-head .dek { margin: 0; }

.thanks-rubric { margin: 0 0 10px; }
.thanks-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.thanks-steps > li {
  counter-increment: step; position: relative;
  border-top: 1px solid var(--rule-strong); padding: 12px 0 22px 46px;
}
.thanks-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 12px;
  font-family: var(--display); font-size: 32px; line-height: 1; color: var(--gold);
}
.thanks-steps h3 { font-size: 1.4rem; margin: 0 0 10px; }
.thanks-steps p { margin: 0 0 10px; }
.thanks-steps .hint { margin: 0 0 6px; }
.thanks-steps .club-facts { margin: 0 0 14px; border-top: 0; border-bottom-color: var(--rule); }
.thanks-steps .club-facts dd { font-size: 1rem; }
.thanks-label {
  display: block; margin-bottom: 8px;
  font-family: var(--grotesk); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--service);
}
.thanks-entrance .club-entrance-text { margin-top: 4px; }
.thanks-primer { margin: 4px 0 18px; }
.thanks-ask { border-top: 1px solid var(--rule-strong); padding-top: 14px; }
.thanks-links {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 20px;
  border-top: 1px solid var(--rule); margin: 14px 0 0;
}

/* ---- Телефон ------------------------------------------------------------ */

@media (max-width: 720px) {
  .club { display: block; }
  .club-first h1 { font-size: 1.85rem; }
  .club-first .dek { font-size: 1.05rem; }
  .club-facts .row { grid-template-columns: 92px minmax(0, 1fr); }
  .club-facts dd { font-size: 1rem; }
  .club-cta { flex-direction: column; align-items: stretch; gap: 2px; }
  .club-cta .btn { text-align: center; }
  .club-cta .club-quiet { justify-content: center; }

  /* На телефоне разделы идут столбцом под жирной линейкой, как в
     макете: врезка-коробка там съедала бы поля. */
  .club-route { border: 0; border-top: 1px solid var(--rule-strong); background: none; padding: 20px 0 28px; margin-top: 28px; }
  .club-people,
  .club-about { margin-top: 0; padding: 20px 0 28px; }
  .club-trainers { grid-template-columns: 1fr; gap: 16px; }
  .club-doors { grid-template-columns: 1fr; gap: 22px; margin: 0; border-top: 1px solid var(--rule-strong); padding: 20px 0 28px; }
  .club-about { grid-template-columns: 1fr; }

  .club-apply h1 { font-size: 1.9rem; }
  .thanks-head h1 { font-size: 2.1rem; }
  .thanks-steps h3 { font-size: 1.3rem; }
}