/* ==========================================================================
   Общие элементы: кнопки, метки, карточки, крошки, карусель, вопросы
   ========================================================================== */

/* ── Кнопки ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 16px 32px;
  border-radius: var(--r-md);
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--t-base), color var(--t-base),
              transform var(--t-base), box-shadow var(--t-base);
}@media (hover: hover) {
.btn:hover { transform: translateY(-2px); }
}

.btn--primary {
  background: var(--c-cream);
  color: var(--c-navy);
  box-shadow: 0 4px 20px rgba(239, 218, 187, .3);
}@media (hover: hover) {
.btn--primary:hover { box-shadow: var(--sh-cream); }
}

.btn--navy {
  background: var(--c-navy);
  color: var(--c-white);
}@media (hover: hover) {
.btn--navy:hover { box-shadow: var(--sh-lift); }
}

/* Прозрачная кнопка на тёмном фоне — обычно это телефон рядом с основной. */
.btn--ghost {
  background: transparent;
  color: var(--c-white);
  border: 2px solid var(--c-on-dark-45);
}@media (hover: hover) {
.btn--ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--c-on-dark-70);
}
}

.btn--wide { width: 100%; }

/* ── Заголовок секции ────────────────────────────────────────────────────── */

.section-head {
  max-width: var(--measure);
  margin: 0 auto var(--sp-7);
  text-align: center;
}

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

.section-head__title {
  margin-bottom: var(--sp-4);
}

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

.l-section--navy .section-head__eyebrow { color: var(--c-cream); }
.l-section--navy .section-head__desc    { color: var(--c-on-dark-70); }

/* ── Метки ───────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-family: var(--f-head);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tag--common  { background: var(--c-tint-blue); color: var(--c-accent); }
.tag--urgent  { background: var(--c-tint-red); color: var(--c-red); }
.tag--ok      { background: var(--c-tint-green); color: var(--c-green); }

/* ── Иконки ──────────────────────────────────────────────────────────────── */

.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}

/* ── Карточки ────────────────────────────────────────────────────────────── */

.card {
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-white);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}@media (hover: hover) {
.card--link:hover {
  border-color: var(--c-navy);
  box-shadow: var(--sh-card);
  transform: translateY(-2px);
}
}

.card__title {
  font-family: var(--f-head);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: var(--sp-2);
}

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

/* Сетка карточек: количество колонок подбирается само. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}

/* Ровно три колонки. Карточек неисправностей всегда шесть, а auto-fit на
   широком экране раскладывал их по четыре — второй ряд оставался из двух
   штук и половины пустой строки, секция читалась недоделанной. */
@media (min-width: 900px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }}

/* ── Хлебные крошки ──────────────────────────────────────────────────────── */

.breadcrumbs {
  font-family: var(--f-head);
  font-size: 12.5px;
  color: var(--c-text-muted);
  padding-block: var(--sp-4) 0;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) 6px;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumbs li + li::before {
  content: "›";
  color: var(--c-sep);
}

.breadcrumbs a { transition: color var(--t-fast); }@media (hover: hover) {
.breadcrumbs a:hover { color: var(--c-accent); }
}

.breadcrumbs [aria-current="page"] { color: var(--c-navy); font-weight: 600; }

/* ── Карусель на нативной прокрутке ──────────────────────────────────────────
   Ленту двигают пальцем и колесом; JS нужен только стрелкам и точкам.
   Раньше тут была библиотека на 43 КБ.                                        */

.carousel {
  position: relative;
}

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;              /* полосу прокрутки прячем: есть стрелки */
  padding-bottom: var(--sp-2);
}

.carousel__track::-webkit-scrollbar { display: none; }

.carousel__track > * {
  scroll-snap-align: start;
}

/* Ленту можно тащить мышью. Ладонь показываем только там, где есть куда
   тащить, — класс вешает скрипт. */
.carousel.is-scrollable .carousel__track { cursor: grab; }

