/* ===================================================
   responsive.css — All media queries for the entire site
   Mobile-first: default styles live in other CSS files.
   ===================================================
   Mobile:  < 768px  (overrides applied here)
   Tablet:  768px – 1023px
   Desktop: 1024px+
   =================================================== */


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

  /* ----- TopBar ----- */
  .topbar { display: none; }

  /* ----- Navbar ----- */
  .navbar__links { display: none; }
  .navbar__cta   { display: none; }
  .navbar__hamburger { display: flex; }

  /* ----- Page Hero Banner ----- */
  .page-hero-banner { padding: 48px 0; }
  .page-hero-banner__title { font-size: 32px; }

  /* ----- Section Padding ----- */
  .section { padding: var(--space-2xl) 0; } /* 48px instead of 96px */

  /* ----- Grids collapse to single column ----- */
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  /* ----- Hero Section ----- */
  .hero { flex-direction: column; }
  .hero__content { text-align: center; }
  .hero__title { font-size: 36px; }
  .hero__subtitle { font-size: var(--size-body); }
  .hero__buttons { justify-content: center; flex-wrap: wrap; }
  .hero__image { margin-top: var(--space-xl); width: 100%; }

  /* ----- Contact Form ----- */
  .contact-form__container { grid-template-columns: 1fr; gap: var(--space-xl); }
  .contact-form__grid      { grid-template-columns: 1fr; }
  .contact-form__image-col { display: none; }
  .contact-form__row       { grid-template-columns: 1fr; }

  /* ----- Footer ----- */
  .footer { padding: 60px 0; }
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__heading::after { left: 50%; transform: translateX(-50%); }
  .footer__social-icons { justify-content: center; }
  .footer__links { align-items: center; }
  .footer__contact { align-items: center; }

  /* ----- CTA Bar ----- */
  .cta-bar .container  { flex-direction: column; gap: var(--space-md); text-align: center; }
  .cta-bar__inner      { flex-direction: column; gap: var(--space-md); text-align: center; }

  /* ----- Bottom Bar ----- */
  .bottom-bar .container { flex-direction: column; gap: var(--space-sm); text-align: center; }
  .bottom-bar__inner     { flex-direction: column; gap: var(--space-sm); text-align: center; }

  /* ----- Marquee ----- */
  .marquee-strip__content span { font-size: var(--size-small); }

  /* ----- Testimonial Slider ----- */
  .testimonial-slider { grid-template-columns: 1fr; gap: var(--space-xl); }
  .testimonial-slider__inner { flex-direction: column; }
  .testimonial-aggregate { padding: 24px; }
  .testimonial-aggregate__score { font-size: 48px; }

  /* ----- Work Process ----- */
  .work-process__header { grid-template-columns: 1fr; }

  /* ----- Stats Row ----- */
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .stat-number { font-size: 36px; }

  /* ----- Service Cards ----- */
  .service-card { flex-direction: column !important; }
  .service-card__image { width: 100%; height: 200px; }

  /* ----- Pricing Cards ----- */
  .pricing-grid { grid-template-columns: 1fr; gap: var(--space-xl); }

  /* ----- Projects Grid ----- */
  .project-grid { grid-template-columns: 1fr; }

  /* ----- Team Grid ----- */
  .team-grid { grid-template-columns: 1fr; }
  .team-card__image-wrapper { height: 280px; }

  /* ----- Blog Listing (2-col layout with sidebar) ----- */
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { margin-top: var(--space-xl); order: 1; }

  /* ----- Blog Details ----- */
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { order: -1; margin-bottom: var(--space-xl); }

  /* ----- FAQ Page ----- */
  .faq-layout  { grid-template-columns: 1fr; }
  .faq-sidebar { order: -1; margin-bottom: var(--space-xl); }

  /* ----- Career Page ----- */
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .join-us-grid  { grid-template-columns: 1fr; }

  /* ----- Newsletter ----- */
  .newsletter-form { flex-direction: column; gap: var(--space-sm); }
  .newsletter-form input { width: 100%; }
  .newsletter-form .btn  { width: 100%; text-align: center; }

  /* ----- About / Team Details ----- */
  .member-profile-grid { grid-template-columns: 1fr; }
  .vision-mission-grid { grid-template-columns: 1fr; }

  /* ----- Project Details ----- */
  .project-info-grid { grid-template-columns: 1fr; }

  /* ----- Pricing ----- */
  .pricing-toggle { flex-wrap: wrap; }

  /* ----- Typography scale-down ----- */
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }
  .section-heading { font-size: 28px; }

  /* ----- Button sizes on mobile ----- */
  .btn { padding: 12px 20px; }
  .btn-lg { padding: 14px 24px; font-size: var(--size-body); }

  /* ----- Awards Section ----- */
  .award-item { flex-direction: column; align-items: flex-start; }
  .award-item__connector { display: none; }

  /* ----- Why Choose Us ----- */
  .feature-card { height: 220px; }
}


