/* =============================================================
   css/site.css — spsa.sk

   Вне бандла assets/opt/app.css, подключается вместе с rating.css.
   Задача одна: на мобильной первая карточка рейтинга должна помещаться
   целиком, а вторая — начинаться в пределах экрана (ТЗ §6.2).

   Замер 375x812 до правки: шапка position:fixed забирает 93px (их не
   трогаем), h1 в 36px занимал 90px, лид в девять строк — 204px, h2 над
   таблицей — 120px. До карточки набегало 539px из 812, карточка высотой
   388px в экран не влезала.

   Срезаем ~230px, не трогая шапку и не удаляя текст: кегли заголовков
   приводим к мобильным, лид показываем четырьмя строками (в разметке и
   в индексе он остаётся целиком).
   ============================================================= */

@media (max-width:767.98px){

  /* первый экран: заголовок */
  /* 8px сверху — чтобы заголовок не лежал впритык к фиксированной шапке */
  body .position-relative.z-1 h1{
    font-size:24px !important;
    line-height:1.18 !important;
    margin-top:8px !important;
    margin-bottom:6px !important;
  }

  /* лид: текст остаётся в разметке, в вид отдаём четыре строки */
  body .position-relative.z-1 p{
    font-size:15px !important;
    line-height:1.4 !important;
    margin-bottom:10px !important;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* заголовок над рейтингом */
  body h2.mb-2.text-center{
    font-size:20px !important;
    line-height:1.2 !important;
    margin-bottom:8px !important;
  }

  /* секция с рейтингом начинается сразу под лидом */
  body section.features-section{padding-top:0 !important}
}

/* ---------- десктоп ----------
   Тут первая карточка и так в фолде (замер 1366x768: 318→557,
   вторая начинается на 571). Ровняем только воздух вокруг h2. */
@media (min-width:768px){
  body h2.mb-2.text-center{margin-bottom:14px !important}
}