.carousel.is-dragging .carousel__track {
  cursor: grabbing;
  scroll-behavior: auto;   /* плавность мешает: лента должна идти за курсором */
  user-select: none;
}

/* Пока тащим — карточка не должна подпрыгивать под курсором. */
.carousel.is-dragging .project { transition: none; }@media (hover: hover) {
.carousel.is-dragging .project:hover { transform: none; box-shadow: none; }
}

.carousel__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.carousel__arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-navy);
  transition: border-color var(--t-fast), opacity var(--t-fast);
}@media (hover: hover) {
.carousel__arrow:hover:not(:disabled) {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: var(--c-white);
}
}

.carousel__arrow:disabled { opacity: .35; cursor: default; }

.carousel__dots {
  display: flex;
  flex-wrap: wrap;              /* иначе длинный ряд точек выдавливает страницу вбок */
  justify-content: center;
  align-items: center;
  gap: 7px;
  max-width: 100%;
}

/* Активная точка вытягивается в пилюлю, а не просто темнеет: положение
   в ленте видно боковым зрением, не приглядываясь к оттенку. */
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-dot);
  transition: width var(--t-slow), background var(--t-fast);
}@media (hover: hover) {
.carousel-dot:hover { background: var(--c-sep); }
}

.carousel-dot.is-active {
  width: 26px;
  background: var(--c-navy);
}

/* ── Вопросы и ответы ────────────────────────────────────────────────────── */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq__item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-white);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  font-family: var(--f-head);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-navy);
}

.faq-question::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--c-accent);
  transition: transform var(--t-base);
}

.faq-question[aria-expanded="true"]::after {
  content: "−";
}

.faq__body {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--c-text-soft);
  line-height: var(--lh-normal);
}

/* ── Плавающая кнопка записи ─────────────────────────────────────────────── */

.floating-cta {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}

.floating-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Своя тень вместо кремового свечения от .btn--primary: то свечение задумано
   для кнопки на тёмном фоне героя, а плавающая проходит и над белыми секциями,
   где светлый ореол не читается вовсе. Нужна тень, отделяющая от любого фона. */
.floating-cta .btn {
  box-shadow: 0 6px 22px rgba(19, 44, 79, .34);
}@media (hover: hover) {
.floating-cta .btn:hover {
  box-shadow: 0 8px 28px rgba(19, 44, 79, .44);
}
}

@media (max-width: 640px) {
  .floating-cta {
    right: var(--gutter);
    left: var(--gutter);
  }
  .floating-cta .btn { width: 100%; }}

/* ── Полоса преимуществ под первым экраном ───────────────────────────────── */

.trust-bar {
  background: var(--c-bg-light);
  border-bottom: 1px solid var(--c-border);
}

.trust-bar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4) var(--sp-7);
  padding-block: var(--sp-4);
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-head);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-navy);
}

.trust-bar__item .icon { color: var(--c-accent); }

/* ── Тёмный баннер с призывом ────────────────────────────────────────────── */

.cta-banner {
  padding-block: var(--sp-9);
  background: var(--grad-navy);
  color: var(--c-white);
  text-align: center;
}

.cta-banner__title {
  font-size: var(--fs-h2);
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}

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

.cta-banner__text {
  max-width: 60ch;
  margin: 0 auto var(--sp-6);
  color: var(--c-on-dark-70);
  line-height: var(--lh-normal);
}

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

/* ── Сетки ссылок: услуги и «мы также чиним» ─────────────────────────────── */

/* Карточка услуги: крупная картинка сверху, подпись под ней. Строкой
   «значок слева — текст справа» сетка читалась как список ссылок; здесь
   человек выбирает прибор по картинке, поэтому она и главная. */
.services-grid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-3);
  font-family: var(--f-head);
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: center;
  color: var(--c-navy);
}

.services-grid__card .icon,
.related__card .icon { color: var(--c-accent); }

/* Плитка под картинкой: тёплая подложка отделяет её от белой карточки,
   а на наведении светлеет — карточка отзывается целиком, а не только тенью. */
