/* ============================================
   SHILOHI SAFETY NETS — Mobile Overrides
   ============================================ */

/* ── 1440px+ (Large Desktop) ── */
@media (min-width: 1441px) {
  .container {
    max-width: 1400px;
  }
}

/* ── 1024px (Tablet Landscape / Small Desktop) ── */
@media (max-width: 1024px) {
  .section {
    padding: var(--space-4xl) 0;
  }

  .section__title {
    font-size: var(--text-3xl);
  }
}

/* ── 768px (Tablet Portrait) ── */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-lg);
  }

  .header__logo img {
    height: 58px;
  }

  .section {
    padding: var(--space-3xl) 0;
  }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }

  .breadcrumbs {
    padding: var(--space-md) 0;
    font-size: 10px;
  }
}

/* ── 480px (Large Phones) ── */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }

  .header__logo img {
    height: 52px;
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }

  .btn {
    padding: 14px 28px;
    font-size: var(--text-xs);
  }

  .btn--lg {
    padding: 16px 32px;
  }
}

/* ── 360px (Small Phones) ── */
@media (max-width: 360px) {
  .container {
    padding: 0 var(--space-sm);
  }

  .header__logo img {
    height: 44px;
  }

  h1 { font-size: var(--text-2xl); }

  .btn {
    padding: 12px 20px;
  }
}

/* ── Touch Device Optimizations ── */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-dependent states for touch */
  .header__dropdown-menu {
    display: none;
  }

  /* Larger touch targets */
  .faq__question {
    min-height: 56px;
  }

  .risk-explorer__hotspot {
    width: 56px;
    height: 56px;
  }

  .service-explorer__wheel-item {
    width: 64px;
    height: 64px;
  }

  /* Disable hover transforms */
  .protection-scroll__card:hover {
    transform: none;
  }

  .materials__item:hover .materials__item-img {
    transform: none;
  }
}

/* ── Safe Area (notch phones) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-bar {
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}