/* ==========================================================================
   media-rules.css — страница «Правила аккредитации СМИ» (раздел «Медиа»).
   Макет: Figma 2472:66156 (файл czVrMu5TZMTjWkq0ZBhTe9, «ФОК 30.07.26 Copy»),
   только 1920 — адаптив авторский, по паттернам «Политики упоминаний».
   Каркас переиспользуется: крошки/hero — arrival.css (+ arr-hero--light из
   visa.css), карточки-шаги — visa.css (.visa-steps/.visa-step/.visa-bullets),
   таб-меню — page-tabs.css. Полоса табов и баннер — во всю ширину окна
   (в макете article и arr-hero x=0 w=1920, контент ниже — x=40 w=1840).
   Скоуп .mrl на <main>. Адаптив: @1919 → @1023 → @767.
   ========================================================================== */

/* ---------- Full-bleed: гасим гаттер контейнера у табов и баннера ---------- */
.mrl .ptabs--flow,
.mrl .arr-hero {
  margin-inline: calc(var(--gutter) * -1);
}

/* ---------- Hero (Figma 2472:66171): запечённый коллаж, тёмный заголовок.
   Заголовок 64/72 (не 84/90 как у прочих hero), метка →30→ заголовок,
   инна x=88, низ 60, ширина блока 755 (заголовок в две строки). ---------- */
/* Кроп cover живёт на 1024–1486 (min-высота 480 у arr-hero) и на планшете:
   держим окно у левого края — коллаж уезжает правее заголовка и не лезет
   под текст (на ≥1486 масштаб задаёт ширина, кроп не работает). */
.mrl .arr-hero__img { object-position: left center; }

@media (min-width: 1024px) {
  .mrl .arr-hero__inner {
    left: 88px;
    bottom: 60px;
    max-width: 755px;
  }
  .mrl .arr-hero__title {
    /* визуальный зазор метка→заголовок 30 (инлайн-svg метки добавляет ~6 под базовой линией) */
    margin-top: 24px;
    /* 64/72 — это уже значение кита на 1440, вниз не занижаем (ниже 1024
       кегль отдаём ступеням arrival.css: 40/46 → 28/32) */
    font-size: 64px;
    line-height: 72px;
  }
}

/* ==========================================================================
   Шаги-разделы правил (Figma 2472:66197 — ol.visa-steps).
   Геометрия карточки из visa.css; здесь — макетные значения этой страницы
   (padding 41/37, gap 24, тело 1400) + плавный съезд к киту 1440 через clamp.
   ========================================================================== */
.mrl-steps {
  margin-top: clamp(56px, 4.167vw, 80px);
  margin-bottom: clamp(80px, 6.25vw, 120px);
}

@media (min-width: 1024px) {
  .mrl .visa-step {
    gap: 24px;
    padding: clamp(28px, 1.927vw, 37px) clamp(32px, 2.135vw, 41px);
  }
  .mrl .visa-step__num {
    width: clamp(40px, 2.292vw, 44px);
    height: clamp(40px, 2.292vw, 44px);
    font-size: clamp(18px, 1.042vw, 20px);
  }
  .mrl .visa-step__title {
    font-size: clamp(24px, 1.667vw, 32px);
    line-height: clamp(30px, 2.083vw, 40px);
  }
}

/* Тело карточки: колонка с шагом 16, ширина по макету 1400 */
.mrl .visa-step__body {
  width: 100%;
  max-width: 1400px;
  gap: 16px;
}

/* Одиночный абзац в теле шага (Figma 2472:66359) */
.mrl .visa-step__body > p {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}

/* ---------- Пункт с номером «1.1» (Figma 2472:66204) ---------- */
.mrl-clause {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.mrl-clause__num {
  flex: none;
  width: 30px;
  font: 700 18px/1.7 var(--font-display);
  text-transform: uppercase;
  color: var(--c-accent);
}
.mrl-clause__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px; /* несколько абзацев внутри одного пункта (Figma 2472:66222) */
}
.mrl-clause__body p {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}

/* ---------- Маркированные списки под пунктом (Figma 2472:66242) ----------
   Точка-маркер и отступы — из visa.css; здесь свои кегль (18/1.6), шаг 10
   и левый отступ списка 44 (li.x=44 внутри тела шага). */
.mrl .visa-bullets {
  gap: 10px;
  padding-left: 44px;
}
.mrl .visa-bullets li {
  font: 400 18px/1.6 var(--font-text);
}
.mrl .visa-bullets li::before {
  top: calc((1.6em - 8px) / 2);
}

/* Вложенный список тире (Figma 2472:66270: полоска 16×2, зазор 8) */
.mrl-dashes {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mrl-dashes li {
  position: relative;
  padding-left: 24px;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}
.mrl-dashes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1.6em - 2px) / 2);
  width: 16px;
  height: 2px;
  background: var(--c-accent);
}

/* ==========================================================================
   ≤1919 — кегль тел не занижаем (18 = лид 1440-кита), геометрия на clamp выше.
   ========================================================================== */

/* ==========================================================================
   ≤1023 — планшет: список поджимаем к левому краю тела.
   ========================================================================== */
@media (max-width: 1023px) {
  /* заголовок в три строки — узкий блок не достаёт до коллажа */
  .mrl .arr-hero__title { max-width: 320px; }

  .mrl .visa-bullets { padding-left: 24px; }
}

/* ==========================================================================
   ≤767 — мобилка: full-bleed выключаем, кегли по паттерну «Политики
   упоминаний» (14/1.6), карточка-шаг — колонкой (visa.css @767).
   ========================================================================== */
@media (max-width: 767px) {
  .mrl .ptabs--flow,
  .mrl .arr-hero { margin-inline: 0; }

  /* окно кропа: заголовок ложится на спокойный фон, коллаж выглядывает справа */
  .mrl .arr-hero__img { object-position: 45% center; }
  .mrl .arr-hero__title { max-width: none; }

  .mrl .visa-step { padding: 22px 20px; }
  .mrl .visa-step__body { gap: 14px; }
  .mrl .visa-step__body > p { font-size: 14px; }

  .mrl-clause { gap: 10px; }
  .mrl-clause__num { width: 26px; font-size: 16px; }
  .mrl-clause__body p { font-size: 14px; }

  .mrl .visa-bullets { padding-left: 0; }
  .mrl .visa-bullets li { font-size: 14px; }

  .mrl-dashes li { font-size: 14px; padding-left: 22px; }
  .mrl-dashes li::before { width: 14px; }
}