.services-grid__tile {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: var(--r-lg);
  background: var(--c-tint-blue);
  transition: background var(--t-base), transform var(--t-base);
}@media (hover: hover) {
.services-grid__card:hover .services-grid__tile {
  background: var(--c-cream);
  transform: translateY(-2px);
}
}

.services-grid__pict {
  width: 72px;
  height: 72px;
}

/* Общее правило для любой цветной картинки-значка, где бы она ни стояла.
   Плоские значки нарисованы квадратными, и без него всё работало. Реалистичные
   — растр разной формы (холодильник 99×176, микроволновка 176×98), и жёсткий
   квадрат их РАСТЯГИВАЛ: холодильник сплющивало почти вдвое по высоте. Именно
   это читалось как «размазано», а не стиль. Сами файлы дополнены прозрачными
   полями до квадрата, contain — страховка на будущие непрямоугольные. */
.tf-pict { object-fit: contain; }

/* ── Реалистичный набор значков ───────────────────────────────────────────
   Включается флагом FX_REAL_ICONS: он вешает на <body> класс fx-real-icons.
   Всё, что отличает этот набор, собрано здесь и снимается вместе с флагом —
   плоские значки рисовались под светлую плитку и её же и получают обратно.

   Почему подложка тёмная: реалистичная техника белая и светло-серая, на
   светлой плитке она сливалась с ней и с белой карточкой. На тёмно-синем —
   том же, что в первом экране, — предмет отделяется контуром сам.           */
.fx-real-icons .services-grid__tile {
  width: 168px;
  height: 168px;
  background: var(--grad-navy);
}

.fx-real-icons .services-grid__pict {
  width: 144px;
  height: 144px;
}

/* Наведение: плитка не светлеет (на тёмной это выглядело бы вспышкой),
   отзывается только сдвигом. */
@media (hover: hover) {
.fx-real-icons .services-grid__card:hover .services-grid__tile {
  background: var(--grad-navy);
}
}

@media (max-width: 640px) {
  .fx-real-icons .services-grid__tile { width: 128px; height: 128px; }
  .fx-real-icons .services-grid__pict { width: 108px; height: 108px; }}

/* Подпись прижата к низу: названия в одну и в две строки должны заканчивать
   карточку на одной высоте, иначе ряд выглядит рваным. */
.services-grid__name {
  margin-top: auto;
  line-height: 1.3;
}

/* Ровно четыре колонки: услуг восемь, и auto-fit на широком экране раскладывал
   их по пять — второй ряд из трёх и половина пустой строки. */
@media (min-width: 900px) {
  .services-grid .card-grid { grid-template-columns: repeat(4, 1fr); }}

/* На телефоне по две в ряд. Плитка и отступы меньше: при восьми услугах
   карточка в 205 px давала почти тысячу пикселей одной сетки — половину
   экрана прокрутки ради восьми ссылок. */
@media (max-width: 899px) {
  .services-grid .card-grid { grid-template-columns: repeat(2, 1fr); }}

@media (max-width: 640px) {
  .services-grid__card {
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-2);
    font-size: 14px;
  }

  .services-grid__tile { width: 76px; height: 76px; }
  .services-grid__pict { width: 52px; height: 52px; }}

/* Заголовок секции здесь короче обычного: над сеткой ссылок ему незачем
   занимать две строки и высоту первого экрана. */
.services-grid .section-head__title {
  font-size: clamp(24px, 3.4vw, 38px);
}

/* «Мы также чиним»: лента всех услуг, кроме открытой.
   Карточка — белая, с бледно-голубой плашкой под картинкой и короткой
   подписью. Плашка сделана фоном кадра, а не вшита в картинку: тот же файл
   стоит на тёмных плитках главной и в карточках неисправностей, и вшитый
   фон вылез бы там светлым прямоугольником. */
