/* ===========================================================================
   Тема 2. «Пластик».
   Противоположность первой: всё скруглено, границ нет вовсе, глубина держится
   мягкими тенями и светло-серыми подложками. Зелёного больше, он живёт в
   плашках и бейджах. Приём из современных магазинов: страница выглядит
   дружелюбно и дорого, кнопки просятся под палец.
   =========================================================================== */

:root { --radius: 26px; --bg-soft: #f2f4f2; }

body { background: #fff; }

/* 48, а не 72: отступы двух соседних блоков складываются, и между ними
   выходило полтора экрана пустоты. Тёмные полосы (первый экран, проекты,
   видео) задают свои отступы сами, им воздух нужнее. */
.section { padding-top: 48px; padding-bottom: 48px; }
.section--soft { background: var(--bg-soft); }
.h2 { letter-spacing: -0.02em; }

/* Поверхности: без рамок, с мягкой тенью. */
.card, .reason, .step, .pay__item, .person, .material, .faq__item, .cat, .marquee__item {
  border: 0; border-radius: 26px; background: #fff; box-shadow: 0 10px 30px rgba(16, 24, 16, .07);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(16, 24, 16, .12); }
.reason { background: #fff; }
.reason--dark { background: #12211a; border: 0; }
.segcard, .split__photo img, .prodshort__photo, .leadcard, .video, .video__frame, .cathero, .warranty__photo { border-radius: 28px; }
.card__media img, .card__noimg { border-radius: 26px 26px 0 0; }

/* Кружки крупнее и зеленее. */
.reason__badge, .step__badge, .pay__badge, .warranty__badge, .stagebar__badge {
  width: 56px; height: 56px; background: rgba(0, 200, 140, .16); color: var(--accent-text);
}

/* Кнопки-таблетки. */
.btn { border-radius: 999px; border: 0; height: 52px; padding: 0 30px; font-weight: 600; }
.btn--primary, .btn--consult { background: var(--accent); color: var(--on-accent); }
.btn--ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
/* Обычная кнопка: белая с волосяной обводкой на светлой теме, прозрачная со
   светлой обводкой на тёмной. Цвета берутся переменными, иначе получается
   одна из двух поломок: на светлом фоне серая кнопка сливалась с секцией, а
   на тёмном белая кнопка получала светлый текст темы и подпись пропадала.
   Правило заливает фон, значит обязано задать и цвет текста. */
:root { --btn-plain-bg: #fff; --btn-plain-ink: #151515; }
:root[data-theme="dark"] { --btn-plain-bg: transparent; --btn-plain-ink: #f2f3f2; }

.btn:not(.btn--primary):not(.btn--shine):not(.btn--buy):not(.btn--consult):not(.btn--ghost):not(.btn--call) {
  background: var(--btn-plain-bg); color: var(--btn-plain-ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn:not(.btn--primary):not(.btn--shine):not(.btn--buy):not(.btn--consult):not(.btn--ghost):not(.btn--call):hover {
  color: var(--btn-plain-ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.chip { border: 1px solid var(--line); background: var(--bg); height: 34px; font-size: 14px; }
.chip.is-active { background: var(--accent); color: var(--on-accent); }

/* Поля: серые, без рамок. */
.field__input, .leadcard__form .field__input, .search__input {
  border: 0; border-radius: 16px; background: var(--bg-soft);
}
.faq__item { background: #fff; }
.faq__q { font-size: 20px; }

/* Цены и бейджи заметнее. */
.card__price { font-size: 20px; }
.card__badge, .badge { border-radius: 999px; }

/* ===========================================================================
   Заголовки разделов как в компоновке «Журнал»: крупно, у левого края и
   отбиты чертой во всю ширину. Центрирование снято везде, включая блоки,
   которые просили его сами: иначе в одном потоке оказывались заголовки двух
   разных повадок.
   =========================================================================== */
.h2, .h2--center {
  text-align: left;
  margin-left: 0; margin-right: 0; max-width: none;
  /* Начертание и кегль одни на все заголовки разделов. Раньше жирное
     начертание было только у сценариев и услуг, а остальные шли обычным
     полужирным и на полшага крупнее: на одной странице получалось два разных
     почерка. */
  font-size: clamp(32px, 3.4vw, 44px);
  /* 700, а не 900. Девятисотое начертание у Golos Text ощутимо плотнее
     остального набора: заголовок раздела выходил чернее первого экрана,
     хотя тот крупнее. Теперь вес один и тот же у H1 первого экрана и у
     заголовков разделов. */
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.section > .wrap > .h2,
.section.wrap > .h2,
.section.wrap > .h1:not(.product__title) {
  /* Линия цветом текста, а не светло-серым: серая на светлом фоне почти не
     видна. В тёмной теме светлеет вместе с текстом, переменная та же.

     Второй и третий селекторы нужны внутренним страницам: там wrap и section
     висят на одном элементе, а заголовок страницы это h1, а не h2. Без них
     разделы каталога, карточка товара и текстовые страницы остались бы со
     старыми заголовками. */
  /* Линия под заголовком убрана: на странице с полутора десятками блоков
     полтора десятка линеек читались как разлиновка бланка. Вместе с линией
     ушёл и отступ, который её держал: без черты между заголовком и блоком
     зияла пустая полоса в полсотни точек. */
  padding-bottom: 0;
  margin-bottom: 26px;
}

/* Заголовок страницы той же повадки, что и заголовки разделов. Название
   товара исключено: оно живёт в двух колонках рядом с фотографиями, и
   шестидесятый кегль там не к месту. */
.h1:not(.product__title):not(.cathero__title) {
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Подписи под заголовком идут за ним: центрированная подпись под левым
   заголовком выглядит как недоделка. Линия при этом уходит под подпись,
   чтобы не отрезать её от своего же заголовка. */
.section > .wrap > .h2 + .faq__sub,
/* Подзаголовок идёт по левому краю и под h1 тоже: сам по себе .about__lead
   центрирован, и на страницах, где над ним заголовок страницы, а не раздела,
   он висел посередине, не совпадая ни с чем. */
.section > .wrap > .h1 + .about__lead,
.section > .wrap > .h2 + .about__lead,
.section.wrap > .h2 + .faq__sub {
  text-align: left; margin-left: 0; margin-right: 0; margin-top: -22px;
}

/* ===========================================================================
   Команда: пять карточек в ряд, имя и фамилия одной строкой. Размер имени
   подстраивается под ширину карточки, поэтому перенос не нужен и на узких
   экранах ничего не обрезается.
   =========================================================================== */
/* Пятеро в ряд вставали узкой лентой, и лица выходили мельче подписи.
   Раскладка три плюс два: сетка из шести долей, карточка занимает две, а
   четвёртая и пятая сдвинуты на долю вправо, чтобы второй ряд стоял по
   центру. Правило срабатывает только когда людей ровно пять: счёт идёт и с
   начала, и с конца, поэтому шестой человек вернёт обычную сетку. */
.team { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.team .person { grid-column: span 2; }
.team .person:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
.team .person:nth-child(5):nth-last-child(1) { grid-column: 4 / span 2; }
/* Перенос, а не одна строка: на телефоне «Валерия Веселова» и «Станислав
   Рочев» не помещались в карточку и обрезались по правому краю. */
.person__name { white-space: normal; font-size: clamp(14px, 1.12vw, 20px); }
.person__role { font-size: clamp(12px, 0.92vw, 14px); }
@media (max-width: 1000px) {
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team .person, .team .person:nth-child(4):nth-last-child(2), .team .person:nth-child(5):nth-last-child(1) { grid-column: auto; }
}
@media (max-width: 680px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .person__name { font-size: 16px; } }

/* Кнопка «Позвонить мне» возвращается к прежнему виду: общее правило .btn в
   этой теме сделало её высокой и с крупной подписью, а в шапке она должна
   оставаться маленькой зелёной таблеткой. Значения те же, что были до
   темы. */
.btn--call { height: 32px; padding: 0 16px; font-size: 12px; font-weight: 600;
  letter-spacing: .01em; border-radius: 30px;
  background: var(--accent); color: var(--on-accent); }
.btn--call:hover { background: var(--accent-dark); color: var(--on-accent); }
@media (min-width: 1200px) { .btn--call { height: 36px; padding: 0 20px; font-size: 12px; } }

/* ===========================================================================
   Карточка товара: правая колонка была разрежена, а фотография внутри
   скруглённой рамки оставалась с прямыми углами.
   =========================================================================== */

/* Пустой список характеристик всё равно занимал место своими отступами, а
   их тут 52 пикселя: отсюда провал под ценой. Прошлый селектор не срабатывал,
   потому что опирался на обёртку, которой у списка нет. */
.product__facts:empty, .product__short:empty { display: none; }

/* Цена ближе к названию и крупнее: место под ней освободилось. */
.product__meta { margin-bottom: 10px; }
.product__price { font-size: 32px; margin-bottom: 4px; }

/* Варианты идут в ряд и заполняют ширину, а не тремя строчками по левому
   краю. Плашки чуть ниже, подписи ближе к ним. */
.product__options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 24px; margin: 18px 0 20px;
}
.optgroup__label { margin-bottom: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.opt span { height: 38px; padding: 0 14px; font-size: 14px; }

/* Обещания в две колонки: в одну они растягивались на всю ширину и оставляли
   справа пустое поле. */
.trustrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding-top: 16px; }
.trustrip strong { font-size: 14px; }
.trustrip span { font-size: 12px; }

/* Фотография повторяет скругление рамки, в которой лежит: снаружи круглые
   углы, внутри прямые — это читалось как чужая картинка на подложке. */
.product__stage img { border-radius: 18px; }
.thumb { border-radius: 12px; }

@media (max-width: 600px) {
  .product__options { grid-template-columns: 1fr; }
  .trustrip { grid-template-columns: 1fr; }
}

/* Текст на первом экране раздела крупнее: короткое название в этой карточке
   терялось. Заголовок подрос, буллеты и кнопка тоже. */
.cathero__title { font-size: clamp(32px, 3.4vw, 44px); max-width: 15ch; }
.cathero .cathero__list li { font-size: 20px; }

/* ===========================================================================
   Консультант в блоке заявки. Фигура стоит во всю высоту карточки, прижатая
   к нижнему краю, и правым плечом уходит за карточку формы: так же, как в
   присланном примере. Снимок уже вырезан из фона, обводки по волосам нет.
   =========================================================================== */
/* Обрезки по краю карточки нет: голова должна выходить за верхний край, как
   в присланном примере. Фотография-фон всё равно остаётся скруглённой, фон
   сам считается по радиусу, а затемняющий слой берёт радиус у карточки. */
.leadcard { overflow: visible; }
.leadcard__person {
  position: absolute; z-index: 1; left: 30%; top: -56px; bottom: 0;
  display: flex; align-items: flex-end; pointer-events: none;
}
/* picture это обёртка, и без явной высоты она отдаёт снимку свой
   собственный размер: фигура вылезала за карточку и обрезалась по макушку. */
.leadcard__person picture { display: block; height: 100%; }
.leadcard__person img { display: block; height: 100%; width: auto; object-fit: contain; object-position: bottom center; }
/* Форма стоит над фигурой: у фигуры задан z-index, и без него белая
   карточка формы оказывалась под ней. */
.leadcard__form { position: relative; z-index: 2; }

/* Плашка с именем у левого плеча, на фотографии, а не поверх формы. */
.leadcard__badge {
  position: absolute; left: 0; bottom: 28%; z-index: 3;
  display: grid; gap: 2px; text-align: left; white-space: nowrap;
  background: #fff; color: var(--ink); border-radius: 12px;
  padding: 8px 16px; box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  /* Белый островок посреди тёмной карточки, поэтому токены подписей здесь
     возвращаются к значениям для белого листа: снаружи они светлые под
     тёмный фон, и должность серым по белому выходила блёклой. */
  --muted: #6E6E6E; --accent-text: #007A56;
}
.leadcard__badge b { font-size: 16px; }
.leadcard__badge span { font-size: 12px; color: var(--muted); }

/* Секции нужен запас сверху: макушка теперь торчит над карточкой. */
#lead.section, #help.section { padding-top: 84px; }

/* На узких экранах карточка складывается в столбик, и фигуре там не место:
   она перекрыла бы форму. */
@media (max-width: 1100px) { .leadcard__person { display: none; } }

/* ===========================================================================
   Текстовые страницы: сотрудничество, Production, спортивный менеджмент,
   контакты. Колонка в 820 при поле в 1440 оставляла справа пустую половину,
   и страница выглядела сжатой. Стало 1080, кегль 18: строка длиннее, но
   читается ровно, а страница перестала быть узкой полосой у левого края.
   =========================================================================== */
.section--narrow { max-width: 1080px; }

/* Текстовые страницы занимают поле целиком. Колонка в 1080 при поле в 1440
   оставляла справа пустую полосу, и страница выходила уже шапки: заголовок
   с линией обрывался там, где у шапки ещё шёл телефон. Строка от этого
   длинная, поэтому кегль и интерлиньяж подняты, а абзацы разведены шире:
   на длинной строке глазу нужнее вертикальный воздух, чем узкая колонка. */
/* Ширина та же, что у шапки и у всех блоков: max-width из .wrap. Снять её
   насовсем было ошибкой — на экранах шире 1440 текст уходил к самым краям,
   а шапка и форма оставались в колонке, и поля переставали совпадать. */
.section--text { max-width: var(--wrap); }
.section--text .prose { font-size: 20px; line-height: 1.75; }
.section--text .prose p { margin: 0 0 20px; }
.section--text .prose h2 { margin-top: 44px; }

@media (max-width: 1000px) { .section--text .prose { font-size: 16px; line-height: 1.62; } }
.prose { font-size: 20px; line-height: 1.62; }
.prose h2 { font-size: 26px; margin-top: 36px; }
.prose h3 { font-size: 20px; }
.prose--intro { max-width: 900px; font-size: 19px; }

@media (max-width: 1000px) { .prose { font-size: 16px; } }

/* Логотип в тёмной теме: слово белое, кружок с точкой остаётся зелёным.
   Сделано двумя файлами, а не фильтром: фильтр перекрасил бы и зелёное. */
.logo__dark { display: none; }
[data-theme="dark"] .logo__light { display: none; }
[data-theme="dark"] .logo__dark { display: block; }

/* Полоса этапов: значки чёрные, как на живом, а зелёным остаётся только
   кружок за ними. Общее правило кружков из этой темы красило их в зелёный,
   и вся полоса выходила салатовой. */
.stagebar__badge { background: none; color: var(--ink); width: 62px; height: 62px; }