/* ==========================================================================
   Rang Mitra Painting — Responsive rules (responsive.css)
   Mobile-first project: base CSS targets small screens; these media queries
   progressively enhance for tablets & desktops, and toggle the bottom nav.
   Load this file LAST so its overrides win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet & below (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero__content { padding: var(--space-7) 0 var(--space-7) var(--space-6); }

  /* Contact details: four fixed columns do not fit. The long address gives
     each 1fr track a wide minimum, which pushed the page out sideways. */
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Mobile (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body { padding-bottom: var(--bottom-nav-height); }   /* clear the bottom nav */

  /* Hide desktop icon nav + CTA; show bottom nav instead */
  .nav-menu,
  .nav-actions { display: none; }
  .bottom-nav { display: flex; }

  .container { padding-inline: var(--space-4); }
  .panel { padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); }

  /* One column on a phone, and let the address wrap instead of setting the
     track width. minmax(0, 1fr) is what stops a grid track growing to fit its
     longest word. */
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-card__value { overflow-wrap: anywhere; }

  /* Hero stacks vertically, image on top */
  .hero__grid { grid-template-columns: 1fr; }
  .hero__content { padding: var(--space-6) var(--space-5); order: 2; }
  .hero__media { order: 1; min-height: 240px; }
  .hero__media img { border-radius: 0; }
  .hero__subtitle { max-width: none; }

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

  .section-head__title { font-size: 1.2rem; }
  .scroll-arrow { display: none; }   /* native swipe on touch devices */

  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-categories { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Small mobile (<= 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero__title { font-size: 2rem; }
  .hero-stats { gap: var(--space-2); }
  .stat__num { font-size: 1.5rem; }
  .btn { padding: 11px 18px; font-size: 0.9rem; }
  .nav-logo__sub { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .calc-type-grid { grid-template-columns: 1fr; }

  /* Section heads: the title column was squeezed beside "View All" (words
     stacked one per line at 320px). Title + subtitle take the full row and
     "View All" drops beneath them, lined up with the text. */
  .section-head { flex-wrap: wrap; gap: var(--space-2); }
  .section-head__main { flex: 1 1 100%; min-width: 0; }
  .section-head .view-all { margin-left: calc(38px + var(--space-3)); }
}

/* --------------------------------------------------------------------------
   Desktop fine-tuning (>= 1025px) — hide mobile-only chrome
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .menu-toggle { display: none; }   /* drawer trigger only on smaller screens */
}