/* KARETA Typography + Mobile Density Overlay v1.0.1
   Purpose:
   - Fix oversized fonts on phones (stable baselines, no vw inflation on mobile)
   - Reduce "bloated" mobile layout via safe spacing tweaks
   - Prevent browser auto text inflation (iOS/Safari)
   - Add line-clamp for card titles on small screens
   - Add 2K/4K scaling so desktop ultra-wide doesn't look tiny

   Usage: include this file AFTER your main global CSS (or place it "on top").
   Scope: typography + very safe spacing/touch targets only.
*/

/* -----------------------------
   0) Prevent browser text inflation
   ----------------------------- */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* -----------------------------
   1) Base: stable mobile-first
   ----------------------------- */
:root{
  /* Default (phones) */
  --fs-base: 14px;      /* body/base text */
  --lh-base: 1.45;

  --fs-h1: 20px;
  --fs-h2: 17px;
  --fs-h3: 15px;

  --fs-small: 12px;
  --fs-ui: 12px;        /* chips/badges/buttons */
  --fs-ui-strong: 13px; /* slightly bigger UI text */
}

/* Use a stable baseline on mobile */
html{ font-size: var(--fs-base); }
body{ font-size: var(--fs-base); line-height: var(--lh-base); }

/* Headlines used across the project */
.h1, h1{ font-size: var(--fs-h1) !important; line-height: 1.15 !important; letter-spacing: -0.01em; }
.h2, h2{ font-size: var(--fs-h2) !important; line-height: 1.20 !important; }
.h3, h3{ font-size: var(--fs-h3) !important; line-height: 1.25 !important; }

/* Common text helpers */
.p, p{ line-height: var(--lh-base); }
.small, .sub, .news-card p, .featured-item p, .cat-sub{ font-size: var(--fs-small) !important; }

/* UI text */
.btn, .chip, .badge, .kbd, .meta-chip, .mm-chip{ font-size: var(--fs-ui) !important; line-height: 1.1; }
.btn-sm{ font-size: var(--fs-ui) !important; }
.nav a, .nav-tree .dt-link, .nav-tree .dt-group{ font-size: var(--fs-ui-strong) !important; }

/* Topbar brand */
.brand-title strong{ font-size: 14px !important; line-height: 1.15 !important; }
.brand-title span{ font-size: 12px !important; line-height: 1.15 !important; }

/* Cards and tiles */
.tile h3{ font-size: 15px !important; line-height: 1.2 !important; }
.tile p{ font-size: 13px !important; line-height: 1.45 !important; }

/* News cards */
.news-card h3{ font-size: 15px !important; line-height: 1.2 !important; }
.news-card p{ font-size: 13px !important; line-height: 1.35 !important; }

/* Featured list */
.featured-item h4{ font-size: 14px !important; line-height: 1.2 !important; }
.featured-item p{ font-size: 12.5px !important; line-height: 1.35 !important; }

/* Modal content */
.modal-title strong{ font-size: 14px !important; }
.modal-title span{ font-size: 12px !important; }
.modal-body{ font-size: 14px !important; line-height: 1.5 !important; }
.modal-block h4{ font-size: 14px !important; }
.modal-block p, .modal-block ul{ font-size: 13.5px !important; line-height: 1.55 !important; }

/* Bottom tabbar (mobile) */
.mb-tab{ font-size: 11px !important; line-height: 1 !important; }
.mb-tab i{ font-size: 16px !important; }


/* -------------------------------------------
   2) Small phones (<= 360px wide)
   - tighter typography and UI to avoid overflow
   ------------------------------------------- */
@media (max-width: 360px){
  :root{
    --fs-base: 13px;
    --fs-h1: 19px;
    --fs-h2: 16px;
    --fs-h3: 14px;

    --fs-small: 11.5px;
    --fs-ui: 11.5px;
    --fs-ui-strong: 12px;
  }

  .nav a, .nav-tree .dt-link, .nav-tree .dt-group{ padding: 9px 10px !important; }
  .btn{ padding: 9px 10px !important; }
  .btn-sm{ padding: 7px 9px !important; }
}

/* ------------------------------------------------
   3) Regular phones (361px..520px)
   - default values are tuned for this
   ------------------------------------------------ */
@media (min-width: 361px) and (max-width: 520px){
  .brand-title strong{ font-size: 14px !important; }
}

/* -------------------------------------------
   4) Large phones / small tablets (521..699px)
   - gentle bump without vw-based inflation
   ------------------------------------------- */
@media (min-width: 521px) and (max-width: 699px){
  :root{
    --fs-base: 14.5px;
    --fs-h1: 22px;
    --fs-h2: 18px;
    --fs-h3: 16px;

    --fs-small: 12.5px;
    --fs-ui: 12.5px;
    --fs-ui-strong: 13px;
  }
}

