/* ==========================================================================
   Страницы услуг и страница /services/
   ========================================================================== */

/* ── Первый экран ────────────────────────────────────────────────────────── */

.service-hero {
  position: relative;
  padding-block: var(--sp-7) var(--sp-8);
  background: var(--grad-navy);
  color: var(--c-white);
  overflow: hidden;
}

.service-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 90% at 78% 30%, rgba(31, 78, 121, .75) 0%, transparent 60%);
}

.service-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: var(--sp-7);
}

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

/* Крошки внутри тёмной шапки: пришедший из поиска видит их сразу,
   а первый экран не теряет высоту на белую полосу над ним. */
.service-hero .breadcrumbs {
  padding-block: 0;
  margin-bottom: calc(var(--sp-2) * -1);
  color: var(--c-on-dark-45);
}

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

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

.service-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);
}

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

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

.service-hero__desc {
  max-width: 54ch;
  line-height: var(--lh-normal);
  color: var(--c-on-dark-70);
}

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

.service-hero__visual {
  display: flex;
  justify-content: center;
}

.service-hero__image {
  width: auto;
  max-width: 100%;   /* кадр хаба шире прочих (1.83): без этого 340px по высоте
                        дают 622px по ширине и картинка вылезает из колонки */
  max-height: 340px;
  object-fit: contain;
}

.service-hero__glyph { color: var(--c-on-dark-12); }

/* ── 404 ──────────────────────────────────────────────────────────────────
   На 404 первый экран — единственная секция. Подвал прижат к низу окна
   (body — сетка в 01-base.css), поэтому остаток высоты достаётся <main>.
   Без этих двух правил он оставался белой полосой между тёмным экраном и
   подвалом. Растягиваем сам экран, а не подкладываем цвет под main:
   тогда картинка и текст стоят по центру свободного места.               */
.error404 main { display: grid; }

.error-hero {
  display: flex;
  align-items: center;
}

.error-hero .service-hero__inner { width: 100%; }

.error-hero__links {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  color: var(--c-on-dark-70);
}

.error-hero__links a {
  color: var(--c-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}@media (hover: hover) {
.error-hero__links a:hover { color: var(--c-white); }
}

/* ── Карточка неисправности и совета ─────────────────────────────────────── */

.problem,
.tip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-5);
}

/* У совета обрезка нужна — полоса сверху иначе торчит за скругление.
   У неисправности обрезать нельзя: метка-наклейка выходит за левый край. */
.tip { overflow: hidden; }

/* Полоса сверху. В покое сжата в ноль, на наведении разворачивается слева
   направо — обозначает карточку, не сдвигая соседей и не меняя высоту. */
.problem::before,
.tip::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  /* Скругление сверху — раньше полосу обрезал overflow карточки, но у
     неисправности его больше нет: наклейка выходит за левый край. */
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}@media (hover: hover) {
.problem:hover,.tip:hover {
  box-shadow: var(--sh-card);
  transform: translateY(-3px);
}
}
@media (hover: hover) {
.problem:hover::before,.tip:hover::before { transform: scaleX(1); }
}

/* Иконка живёт в плитке: крупная, в фирменном цвете и с подложкой —
   на месте эмодзи, которое каждая ОС рисовала по-своему. */
.problem__icon,
.tip__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--c-tint-blue);
  color: var(--c-accent);
  transition: background var(--t-base), color var(--t-base);
}@media (hover: hover) {
.problem:hover .problem__icon {
  background: var(--c-accent);
  color: var(--c-white);
}
}

/* Карточка неисправности собрана по центру: картинка называет поломку раньше
   текста, и по центру она работает как заголовок блока, а не как пометка сбоку.
   Совет остаётся выключенным влево — там иконка мелкая и служебная. */
.problem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Карточки в ряду тянутся до общей высоты, а содержимое раньше просто лежало
   сверху вниз — и «Learn more» вставал сразу под текстом. Тексты разной длины,
   поэтому кнопки прыгали по высоте на 40–50 px. Прижимаем последний элемент
   карточки (метку или подвал) к низу — низ у карточек общий, значит и кнопки
   встают в одну линию. */
.problem > :last-child { margin-top: auto; }

/* Плитка втрое крупнее исходной: цветную картинку в 28 px не разглядеть,
   а именно она должна называть поломку раньше заголовка. */
.problem__icon {
  width: 104px;
  height: 104px;
  margin-left: auto;
  margin-right: auto;
}

/* Реалистичный набор на карточках-ссылках (сетка на /services/): вдвое крупнее
   и на тёмной подложке — по тем же причинам, что в 04-components.css.
   Карточки неисправностей внутри страниц услуг сюда не попадают: у них плитка
   красится по типу поломки, тёмная подложка съела бы этот цвет. */
