/* ============================================================
   КОНТАКТНАЯ ПОЛОСА «ЗВОНИТЕ / КАЗАНЬ / ЛЮБЫЕ ФОРМЫ ОПЛАТЫ».
   Рекламная группа БАРС, ra-bars-tv.ru, главная.

   Зачем файл существует. Полоса — НЕ наша: она живёт в теме WordPress,
   мы её не верстали, в пакет её РАЗМЕТКА не входит и подрядчик её не
   правит. До 14.09.2026 владелец разрешал менять у неё только фон;
   14.09 попросил привести полосу в порядок целиком («последний блок
   тоже сделай красиво»). Поэтому здесь СТИЛИ на существующие классы
   темы: фон, сетка колонок, иконки, подписи, значения, поведение на
   узких экранах. Разметка остаётся чужой и нетронутой.

   Почему здесь нет префикса bars-*. Во всех остальных файлах пакета
   селекторы живут только под своим корневым классом (.bars-fmt,
   .bars-cat, .bars-about), чтобы ничего не протекало в тему. Здесь
   цеплять не за что: разметка чужая, своего класса у полосы нет и
   добавлять его значило бы править чужой шаблон. Поэтому правила
   написаны по СУЩЕСТВУЮЩИМ классам темы — единственный такой файл
   в пакете. Взамен префикса — адресность: КАЖДЫЙ селектор начинается
   с `.row.dark.footer-row`, ничего вне полосы под него не попадает.

   Проверка адресности (боевая главная, скачана 14.09.2026, DOM-запрос):
     – .row.dark.footer-row → ровно 1 элемент (эта полоса);
     – .footer-row → 2: полоса и подвал `row dark-gray footer-row`;
       у подвала класса `dark` нет (только `dark-gray`), под наш
       селектор он не попадает;
     – .contact-details-list и .features-* вне полосы → 0.
   Сборщик пакета проверяет, что все селекторы файла начинаются с
   `.row.dark.footer-row`; сьют «Форматов» сверяет computed-стили
   подвала и остальной страницы с этим файлом и без него — разницы нет.

   Как правила бьют тему. Самое сильное правило темы на этих элементах —
   `body .row .column:first-child` (0,3,1) в медиа ≤767; наши селекторы
   (0,3,0) на самой полосе и (0,4,0)+ внутри перебивают всё без
   !important. Файл подключается ПОСЛЕ темы, как formats-block.css и
   about-block.css, — порядок тоже на нашей стороне.

   Живая полоса до правки (computed 14.09.2026, 1440×900): float-колонки
   370px в ряду 1170; иконки — шрифт темы `features` 48px #BF5724
   float:left; подпись PT Sans 16px/22, разрядка 2px, серая rgb(128,136,138);
   значение 24px/36, вес 300, белое; отступ текста от иконки 88px.
   ≤1189: значение 16px/24, отступ 73px; ≤767: колонки 100 %; ≤479: ряд
   без фиксированной ширины, поля 20px. Ширины ряда (1170/750/462/auto)
   НЕ переопределяем — колонки полосы стоят в одну линию с подвалом.

   ТОН. #17120c — тот же --bf-plate, что у плиты «Форматов» и её тонировки
   поверх фото (formats-block.css). Было #111 (нейтральный), стало тёплое
   почти-чёрное той же светлоты — полоса перестаёт выпадать из тёплой
   палитры страницы. Палитра текста — как у «Форматов» на этой плите:
     значения  #f4ece4 (бумага)   15,6:1
     подписи   #b8ab9c            8,3:1   (тема давала 5,2:1 холодным серым)
     иконки    #FF6A2C            6,5:1   (графика, порог 3:1)
   Все три числа перемерены пробником по пикселям в приёмке пакета
   (package/proof-package.mjs, гейт «контраст полосы ≥ 4,5»).
   Шрифт не трогаем: PT Sans — шрифт темы, им же набран подвал ниже.
   ============================================================ */

/* ---- полоса: тон и тонкая оранжевая линейка сверху (язык «табло» каталога) ---- */
.row.dark.footer-row {
  background: #17120c;
  border-top: 1px solid rgba(255, 106, 44, .32);
  padding-top: 46px;
  padding-bottom: 0;
}

/* ---- внутренний ряд: сетка вместо float-колонок, ширина — темы ---- */
.row.dark.footer-row > .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 0;
  padding: 0 0 46px;
  box-sizing: border-box;
}
.row.dark.footer-row > .row > .column {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
}
/* тонкие разделители между ячейками */
.row.dark.footer-row > .row > .column + .column {
  border-left: 1px solid rgba(244, 236, 228, .12);
  padding-left: 30px;
}

/* ---- ячейка: иконка слева, подпись и значение справа ---- */
.row.dark.footer-row .contact-details-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.row.dark.footer-row .contact-details-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 22px;
  align-items: start;
}
/* иконка темы (шрифт `features`, глиф задаёт тема) — в первой колонке на обе строки */
.row.dark.footer-row .contact-details-list li::before {
  grid-column: 1;
  grid-row: 1 / 3;
  float: none;
  margin: 0;
  width: 48px;
  height: 48px;
  font-size: 48px;
  line-height: 48px;
  color: #FF6A2C;
}
.row.dark.footer-row .contact-details-list li label {
  grid-column: 2;
  display: block;
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #b8ab9c;
}
.row.dark.footer-row .contact-details-list li p {
  grid-column: 2;
  margin: 4px 0 0;
  padding: 0;
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  color: #f4ece4;
}
.row.dark.footer-row .contact-details-list li p a {
  color: #f4ece4;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}
.row.dark.footer-row .contact-details-list li p a:hover,
.row.dark.footer-row .contact-details-list li p a:focus-visible {
  color: #FF6A2C;
}

/* ---- ≤1189: ряд темы 750px, три колонки по 230 ---- */
@media screen and (max-width: 1189px) {
  .row.dark.footer-row { padding-top: 38px; }
  .row.dark.footer-row > .row { padding-bottom: 38px; column-gap: 24px; }
  .row.dark.footer-row > .row > .column + .column { padding-left: 24px; }
  .row.dark.footer-row .contact-details-list li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
  .row.dark.footer-row .contact-details-list li::before { width: 40px; height: 40px; font-size: 40px; line-height: 40px; }
  .row.dark.footer-row .contact-details-list li label { margin-top: 2px; font-size: 11px; letter-spacing: .16em; }
  .row.dark.footer-row .contact-details-list li p { margin-top: 3px; font-size: 17px; line-height: 24px; }
}

/* ---- ≤767: одна колонка, разделители горизонтальные ---- */
@media screen and (max-width: 767px) {
  .row.dark.footer-row { padding-top: 30px; }
  .row.dark.footer-row > .row { grid-template-columns: minmax(0, 1fr); row-gap: 22px; padding-bottom: 32px; }
  .row.dark.footer-row > .row > .column + .column {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(244, 236, 228, .12); padding-top: 22px;
  }
  .row.dark.footer-row .contact-details-list li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; }
  .row.dark.footer-row .contact-details-list li::before { width: 44px; height: 44px; font-size: 44px; line-height: 44px; }
  .row.dark.footer-row .contact-details-list li p { font-size: 19px; line-height: 26px; }
}

/* ---- ≤479: тема снимает ширину ряда и даёт ему поля 20px — сохраняем поля ---- */
@media screen and (max-width: 479px) {
  .row.dark.footer-row { padding-top: 28px; padding-bottom: 0; }
  .row.dark.footer-row > .row { padding: 0 20px 30px; }
  .row.dark.footer-row .contact-details-list li p { padding-right: 0; }
}