/* Media Queries / Responsive Design */

/* Large-to-mid screens */
@media (max-width: 1024px) {
  .cars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Hide nav menu, show mobile menu button */
  .nav-menu {
    display: none;
  }
  
  .mobile-menu-btn {
    display: block !important; /* Override the !important from hero.css to show on mobile */
  }
  
  /* Overlay menu styles */
  .mobile-menu-overlay.active {
    display: flex !important; /* Override the !important from hero.css but only when active */
  }
  
  /* Reduce hero padding on mobile */
  .hero > .container {
    padding: 0 20px;
  }
}

/* Mid screens */
@media (max-width: 768px) {
  .property-item, .property-item.reverse {
    flex-direction: column;
    gap: 30px;
  }
  
  .property-image {
    max-width: 100%;
  }
  
  /* Fix for carousel in mobile view */
  .carousel-container {
    height: 250px; /* Slightly reduced height for mobile but still visible */
    margin: 0 auto 20px; /* Center and add spacing below */
    width: 100%; /* Ensure full width */
  }
  
  .carousel-slide {
    opacity: 0; /* Keep initial state */
  }
  
  .carousel-slide.active {
    opacity: 1; /* Ensure active slide is visible */
  }
  
  .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .property-specs {
    grid-template-columns: 1fr;
  }

  .property-info .container {
    flex-direction: column;
    text-align: center;
  }
  
  .host-section .container {
    flex-direction: column;
  }
  
  .host-profile {
    flex: 0 0 100%;
    margin-bottom: 30px;
  }
  
  .host-info {
    flex: 0 0 100%;
    text-align: center;
    padding: 0 15px; /* Reset padding on mobile */
  }

  .property-text,
  .host-info {
    margin-bottom: 30px;
  }

  .hero-content h1 {
    font-size: 44px; /* was 36px, +8 */
  }

  .property-text {
    order: 2;
    text-align: center;
  }

  .property-image {
    order: 1;
  }

  .ebooks-grid {
    grid-template-columns: 1fr; /* Stacks packages vertically on smaller screens */
  }

  .ebook-card {
    width: 100%;
    max-width: 500px;
  }

  .cars-grid {
    grid-template-columns: 1fr;
  }

  .property-info-inner {
    padding: 20px 10px;
  }
  
  /* Stack How It Works features vertically */
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  /* Adjust rewards section typography */
  .rewards-section h2.inline,
  .rewards-section h2.above {
    font-size: 36px;
  }
  
  /* Match property-details in rewards section to property section */
  .rewards-section .property-details {
    text-align: center;
  }
  
  /* Reduce date box heading font size */
  .date-box-content h1 {
    font-size: 36px;
  }
  
  /* NEW: Adjust property section typography to match luxury car section */
  .property-info h2.above,
  .property-info h2.inline,
  .property-info h3.above,
  .property-info h3.inline {
    font-size: 36px;
  }
  
  /* NEW: Adjust footer typography to match luxury car section */
  footer h2.above_black {
    font-size: 36px;
  }
}

/* Small screens */
@media (max-width: 576px) {
  .hero-content {
    padding: 60px 0;
  }

  .hero-content h1 {
    font-size: 40px; /* was 32px, +8 */
  }

  /* Further adjust carousel for smallest screens */
  .carousel-container {
    height: 200px; /* Even more compact for small screens */
  }

  .date-box-wrapper {
    width: 90%;
  }
  
  .date-box-content {
    padding: 30px 20px;
  }
}