.fx-real-icons .card--link.problem .problem__icon {
  width: 168px;
  height: 168px;
  background: var(--grad-navy);
}

.fx-real-icons .card--link.problem .tf-pict {
  width: 136px;
  height: 136px;
}@media (hover: hover) {
.fx-real-icons .card--link.problem:hover .problem__icon {
  background: var(--grad-navy);
  box-shadow: none;
}
}

/* Полосы сверху на наведении у карточек-ссылок нет.
   Она рисуется поверх скругления и на светлой карточке читается как обрезок
   рамки, а не как подсветка. На карточках неисправностей остаётся: там она
   красная у срочных и работает вместе с плиткой и меткой. Отзыв на наведение
   у ссылок и так есть — рамка темнеет и карточка приподнимается. */
.card--link.problem::before { display: none; }

/* Цветная картинка своими красками — перекрашивать её нечем, поэтому на
   наведении меняется только подложка, а сама картинка остаётся. */
@media (hover: hover) {
.problem:hover .problem__icon:has(.tf-pict),.problem--urgent:hover .problem__icon:has(.tf-pict) {
  background: var(--c-white);
  box-shadow: inset 0 0 0 2px var(--c-border);
}
}

.tf-pict {
  display: block;
  width: 68px;
  height: 68px;
  /* object-fit: contain — в 04-components.css: там же живёт сетка услуг,
     а этот модуль на главной не подключается. */
}

/* Срочная неисправность окрашена целиком: плитка, полоса и метка красные. */
.problem--urgent::before { background: var(--c-red); }

.problem--urgent .problem__icon {
  background: var(--c-tint-red);
  color: var(--c-red);
}@media (hover: hover) {
.problem--urgent:hover .problem__icon {
  background: var(--c-red);
  color: var(--c-white);
}
}

/* Советы — зелёные: это не поломка, а польза, и глазом секции не путаются. */
.tip::before { background: var(--c-green); }

.tip__icon {
  background: var(--c-tint-green);
  color: var(--c-green);
}@media (hover: hover) {
.tip:hover .tip__icon {
  background: var(--c-green);
  color: var(--c-white);
}
}

.problem .card__title,
.tip .card__title { font-size: var(--fs-body); }

/* Метка и ссылка на разбор стоят в одной строке внизу карточки: метка слева,
   переход справа. Прижаты к низу, поэтому карточки разной длины текста
   заканчиваются одинаково. */
.problem__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* ── Метка-наклейка ───────────────────────────────────────────────────────
   Метка выходит за левый край карточки и загибается вниз — читается как
   наклеенный ярлычок, а не как ещё одна строка текста внутри. Объём даёт
   не тень вокруг, а тёмный треугольник загиба и подсветка по верхней кромке:
   так работает настоящая лента, и на белом фоне это не грязнит. */
.problem .tag {
  position: relative;
  left: calc(var(--sp-5) * -1 - 10px);   /* вылезти за padding и ещё на 10px */
  margin-right: calc(var(--sp-5) * -1 - 10px);
  padding: 7px 14px 7px 18px;
  border-radius: 0 4px 4px 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),   /* блик по верхней кромке */
    inset 0 -1px 0 rgba(0, 0, 0, .08),
    2px 3px 6px rgba(19, 44, 79, .18);        /* падающая тень ленты */
}

/* Треугольник загиба под левым краем: лента как будто уходит за карточку. */
.problem .tag::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  border-width: 0 10px 5px 0;
  border-style: solid;
  border-color: transparent;
}

