/*
 * patprofi.ua — компактна мобільна версія (10.09.2026, SmartGT).
 *
 * Друга частина мобільних правил, поверх mobile-fix.css. Та вирівнювала
 * поламане; ця робить інтерфейс придатним до читання на телефоні: тема
 * розрахована на робочий стіл, і на 390 px усе стає удвічі більшим за
 * потрібне — кожен лічильник займав пів екрана, картка кейса — цілий.
 *
 * Принцип: ті самі компоненти, менший масштаб і щільніший ритм. Жодної зміни
 * розмітки — лише CSS, і лише до 767.98 px (планшети не чіпаємо).
 */

@media (max-width: 767.98px) {

  /* ── базовий масштаб ─────────────────────────────────────── */
  html body {
    font-size: 14px;
  }
  html body .page-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 96px !important;
  }
  html body .page-content > .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
  html body .mtBase { margin-top: 12px !important; }
  html body .mbBase { margin-bottom: 12px !important; }
  html body .card { margin-bottom: 12px; border-radius: 6px; }
  html body .card-body { padding: 14px; }
  html body h4.card-title { font-size: 16px; line-height: 1.3; margin-bottom: 6px; }
  html body .card-title-desc, html body .card-text { font-size: 13px; line-height: 1.45; }
  html body .btn-lg, html body .btn.btn-lg { padding: 8px 18px; font-size: 14px; }
  html body .btn { border-radius: 6px; }

  /* ── смуга заголовка сторінки ────────────────────────────── */
  html body .page-title-content .page-title-box { padding: 10px 0; }
  html body .page-title-content .page-title-box h4 { font-size: 18px; margin: 0 0 2px; }
  html body .page-title-content .page-title-box p,
  html body .page-title-content .page-title-box .breadcrumb { font-size: 12px; margin: 0; }

  /* ── лічильники: двоє в ряд замість стовпчика на чотири екрани ── */
  /* Колонки лічильників — col-md-6.col-xl-3; у блогу є ще col-lg-6, тому виключаємо його. */
  html body .row > .col-md-6.col-xl-3:not(.col-lg-6) {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 5px;
    padding-right: 5px;
  }
  html body .mini-stat.card { margin-bottom: 10px; min-height: 0; }
  html body .mini-stat .mini-stat-img.card-body { padding: 12px 12px 10px; }
  html body .mini-stat .mini-stat-icon i { font-size: 20px; width: 40px; height: 40px; line-height: 40px; }
  html body .mini-stat h6.font-size-16 { font-size: 11px !important; letter-spacing: .04em; margin-bottom: 4px !important; }
  html body .mini-stat h2.mb-4 { font-size: 24px; margin-bottom: 0 !important; line-height: 1.1; }

  /* ── повзунок «Інфо панель» ──────────────────────────────── */
  html body .lineToggle { margin-top: 4px; }
  html body .lineToggle .btnToggle { padding: 6px 14px; font-size: 13px; margin-top: -16px; }

  /* ── картки кейсів і питань ──────────────────────────────── */
  html body .card-body > .row > .col-lg-9 { padding-right: 12px; }
  html body .card-body > .row > .col-lg-3 { padding-top: 6px; }
  /* Лічильники відповідей і коментарів — одним рядком, а не стовпчиком. */
  html body .caseBox_reating {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    padding: 6px 0 0;
    border-top: 1px solid rgba(0,0,0,.06);
  }
  html body .caseBox_reating > div { font-size: 15px; line-height: 1.2; }
  html body .caseBox_reating > .caseBox_reating_small { font-size: 12px; margin-right: 10px; }
  /* У h2 живе значок типу («кейс») — лишаємо, але дрібно й першим рядком. */
  html body .caseBox_reating > h2 { order: -1; width: 100%; margin: 0 0 4px; font-size: 12px; line-height: 1; }
  html body .caseBox_reating > h2 .badge { font-size: 11px; padding: 4px 8px; }
  html body .userAvatar_line { margin-top: 8px; font-size: 12px; }
  html body .userAvatar_line img { width: 24px; height: 24px; }
  html body .card-body .btn-group .button-items .btn,
  html body .card-body .btn-group .badge { padding: 3px 10px; font-size: 12px; }
  html body .card-body .btn-group { margin: 6px 0 0; }

  /* ── картки блогу ────────────────────────────────────────── */
  html body .commandMarker { font-size: 11px; padding: 4px 10px; }
  html body .card-img-top { max-height: 160px; object-fit: cover; }
  html body .card .card-body .btn.btn-primary { padding: 6px 14px; font-size: 13px; }

  /* ── кнопки «Більше» і перемикачі ────────────────────────── */
  html body .col-lg-12 > a.mtBase > .btn-lg { padding: 8px 22px; margin-top: 0; }
  html body .button-items .btn { margin-bottom: 6px; }

  /* ── партнери й опис ─────────────────────────────────────── */
  html body h2.partnerTitle { font-size: 22px; margin: 8px 0 12px; }
  html body .partnerListBox { gap: 10px 18px; }
  html body .partnerListBox .partnerList { max-width: 36%; }
  html body .page-content .card-body td p,
  html body .page-content .card-body td li { font-size: 14px; line-height: 1.5; }

  /* ── підвал ──────────────────────────────────────────────── */
  html body footer.footer .textFooter { font-size: 12px; line-height: 1.45; }
  html body footer.footer .col-sm-3 { margin-bottom: 10px; }

  /* ── шліфування після заміру (10.09, вечір) ──────────────── */
  /* Значок «кейс»: тема ставить .badge-light 15px/10px через !important —
     перебиваємо вищою специфічністю. */
  html body .caseBox_reating .badge-light { font-size: 11px !important; padding: 4px 8px !important; }
  /* Опис у картці мав 24px знизу, а порожній btn-group усе одно тримав рядок. */
  html body .card-body .card-title-desc { margin-bottom: 8px; }
  html body .card-body .btn-group.btn-group-toggle { display: block; margin: 0; font-size: 0; line-height: 0; }
  html body .card-body .btn-group.btn-group-toggle .btn { font-size: 12px; line-height: 1.3; margin: 4px 4px 0 0; }
  /* Смуга заголовка: 98px → ~74px. */
  html body .page-title-content { padding: 12px 0; }
  html body .page-title-content .page-title-box { padding: 0; }
}