/* ========================
   RESPONSIVE STYLES
   Mobile-first: base is mobile,
   min-width queries add desktop
   ======================== */

/* ====== TABLET (640px+) ====== */
@media (min-width: 640px) {

  /* Layout */
  .grid--2 { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .hero__tagline { font-size: var(--fs-5xl); }
  .hero__buttons { flex-direction: row; }

  /* About Snippet */
  .about-snippet { grid-template-columns: 1fr 1fr; }

  /* Services Grid */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Stats */
  .stats__grid { grid-template-columns: repeat(4, 1fr); }

  /* Gallery Preview */
  .gallery-preview { grid-template-columns: repeat(3, 1fr); }

  /* Testimonial */
  .testimonial-card__text { font-size: var(--fs-lg); }

  /* About Page */
  .story-row { grid-template-columns: 1fr 1fr; }
  .story-row:nth-child(even) .story-row__image { order: -1; }
  .mv-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  /* Services Page */
  .events-grid { grid-template-columns: repeat(2, 1fr); }
  .process-timeline { grid-template-columns: repeat(2, 1fr); }

  /* Gallery Page */
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }

  /* Contact */
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .form-row--two { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 3fr 2fr; }

  /* Footer */
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__newsletter-inner { flex-direction: row; text-align: left; }
}

/* ====== DESKTOP (1024px+) ====== */
@media (min-width: 1024px) {

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

  /* Navbar */
  .navbar__nav { display: block; }
  .navbar__cta { display: inline-flex; }
  .navbar__hamburger { display: none; }

  /* Hero */
  .hero__tagline { font-size: var(--fs-hero); }
  .hero__subtitle { font-size: var(--fs-xl); }

  /* Services Grid */
  .services-grid { grid-template-columns: repeat(3, 1fr); }

  /* CTA Banner */
  .cta-banner__title { font-size: var(--fs-4xl); }

  /* About Page */
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .team-grid { grid-template-columns: repeat(4, 1fr); }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }

  /* Footer */
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
}

/* ====== LARGE DESKTOP (1200px+) ====== */
@media (min-width: 1200px) {

  /* Sections get more breathing room */
  .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }

  /* Page Hero */
  .page-hero__title { font-size: var(--fs-hero); }

  /* Contact Map */
  .contact-map { height: 350px; }
}

/* ====== EXTRA LARGE (1400px+) ====== */
@media (min-width: 1400px) {

  .container { padding-left: var(--space-8); padding-right: var(--space-8); }

  .hero__content { max-width: 900px; }
}

/* ====== SMALL MOBILE (max 400px) ====== */
@media (max-width: 400px) {

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

  .hero__tagline { font-size: var(--fs-2xl); }

  .btn--lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-base);
  }

  .page-hero__title { font-size: var(--fs-3xl); }

  .stats__number { font-size: var(--fs-3xl); }

  .section { padding-top: var(--space-9); padding-bottom: var(--space-9); }
}