.problem .tag--common::after  { border-right-color: #9fb4cc; }
.problem .tag--urgent::after  { border-right-color: #8e1c1c; }

/* ── Карточка неисправности на телефоне ───────────────────────────────────
   Столбиком карточка занимала пол-экрана на одну поломку: крупная картинка
   по центру, под ней заголовок, под ним текст. Шесть таких — длинная лента,
   в которой ничего не найти.

   Собираем шапкой в одну строку: маленькая картинка, заголовок, метка справа.
   Описание уходит под них во всю ширину. Экран под карточку — вдвое меньше.

   .problem__foot убираем из потока через display: contents, чтобы метка и
   ссылка встали в сетку карточки по отдельности, а не одним блоком. */
@media (max-width: 640px) {
  .problem {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title tag"
      "text text text"
      "more more more";
    align-items: center;
    column-gap: var(--sp-3);
    row-gap: var(--sp-2);
    text-align: left;
    padding: var(--sp-4);
  }

  /* Здесь карточка — сетка с жёсткими областями, прижимать низ нечем и незачем:
     margin-top: auto в сетке сдвинул бы элемент внутри его ячейки. */
  .problem > :last-child { margin-top: 0; }

  /* Привязка содержимого к областям сетки живёт здесь же, у самой сетки.
     Раньше она лежала в пороге 430, а сетка включалась с 640 — и в полосе
     431–640 карточка была сеткой с именованными областями, но без единого
     элемента в них: заголовок вставал в колонку значка и рвался по слову
     на строку, описание наезжало сверху. На телефонах, которые отдают
     435–480 css-пикселей, страница услуг выглядела сломанной.

     Правило: `grid-template-areas` и `grid-area` держим в одном пороге. */
  .problem .card__title { grid-area: title; }
  .problem .card__text  { grid-area: text; }

  .problem__foot {
    display: contents;
  }

  /* Метка переезжает к правому краю и загибается зеркально: слева ей теперь
     мешает картинка. За край карточки не выпускаем — на телефоне карточка
     почти упирается в край экрана, и вылет читался бы как обрезка. */
  .problem .tag {
    grid-area: tag;
    left: auto;
    right: calc(var(--sp-4) * -1);
    margin-right: 0;
    padding: 5px 14px 5px 11px;
    border-radius: 4px 0 0 4px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .55),
      inset 0 -1px 0 rgba(0, 0, 0, .08),
      -2px 3px 6px rgba(19, 44, 79, .18);
  }

  .problem .tag::after {
    left: auto;
    right: 0;
    border-width: 0 0 5px 8px;
  }

  .problem .tag--common::after { border-right-color: transparent; border-left-color: #9fb4cc; }
  .problem .tag--urgent::after { border-right-color: transparent; border-left-color: #8e1c1c; }

  .problem__more {
    grid-area: more;
    justify-self: end;
  }

  /* Совет собирается так же: иконка и заголовок в строку, текст под ними.
     Метки и перехода тут нет, поэтому сетка в две колонки, а не в три.

     Порог тот же, что у карточки неисправности. Раньше совет разворачивался
     в строку только ниже 430 px, и на обычном телефоне (390–430 и шире) один
     блок шёл значком сверху, а соседний — значком слева: на одной странице
     две разные карточки. */
  .tip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "text text";
    align-items: center;
    column-gap: var(--sp-3);
    row-gap: var(--sp-2);
    padding: var(--sp-4);
  }

  .tip__icon {
    grid-area: icon;
    width: 52px;
    height: 52px;
    margin: 0;
  }

  .tip .card__title { grid-area: title; }
  .tip .card__text  { grid-area: text; }

  .problem__icon {
    grid-area: icon;
    width: 52px;
    height: 52px;
    margin: 0;
    border-radius: var(--r-md, 10px);
  }

  .problem .tf-pict { width: 34px; height: 34px; }

  /* Карточка-ссылка в сетке услуг: картинка слева, весь текст справа.
     Раскладка карточек неисправностей здесь не годится — там описание уходит
     под шапку во всю ширину, и строка получается «значок, заголовок, а текст
     где-то ниже». Тут картинка занимает всю высоту карточки слева, а
     заголовок, описание и ссылка идут колонкой справа от неё. */
  /* Сетка услуг на узком экране — в одну колонку.
     Сама сетка подбирает число колонок автоматически (auto-fit от 240px), и в
     промежутке 500–640 px она успевает дать две колонки по 242 px. Картинке
     116 px в такой колонке остаётся 76 px на весь текст. :has() — чтобы
     правило не задело сетки других карточек на других страницах. */
  .card-grid:has(.card--link.problem) { grid-template-columns: 1fr; }

  .fx-real-icons .card--link.problem {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon text"
      "icon more";
    align-content: center;
    column-gap: var(--sp-4);
    row-gap: var(--sp-2);
    text-align: left;
    padding: var(--sp-4);
  }

  .fx-real-icons .card--link.problem .problem__icon {
    grid-area: icon;
    align-self: center;
    width: 116px;
    height: 116px;
    margin: 0;
    border-radius: var(--r-lg);
  }

  .fx-real-icons .card--link.problem .tf-pict { width: 96px; height: 96px; }

  .fx-real-icons .card--link.problem .card__title { grid-area: title; }
  .fx-real-icons .card--link.problem .card__text  { grid-area: text; }

  /* Метка простой плашкой: лента с загибом придумана под левый край карточки,
     а здесь метка стоит во второй колонке — вылет наехал бы на картинку. */
  .fx-real-icons .card--link.problem .tag {
    grid-area: more;
    justify-self: start;
    position: static;
    left: auto;
    right: auto;
    margin: 0;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    box-shadow: none;
  }

  .fx-real-icons .card--link.problem .tag::after { display: none; }}

/* На узком телефоне картинка в 116 px оставляет тексту около 215 — описание
   рвётся на восемь строк и карточка вытягивается на пол-экрана. Уменьшаем. */
@media (max-width: 430px) {
  .fx-real-icons .card--link.problem { column-gap: var(--sp-3); }
  .fx-real-icons .card--link.problem .problem__icon { width: 92px; height: 92px; }
  .fx-real-icons .card--link.problem .tf-pict { width: 76px; height: 76px; }}

.problem__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-accent);
  text-decoration: none;
  white-space: nowrap;
}@media (hover: hover) {
.problem__more:hover { text-decoration: underline; }
}

