/* =========================================================================
   INFO PAGES — каркас текстових сторінок (сесія 15)

   Що це: власні стилі для інфосторінок з адмінки, мапи сайту й сторінки
   «успішно». До сесії 15 їх малював виключно старий `stylesheet/style.css`
   (`.information-page`, `.sitemap`, `.step-title`, `.title`), через що той
   файл не можна було прибрати в хвилі 7 (SERVER-KNOWLEDGE 40).

   Типографіку вмісту цей файл НЕ дублює: її дає `.article` з
   `css/typography.css` — той самий набір, яким нова верстка малює статтю
   блогу (`.page.article`: падінги сторінки + `.container` на 1400px).
   Тут лише те, чого в наборі немає: заголовок сторінки, мапа сайту,
   сторінка «успішно».

   Сторінки з власною версткою всередині опису (4 «Odwaga zdobi»,
   6 «Formy płatności», 11 «Przewodnik po rozmiarach») цим каркасом не
   користуються — у них свій, `.info-page-own` з `css/info-pages-own.css`
   (сесія 16).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Каркас
   Повторює `.page.article` нової верстки (падінги сторінки + container 1400px),
   але окремим класом: клас `article` вішається тільки на сам вміст, бо він
   несе типографіку — на мапі сайту вона зайва (там `.article a` підкреслює
   кожне посилання).
   ------------------------------------------------------------------------- */

.info-page {
  padding: 60px 0;
}

.info-page > .container {
  max-width: 1400px;
}

.info-page__title {
  margin-bottom: 32px;
}

/* Вміст сторінки пишеться в адмінці й ніде не обмежений по ширині: на
   1400px рядок виходить ~1350px, це ~200 знаків. Обмежуємо міру читання,
   але не самим `.container` — інакше зʼїде заголовок і модулі під текстом. */
.info-page__content {
  max-width: 1100px;
}

/* Довгий текст читається трохи більшим кеглем, ніж SEO-блок під каталогом.
   `.article` дає 15px; для сторінок регламентів це замало. */
.info-page__content,
.info-page__content p,
.info-page__content li,
.info-page__content td,
.info-page__content th {
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 1200px) {
  .info-page {
    padding: 40px 0 64px;
  }
}

@media (max-width: 768px) {
  .info-page {
    padding: 24px 0 48px;
  }

  .info-page__title {
    margin-bottom: 16px;
  }
}

/* Картинки всередині тексту. Вирівнювання їм задає сам контент з адмінки —
   `<p style="text-align:center">`, і в старій верстці це працювало, бо `img`
   лишався інлайновим. `.article img { display: block }` (правило блогу, де
   картинки завжди на всю ширину) робить із них блоки, а на блок `text-align`
   батька не діє: сертифікат і знак виробника на «Cecha probiercza» поїхали
   в лівий край. Лишаємо інлайн-блок — вирівнювання з адмінки знову діє. */
.info-page__content img {
  display: inline-block;
  margin: 20px 0;
}

/* Маркери списків. Старий `stylesheet/style.css` гасить їх на самому `li`
   (`li { list-style: none }`), а `css/critical.css` — на `ul`/`ol`. Значення,
   задане прямо на `li`, перебиває успадковане з `ul` незалежно від
   специфічності, тому тип маркера доводиться повертати саме на `li`.
   У новій верстці той самий фікс уже є для блогу
   (`.page.article ul li { list-style: inherit !important }`) — тут те саме
   без `!important`, бо наш селектор специфічніший за `li`. */
.info-page .article ul li,
.info-page .article ol li {
  list-style: inherit;
}

/* Таблиці з адмінки не мають розтягувати сторінку по горизонталі.
   `display: block` тут свідомо не ставимо (ламає `width: 100%` у таблиці) —
   горизонтальна прокрутка широких таблиць це сесія Б: там сторінка розмірів
   із власним `scroll-table-body`. */
.info-page__content table {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   2. Мапа сайту
   Старе: `.sitemap` (margin 20/50) + `.sitemap h1{text-align:center}` +
   `.sitemap .step-title` — а `.step-title` це клас чекауту, і тримати на
   ньому мапу сайту значить не мати змоги правити одне без другого.
   Тому в розмітці свій клас.
   ------------------------------------------------------------------------- */

.info-page--sitemap {
  text-align: center;
}

.sitemap-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sitemap-links__item {
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  color: #15161a;
  font-family: "Tektur", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: 0.3s;
}

.sitemap-links__item:hover {
  border-bottom-color: #15161a;
}

@media (max-width: 768px) {
  .sitemap-links__item {
    font-size: 16px;
  }
}

/* -------------------------------------------------------------------------
   3. Сторінка «успішно»
   Шаблон `common/success.twig` спільний з акаунтом, партнеркою й частиною
   платіжних розширень (сесія 13), тому правила прив'язані до `#common-success`
   і не чіпають нічого поза ним.
   ------------------------------------------------------------------------- */

#common-success .info-page__title {
  margin-bottom: 16px;
}

#common-success .page-btn {
  display: flex;
  max-width: fit-content;
  margin: 32px auto 0;
}

/* Колонка меню кабінету (`column_right`) стоїть у бутстрапівській сітці,
   а самого бутстрапа в темі не підключено (`bootstrap.css` не вантажиться) —
   тобто `.col-sm-3` і `.list-group` це просто блоки, а посилання лягають
   в один рядок без відступів: «PobranePłatności cykliczne».
   Сторінки акаунта в редизайн не входять, тому правило прив'язане
   до `#common-success` — за межами цієї сторінки нічого не змінює. */
#common-success #column-right {
  margin-top: 40px;
  border-top: 1px solid #e4e7e8;
  padding-top: 24px;
}

#common-success #column-right .list-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}

#common-success #column-right .list-group-item {
  font-size: 14px;
  color: #69737c;
  text-decoration: none;
}

#common-success #column-right .list-group-item:hover {
  color: #15161a;
  text-decoration: underline;
}