/* pages.css: раскладка секций лендинга и служебных страниц.
   Ориентир (13.md): каждая секция помещается в экран 1366×768, длинные (маршрут, пакеты, FAQ)
   не больше полутора экранов. Фото блоков 1 и 2 в общей рамке 4:5 (.photo--frame). */

/* Общая рамка фото первого экрана и «Идеи клуба»: 4:5, одинаковая ширина.
   До 768 px фото на всю ширину контейнера. */
.photo--frame {
  aspect-ratio: var(--photo-ratio);
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .photo--frame {
    width: var(--photo-w);
  }
}

/* === Первый экран === */
.hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.hero__eyebrow {
  margin-bottom: var(--space-4);
}

.hero__title {
  max-width: 17ch;
}

/* Две фразы h1 всегда с новой строки, между ними отступ больше межстрочного */
.hero__line {
  display: block;
}

.hero__line + .hero__line {
  margin-top: var(--hero-phrase-gap);
}

/* Выделение второй фразы. У Prata нет курсива: вариант --italic даёт наклон, который рисует браузер,
   вариант --color выделяет фразу тёмной оливой логотипа. Выбор за заказчицей. */
.hero__title--italic .hero__line--second {
  font-style: italic;
}

.hero__title--color .hero__line--second {
  color: var(--color-primary-hover);
}

/* Подзаголовок первого экрана остаётся крупнее вводных абзацев разделов */
.hero__lead {
  margin-block: var(--space-4) var(--space-5);
  max-width: 36rem;
  font-size: var(--step-1);
  line-height: 1.45;
}

