/* ============================================================
   Claude E. Bharath & Company — responsive.css
   Media query overrides (sm: 640px, md: 768px, lg: 1024px)
   ============================================================ */

/* ── ≥ 640px (sm) ───────────────────────────────────────────── */
@media (min-width: 640px) {
  .site-container { padding-left: 32px; padding-right: 32px; }

  .site-header__inner { padding-left: 32px; padding-right: 32px; }

  .site-header__name--full  { display: block; }
  .site-header__name--short { display: none; }

  .hero__content { padding: 80px 32px; }
  .hero__text   { font-size: 18px; }

  .cta-section { padding: 80px 32px; }

  /* Footer bottom bar: side-by-side on ≥640 */
  .site-footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Footer links: side-by-side */
  .site-footer__links { flex-direction: row; gap: 64px; }

}

/* ── ≥ 768px (md) ───────────────────────────────────────────── */
@media (min-width: 768px) {
  /* Header */
  .site-nav { display: flex; align-items: center; gap: 28px; }
  .mobile-menu-toggle { display: none; }

  /* Sections */
  .section { padding-top: 96px; padding-bottom: 96px; }
  .section-header { margin-bottom: 64px; }
  .section-heading { font-size: 42px; }
  .contact-col-heading { font-size: 36px; }
  .contact-col-heading--info { font-size: 28px; }

  /* About — two columns */
  .about-grid {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
  .about-grid__content { width: 52%; }
  .about-grid__image   { width: 48%; }

  /* Services — two columns */
  .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .services-panel { padding: 40px; }
  .services-panel__title { font-size: 24px; }
  .services-panel__note { margin-top: 36px; }

  /* Image Statement — swap to the desktop/tablet image; both preserve the
     full natural aspect ratio via height:auto, so neither crops the subjects
     or the embedded text (see .image-statement__img in main.css). */
  .image-statement__img--mobile  { display: none; }
  .image-statement__img--desktop { display: block; }

  /* Why Choose Us — 2 × 2 grid */
  .wycu-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .wycu-card { padding: 40px; }
  .wycu-card__title { font-size: 20px; }

  /* Satisfied Clients — 2 × 2, matching the Our Commitment to You rhythm */
  .satisfied-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* CTA */
  .cta-section { padding: 96px 32px; }

  /* Contact — two columns */
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
  .contact-map iframe { height: 400px; }

  /* Header name always full on md+ */
  .site-header__name--full  { display: block; }
  .site-header__name--short { display: none; }
}

/* ── ≥ 1024px (lg) ──────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Header nav gap */
  .site-nav { gap: 32px; }

  /* About gap */
  .about-grid { gap: 80px; }

  /* Contact wider gap */
  .contact-grid { gap: 80px; }

  /* Footer: side-by-side brand + links */
  .site-footer__main {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
  }

  .site-footer__brand { max-width: 340px; }
  .site-footer__links { gap: 80px; }
}

/* ── Mobile-specific adjustments (max 767px) ────────────────── */
@media (max-width: 767px) {
  /* Show short logo name on very small screens */
  .site-header__name--short { display: inline; }
  .site-header__name--full  { display: none; }

  /* Full-width form inputs */
  .form-input, .btn-form-submit { font-size: 16px; } /* prevents iOS zoom */

  /* Footer brand full-width */
  .site-footer__brand { max-width: 100%; }

  /* Footer links stacked */
  .site-footer__links { flex-direction: column; gap: 32px; }

  /* Bottom bar: stacked, centred */
  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Footer padding */
  .site-footer .site-container {
    padding-top: 56px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── Print: hide interactive / fixed elements ───────────────── */
@media print {
  .site-header,
  .mobile-menu-toggle,
  .mobile-drawer,
  .hero__chevron { display: none !important; }

  body { color: #000; }
}