/* ============================================================
   UniCrush — Responsive / mobile layer
   Loaded LAST so it overrides shared.css and inline <style> blocks.
   Breakpoints: 1024px (tablet), 768px (phone), 480px (small).
   ============================================================ */

/* Never let media overflow its container */
img, video, table { max-width: 100%; }

/* Keyboard accessibility — visible focus ring (applies everywhere) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, label:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px;
}

/* Hamburger control — hidden on desktop, revealed on mobile */
.nav-toggle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nav-burger { display: none; }

/* ---------------- Tablet (<= 1024px) ---------------- */
@media (max-width: 1024px){
  .nav { padding: 0 28px; }
  .how-grid, .test-grid, .awards-grid, .cat-grid,
  .all-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .plans-grid { grid-template-columns: 1fr !important; max-width: 460px; }
  .plan-card.featured { transform: none; }
}

/* ---------------- Phone / portrait (<= 768px) ---------------- */
@media (max-width: 768px){

  /* ---- NAV: collapse to JS-free hamburger ---- */
  .nav { padding: 0 18px; height: auto; min-height: 64px; flex-wrap: wrap; align-items: center; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: auto; cursor: pointer;
  }
  .nav-burger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .2s; }
  .nav-links, .nav-auth { display: none; width: 100%; }
  .nav-toggle:checked ~ .nav-links { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 4px; background: var(--bg); }
  .nav-toggle:checked ~ .nav-auth { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; background: var(--bg); }
  .nav-links .nav-link { padding: 12px 4px; font-size: 16px; }
  .nav-auth .btn-ghost, .nav-auth .btn-flame { width: 100%; text-align: center; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* ---- GLOBAL layout: single column + tighter padding ---- */
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  .hero { padding-top: 92px; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 40px; padding: 0 20px; }
  .hero-stats { gap: 22px; flex-wrap: wrap; }
  .how-grid, .features-grid, .all-features-grid,
  .test-grid, .awards-grid, .trust-grid, .cat-grid,
  .articles-grid, .download-section, .faq-grid,
  .reasons-grid, .form-row { grid-template-columns: 1fr !important; }
  .stats-banner { grid-template-columns: repeat(2, 1fr) !important; margin: 0 20px 64px !important; }
  .feat-block { padding: 48px 0; }
  .feat-block-inner { grid-template-columns: 1fr !important; gap: 28px; }
  .feat-block-inner.reverse { direction: ltr; }
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 30px; }

  /* ---- Common big horizontal paddings ---- */
  .page-hero, .pricing-hero, .faq-hero, .how-hero, .cred-hero,
  .help-hero, .why-hero, .legal-wrap, .form-section, .steps-big,
  .contact-hero, .categories-section, .compare-section, .status-section,
  .testimonials-section, .awards-section, .reasons-section, .manifesto {
    padding-left: 20px !important; padding-right: 20px !important;
  }
  .page-hero, .pricing-hero, .faq-hero, .how-hero, .cred-hero,
  .help-hero, .contact-hero { padding-top: 110px !important; }

  /* ---- Buttons / CTA rows stack ---- */
  .hero-actions, .cta-banner-btns, .sh-btns, .manifesto > div[style] { flex-direction: column; }
  .hero-actions a, .cta-banner-btns a, .sh-btns a { width: 100%; text-align: center; }
  .cta-banner { padding: 56px 22px !important; }

  /* ---- why-unicrush ---- */
  .why-hero { grid-template-columns: 1fr !important; gap: 36px; padding: 110px 20px 60px !important; }
  .vs-table { margin: 40px 16px !important; }
  .vs-header, .vs-row { grid-template-columns: 1.5fr .8fr .8fr .8fr !important; padding: 14px 14px !important; gap: 6px !important; }
  .vs-col-title { font-size: 13px !important; }
  .vs-col-title.brand { font-size: 15px !important; }
  .vs-feature-name { font-size: 12.5px; }
  .vs-cell { font-size: 16px; }

  /* ---- pricing ---- */
  .compare-section { overflow-x: auto; }
  .compare-table { min-width: 560px; }
  .credit-strip { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px !important; }
  .cs-divider { display: none; }
  .guarantee { flex-direction: column; text-align: center; gap: 24px; margin: 48px 20px 0 !important; padding: 40px 24px !important; }
  .billing-toggle { flex-wrap: wrap; justify-content: center; }

  /* ---- faq ---- */
  .faq-layout { grid-template-columns: 1fr !important; padding: 0 20px 80px !important; }
  .faq-sidebar { display: none; }
  .faq-cats { margin: 0 20px 40px !important; }
  .still-help { margin: 0 20px 80px !important; padding: 48px 24px !important; }

  /* ---- help-center ---- */
  .help-search-bar { margin: 0 4px; }
  .status-card { flex-direction: column; text-align: center; gap: 16px; padding: 28px !important; }
  .status-badge { margin-left: 0; }

  /* ---- contact ---- */
  .contact-hero { grid-template-columns: 1fr !important; gap: 40px; padding-top: 110px !important; }

  /* ---- how-to-signup ---- */
  .big-step { grid-template-columns: 1fr !important; gap: 14px; padding: 36px 0 !important; }
  .big-step-num { font-size: 56px; }
  .signup-strip { flex-direction: column; text-align: center; gap: 24px; margin: 0 20px 60px !important; padding: 48px 28px !important; }

  /* ---- auth (login / signup): hide decorative panel, show form ---- */
  .auth-layout, .signup-layout { grid-template-columns: 1fr !important; }
  .auth-visual, .signup-visual { display: none !important; }
  .auth-form-panel, .signup-form-panel { padding: 88px 22px 48px !important; }
  .auth-nav-link, .auth-form-panel > a[style], .signup-form-panel > a[style] { top: 20px !important; right: 20px !important; }
  .name-row { grid-template-columns: 1fr 1fr; }

  /* ---- legal ---- */
  .legal-wrap { padding: 110px 20px 72px !important; }
  .manifesto-quote { font-size: 28px; }
}

/* ---------------- Small phones (<= 480px) ---------------- */
@media (max-width: 480px){
  .footer-inner { grid-template-columns: 1fr !important; gap: 26px; text-align: left; }
  .hero-stats { gap: 16px; }
  .stat-val { font-size: 28px; }
  .press-logos { gap: 24px; }
  .billing-toggle .bt-opt { padding: 8px 14px; font-size: 13px; }
}

/* Blog */
@media (max-width: 1024px){ .blog-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 768px){
  .blog-hero { padding: 110px 20px 30px !important; }
  .blog-grid { grid-template-columns: 1fr !important; padding: 0 20px !important; }
  .article-wrap { padding: 100px 20px 30px !important; }
}