/* Футер Inforeifen — структура й розкладка за ДС §10.26 (норма 31.08.2026).

   Кольори — нових hex нуль: усе на токенах (--bg-notice / --text-inverted /
   --text-inverted-muted / --border-on-dark). Приглушена альфа в системі
   одна — .58.

   ⚠ Що НЕ за ДС і чому — див. коментар у footer-inforeifen.ftlh: колонки
   «Informacje prawne» (правових сторінок у продукті немає) і «Godziny
   kontaktu» (годин для цього бренду немає в properties), рядка копірайту
   теж немає. Це питання контенту, не верстки. */

/* ── Розкладка §10.26 ────────────────────────────────────────────────────
   Дерево вузлів одне на всі три брейкпоінти; змінюється лише поведінка
   __main і __colset.

   Що        │ <670px │ 670–1039px │ ≥1040px
   ──────────┼────────┼────────────┼──────────────────────────
   бок. поле │  24px  │    80px    │  80px  (вісь хедера)
   верт.поля │ 32/24  │   40/32    │  48/32
   __main    │ block  │   block    │  grid 3.2fr 2fr 2fr 2fr, gap 48
   __colset  │ grid 1 │ auto-fit   │  display: contents
   бренд↔кол │  32px  │    40px    │  трек сітки
   між кол.  │  24px  │  24/40px   │  48px

   На таблеті бренд свідомо ламається у власний рядок: три колонки просять
   573px (min-content 172+155+166 + два проміжки по 40), а бренду треба
   ~250px — ряд не складається на жодній таблетній ширині.

   auto-fit minmax(180px, 1fr) замість нового брейкпоінта: до 780px колонок
   у ряду дві, третя лягає під першу; від 780px — три рівними треками.
   180px — найбільший заміряний min-content колонки із запасом.

   Внутрішній ритм колонки — правило близькості: заголовок → перший рядок
   8px, між рядками 0, між колонками 24px. Пропорція 12 : 8 : 28 на око.
   Ключова умова: відстань між колонками мусить бути щонайменше вдвічі
   більшою за відстань під заголовком. */

.ftr-inf {
  background: var(--bg-notice);
  border-top: var(--hairline, 1px) solid var(--border-on-dark);
  color: var(--text-inverted);
  font-family: var(--font-body);
}

.ftr-inf__inner {
  width: 100%;
  max-width: var(--content-max, 1280px);
  margin: 0 auto;
  padding: var(--space-2xl, 32px) var(--space-xl, 24px) var(--space-xl, 24px);
  box-sizing: border-box;
}

/* Мобайл: звичайний блок, бренд над колонками. */
.ftr-inf__main {
  display: block;
}

/* Бренд ↔ колонки: 32px на мобайлі. */
.ftr-inf__brand {
  margin-bottom: var(--space-2xl, 32px);
  line-height: 1;
}

/* Знак хедера, однаковий на всіх брейкпоінтах — власних чисел футер не
   заводить (§10.26). Inforeifen 80 × 45.3, viewBox 113×64. */
.ftr-inf__logo-link {
  display: block;
  width: 80px;
  height: 45.3px;
  background: url("/s/images/logo.svg") 0 50% no-repeat;
  background-size: contain;
}

.ftr-inf__colset {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl, 24px);
}

.ftr-inf__col {
  display: flex;
  flex-direction: column;
  /* Між рядками в колонці 0 — рядки тримаються купи як один список. */
  gap: 0;
}

/* §10.26: на мобайлі порядок «правова → години → контакт» — контакт іде
   останнім, бо на вузькому екрані до нього доводиться гортати найменше
   з-під великого пальця. */
.ftr-inf__col--contact {
  order: 3;
}

/* .footer-h — роль «секційний лейбл» §7. Капслок — задокументований
   виняток 2 (мітка, а не текст). Заголовок → перший рядок 8px. */
.ftr-inf__h {
  margin: 0 0 var(--space-sm, 8px);
  padding: 0;
  background: none;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-inverted);
}

/* Другий заголовок усередині колонки (пошта під телефонами) — той самий
   лейбл, але з відступом згори, щоб не злипався з попереднім списком.
   У ДС такого випадку немає: там на колонку рівно один заголовок. */
.ftr-inf__h--sub {
  margin-top: var(--space-xl, 24px);
}

/* .footer-link — 16px / 1.5 на muted. */
.ftr-inf__link {
  display: inline-block;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-inverted-muted);
  text-decoration: none;
  transition: color 140ms ease;
}

/* .footer-tel — дані, а не текст: mono 700 на --text-inverted.
   Підкреслення знято за §10.26 — воно було єдиним у футері, тобто
   позначало не «посилання», а конкретний рядок. */
.ftr-inf__tel {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-inverted);
}

.ftr-inf__link:hover {
  color: var(--text-inverted);
  text-decoration: underline;
}

/* .footer-desc / рядки колонки — речення: 16px / 1.55, ширина 29ch. */
.ftr-inf__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-inverted-muted);
  max-width: 29ch;
}

/* ── Таблет 670–1039px ──────────────────────────────────────────────── */
@media (min-width: 670px) {
  .ftr-inf__inner {
    padding: var(--space-3xl, 40px) var(--header-px, 80px) var(--space-2xl, 32px);
  }

  .ftr-inf__brand {
    margin-bottom: var(--space-3xl, 40px);
  }

  .ftr-inf__colset {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3xl, 40px) var(--space-xl, 24px);
  }

  /* Порядок розмітки: правова → контакт → години. */
  .ftr-inf__col--contact {
    order: 0;
  }
}

/* ── Десктоп ≥1040px ────────────────────────────────────────────────── */
@media (min-width: 1040px) {
  .ftr-inf__inner {
    padding: var(--space-4xl, 48px) var(--header-px, 80px) var(--space-2xl, 32px);
  }

  /* Бренд + три колонки одним рядом. 3.2fr під бренд — щоб дескриптор мав
     місце; решта треків рівні. */
  .ftr-inf__main {
    display: grid;
    grid-template-columns: 3.2fr 2fr 2fr 2fr;
    gap: var(--space-4xl, 48px);
    align-items: start;
  }

  .ftr-inf__brand {
    margin-bottom: 0;
  }

  /* Колонки мусять стати треками сітки __main, але на мобайлі й таблеті їм
     потрібен спільний контейнер. display: contents розкриває дітей у
     батьківську сітку — одна розмітка тримає всі три брейкпоінти.
     Вкладена сітка дала б інші пропорції: gap між брендом і групою
     перестав би дорівнювати gap між колонками. */
  .ftr-inf__colset {
    display: contents;
  }
}