.hero__price {
  margin-top: var(--space-4);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.hero__photo {
  justify-self: center;
}

/* Временное стоковое фото: лицо в кадре на всех ширинах */
.hero__photo img {
  object-position: 50% 45%;
}

@media (min-width: 900px) {
  .hero {
    min-height: calc(100svh - var(--header-h));
    display: flex;
    align-items: center;
  }
  .hero > .wrap {
    width: 100%;
  }
  .hero__inner {
    grid-template-columns: 1fr auto;
    column-gap: var(--space-8);
  }
  .hero__photo {
    justify-self: end;
  }
}

/* === Идея клуба === */
.idea {
  border-top: var(--line) solid var(--color-accent-soft);
}

.idea__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.idea__text h2 {
  margin-bottom: var(--space-4);
}

.idea__definition {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  padding-left: var(--space-4);
  border-left: var(--line-strong) solid var(--color-accent);
}

.markers {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.markers__item {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: var(--line) solid var(--color-accent-soft);
  max-width: none;
}

.markers__word {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  color: var(--color-primary);
  line-height: var(--lh-heading);
}

/* На песке и мельче 24 px (узкие экраны) маркеры темнее */
@media (max-width: 575px) {
  .section--alt .markers__word {
    color: var(--color-primary-on-alt);
  }
}

.section--alt .idea__definition {
  color: var(--color-primary-on-alt);
}

.markers__text {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.idea__photo {
  justify-self: center;
}

.idea__photo img {
  object-position: 50% 35%;
}


@media (min-width: 768px) {
  .markers {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .idea__inner {
    grid-template-columns: auto 1fr;
    column-gap: var(--space-8);
  }
  .idea__photo {
    order: -1;
  }
}

/* === Узнаёте себя? === */
.recognize__inner {
  display: grid;
  gap: var(--space-5);
}

.recognize__head h2 {
  margin-bottom: var(--space-3);
}

.recognize__list li {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  line-height: 1.35;
  padding-block: var(--space-3);
  border-bottom: var(--line) solid var(--color-accent);
  max-width: none;
}

.recognize__list li:first-child {
  border-top: var(--line) solid var(--color-accent);
}

.recognize__closing {
  font-weight: var(--weight-semibold);
}

@media (min-width: 1024px) {
  .recognize__inner {
    grid-template-columns: 4fr 8fr;
    column-gap: var(--space-8);
  }
  .recognize__head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    align-self: start;
  }
  .recognize__closing {
    grid-column: 2;
  }
}

/* === Пять направлений === */
.directions__grid {
  display: grid;
  gap: var(--gap);
  align-items: start;
}

.direction {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: none;
  font-size: var(--step--1);
}

.direction h3 {
  font-size: var(--step-1);
}

.direction__note {
  padding-top: var(--space-2);
  border-top: var(--line) solid var(--color-accent-soft);
}

/* Подробности направления: плюс, при открытии минус */
.direction__more {
  border-top: var(--line) solid var(--color-accent-soft);
}

.direction__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-min);
  cursor: pointer;
  list-style: none;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.direction__more summary::-webkit-details-marker {
  display: none;
}

.direction__more summary:hover {
  color: var(--color-primary-hover);
}

.direction__more[open] .accordion__sign {
  transform: none;
}

.direction__more[open] .accordion__sign::after {
  transform: rotate(0deg);
}

.direction__body {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
}

.direction__sub {
  margin-top: var(--space-2);
  font-size: var(--step-0);
}

/* Творческая интеграция: практики во всех пяти направлениях. Маленький блок, поэтому без
   надзаголовка заглавными и декоративной линии: заголовок и под ним подпись строчными.
   На десктопе три колонки (заголовок | описание | практики) по центру, на телефоне столбик.
   Два варианта на выбор (правки-12): по умолчанию без иконки (А), --icon с иконкой слева (Б). */
.program__extra {
  display: grid;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--gap);
  padding: var(--space-5);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  font-size: var(--step--1);
}

.program__extra-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.program__extra-icon {
  display: none;
}

.program__extra--icon .program__extra-icon {
  display: block;
}

.program__extra-title {
  font-size: var(--step-1);
}

.program__extra-note {
  margin-top: var(--space-1);
  color: var(--color-primary-hover);
}

.program__extra-list {
  font-weight: var(--weight-semibold);
  color: var(--color-primary-hover);
}

@media (min-width: 1024px) {
  .program__extra {
    grid-template-columns: max-content 1fr max-content;
    column-gap: var(--space-7);
  }
  .program__extra-text {
    max-width: none;
  }
}

.program__hint {
  margin-top: var(--space-3);
}

@media (min-width: 768px) {
  .directions__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .directions__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .directions__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* === Формат === */
.format__inner {
  display: grid;
  gap: var(--space-5);
}

/* Декоративные номера текстовым шрифтом: в Prata «1» похожа на «l». Цены в пакетах остаются в Prata. */
.format__number,
.route__num {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: var(--tracking-num);
}

.format__number {
  font-size: var(--step-5);
  line-height: 1;
  color: var(--color-accent-dark);
  margin-top: var(--space-4);
}

.format__number-caption {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--color-primary-hover);
  max-width: 18ch;
}

.format__facts {
  display: grid;
  gap: var(--space-4);
}

.format__fact {
  padding-top: var(--space-3);
  border-top: var(--line) solid var(--color-accent);
  max-width: none;
}

.format__fact h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-1);
}

.format__note {
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: none;
  font-size: var(--step--1);
}

/* Поддержка между встречами: подблок секции «Формат» */
.format__support {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-6);
  border-top: var(--line) solid var(--color-accent-soft);
}

.format__support-title {
  font-size: var(--step-2);
}

.format__support .between__grid {
  margin-top: var(--space-3);
}

@media (min-width: 768px) {
  .format__facts {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--gap);
  }
}

@media (min-width: 1024px) {
  .format__inner {
    grid-template-columns: 4fr 8fr;
    column-gap: var(--space-8);
    align-items: end;
  }
  .format__support,
  .format__note {
    grid-column: 1 / -1;
  }
}

/* === Маршрут === */
.route__parts {
  display: grid;
  gap: var(--space-5);
}

/* Заголовок раздела ближе к этапам: отступ как между этапами на телефоне */
.route .section__head {
  margin-bottom: var(--space-5);
}

