/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {

  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* ---- NAV ---- */
  nav {
    padding: 12px 16px !important;
  }
  nav > div > a:not(:last-child) {
    display: none !important;
  }

  /* ---- HERO — single column, device image as background ---- */
  header#hero {
    grid-template-columns: 1fr !important;
    padding: 100px 20px 60px !important;
    min-height: 100svh !important;
    position: relative !important;
  }

  /* Hide the right column (device image block) */
  header#hero > div:last-child,
  .hero-device-col {
    display: none !important;
  }

  /* Device image as hero background */
  header#hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: url('/uploads/taharat-device.png') no-repeat center right !important;
    background-size: 70% auto !important;
    opacity: 0.18 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  header#hero > div:first-child {
    position: relative !important;
    z-index: 1 !important;
  }

  /* ---- HERO TITLE ---- */
  h1 {
    font-size: clamp(40px, 11vw, 64px) !important;
    line-height: 0.92 !important;
  }

  /* ---- ALL SECTIONS ---- */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden !important;
  }

  /* ---- ALL HEADINGS ---- */
  h2 {
    font-size: clamp(22px, 5.5vw, 34px) !important;
    line-height: 1.15 !important;
  }

  /* ---- SPECIFIC headings that need 2 lines ---- */
  /* "8 из 10 мусульман..." */
  #problem h2,
  section[style*="text-align:center"] h2 {
    font-size: clamp(20px, 5vw, 30px) !important;
  }

  /* ---- STATS GRID — single column ---- */
  div[style*="display:grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* ---- FLEX ROWS — stack vertically ---- */
  div[style*="gap:40px"],
  div[style*="gap:48px"],
  div[style*="gap:56px"],
  div[style*="gap:60px"],
  div[style*="gap:80px"] {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* ---- STAT CARDS — full width ---- */
  div[style*="border-radius:24px"],
  div[style*="border-radius:20px"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---- TICKER — свайп пальцем на мобиле ---- */
  /* Останавливаем автоанимацию */
  div[style*="animation:ticker-ltr"],
  div[style*="animation:ticker-rtl"] {
    animation: none !important;
    transform: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 8px !important;
    width: 100% !important;
  }

  /* Враппер тикера — скролл вместо overflow:hidden */
  div[style*="animation:ticker-ltr"] > *,
  div[style*="animation:ticker-rtl"] > * {
    scroll-snap-align: start !important;
  }

  /* Скрываем дублированные карточки (второй набор для loop) */
  div[style*="animation:ticker-ltr"] .tk-card:nth-child(n+7),
  div[style*="animation:ticker-rtl"] .tk-card:nth-child(n+7) {
    display: none !important;
  }

  .tk-card {
    width: 78vw !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  /* ---- HIDE DECORATIVE BLOBS ---- */
  div[style*="border-radius:50%"][style*="position:absolute"],
  div[style*="position:absolute"][style*="width:480px"],
  div[style*="position:absolute"][style*="width:300px"] {
    display: none !important;
  }

  /* ---- FONT SIZES ---- */
  div[style*="font-size:54px"] {
    font-size: clamp(32px, 9vw, 48px) !important;
  }
  div[style*="font-size:22px"] {
    font-size: 15px !important;
  }

  /* ---- MAX WIDTH ---- */
  div[style*="max-width:1"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- IMAGES ---- */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
}