/* PinkProxies public website — mobile polish (desktop unchanged) */

@media (max-width: 767.98px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  img,
  video,
  iframe,
  svg {
    max-width: 100%;
    height: auto;
  }

  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Hero / sections */
  section,
  .hero,
  .banner,
  .home-hero {
    overflow: hidden;
  }

  h1 {
    font-size: clamp(1.45rem, 6vw, 2rem) !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }

  h2 {
    font-size: clamp(1.25rem, 5vw, 1.65rem) !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: 1.1rem !important;
  }

  p,
  li {
    font-size: 0.95rem;
  }

  .btn,
  a.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-group,
  .cta-group,
  .hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .btn-group .btn,
  .cta-group .btn,
  .hero-buttons .btn {
    flex: 1 1 auto;
    width: auto;
  }

  /* Cards / grids */
  .row > [class*="col-"] {
    margin-bottom: 0.75rem;
  }

  .card {
    margin-bottom: 0.85rem;
  }

  /* Tables on public pages */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Nav collapse spacing */
  .navbar-collapse {
    max-height: 75vh;
    overflow-y: auto;
  }

  .navbar-nav .nav-link {
    padding: 0.7rem 0.85rem !important;
    min-height: 44px;
  }

  /* Footer */
  footer,
  .footer {
    text-align: center;
  }

  footer .row > [class*="col-"],
  .footer .row > [class*="col-"] {
    margin-bottom: 1rem;
  }

  /* Blog */
  .blog-card,
  .blog-featured,
  article img {
    max-width: 100%;
  }

  .blog-content img {
    height: auto !important;
  }

  /* Forms */
  input.form-control,
  select.form-control,
  textarea.form-control,
  .form-control {
    font-size: 16px !important;
  }
}

@media (max-width: 400px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}