.route__part h3 {
  margin-bottom: var(--space-2);
}

/* Подзаголовки этапов отличаются от заголовка раздела. Два варианта на выбор (правки-10):
   --stage: надпись «Этап 1» в стиле надзаголовка над подзаголовком Prata;
   --sans: подзаголовок текстовым шрифтом, мельче и графитом, без надписи. */
.route__stage {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-on-alt);
}

.route--stage .route__part h3 {
  color: var(--color-text);
}

.route--sans .route__stage {
  display: none;
}

.route--sans .route__part h3 {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-text);
}

.route__list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-1);
  border-bottom: var(--line) solid var(--color-accent-soft);
  max-width: none;
}

.route__list li:first-child {
  border-top: var(--line) solid var(--color-accent-soft);
}

/* Цифры тёмным кэмелом: от 24 px, чтобы контраст 4.1 проходил как крупный текст */
.route__num {
  font-size: var(--step-3);
  line-height: 1.2;
  color: var(--color-accent-dark);
  min-width: 2.2ch;
}

.route__note {
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .route__parts {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-8);
  }
}

/* === Между встречами === */
.between__grid {
  display: grid;
  gap: var(--space-5);
}

.between__item {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding-top: var(--space-4);
  border-top: var(--line) solid var(--color-accent-soft);
  max-width: none;
  font-size: var(--step--1);
}

.between__item h4 {
  font-size: var(--step-1);
}

@media (min-width: 640px) {
  .between__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .between__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* === Пакеты ===
   Правки-5: на 1366×641 после клика по «Пакеты» надзаголовок, h2, лид и три карточки
   с кнопками помещаются в один экран. */
.plans {
  padding-top: var(--space-6);
}

.plans .eyebrow {
  margin-bottom: var(--space-3);
}

/* Под лидом место для половины плашки «Рекомендуем» над карточкой и зазор до неё */
.plans .section__head {
  margin-bottom: var(--space-5);
}

.plans__grid {
  display: grid;
  gap: var(--gap);
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--plan-pad-top) var(--space-5) var(--plan-pad-y);
  background-color: var(--color-surface);
  border: var(--line) solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--step--1);
  transition: border-color var(--duration) ease;
}

.plan:hover {
  border-color: var(--color-accent-soft);
}

/* Бейдж по центру верхней границы карточки, наполовину над краем */
.plan__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  line-height: 1.3;
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-primary-hover);
  color: var(--color-text-invert);
  border-radius: var(--radius-pill);
}

.plan__name {
  font-size: var(--plan-name-size);
  line-height: 1;
}

/* Название и формат в одну строку: формат мелкой подписью справа */
/* Название и формат участия. Названия, линии и цены во всех трёх карточках на одной высоте.
   Два варианта на выбор (правки-13):
   --format-side (б): формат справа от названия; две строки «Элита» укладываются в высоту
     названия, поэтому название и цена не сдвигаются;
   --format-top (а): формат мелкой строкой над названием во всех карточках. */
.plan__head {
  display: flex;
  justify-content: space-between;
  column-gap: var(--space-3);
}

.plan__format {
  min-width: 0;
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
}

.plans--format-side .plan__head {
  align-items: flex-end;
  min-height: var(--plan-name-size);
}

.plans--format-side .plan__format {
  line-height: 1.15;
  text-align: right;
}

.plans--format-top .plan__head {
  flex-direction: column-reverse;
  row-gap: var(--space-1);
}

.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-2);
  line-height: 1;
  padding-block: var(--plan-price-pad-top) var(--plan-price-pad-bottom);
  border-block: var(--line) solid var(--color-accent-soft);
}

.plan__amount {
  font-family: var(--font-heading);
  font-size: var(--plan-price-size);
  line-height: 1;
  color: var(--color-primary);
}

.plan__features {
  flex-grow: 1;
}

