/**
 * css/responsive.css
 * ─────────────────────────────────────────────────────────────────
 * All media queries in one place.
 * Breakpoints:
 *   960px — tablet (hide desktop nav, collapse most grids to 1-2 cols)
 *   540px — mobile (collapse everything to 1 col)
 * ─────────────────────────────────────────────────────────────────
 */

/* ════════════════════════════════════════════════════════════════
   TABLET  (≤ 960px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {

  /* — Navbar — */
  .nav-ll, .nav-rr {
    display: none !important;
  }

  .nav-burger {
    display: flex !important;
  }

  .navbar__inner {
    padding: 0 16px;
  }

  /* Logo docks left; theme toggle lives in the mobile menu instead */
  .nav-logo {
    position: static;
    transform: none;
    padding: 10px 0;
  }

  .nav-persistent {
    margin-left: auto;
  }

  .nav-persistent .nav-toggle {
    display: none;
  }

  /* — Hero scroll indicator overlaps stacked buttons on small screens — */
  .hero__scroll {
    display: none;
  }

  /* — Hero text — */
  .hero__content {
    padding: 0 10px;
  }

  /* — Button rows — */
  .hero-btns {
    flex-direction: column;
    align-items: center;
  }

  /* — Grids — */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grid-form {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .grid-about {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  .grid-footer {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px;
  }

  .grid-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* — Influencer tier rows — */
  .infl-row {
    grid-template-columns: auto 1fr !important;
    gap: 16px;
  }

  .infl-row > *:nth-child(3),
  .infl-row > *:nth-child(4) {
    grid-column: 1 / -1;
  }

  /* — Marketplace search — */
  .marketplace-search select {
    width: 100%;
  }

  /* — FAQ — */
  .faq-grid {
    grid-template-columns: 1fr !important;
  }

  /* — Section padding — */
  .section {
    padding: 64px 5vw;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE  (≤ 540px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {

  /* — All multi-column grids go to 1 col — */
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-stats,
  .grid-footer {
    grid-template-columns: 1fr !important;
  }

  /* — Modal — */
  .modal__header {
    flex-direction: column;
    gap: 14px;
  }

  .modal__body {
    padding: 20px 20px 28px;
  }

  .modal__header {
    padding: 20px 20px 18px;
  }

  .modal__stats-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* — Tier cards — */
  .tier-grid {
    grid-template-columns: 1fr !important;
  }

  /* — Influencer rows become vertical cards — */
  .infl-row {
    grid-template-columns: 1fr !important;
  }

  /* — Buttons — */
  .btn-primary,
  .btn-outline,
  .btn-white,
  .btn-ghost-white {
    width: 100%;
    text-align: center;
  }

  /* — Hero — */
  .hero {
    padding: 80px 20px 0;
    min-height: 100svh;
  }

  /* — Footer — */
  .footer {
    padding: 40px 5vw 24px;
  }

  /* — Section padding — */
  .section {
    padding: 48px 5vw;
  }

  /* — Container padding — */
  .container--wide {
    padding: 0 20px;
  }

  /* — Form card — */
  .form-card__body {
    padding: 20px 20px 28px;
  }

  /* — Marketplace header — */
  .marketplace-header {
    padding: 32px 5vw 0;
  }

  /* — Stats band values — */
  .stat-val {
    font-size: 32px;
  }

  /* — Hero typography — */
  .hero__content h1 {
    letter-spacing: -1px !important;
    line-height: 1.05 !important;
  }

  /* — Business Starter Kit card top row — */
  .starter-kit-top {
    grid-template-columns: 1fr !important;
    padding: 24px 20px !important;
  }
  .starter-kit-top .btn-primary {
    width: 100%;
  }

  /* — Prevent wide inline grids from overflowing — */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* — Clamp section horizontal padding — */
  .section {
    padding: 48px 16px !important;
  }
  .section--dark {
    padding: 64px 16px !important;
  }

  /* — Marketplace results bar — */
  .results-bar {
    flex-wrap: wrap;
    gap: 10px;
  }
  .billing-toggle {
    width: 100%;
    justify-content: center;
  }

  /* — Marketplace search full-width on mobile — */
  .marketplace-search input,
  .marketplace-search select {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   VERY SMALL  (≤ 380px — iPhone SE, older phones)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hero__content h1 {
    font-size: 36px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
  }

  .navbar__inner {
    padding: 0 12px;
  }

  .section {
    padding: 40px 14px !important;
  }
}