/* ==========================================================================
   BHAGWATI CAR RENTALS - RESPONSIVE STYLESHEET
   Mobile-First & Fluid Layout Breakpoints:
   320px, 360px, 375px, 390px, 414px, 768px, 1024px, 1280px, 1440px, 1920px
   ========================================================================== */

/* Ultra-wide & 1440px+ refinements */
@media (min-width: 1440px) {
  :root {
    --container-max: 1320px;
  }
  
  .hero-section {
    padding-top: 52px;
    padding-bottom: 42px;
  }
}

/* Desktops & Laptops (1024px - 1280px) */
@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  }
  
  .footer-col-micro {
    grid-column: span 2;
  }
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  
  .form-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablets (768px - 1023px) */
@media (max-width: 992px) {
  .header-actions .btn-sm {
    display: none;
  }
  
  .floating-action-bar {
    display: block;
  }
  
  body {
    padding-bottom: 64px; /* offset floating action bar */
  }
}

/* Mobile Devices (320px - 767px) */
@media (max-width: 767px) {
  :root {
    --header-height: 68px;
    --space-4xl: 3.5rem;
    --space-3xl: 2.75rem;
    --space-2xl: 2rem;
  }
  
  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  
  .hero-section {
    padding-top: 36px;
    padding-bottom: 28px;
  }
  
  .hero-content h1 {
    font-size: 1.875rem;
    line-height: 1.2;
  }
  
  .hero-content .lead {
    font-size: 1rem;
    margin-bottom: var(--space-lg);
  }
  
  .hero-ctas {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    max-width: 100% !important;
  }
  
  .hero-ctas .btn {
    width: auto !important;
    padding: 11px 20px !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
  }

  .hero-ctas .btn-hero-icon {
    width: 46px !important;
    height: 46px !important;
    flex-shrink: 0 !important;
  }
  
  .fleet-grid {
    grid-template-columns: 1fr;
  }
  
  .form-grid, .form-grid-3 {
    grid-template-columns: 1fr;
  }
  
  .form-group.col-span-2 {
    grid-column: span 1;
  }
  
  .booking-wrapper {
    padding: var(--space-lg);
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  
  .footer-legal-links {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  
  .map-container {
    height: 280px;
  }
  
  .content-article {
    padding: var(--space-lg);
  }
}

/* Small Screens (320px - 375px) */
@media (max-width: 375px) {
  .brand-logo {
    font-size: 1.05rem;
  }
  
  .phone-badge-link span {
    display: none;
  }
  
  .phone-badge-link {
    padding: 8px 10px;
  }
  
  .fleet-specs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .floating-action-grid {
    gap: 4px;
  }
  
  .floating-action-grid .btn {
    padding: 8px 6px;
    font-size: 0.75rem;
  }

  .hero-ctas {
    gap: 8px !important;
  }

  .hero-ctas .btn {
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
  }

  .hero-ctas .btn-hero-icon {
    width: 42px !important;
    height: 42px !important;
  }
}