.plan__features li {
  padding-block: calc(var(--plan-item-gap) / 2);
  line-height: 1.4;
  padding-left: var(--space-5);
  position: relative;
}

.plan__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: var(--space-3);
  height: var(--line);
  background-color: currentColor;
}

.plan .btn {
  margin-top: var(--space-1);
  min-height: var(--tap-min);
  padding-block: var(--space-1);
}

/* Стандарт на кэмеле: весь текст графитом (5.9:1) */
.plan--accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.plan--accent:hover {
  border-color: var(--color-accent-dark);
}

.plan--accent .plan__name,
.plan--accent .plan__amount {
  color: var(--color-text);
}

.plan--accent .plan__price {
  border-color: var(--color-text);
}

/* Элит на оливе логотипа: светлый текст (7.1:1) */
.plan--primary {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-invert);
}

.plan--primary:hover {
  border-color: var(--color-accent);
}

.plan--primary .plan__name,
.plan--primary .plan__amount {
  color: var(--color-text-invert);
}

.plan--primary .plan__price {
  border-color: var(--color-accent);
}

.plan--primary :focus-visible {
  outline-color: var(--color-text-invert);
}

/* Сравнение пакетов: свёрнуто, кнопка по центру под карточками */
.compare-toggle {
  margin-top: var(--space-6);
}

.compare-toggle__btn {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  list-style: none;
}

.compare-toggle__btn::-webkit-details-marker {
  display: none;
}

.compare-toggle__less,
.compare-toggle[open] .compare-toggle__more {
  display: none;
}

.compare-toggle[open] .compare-toggle__less {
  display: inline;
}

.compare__title {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: var(--step-2);
}

.plans__note {
  margin-top: var(--space-4);
  max-width: none;
  text-align: center;
}

/* В столбик: место над карточкой «Стандарт» под половину плашки */
@media (max-width: 1023px) {
  .plans__grid {
    row-gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .plans__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* === Результат === */
.result__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.result__text h2 {
  margin-bottom: var(--space-3);
}

.result__list {
  margin-top: var(--space-3);
}

.result__list li {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  line-height: 1.35;
  padding-block: var(--space-3);
  border-bottom: var(--line) solid var(--color-accent);
  max-width: none;
}

.result__list li:first-child {
  border-top: var(--line) solid var(--color-accent);
}

.quote {
  background-color: var(--color-accent);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  display: flex;
  align-items: center;
  min-height: 100%;
}

.quote p {
  font-family: var(--font-heading);
  font-size: var(--step-4);
  line-height: var(--lh-heading);
}

@media (min-width: 1024px) {
  .result__inner {
    grid-template-columns: 7fr 5fr;
    column-gap: var(--space-8);
    align-items: stretch;
  }
}

/* === FAQ === */
.faq__inner {
  display: grid;
  gap: var(--space-5);
}

.faq__head h2 {
  margin-bottom: var(--space-3);
}

@media (min-width: 1024px) {
  .faq__inner {
    grid-template-columns: 4fr 8fr;
    column-gap: var(--space-8);
  }
  .faq__head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    align-self: start;
  }
}

/* === Заявка === */
.apply__inner {
  display: grid;
  gap: var(--space-5);
}

.apply__text h2 {
  margin-bottom: var(--space-3);
}

.apply__phrase {
  margin-top: var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--color-primary-hover);
  padding-left: var(--space-4);
  border-left: var(--line-strong) solid var(--color-accent);
}

@media (min-width: 1024px) {
  .apply__inner {
    grid-template-columns: 4fr 8fr;
    column-gap: var(--space-8);
    align-items: center;
  }
}

/* === Служебные страницы (политика, 404) === */
.simple-page {
  min-height: 60vh;
}

.simple-page h1 {
  margin-bottom: var(--space-5);
}

.simple-page h2 {
  font-size: var(--step-2);
  margin-block: var(--space-6) var(--space-3);
}

.simple-page p {
  margin-bottom: var(--space-4);
}