/* responsive.css – Arihant Safaris
   Mobile-first breakpoint overrides that complement css/style.css
   The base Tailwind-compiled stylesheet in style.css already contains
   responsive utilities (sm:, md:, lg:) generated at build time.
   This file holds any additional hand-crafted responsive fixes.
*/

/* Ensure header logo never overflows on very small screens */
@media (max-width: 380px) {
  .site-logo img { max-height: 48px; }
}

/* Stack CTA buttons vertically on small phones */
@media (max-width: 480px) {
  .hero-cta-group { flex-direction: column; align-items: stretch; }
  .hero-cta-group a { text-align: center; }
}

/* Reduce hero padding on mobile */
@media (max-width: 640px) {
  .page-hero { padding-top: 5rem; padding-bottom: 3rem; }
}

/* Gallery grid – 1 col on phones */
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* Table overflow on small screens */
@media (max-width: 768px) {
  .responsive-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}