/* ==========================================================================
   Первый экран: главная и страницы услуг
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: var(--sp-7);
  background: var(--grad-navy);
  color: var(--c-white);
  overflow: hidden;

  /* Высота = остаток окна под шапкой, но не выше потолка и не ниже пола.
     min-height, а не height: если контент не влез — блок вырастет,
     а не обрежет текст. */
  min-height: calc(100vh - var(--header-h));           /* запасной для старых Safari */
  min-height: clamp(
      calc(var(--hero-min) - var(--header-h)),
      calc(100svh - var(--header-h)),
      calc(var(--hero-max) - var(--header-h))
  );
}

/* Мягкая подсветка по диагонали — та же, что была в прежней теме. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 90% at 80% 35%, rgba(31, 78, 121, .8) 0%, transparent 60%),
    radial-gradient(ellipse 70% 80% at 15% 75%, rgba(31, 78, 121, .36) 0%, transparent 55%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.hero__title {
  font-size: var(--fs-hero);
  color: var(--c-white);
  letter-spacing: -1px;
}

.hero__title em {
  font-style: normal;
  color: var(--c-cream);
}

.hero__tagline {
  font-family: var(--f-head);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 800;
  color: var(--c-cream);
  letter-spacing: -.3px;
}

/* Город в описании выделен цветом — как на прежнем сайте. Коралловый, а не
   красный из палитры ошибок: тот на тёмно-синем читается как предупреждение. */
.hero__hl {
  color: #FF5A4D;
  font-weight: 700;
}

.hero__sub {
  max-width: 52ch;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-on-dark-70);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* ── Правая колонка ──────────────────────────────────────────────────────── */

.hero__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.hero__image {
  /* Ограничиваем по высоте, а не шириной, посчитанной от высоты окна.
     Раньше здесь стояло width: min(410px, 100svh - 330px), и на низком окне
     — открытый отладчик, ноутбук 13″, окно в половину экрана — картинка
     съёживалась в марку, хотя места по ширине оставалось полно. Выглядело
     это поломкой, а не задумкой.

     clamp даёт пол: ниже 220px картинка не опускается ни при какой высоте
     окна, а первый экран в этом случае просто становится выше — у .hero
     стоит min-height, он умеет расти. */
  /* Кадр со щитом шире прежнего (1.67 против 1.3), и на 410px он выглядел
     мелким рядом со строкой цифр под ним. */
  width: 480px;
  max-width: 100%;
  height: auto;
  max-height: clamp(220px, calc(100vh - 330px), 410px);
  max-height: clamp(220px, calc(100svh - 330px), 410px);

  /* Ширина здесь задана числом, поэтому сработавший max-height иначе просто
     сплющил бы картинку по вертикали. contain вписывает её целиком. */
  object-fit: contain;
}

.hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-on-dark-12);
}

.hero__metric {
  position: relative;
  text-align: center;
  padding-inline: var(--sp-3);
}

.hero__metric + .hero__metric::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--c-on-dark-12);
}

.hero__metric-num {
  font-family: var(--f-head);
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--c-white);
  margin-bottom: 6px;
}

.hero__metric-num span {
  color: var(--c-cream);
  font-size: 28px;
}

.hero__metric-label {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-on-dark-45);
}

/* ── Низкие окна ─────────────────────────────────────────────────────────────
   Ноутбук 13" с открытой панелью закладок: поджимаем отступы, чтобы полоса
   доверия осталась над сгибом.                                                */
@media (min-width: 769px) and (max-height: 620px) {
  .hero { padding-block: var(--sp-5); }
  .hero__inner { gap: var(--sp-7); }}

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

@media (max-width: 900px) {
  .hero {
    min-height: 0;
    padding-block: var(--sp-7) var(--sp-8);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  /* На телефоне порядок другой: знак, текст, кнопки — и только потом цифры.
     Раньше цифры стояли сразу под знаком и отжимали кнопку записи за нижний
     край экрана: человек пролистывал до неё уже после трёх чисел.

     display: contents убирает саму обёртку из раскладки, оставляя её детей
     прямыми ячейками сетки, — так знак и цифры можно расставить порознь.
     Правила выравнивания обёртки при этом теряются, поэтому центрирование
     знака задано ему самому. */
  .hero__visual {
    display: contents;
  }

  .hero__image {
    order: -1;
    width: min(300px, 68vw);
    margin-inline: auto;
  }

  .hero__metrics { order: 1; }

  .hero__actions .btn { width: 100%; }}

@media (max-width: 520px) {
  .hero__metric-num { font-size: 26px; }
  .hero__metric-num span { font-size: 20px; }
  .hero__metric-label { font-size: 9px; letter-spacing: .5px; }}

/* ==========================================================================
   Полоса марок под первым экраном
   ========================================================================== */

.tf-certified {
  background: var(--c-bg-light);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
}

.tf-certified-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: var(--wrap);
  height: 112px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Подпись неподвижна и лежит слоем выше дорожки: даже если знак по какой-то
   причине выедет за левый край, подпись останется читаемой. На iOS обрезка
   дорожки как раз не удержала, и широкий логотип наезжал на текст. */
.tf-certified-label {
  position: relative;
  z-index: 2;
  background: var(--c-bg-light);
  padding-right: var(--sp-2);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-text-muted);
  white-space: nowrap;
}

