/* ===========================================
   Responsive – Trusted Blue, Fully Focused
   =========================================== */

/* ---------- Extra small devices (≤320px) ---------- */
@media (max-width: 320px) {
  :root {
    --text-base: 0.9rem;
  }
  .container {
    padding: 0 var(--space-3);
  }
  .hero h1 {
    font-size: var(--text-3xl);
  }
  .lead {
    font-size: var(--text-base);
  }
  .btn-lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
}

/* ---------- Small mobiles (≤375px) ---------- */
@media (max-width: 375px) {
  .newsletter-form {
    min-width: auto;
    flex-direction: column;
  }
  .newsletter-form .form-input {
    width: 100%;
  }
}

/* ---------- Mobile L (≤425px) ---------- */
@media (max-width: 425px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .footer-brand {
    text-align: center;
    margin: 0 auto;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-newsletter {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
  .footer-bottom-links {
    justify-content: center;
  }
  .built-by {
    justify-content: center;
  }
}

/* ---------- Tablet (≤768px) ---------- */
@media (max-width: 768px) {
  :root {
    --header-height: 3.5rem;
  }

  /* Navigation */
  .nav {
    display: none;
  }
  .mobile-toggle {
    display: flex;
  }

  /* Hide text beside icon in header CTA button */
  .header-actions .btn-primary span {
    display: none;
  }

  .section {
    padding: var(--space-12) 0;
  }
  .section-lg {
    padding: var(--space-16) 0;
  }

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

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .newsletter-form {
    width: 100%;
  }

  /* Improve touch targets */
  .nav-link,
  .mobile-nav-link,
  .btn {
    min-height: 44px;
  }

  /* Reduced header padding for mobile */
  .header-inner {
    gap: var(--space-4);
  }
}

/* ---------- Laptop (≤1024px) ---------- */
@media (max-width: 1024px) {
  .container {
    max-width: 100%;
  }
  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Desktop (≤1280px) ---------- */
@media (max-width: 1280px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .footer-grid > :nth-child(5) {
    grid-column: span 4;
    margin-top: var(--space-4);
  }
}

/* ---------- Large screens (≥1440px) ---------- */
@media (min-width: 1440px) {
  .container {
    padding: 0 var(--space-6);
  }
  .section {
    padding: var(--space-20) 0;
  }
}

/* ---------- Extra large (≥1920px) ---------- */
@media (min-width: 1920px) {
  :root {
    --text-5xl: 3.5rem;
    --text-4xl: 2.5rem;
  }
  .container-2xl {
    max-width: var(--container-2xl);
  }
}

/* ---------- Touch / no hover devices ---------- */
@media (hover: none) {
  .hover-lift:hover,
  .card:hover,
  .btn-primary:hover:not(:disabled),
  .btn-secondary:hover:not(:disabled) {
    transform: none;
    box-shadow: var(--shadow-xs);
  }
  .social-link:hover {
    transform: none;
  }
}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Accessibility: high contrast ---------- */
@media (prefers-contrast: high) {
  :root {
    --color-border: #000000;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
  .btn {
    border-width: 2px;
  }
  .card {
    border: 2px solid var(--color-border);
  }
}

/* ---------- Responsive visibility helpers ---------- */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}