/* ==========================================================================
   mentions.css — страница «Политика упоминаний» (раздел «Медиа»).
   Макет: Figma 2308:191531 (файл QEYhPaT99ySWhvx37zZQBM, «ФОК 10.07.26 Copy»).
   Каркас переиспользуется: крошки/hero — arrival.css (+ arr-hero--light из
   visa.css), карточки — visa.css (.visa-case), таб-меню — page-tabs.css.
   Полоса табов и баннер — во всю ширину окна (Figma: article и arr-hero
   x=0 w=1920, контент ниже — x=40 w=1840), как на «Архитектуре программы».
   Скоуп .mnt на <main>. Адаптив: @1919 → @1023 → @767.
   ========================================================================== */

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

/* ---------- Hero (Figma 2308:191546): запечённый коллаж, тёмный заголовок.
   Заголовок 56/64 (не 84/90 как у прочих hero), метка →30→ заголовок,
   инна x=88, низ 76; ширина 560 — под две строки (Figma Frame 75: 542). */
.mnt .arr-hero__img { object-position: right center; }

@media (min-width: 1024px) {
  .mnt .arr-hero__inner {
    left: 88px;
    bottom: 76px;
    max-width: 560px;
  }
  .mnt .arr-hero__title {
    /* визуальный зазор метка→заголовок 30 (инлайн-svg метки добавляет ~6 под базовой линией) */
    margin-top: 24px;
    font-size: 56px;
    line-height: 64px;
  }
}

/* ---------- Лид (Figma 2308:191573): 80 от hero, 18/1.6, абзацы через 8 ---------- */
.mnt-lead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: clamp(56px, 4.167vw, 80px);
  max-width: 1310px;
}
.mnt-lead p {
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}

/* ---------- Карточки форматов (Figma 2308:191576): сетка 2×2, зазор 16.
   Сама карточка — .visa-case из visa.css (фон/рамка/радиус/заголовок). */
.mnt-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.mnt-cases .visa-case p {
  margin-top: 24px;
  font: 400 18px/1.6 var(--font-text);
  color: var(--c-text);
  text-wrap: pretty;
}
/* Монитор 1920 = вьюпорт ~1905 и падает в тир @1919 visa.css (40/44 + 24/30) —
   держим макетные 48/56 и 32/40 на 1920 с плавным съездом к киту 1440 (clamp).
   Ниже 1024 отдаём карточку целиком тирам visa.css. */
@media (min-width: 1024px) {
  .mnt-cases .visa-case {
    padding: clamp(40px, 2.5vw, 48px) clamp(44px, 2.917vw, 56px);
  }
  .mnt-cases .visa-case__title {
    font-size: clamp(24px, 1.667vw, 32px);
    line-height: clamp(30px, 2.083vw, 40px);
  }
}

/* ---------- «Ответственность» (Figma 2308:191599): тёмная полоса с запечённым
   коллажем (40% затемнение и шторка вварены в webp), заголовок слева,
   нота с рамкой — справа (843). ---------- */
.mnt-duty {
  display: flex;
  flex-wrap: wrap; /* 1024–1359: нота (843) не влезает к заголовку — переносится вниз */
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 48px;
  margin-top: 24px;
  padding: clamp(44px, 3.333vw, 64px);
  border-radius: var(--r-24);
  background: url(../../img/media/duty-bg.webp) center / cover no-repeat var(--c-dark);
}
.mnt-duty__title {
  font: 400 40px/48px var(--font-display);
  font-size: clamp(32px, 2.083vw, 40px);
  line-height: clamp(40px, 2.5vw, 48px);
  text-transform: uppercase;
  color: #fff;
}
.mnt-duty__note {
  flex: none;
  width: 843px;
  max-width: 100%;
  display: flex;
  gap: 8px;
  padding: 32px 24px;
  border: 1px solid var(--c-dark-soft);
  border-radius: var(--r-16);
}
.mnt-duty__icon {
  flex: none;
  margin-top: 2px;
  color: var(--c-accent);
}
.mnt-duty__note p {
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-bg);
  text-wrap: pretty;
}

/* ==========================================================================
   ≤1440: только отступы; шрифты не занижаем (18 = лид 1440-кита,
   карточка сама пересчитывается в visa.css).
   ========================================================================== */
@media (max-width: 1919px) {
  .mnt-cases .visa-case p { margin-top: 20px; }
  .mnt-duty__note { padding: 24px 20px; }
}

/* ==========================================================================
   ≤1024 — планшет: карточки в столбец, «Ответственность» стопкой.
   ========================================================================== */
@media (max-width: 1023px) {
  /* cover начинает кропать (фикс-высоты hero): держим плоский левый край
     коллажа под заголовком, арт остаётся справа */
  .mnt .arr-hero__img { object-position: left center; }

  .mnt-lead { margin-top: 48px; }
  .mnt-cases { grid-template-columns: 1fr; gap: 20px; }

  .mnt-duty {
    flex-direction: column;
    gap: 24px;
    padding: 32px;
  }
  .mnt-duty__title { font-size: 28px; line-height: 34px; }
  .mnt-duty__note { width: auto; }
}

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

  .mnt-lead { margin-top: 40px; }
  .mnt-lead p { font-size: 14px; line-height: 20px; }
  .mnt-cases { gap: 12px; }
  .mnt-cases .visa-case p { margin-top: 16px; font-size: 14px; line-height: 20px; }

  .mnt-duty {
    gap: 20px;
    margin-top: 16px;
    padding: 24px 20px;
    border-radius: var(--r-16);
  }
  .mnt-duty__title { font-size: 22px; line-height: 28px; }
  .mnt-duty__note { padding: 16px 18px; gap: 12px; }
  .mnt-duty__note p { font-size: 14px; line-height: 20px; }
}