/* -------------------------------------------
   5) Tablets (700..1023px)
   - controlled scaling with clamp (safe here)
   ------------------------------------------- */
@media (min-width: 700px) and (max-width: 1023px){
  :root{
    --fs-base: 15px;
    --lh-base: 1.55;

    --fs-h1: clamp(24px, 2.6vw, 28px);
    --fs-h2: clamp(19px, 2.0vw, 22px);
    --fs-h3: 17px;

    --fs-small: 13px;
    --fs-ui: 13px;
    --fs-ui-strong: 14px;
  }

  .mb-tab{ font-size: 12px !important; }
  .mb-tab i{ font-size: 18px !important; }
}

/* -------------------------------------------
   6) Desktop (>= 1024px)
   - comfortable reading, strong headers
   ------------------------------------------- */
@media (min-width: 1024px){
  :root{
    --fs-base: 16px;
    --lh-base: 1.6;

    --fs-h1: clamp(28px, 2.6vw, 34px);
    --fs-h2: clamp(20px, 1.8vw, 24px);
    --fs-h3: 18px;

    --fs-small: 13px;
    --fs-ui: 13px;
    --fs-ui-strong: 14px;
  }

  .brand-title strong{ font-size: 18px !important; }
  .brand-title span{ font-size: 14px !important; }
}

/* -------------------------------------------
   7) Mobile density refinements (<= 520px)
   - reduce "bloat" without changing layout structure
   ------------------------------------------- */
@media (max-width: 520px){
  body{ line-height: 1.42 !important; }

  /* Safer spacing compression */
  .card-pad{ padding: 12px !important; }
  .tile{ padding: 12px !important; min-height: 108px !important; }
  .section{ padding: 12px 0 !important; }
  .section + .section{ margin-top: 10px !important; }
  .hr{ margin: 12px 0 !important; }

  /* Touch targets: keep click areas comfy WITHOUT inflating text */
  .btn, .nav a{ min-height: 42px !important; }
  .chip, .badge, .meta-chip, .mm-chip{ min-height: 32px !important; }

  /* Prevent huge multi-line titles from expanding cards */
  .news-card h3,
  .tile h3,
  .cat-title{
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow:hidden;
  }
}

/* -------------------------------------------
   8) 2K / 4K scaling (ultra-wide comfort)
   - fixes "everything too small" on high-res desktops
   ------------------------------------------- */
@media (min-width: 1600px){
  html{ font-size: 17px; }
}
@media (min-width: 2200px){
  html{ font-size: 18px; }
}
















/* Контейнер-кнопка: ширину задаёшь ты в базовых стилях.
   Здесь НЕ трогаем размеры и НЕ ломаем display (в проекте dt-link уже flex).
*/
.dt-link{
  position: relative;
  overflow: hidden;          /* прячем выходящий текст */
  white-space: nowrap;       /* не переносить строки */
}

/* Текст как “лента” */
.dt-link .m-label{
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

/* Визуально чуть мягче края (по желанию) */
.dt-link{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Анимация туда-обратно: двигаем на величину переполнения */
@keyframes marquee-pingpong{
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--marquee-shift, 0px)); }
}

/* Включаем анимацию только если есть переполнение (см. блок ниже) */
.dt-link.is-marquee .m-label{
  animation: marquee-pingpong var(--marquee-speed, 4.8s) ease-in-out infinite alternate;
}

/* ================================
   УСЛОВИЕ “если текст короткий — стоим”
   Вариант 1 (современный): CSS-only через :has()
   ================================ */

/* Скрытый измеритель ширины текста внутри кнопки */
.dt-link .m-label::after{
  content: "";
}

/* Если браузер поддерживает :has(), включаем marquee только когда текст НЕ помещается */
@supports selector(:has(*)){
  /* делаем клон-измеритель: ширина max-content => реальная ширина текста */
  .dt-link{
    --marquee-speed: 4.8s; /* можешь менять */
  }

  .dt-link .m-label{
    /* подстраховка: чтобы всегда мерилось “в одну строку” */
    white-space: nowrap;
  }

  /* Ключевой трюк:
     создаём внутренний “измеритель” через псевдоэлемент и сравниваем: если есть overflow -> включаем */
  .dt-link:has(.m-label){
    /* ничего */
  }

  /* В CSS мы не можем вычислить разницу ширин напрямую.
     Поэтому: включаем класс .is-marquee (см. ниже fallback) — или используем JS на 6 строк.
     Но ты просил “CSS силами” — ниже даю чистый CSS-путь через scroll-snap не годится.
     Реально без JS вычислить shift нельзя. Поэтому:
     - CSS отвечает за анимацию туда-обратно
     - очень маленький JS (опционально) включает/выключает + считает shift
  */
}

/* Fallback: если не ставить .is-marquee — текст просто стоит (как ты и хочешь) */