/*
Shuqaq Responsive Styles (Arabic RTL Fixes)
Breakpoints: 1920px (Desktop), 1200px (Laptop), 992px (Tablet), 768px (Mobile), 480px / 390px (Small Mobile)
*/

/* Strict Mobile Overflow Fix - Prevents side-to-side scrolling */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative;
  width: 100%;
}

*, *::before, *::after {
  max-width: 100%;
}

img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}

@media (max-width: 1200px) {
  .header-inner { padding: 0 24px; }
  .destinations-grid { grid-template-columns: repeat(3, 1fr); }
  .experience-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 3; margin-bottom: 16px; }
  .apartments-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .apartment-card-h { grid-template-columns: 280px 1fr; }
}

@media (max-width: 992px) {
  :root {
    --section-gap: 56px;
    --section-gap-sm: 36px;
  }

  .container, .container-wide {
    padding: 0 16px;
  }

  .primary-nav { display: none; }
  .hamburger { display: flex; }

  .hero-title { font-size: 2.4rem; }
  .hero-subtitle { font-size: 1rem; }

  /* Simple Search Box Mobile */
  .search-box-simple {
    flex-direction: row;
    padding: 4px;
  }
  .search-box-simple input {
    padding: 12px 16px;
    font-size: 0.95rem;
  }
  .search-box-simple button {
    padding: 12px 20px;
    font-size: 0.9rem;
  }

  .popular-searches {
    justify-content: center;
    gap: 6px;
  }
  .pop-tag {
    font-size: 0.78rem;
    padding: 5px 12px;
  }

  .hero-stats { gap: 16px; flex-wrap: wrap; }

  .destinations-grid { grid-template-columns: repeat(2, 1fr); }
  .destinations-grid .destination-card:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; }

  .intro-content { grid-template-columns: 1fr; gap: 32px; }
  .intro-images { grid-template-columns: 1fr 1fr; }

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

  /* ============================================================
     CRITICAL FIX: MOBILE FILTER SIDEBAR BLANK ISSUE SOLVED
     On mobile/tablet screens, sidebar MUST NOT be sticky at 140px!
     It renders immediately static above the archive grid.
     ============================================================ */
  .archive-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .filter-sidebar {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .single-apt-layout { grid-template-columns: 1fr; gap: 32px; }
  .booking-sidebar { position: static; }

  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; }
}

@media (max-width: 768px) {
  .header-inner { height: 64px; padding: 0 16px; }
  .site-header { top: 0; }
  .mobile-nav { top: 64px; }

  .hero { min-height: 80vh; }
  .hero-title { font-size: 2rem; }
  .hero-subtitle { font-size: 0.92rem; margin-bottom: 28px; }

  .apartment-card-h {
    grid-template-columns: 1fr;
  }
  .apartment-card-h .card-img-wrap { height: 210px; }
  .apartment-card-h .card-info { padding: 20px; }

  .apartments-grid-3 { grid-template-columns: 1fr; }
  .experience-grid { grid-template-columns: repeat(2, 1fr); }

  .trust-grid { grid-template-columns: 1fr; gap: 16px; }
  .trust-box { padding: 24px 16px; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-brand { grid-column: span 2; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-affiliate { text-align: center; }

  .apt-specs-grid { grid-template-columns: repeat(2, 1fr); }
  .apt-facilities-grid { grid-template-columns: repeat(2, 1fr); }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.75rem; }
  .destinations-grid { grid-template-columns: 1fr; }
  .destinations-grid .destination-card:first-child { grid-column: span 1; aspect-ratio: 4/3; }

  .experience-grid { grid-template-columns: 1fr; }
  .experience-card { aspect-ratio: 16/9; }

  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }

  .card-specs { gap: 12px; }
  .apt-specs-grid { grid-template-columns: 1fr 1fr; }
  .apt-facilities-grid { grid-template-columns: 1fr; }

  .search-box-simple {
    flex-direction: column;
    border-radius: var(--radius-lg);
  }
  .search-box-simple button {
    width: 100%;
    border-radius: var(--radius-md);
  }
}