/* ============================================================
   MegaNut — ARTICLE / Novost (DESIGN_SPEC §8). База 1920, ±2px.
   Компоненты (mn-crumbs, mn-ncard--related, mn-cta) — в components.css.
   Брейкпоинты: 1199 / 767.
   ============================================================ */

/* CTA статьи: распорка 130px до футера (DESIGN_SPEC §8.5). */
body[data-page="article"] .mn-cta {
  margin-bottom: 130px;
}

/* ── 8.1 Крошки + мета + заголовок ─────────────────────────── */
.mn-article__head {
  /* content-box: max-width 1100 + padding 40×2 = 1180 (макет rect x=370 w=1180). */
  box-sizing: content-box;
  max-width: var(--mn-container-article);
  margin: 0 auto;
  padding: 56px 40px 0;
}
.mn-article__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  font-size: var(--mn-eyebrow-12);
  letter-spacing: var(--mn-ls-eyebrow-16);
  text-transform: uppercase;
  /* макет: мета-строка без line-height → normal */
  line-height: normal;
  color: var(--mn-gold);
}
.mn-article__date {
  color: var(--mn-muted);
}
.mn-article__title {
  margin-top: 24px;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h1-article);
  line-height: var(--mn-h1-article-lh);
  letter-spacing: var(--mn-h1-article-ls);
}

/* ── 8.2 Hero-фото ─────────────────────────────────────────── */
.mn-article__hero {
  /* content-box: max-width 1100 + padding 40×2 = 1180 (макет rect x=370 w=1180). */
  box-sizing: content-box;
  max-width: var(--mn-container-article);
  margin: 0 auto;
  padding: 48px 40px 0;
}
.mn-article__hero-media {
  border-radius: var(--mn-r-26);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.mn-article__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 8.3 Тело статьи ───────────────────────────────────────── */
.mn-article__body {
  /* content-box: max-width 1100 + padding 40×2 = 1180 (макет rect x=370 w=1180). */
  box-sizing: content-box;
  max-width: var(--mn-container-article);
  margin: 0 auto;
  padding: 48px 40px 0;
}
.mn-article__body > * + * {
  margin-top: 22px;
}
/* первый абзац крупнее отбит (DESIGN_SPEC §8.3). */
.mn-article__body > .mn-article__p:first-of-type {
  margin-top: 38px;
}
.mn-article__quote {
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--mn-gold);
  font-size: var(--mn-t-body-21);
  line-height: 1.55;
  color: var(--mn-ink);
}
.mn-article__p,
.mn-article__html {
  font-size: var(--mn-t-body-article);
  line-height: 1.75;
  color: var(--mn-muted);
}
.mn-article__figure-img {
  width: 100%;
  border-radius: var(--mn-r-26);
  display: block;
}

/* ── 8.4 Другие новости ────────────────────────────────────── */
.mn-related-news {
  /* content-box: max-width 1580 + padding 68×2 = 1716 (макет rect x=102 w=1716). */
  box-sizing: content-box;
  max-width: var(--mn-container);
  margin: 0 auto;
  padding: 110px var(--mn-pad-side-fixed) 80px;
}
.mn-related-news__heading {
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-related);
  /* макет: заголовок без line-height → normal (body:1.6 давал +14.8px высоты секции) */
  line-height: normal;
  letter-spacing: var(--mn-h2-related-ls);
}
.mn-related-news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 36px;
}

/* ==========================================================================
   ≤1199px — «Другие новости» 3→2 кол.
   ========================================================================== */
@media (max-width: 1199px) {
  .mn-related-news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mn-related-news {
    padding-top: clamp(64px, 9vh, 110px);
  }
}

/* ==========================================================================
   ≤767px — узкие отступы; «Другие новости» 2 кол.
   ========================================================================== */
@media (max-width: 767px) {
  .mn-article__head,
  .mn-article__hero,
  .mn-article__body {
    padding-left: var(--mn-pad-side);
    padding-right: var(--mn-pad-side);
  }
  .mn-related-news {
    padding-left: var(--mn-pad-side);
    padding-right: var(--mn-pad-side);
  }
  /* P3-5: 3 карточки «Другие новости» → 1 колонка (а не 2+1).
     P1-2: полноширинная карточка 4/5 достаточно высокая, поэтому overlay-тело
     (.mn-ncard__body, bottom:26px) больше не выходит за верх карточки и не режется. */
  .mn-related-news__grid {
    grid-template-columns: 1fr;
  }
  body[data-page="article"] .mn-cta {
    margin-bottom: 80px;
  }
}