.tf-certified-mark {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  color: var(--c-accent);
}

/* Окно, в котором едет лента.
   Края растворяются, а не обрубаются: знак должен выплывать из пустоты,
   а не появляться из стены. Растворение длинное — на коротком выходил
   ровный срез посреди буквы. */
.tf-certified-stage {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 90px), transparent);
}

/* Сама лента. Список логотипов лежит в разметке дважды подряд, поэтому
   сдвиг ровно на половину ширины возвращает ленту в исходное положение —
   шва не видно, круг замыкается без разрыва.
   Скрипт для этого не нужен вовсе: анимация целиком на CSS, работает
   с первого кадра и не зависит от загрузки JS. */
.tf-certified-run {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tf-belt 42s linear infinite;
}

/* Ширина ячейки фиксированная. Без неё обе половины ленты получались бы
   разной ширины — знаки-то разные, — и на стыке лента дёргалась бы. */
.tf-certified-item {
  flex: none;
  display: grid;
  place-items: center;
  width: 190px;
  height: 56px;
}

/* Цвета родные. Серым знаки выглядели аккуратнее, но именно цвет
   отличает их друг от друга: обесцвеченные Amana, Hotpoint и Café
   сливались в одинаковые серые надписи, и полоса читалась как один
   длинный текст, а не как девять марок. */
.tf-certified-item img {
  width: auto;
  max-width: 150px;
  max-height: 36px;
  object-fit: contain;
}

/* Квадратным знакам общий предел по ширине не годится: рядом с широкими
   вроде KitchenAid они выглядели бы вдвое мельче. */
.tf-certified-item img.is-square { max-width: 64px; max-height: 56px; }

@keyframes tf-belt {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Мышь на ленте — остановка: значит, знак хотят рассмотреть.
   Только для настоящего курсора: на телефоне «наведение» залипает
   после касания, и лента вставала бы намертво. */
@media (hover: hover) {
  .tf-certified-stage:hover .tf-certified-run { animation-play-state: paused; }
}

/* «Уменьшить движение» в системе ставят себе люди, которых от анимаций
   укачивает. Им — обычный ряд: лента стоит, второй экземпляр списка убран,
   знаки переносятся по строкам. */
@media (prefers-reduced-motion: reduce) {
  .tf-certified-run {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tf-certified-run [aria-hidden="true"] { display: none; }
  .tf-certified-inner { height: auto; padding-block: var(--sp-4); }
}

/* На телефоне подпись и лента делят одну строку на 375 пикселей — при
   любом широком знаке они сходятся. Разводим по вертикали: подпись сверху,
   лента под ней во всю ширину. */
@media (max-width: 768px) {
  .tf-certified-inner {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding-block: var(--sp-4);
  }

  .tf-certified-mark { flex-basis: 32px; width: 32px; height: 32px; }

  .tf-certified-label {
    padding-right: 0;
    font-size: 10px;
    letter-spacing: 1px;
  }

  .tf-certified-stage {
    flex: none;
    width: 100%;
    /* Слева на телефоне не растворяем: подпись ушла на строку выше,
       прятать знак у левого края больше не от кого. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent);
  }

  .tf-certified-item { width: 150px; }
  .tf-certified-item img { max-width: 120px; max-height: 32px; }
  .tf-certified-item img.is-square { max-width: 52px; max-height: 46px; }
}

/* ==========================================================================
   Шапка внутренней страницы
   ========================================================================== */

.page-hero {
  padding-block: var(--sp-8);
  background: var(--grad-navy);
  color: var(--c-white);
  text-align: center;
}

.page-hero__inner { max-width: 820px; }

.page-hero__eyebrow {
  font-family: var(--f-head);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-cream);
  margin-bottom: var(--sp-3);
}

.page-hero__title {
  font-size: var(--fs-h1);
  color: var(--c-white);
  letter-spacing: -1px;
  margin-bottom: var(--sp-4);
}

.page-hero__title em {
  font-style: normal;
  color: var(--c-cream);
}

.page-hero__sub {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--c-on-dark-70);
  line-height: var(--lh-normal);
}

/* Крошки лежат внутри тёмной шапки, поэтому перекрашиваем их.
   Те же правила для страниц услуг — в 12-service.css: этот модуль
   там не подключается. */
.page-hero .breadcrumbs {
  padding-block: 0 var(--sp-4);
  color: var(--c-on-dark-45);
}

.page-hero .breadcrumbs ol { justify-content: center; }
.page-hero .breadcrumbs li + li::before { color: var(--c-on-dark-45); }@media (hover: hover) {
.page-hero .breadcrumbs a:hover { color: var(--c-cream); }
}

.page-hero .breadcrumbs [aria-current="page"] { color: var(--c-on-dark-70); }