/* Start:/local/templates/frk/css/legal.css?17906925219283*/
/*
 * Юридические страницы («Политика конфиденциальности», «Согласие на обработку
 * персональных данных»).
 *
 * Общий шаблон статичной страницы: «Назад», заголовок и разделы «заголовок
 * раздела слева — текст справа», между разделами тонкая линия. Разметка одна
 * на все такие страницы, меняется только содержимое; текст разделов приходит
 * из визуального редактора CMS, поэтому абзацы и ссылки стилизуются по тегам
 * внутри .frk-legal__text, а не по отдельным классам.
 *
 * Макет есть только для 1920. Ниже раскладка тянется по общему правилу
 * проекта: кегли идут по токенам, заголовок страницы — по прямой между
 * 360, 768 и 1920, а ниже 1024 заголовок раздела встаёт над текстом.
 */

.frk-legal {
  /* Шапка → «Назад» → заголовок: фиксированные 16px на каждом стыке */
  padding-top: var(--frk-space-sm);
}

/* До плашки подвала — 80px; у подвала свой верхний отступ ритма, гасим его */
.frk-legal ~ .frk-footer {
  --frk-rhythm-footer: 80px;
}

/* --- «Назад» -------------------------------------------------------------- */

.frk-legal__back {
  display: flex;
  align-items: center;
  gap: var(--frk-space-2xs);
  width: fit-content;
  margin-bottom: var(--frk-space-sm);
  font-weight: var(--frk-weight-light);
  font-size: 14px;
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

/* Скрипт прячет «Назад», когда предыдущей страницы сайта нет (js/back-link.js) */
.frk-legal__back[hidden] {
  display: none;
}

.frk-legal__back:hover {
  color: var(--frk-color-gold);
}

/*
 * Стрелка одна на проект, красится currentColor через маску. Файл в макете
 * шире рамки 12px на полпикселя слева и на треть пикселя сверху и снизу —
 * это ход линии, поэтому маска выходит за иконку на те же доли.
 */
.frk-legal__back-icon {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
}

.frk-legal__back-icon::before {
  content: "";
  position: absolute;
  inset: -2.89% 0 -2.89% -5.78%;
  background: currentColor;
  -webkit-mask: url("/local/templates/frk/css/../images/icons/arrow-back.svg") center / 100% 100% no-repeat;
  mask: url("/local/templates/frk/css/../images/icons/arrow-back.svg") center / 100% 100% no-repeat;
}

/* --- Заголовок страницы --------------------------------------------------- */

/*
 * Общий кегль заголовка страницы: 40 до 1024, 96 на 1920. Слово
 * «конфиденциальности» на 40px шире телефона (399px при 348 на 360),
 * поэтому перенос по слогам (решение заказчика): «конфиденци-альности»,
 * а не разрыв посреди слова.
 */
.frk-legal__title {
  margin-block: calc(-1 * var(--frk-title-leading-trim));
  font-size: var(--frk-size-page-title);
  line-height: var(--frk-leading-title);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/*
 * Длинный заголовок в одну строку, как в макете. Макет набран Source Serif,
 * он уже проектного Roboto Serif: заголовок «Согласие на обработку персональных
 * данных» на 96px занимает 1990px при 1904px в контейнере и переносился.
 * Кегль поэтому берётся из ширины окна, а не из макетных 96px. Ширина строки
 * в em плавает от 20.7 до 20.9 с кеглем (оптическая ось шрифта), поэтому делитель
 * 21 с запасом; 32px — поля страницы и полоса прокрутки, входящая в 100vw.
 * Ниже 1600 в одну строку заголовок не помещается без кегля мельче 64px,
 * там он остаётся в две строки.
 */
@media (min-width: 1600px) {
  .frk-legal__title--single-line {
    font-size: min(var(--frk-size-page-title), calc((100vw - 32px) / 21));
    white-space: nowrap;
  }
}

/* --- Разделы -------------------------------------------------------------- */

.frk-legal__section {
  row-gap: var(--frk-space-sm);
  margin-top: var(--frk-space-lg);

  /* Кегль заголовка считается от ширины раздела, см. .frk-legal__heading */
  container-type: inline-size;
}

/*
 * Линия между разделами лежит посередине зазора в 64px: 32 до неё и 32 после.
 * В макете она нулевой высоты с обводкой в 1px, поэтому рисуем её поверх,
 * а не бордером — бордер добавил бы по пикселю на каждый из одиннадцати стыков.
 */
.frk-legal__section + .frk-legal__section {
  position: relative;
  margin-top: calc(2 * var(--frk-space-lg));
}

.frk-legal__section + .frk-legal__section::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--frk-space-lg) - 0.5px);
  right: 0;
  left: 0;
  height: 1px;
  background: rgb(19 18 18 / 20%);
}

/*
 * Заголовок раздела: 4 колонки (632 на 1920), ExtraLight по токенам проекта.
 *
 * Правый отступ постоянный: строки заголовка, в том числе перенесённые, не
 * подходят к тексту ближе чем на 32px плюс зазор сетки. Без него зазор гулял
 * от 5 до 55px в зависимости от того, где упал перенос. На 1920 отступ не
 * меняет переносы макета — самая длинная строка короче колонки больше чем на 50px.
 *
 * Кегль не может превышать 1/10.5 ширины колонки без отступа: самое длинное
 * слово заголовков, «Конфиденциальность», занимает 9.94em (остальное — запас
 * на округление шрифта). При токенном кегле на 1024–1300 оно не помещалось
 * в колонку и рвалось посреди слова. Ширина колонки: четыре двенадцатых
 * раздела плюс три зазора сетки.
 */
.frk-legal__heading {
  --frk-legal-heading-gutter: var(--frk-space-lg);

  padding-right: var(--frk-legal-heading-gutter);
  font-size: min(
    var(--frk-size-display-lg),
    calc(
      (
        (100cqw - 11 * var(--frk-layout-gap)) / 3 + 3 * var(--frk-layout-gap) -
          var(--frk-legal-heading-gutter)
      ) / 10.5
    )
  );
  line-height: 1.1;
  text-wrap: wrap;
  overflow-wrap: break-word;
}

/* Текст раздела: 7 колонок (1108 на 1920) */
.frk-legal__text {
  grid-column: span 7;
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  color: rgb(19 18 18 / 60%);
  overflow-wrap: break-word;
}

.frk-legal__text p + p {
  margin-top: var(--frk-space-sm);
}

/* Вводная строка перед списком («3.1. Оператор имеет право:») — отступ 8px, не 16 */
.frk-legal__text .frk-legal__lead + p {
  margin-top: var(--frk-space-xs);
}

.frk-legal__text a {
  color: inherit;
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-legal__text a:hover {
  color: var(--frk-color-text-accent);
}

/*
 * Ниже 1024 две колонки тесные: колонка заголовка уже 330px, а слово
 * «Конфиденциальность» на токенном кегле шире неё. Заголовок раздела встаёт
 * над текстом, кегль возвращается к токену, отступ справа больше не нужен.
 */
@media (max-width: 1023px) {
  /*
   * Заголовок несёт ещё и .frk-col-4 из layout.css. Селектор с родителем
   * перебивает его по специфичности, а не по порядку подключения файлов.
   */
  .frk-legal__section .frk-legal__heading,
  .frk-legal__section .frk-legal__text {
    grid-column: span 12;
  }

  .frk-legal__section .frk-legal__heading {
    padding-right: 0;
    font-size: var(--frk-size-display-lg);
  }
}

/* End */
/* /local/templates/frk/css/legal.css?17906925219283 */