/* ============================================================
   FULL-WIDTH OVERRIDE
   Контейнеры на всю ширину экрана с адаптивными отступами.
   Заголовки и текст статей — с разумным max-width для читаемости.
   Подключается ПОСЛЕДНИМ, поэтому переопределяет всё.
   ============================================================ */

/* ===== Контейнеры на всю ширину ===== */
.site-nav-inner,
.site-footer-inner,
.site-footer-bottom,
.calc-nav-inner,
.calc-hero,
.calc-shell,
.calc-footer-inner,
.calc-footer-bottom,
.blog-nav-inner,
.blog-hero,
.blog-shell,
.blog-footer-inner,
.blog-footer-bottom,
.home-hero,
.home-top,
.home-cats,
.home-blog,
.home-edu-inner,
.home-author,
.home-edu > *,
.calc-catalog,
.wrap {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== Внутренние отступы: адаптивные, чтоб на 4K не липло к краям ===== */
.calc-hero,
.calc-shell,
.blog-hero,
.blog-shell,
.home-hero,
.home-top,
.home-blog,
.home-author,
.calc-catalog {
  padding-left: clamp(20px, 4vw, 96px) !important;
  padding-right: clamp(20px, 4vw, 96px) !important;
}

.home-cats,
.home-edu-inner {
  padding-left: clamp(20px, 4vw, 96px) !important;
  padding-right: clamp(20px, 4vw, 96px) !important;
}

.site-nav-inner,
.calc-nav-inner,
.blog-nav-inner {
  padding-left: clamp(20px, 3vw, 56px) !important;
  padding-right: clamp(20px, 3vw, 56px) !important;
}

/* ===== Читаемая ширина для длинного текста статей ===== */
/* Оставляем читаемую колонку — но чуть шире, до 960px */
.post-content {
  max-width: 960px !important;
}

/* ===== «Читай в блоге по теме» — блок вне .calc-shell, нужен свой padding ===== */
.calc-others {
  padding-left: clamp(20px, 4vw, 96px) !important;
  padding-right: clamp(20px, 4vw, 96px) !important;
  padding-bottom: 40px !important;
}

/* ============================================================
   TELEGRAM MINI APP — оверрайды когда сайт открыт внутри TG.
   Активируется JS'ом: html.tg-webapp / body.tg-webapp
   У TG свой хедер и footer, поэтому свои прячем.
   ============================================================ */
html.tg-webapp body,
body.tg-webapp {
  padding-top: 0 !important;
  /* НЕ подтягиваем tg-bg/tg-text — держим фирменную кремовую тему сайта
     независимо от того, светлая или тёмная тема у юзера в Telegram */
  background: #FBF6EC !important;
  color: #1E1A18 !important;
}

/* Прячем нашу шапку и футер — их роль в TG выполняет само приложение */
html.tg-webapp .site-nav,
body.tg-webapp .site-nav,
html.tg-webapp header.site-nav,
html.tg-webapp .site-footer,
body.tg-webapp .site-footer,
html.tg-webapp .calc-nav,
body.tg-webapp .calc-nav,
html.tg-webapp .calc-footer,
body.tg-webapp .calc-footer,
html.tg-webapp .blog-nav,
body.tg-webapp .blog-nav,
html.tg-webapp .blog-footer,
body.tg-webapp .blog-footer,
html.tg-webapp header.nav,
body.tg-webapp header.nav {
  display: none !important;
}

/* Уменьшаем hero-padding сверху — TG уже даёт свой отступ статусбара */
html.tg-webapp .home-hero,
html.tg-webapp .calc-hero,
html.tg-webapp .blog-hero,
html.tg-webapp .hero {
  padding-top: 20px !important;
}

/* CTA-кнопка «Открыть каталог 37 калькуляторов» — растянуть на полную в TG */
html.tg-webapp .home-cta-primary,
html.tg-webapp .home-cta-outline,
html.tg-webapp .site-cta,
html.tg-webapp .cta {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}

/* ===== BOTTOM NAV: моб-версия сайта + TG mini-app ===== */
/* По умолчанию скрыто (десктоп) */
.tg-bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #FBF6EC;
  border-top: 1px solid #E4D9C5;
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  height: auto;
}
.tg-bottom-nav a {
  flex: 1 1 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  text-decoration: none;
  color: #494340;
  font-family: 'Manrope', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  transition: color .15s;
}
.tg-bottom-nav a .icon {
  font-size: 18px;
  line-height: 1;
}
.tg-bottom-nav a[aria-current="page"],
.tg-bottom-nav a.active {
  color: #4A1023;
}
.tg-bottom-nav a:active {
  transform: scale(.95);
}
/* Показываем на мобилках */
@media (max-width: 640px) {
  .tg-bottom-nav { display: flex; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* И всегда в TG mini-app */
html.tg-webapp .tg-bottom-nav {
  display: flex !important;
}
html.tg-webapp body {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Заголовки/подзаголовки — НЕ трогаем их max-width (иначе колбаса) */