/* Стрелка подъезжает на наведение — знак, что это переход, а не просто текст. */
.problem__more-icon { transition: transform var(--t-base); }@media (hover: hover) {
.problem__more:hover .problem__more-icon { transform: translateX(3px); }
}

/* Разбор, на который пришли по якорю: не даём шапке накрыть заголовок. */
.symptom { scroll-margin-top: 90px; }

/* ── Симптом за симптомом ────────────────────────────────────────────────── */

.symptom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-7);
  padding-block: var(--sp-6);
}

.symptom + .symptom { border-top: 1px solid var(--c-border); }

/* Чётные блоки зеркалим: картинка уходит вправо. Порядком в разметке
   не двигаем — иначе на телефоне текст оказался бы выше картинки
   у одних блоков и ниже у других. */
.symptom--flip .symptom__media { order: 2; }

.symptom__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-bg-panel);
  box-shadow: var(--sh-card);
}

.symptom__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.symptom__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  color: var(--c-dot);
}

.symptom__label {
  font-family: var(--f-head);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}

.symptom__title { margin-bottom: var(--sp-3); }

.symptom__text {
  line-height: var(--lh-loose);
  color: var(--c-text-soft);
}

.symptom__note {
  margin-top: var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--c-cream);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
}

/* ── Как мы это чиним ────────────────────────────────────────────────────── */

.process {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: start;
  gap: var(--sp-8);
}

.process__title { margin-block: var(--sp-3) var(--sp-4); }

.process__desc {
  color: var(--c-text-soft);
  line-height: var(--lh-normal);
}

.process__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  font-size: 14px;
  line-height: var(--lh-normal);
  color: var(--c-text-soft);
}

.process__note .icon {
  color: var(--c-accent);
  margin-top: 2px;
}

.process__note strong {
  display: block;
  font-family: var(--f-head);
  color: var(--c-navy);
}

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

.process__step {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-border);
}

.process__num {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--f-head);
  font-size: var(--fs-base);
  font-weight: 900;
}

.process__step-title {
  font-family: var(--f-head);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-navy);
}

.process__step-text {
  font-size: 14px;
  line-height: var(--lh-normal);
  color: var(--c-text-soft);
}

/* ── Марки ───────────────────────────────────────────────────────────────── */

.brand-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.brand-chips__item {
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-on-dark-12);
  background: rgba(255, 255, 255, .06);
  font-family: var(--f-head);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-white);
}

/* ── Узкие экраны ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .service-hero__inner,
  .symptom,
  .process {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .service-hero__visual { order: -1; }
  .service-hero__image { max-height: 220px; }
  .service-hero__actions .btn { width: 100%; }

  /* На одной колонке зеркалить нечего: картинка везде сверху. */
  .symptom--flip .symptom__media { order: 0; }

  .process { gap: var(--sp-6); }}

/* ==========================================================================
   Городские страницы зоны обслуживания
   ========================================================================== */

/* Вводный текст города — единственное место на сайте, где идут два подряд
   абзаца сплошного текста. Строка ограничена по ширине: на широком экране
   абзац во всю страницу физически трудно читать, глаз теряет начало строки. */
.city-intro {
  margin: 0 auto var(--sp-7);
  text-align: center;
}

.city-intro p {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--c-text-soft);
}

.city-intro p + p { margin-top: var(--sp-4); }

/* Плашка соседнего города. Значок и подпись в строку: список короткий,
   и карточка с картинкой на всю ширину смотрелась бы тяжелее ссылки. */
.city-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}

.city-card__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-tint-blue);
  color: var(--c-accent);
}

.city-card__name {
  font-family: var(--f-head);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-navy);
}

@media (max-width: 640px) {
  .city-intro { text-align: left; }
  .city-intro p { font-size: var(--fs-base); }}