/* ============================================
   MOBILE & TABLET FIXES — Глобальні виправлення
   Підключається ПІСЛЯ всіх інших CSS і ПЕРЕОВЕРАЙДУЄ їх
   ============================================ */

/* === Базове === */
html, body { overflow-x: hidden !important; max-width: 100vw; }
img, svg, video, iframe { max-width: 100% !important; height: auto; }

/* === КРИТИЧНО: ніяких автоматичних переносів для української === */
/* main-shared.css має правило h1{hyphens:auto} — ми його скасовуємо */
h1, h2, h3, h4, h5, h6,
.s-title, .hero h1, .page-hero h1, .vf-hero h1, .svc-hero h1,
.hero-sub, .page-hero p, p, li, td, th, span, a, label {
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  word-break: normal !important;
}

/* Аварійний перенос лише для критично довгих слів (URL, email) */
p, li, td, th {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ============================================
   ПЛАНШЕТ (≤900px)
   ============================================ */
@media (max-width: 900px) {
  h1, .hero h1, .page-hero h1 { font-size: clamp(1.5rem, 4.5vw, 2.25rem) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(1.3rem, 3.8vw, 1.875rem) !important; }
  h3 { font-size: clamp(1.1rem, 3vw, 1.5rem) !important; }
  section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* ============================================
   МОБІЛЬНИЙ (≤640px) — головні виправлення
   ============================================ */
@media (max-width: 640px) {

  /* === ЗАГОЛОВКИ — менші і без переносів === */
  h1, .hero h1, .page-hero h1, .vf-hero h1, .svc-hero h1, .s-title {
    font-size: clamp(1.375rem, 5.5vw, 1.875rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    word-break: normal !important;
  }
  h2 { font-size: clamp(1.2rem, 4.8vw, 1.625rem) !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(1.05rem, 4vw, 1.375rem) !important; line-height: 1.3 !important; }
  h4 { font-size: 1rem !important; }

  /* === Параграфи і списки === */
  p, li { font-size: 0.92rem !important; line-height: 1.6 !important; }
  .hero-sub, .page-hero p { font-size: 0.92rem !important; line-height: 1.6 !important; }

  /* === Контейнери === */
  .container, .wrap {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  /* === Hero — менші відступи === */
  .hero, .page-hero, [class*="-hero"] {
    padding-top: calc(var(--hh, 68px) + 1.5rem) !important;
    padding-bottom: 2.25rem !important;
  }

  /* === Сітки → 1 колонка === */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 0.875rem !important;
  }

  /* === Кнопки повна ширина в CTA === */
  .hero-btns, .vf-cta-row, .cta-row, .btn-row, .vf-ctabtns {
    flex-direction: column !important;
    gap: 0.625rem !important;
    width: 100% !important;
  }
  .hero-btns .btn, .vf-cta-row .btn, .cta-row .btn, .btn-row .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* === Inputs 16px (iOS не зумить) === */
  input, textarea, select {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* === Footer колонки === */
  .fs-footer-grid, .ft-cols {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* === Таблиці === */
  table { font-size: 0.85rem; }
  td, th { padding: 0.5rem 0.625rem !important; }
}

/* ============================================
   МАЛЕНЬКИЙ (≤400px)
   ============================================ */
@media (max-width: 400px) {
  h1, .hero h1, .page-hero h1 { font-size: 1.375rem !important; }
  h2 { font-size: 1.2rem !important; }
  p, li { font-size: 0.88rem !important; }
  .container, .wrap { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}

/* ============================================
   ВИПРАВЛЕННЯ: Картки з inline grid не повинні
   стискати текст до букви на букву на мобільному
   ============================================ */
@media (max-width: 640px) {
  /* Будь-який grid з auto-fit minmax → 1 колонка на мобільному */
  [style*="grid-template-columns:repeat(auto-fit"],
  [style*="grid-template-columns: repeat(auto-fit"],
  [style*="auto-fit,minmax"],
  [style*="auto-fit, minmax"] {
    grid-template-columns: 1fr !important;
  }

  /* Картки прайс-листа — нормальний перенос слів, не букв */
  .price-card, .feature-card, .card, .svc-card-v2, .review-card-v2,
  [style*="background:#fff"][style*="border-radius"] {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
  }
  .price-card *, .feature-card *, .card *, .svc-card-v2 *,
  [style*="background:#fff"][style*="border-radius"] * {
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}