.related__track {
  /* Четыре-пять карточек в ряд на широком экране, свайп — на узком. */
  grid-auto-columns: minmax(228px, 1fr);

  /* Поля сверху и снизу — под приподнятую карточку и её тень.
     `overflow-x: auto` делает обрезанной и вертикаль тоже (так в спецификации:
     если по одной оси не visible, вторая становится auto). Карточка на
     наведении поднимается на 2 px, и лента срезала ей верхнюю рамку —
     выглядело так, будто наведение прячет бордер. */
  padding: 6px 2px calc(var(--sp-2) + 12px);
}

/* На телефоне карточка почти во всю ширину, а от следующей видно край:
   эта полоска — единственное, что говорит пальцу, что ленту можно тащить.
   Точки под лентой об этом не говорят, их принимают за украшение. */
@media (max-width: 640px) {
  .related__track { grid-auto-columns: 82%; }
}

@media (max-width: 430px) {
  .related__track { grid-auto-columns: 86%; }
}

.related__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
  font-family: var(--f-head);
  color: var(--c-navy);
}

/* Картинки услуг — с прозрачным фоном и разной высоты, поэтому вписываем
   их в кадр целиком, а не обрезаем: иначе у холодильника срезало бы верх. */
.related__art {
  display: grid;
  place-items: center;
  /* Поле маленькое: воздух вокруг сцены даёт само пятно внутри картинки. */
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}

/* Пятно теперь нарисовано внутри самой картинки (см. inc/seo.php).
   В CSS оно было псевдоэлементом по размеру кадра, и у сцен разных
   пропорций — узкой микроволновки, широкой плиты — торчало из-за прибора
   голым кругом. Художник кладёт его ровно под сцену, вёрстке это не под силу. */
.related__art img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 156px;
  object-fit: contain;
}
.related__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-5);
}

.related__label {
  display: flex;
  /* По верху, а не по центру: у названий в две строки («Washer & Dryer
     Repair») значок уезжал на середину и вставал между строк. */
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
}

.related__label .icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.related__text {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--c-text-soft);
}

.related__title {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.related__areas {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: 14px;
  color: var(--c-text-soft);
}

.related__areas a {
  color: var(--c-accent);
  transition: color var(--t-fast);
}@media (hover: hover) {
.related__areas a:hover { color: var(--c-navy); }
}

/* ── Текстовые страницы ──────────────────────────────────────────────────── */

.page__title {
  margin-block: var(--sp-4) var(--sp-6);
}

/* Вводный абзац по центру над сеткой карточек. */
.l-lead {
  max-width: var(--measure);
  margin: 0 auto var(--sp-6);
  text-align: center;
  color: var(--c-text-soft);
  line-height: var(--lh-loose);
}

/* Содержимое, которое набирает клиент в редакторе: заголовки и списки
   размечены штатными тегами, поэтому стилизуем их здесь, а не классами. */
.prose { line-height: var(--lh-loose); }

.prose > * + * { margin-top: var(--sp-4); }

.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }

.prose ul,
.prose ol {
  padding-left: var(--sp-5);
  list-style: revert;
}

.prose li + li { margin-top: var(--sp-2); }

.prose a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose img { border-radius: var(--r-lg); }

.page-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}

.page-links__item {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-bg-light);
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-navy);
}
/* ── Нажатие вместо наведения ─────────────────────────────────────────────
   Все правила :hover заперты в @media (hover: hover): на тач-экране
   наведения не существует, и подсветка залипала после тапа до следующего
   касания — карточка оставалась выделенной, будто сломалась вёрстка.

   Взамен даём отклик на нажатие, как в приложении: элемент проседает под
   пальцем и тут же отходит. И снимаем серую вспышку, которую браузер
   рисует поверх ссылки сам. */
@media (hover: none) {
  .card--link,
  .btn,
  .carousel__arrow,
  .faq-question,
  .area__city-btn {
    -webkit-tap-highlight-color: transparent;
  }

  .card--link:active {
    transform: scale(.985);
    transition: transform .06s ease-out;
  }

  .btn:active,
  .carousel__arrow:active {
    transform: scale(.96);
    transition: transform .06s ease-out;
  }
}