/* ===================================================
   === TABLET (768px – 1023px) ===
   =================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

  /* ----- Section Padding ----- */
  .section { padding: var(--space-3xl) 0; } /* 64px */

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

  /* ----- Hero ----- */
  .hero { gap: var(--space-xl); flex-direction: column; }
  .hero__title { font-size: 42px; }
  .hero__content { text-align: center; }
  .hero__buttons { justify-content: center; }

  /* ----- Page Hero Banner ----- */
  .page-hero-banner { padding: 56px 0; }

  /* ----- Navbar ----- */
  .navbar__hamburger { display: flex; }
  .navbar__links { display: none; }
  .navbar__cta   { display: none; }

  /* ----- Contact Form ----- */
  .contact-form__container { grid-template-columns: 1fr; }
  .contact-form__image-col { display: none; }

  /* ----- Footer ----- */
  .footer { padding: 72px 0; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }

  /* ----- Testimonial Slider ----- */
  .testimonial-slider { grid-template-columns: 1fr; gap: var(--space-xl); }

  /* ----- Work Process ----- */
  .work-process__header { grid-template-columns: 1fr; }

  /* ----- Team Grid ----- */
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-card__image-wrapper { height: 300px; }

  /* ----- Pricing ----- */
  .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

  /* ----- Blog Layout ----- */
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { margin-top: var(--space-xl); }

  /* ----- Article Layout ----- */
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { margin-top: var(--space-xl); }

  /* ----- FAQ Layout ----- */
  .faq-layout { grid-template-columns: 1fr; }
  .faq-sidebar { margin-bottom: var(--space-xl); }

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

  /* ----- Stats Row ----- */
  .stats-row { grid-template-columns: repeat(2, 1fr); }

  /* ----- Typography ----- */
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  .section-heading { font-size: 32px; }

  /* ----- Awards ----- */
  .award-item__connector { max-width: 80px; }
}


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

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

  /* ----- Hero ----- */
  .hero { flex-direction: row; align-items: center; gap: var(--space-2xl); }
  .hero__content { flex: 1; text-align: left; }
  .hero__buttons { justify-content: flex-start; }
  .hero__image { flex: 1; }

  /* ----- Contact Form ----- */
  .contact-form__container { grid-template-columns: 1.2fr 0.8fr; }
  .contact-form__grid { grid-template-columns: repeat(2, 1fr); }
  .contact-form__image-col { display: flex; }

  /* ----- Blog Layout ----- */
  .blog-layout { grid-template-columns: 2fr 1fr; gap: var(--space-2xl); }
  .blog-sidebar { margin-top: 0; }

  /* ----- Article Layout ----- */
  .article-layout { grid-template-columns: 2fr 1fr; gap: var(--space-2xl); }
  .article-sidebar { margin-top: 0; }

  /* ----- FAQ Page ----- */
  .faq-layout { grid-template-columns: 1fr 2fr; gap: var(--space-2xl); }
  .faq-sidebar { order: 0; }

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

  /* ----- Testimonial Slider ----- */
  .testimonial-slider { grid-template-columns: 1fr 1.5fr; }

  /* ----- Work Process ----- */
  .work-process__header { grid-template-columns: 1fr 1fr; }

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

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

  /* ----- Benefits Grid ----- */
  .benefits-grid { grid-template-columns: repeat(4, 1fr); }

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