/* ==========================================================================
    Global Property Escape — Responsive
    Breakpoints: 1366px/1280px (laptop tuning), 1420px (nav collapse),
    1100px (large tablet), 900px (tablet), 700px (mobile), 480px (small),
    375px (tiny), 320px (extra tiny), hover:none (touch).
    ========================================================================== */

/* ==========================================================================
   1. Desktop / tablet tuning
   The desktop header grid (layout.css) owns its own spacing, so no per-pixel
   font/padding compaction tiers are needed. The header switches to the
   hamburger drawer at 1420px — before the logo, nav links and action buttons
   can crowd each other.
   ========================================================================== */
@media (max-width: 1280px) {
  .container { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 768px) {
  .site-logo-image { height: 52px; }
}
@media (max-width: 480px) {
  .site-logo-image { height: 44px; }
}

/* Hide mobile-only nav items on desktop */
.primary-nav .nav-divider,
.primary-nav .nav-action { display: none; }

/* Prevent horizontal scroll on mobile — clip #main only (NOT body/html, which clips fixed nav drawer) */
@media (max-width: 1420px) {
  #main { overflow-x: hidden; }
  /* Prevent any long text from overflowing its container */
  p, h1, h2, h3, h4, h5, h6, a, span, td, th, li, label, div {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Flex children must not overflow their parent */
  .contact-method, .filter-group, .form-group { min-width: 0; }
  /* Form inputs must not exceed their container */
  input, select, textarea { max-width: 100%; min-width: 0; }
}

/* ==========================================================================
   2. Navigation collapse (max 1420px)
   Content-based breakpoint: the full logo (up to 390px) + all eight nav
   links + favourite / List Your Property / Member Login cannot fit side by
   side without crowding below 1421px, so the header switches to the
   hamburger drawer here. Desktop and mobile nav are never shown together.
   ========================================================================== */
@media (max-width: 1420px) {
  :root { --header-h: 82px; }
  .site-header { padding: 0 24px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .header-cta .btn, .header-cta .btn-outline { display: none; }

  /* Mobile header row: logo left, favourite + hamburger right */
  .site-header .header-inner {
    display: flex; align-items: center;
    width: 100%; min-height: var(--header-h); padding: 0; gap: 10px;
  }
  .site-logo { flex: 1 1 0; min-width: 0; max-width: 220px; flex-shrink: 1; overflow: hidden; }
  .site-logo-image { height: 56px; width: auto; max-width: 100%; max-height: none; display: block; }
  .header-cta { flex-shrink: 0; gap: 8px; }
  .header-icon-btn { width: 44px; height: 44px; flex-basis: 44px; }

  /* Mobile hamburger: show standalone, hide header-cta inside drawer */
  .nav-toggle--mobile { display: flex; margin-right: 0; width: 48px; height: 48px; flex-shrink: 0; }
  .nav-toggle--mobile span { width: 24px; height: 3px; }
  .nav-toggle--mobile.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle--mobile.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-toggle--mobile.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .primary-nav .header-cta { display: none; }

  /* Hamburger */
  .nav-toggle { display: flex; margin-right: 0; width: 48px; height: 48px; }
  .nav-toggle span { width: 24px; height: 3px; }
  /* Hamburger-to-X animation */
  .nav-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .primary-nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: 300px;
    background: var(--primary-dark); z-index: 1100;
    flex-direction: column; align-items: stretch; justify-self: auto; gap: 0;
    padding: 80px 24px 24px; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-smooth);
    box-shadow: -8px 0 30px rgba(15, 39, 71, 0.25);
  }
  .primary-nav.open { transform: translateX(0); }
  .primary-nav ul { width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .primary-nav li.nav-home { display: block; }
  .primary-nav li > a {
    color: rgba(255,255,255,0.85); padding: 15px 0; font-size: 0.95rem;
    display: flex; align-items: center; gap: 8px; min-height: 0;
  }
  .primary-nav li > a:hover, .primary-nav li > a.active { color: var(--accent); background: transparent; }
  .primary-nav li > a::after, .primary-nav .nav-link::after { display: none; }
  .primary-nav .nav-arrow { margin-left: auto; transform: rotate(90deg); }
  .primary-nav .dropdown.open .nav-arrow { transform: rotate(-90deg); }
  .dropdown-menu {
    position: static; transform: none; min-width: 0;
    background: rgba(255,255,255,0.04);
    box-shadow: none; padding: 4px 0 8px; margin: 0; max-height: none;
  }
  .dropdown-menu a { color: rgba(255,255,255,0.65); padding: 11px 12px; font-size: 0.92rem; }
  .dropdown-menu a:hover { background: rgba(255,255,255,0.06); color: var(--white); }
  .nav-close { display: flex; }
  .nav-overlay.open { display: block; }
  /* Show mobile-only nav items in drawer */
  .primary-nav .nav-divider,
  .primary-nav .nav-action { display: block; }
  /* Divider between main nav and account actions */
  .primary-nav .nav-divider {
    height: 1px; background: rgba(255,255,255,0.12); margin: 8px 0;
    border-bottom: none; list-style: none;
  }
  /* Account / action links */
  .primary-nav .nav-action a {
    color: var(--accent); font-weight: 600;
  }
  .primary-nav .nav-action a:hover {
    color: var(--white); background: rgba(255,255,255,0.06);
  }
}

/* ==========================================================================
   2b. Homepage hero on small screens (max 768px)
   Slightly stronger vertical overlay for text, but much brighter than the
   desktop overlay; image is re-positioned to keep the villa, palm tree and
   coastline visible.
   ========================================================================== */
@media (max-width: 768px) {
  .hero::before {
    background: linear-gradient(180deg,
      rgba(8,28,48,0.24) 0%,
      rgba(8,28,48,0.30) 48%,
      rgba(8,28,48,0.36) 100%);
  }
  .hero::after {
    background-position: 62% center;
  }
}

/* ==========================================================================
   3. Large tablets / small desktops (max 1100px)
   ========================================================================== */
@media (max-width: 1100px) {
  .destinations-grid { grid-template-columns: repeat(2, 1fr); }
  .agents-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .pricing-card { padding: 28px 22px; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .purpose-grid { grid-template-columns: repeat(2, 1fr); }
  .details-layout { grid-template-columns: 1fr 340px; gap: 28px; }
  .feature-block { gap: 32px; }
  .dashboard-shell { grid-template-columns: 220px 1fr; }
  .filter-row { grid-template-columns: repeat(3, 1fr); }
  .property-card-img { height: 220px; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   4. Tablets (max 900px)
   ========================================================================== */
@media (max-width: 900px) {
  :root { --header-h: 72px; }

  /* Hero */
  .hero { min-height: 520px; }
  .hero-inner { width: min(100% - 48px, 1360px); }
  .hero-content { width: min(100%, 560px); padding: 24px; }
  .hero-title { font-size: clamp(2rem, 7vw, 3.2rem); }
  .hero-search-wrap { padding: 20px; }
  .hero-search-tabs { overflow-x: auto; }
  .hero-search-form { grid-template-columns: 1fr 1fr; }
  .hero-search-submit { grid-column: 1 / -1; }

  /* Softer balanced overlay on tablets/mobile where text covers more image */
  .page-hero--image::after {
    background: linear-gradient(180deg, rgba(10,30,50,0.46) 0%, rgba(10,30,50,0.34) 55%, rgba(10,30,50,0.44) 100%);
  }

  .section { padding: 64px 0; }
  .section-head { margin-bottom: 36px; }

  /* Details */
  .details-layout { grid-template-columns: 1fr; }
  .booking-sidebar { position: static; }
  .key-facts { grid-template-columns: repeat(2, 1fr); }
  .property-grid, .similar-grid { grid-template-columns: repeat(2, 1fr); }
  .property-grid.list .property-card-img { flex: 0 0 42%; width: 42%; }
  .gallery-view-all span { display: none; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; }
  .contact-info-card { overflow: hidden; }
  .contact-method { min-width: 0; }
  .contact-method p { overflow-wrap: anywhere; }

  /* Feature blocks */
  .feature-block, .feature-block.reverse { grid-template-columns: 1fr; gap: 28px; }
  .feature-block.reverse .feature-visual { order: 0; }

  /* Dashboard */
  .dashboard-shell { grid-template-columns: 1fr; }
  .dashboard-sidebar {
    position: fixed; top: 0; left: -300px; bottom: 0; width: 280px;
    z-index: 1100; overflow-y: auto; padding: 80px 20px 32px;
    transition: left 0.35s var(--ease-smooth);
  }
  .dashboard-sidebar.open { left: 0; }
  .dashboard-main { padding: 28px 20px; }
  .dash-nav-toggle { display: flex; }

  /* Newsletter */
  .newsletter-wrap { flex-direction: column; align-items: stretch; text-align: center; }
  .newsletter-text p { margin: 0 auto; }
  .newsletter-form { max-width: 100%; }
}

/* ==========================================================================
   5. Mobile (max 700px)
   ========================================================================== */
@media (max-width: 700px) {
  :root { --header-h: 64px; }
  .hide-mobile { display: none !important; }
  .show-mobile { display: inherit; }
  .hero { min-height: 480px; padding-top: 28px; }
  .hero-inner { width: 100%; padding-inline: 20px; }
  .hero-content { width: 100%; max-width: 620px; padding: 24px 20px; margin: 0; }
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .hero-subtitle { font-size: 1.2rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }

  .hero-search-wrap { border-radius: var(--radius-lg); padding: 16px; }
  .hero-search-form { grid-template-columns: 1fr; }
  .hero-search-submit { grid-column: 1 / -1; }

  /* Cards */
  .property-grid, .similar-grid, .pricing-grid { grid-template-columns: 1fr; }
  .property-grid.list .property-card { flex-direction: column; }
  .property-grid.list .property-card-img { flex: none; width: 100%; height: 200px; }
  .house-rules { grid-template-columns: 1fr; }
  .property-card-img { height: 200px; }
  .destinations-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .destination-card { height: 200px; }
  .how-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .agents-grid { grid-template-columns: 1fr; }

  /* Page hero */
  .page-hero { padding: 52px 0; }
  .page-hero h1 { font-size: 1.8rem; }

  /* Filters */
  .filter-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .filter-group--span3 { grid-column: span 2; }
  .filter-group--span2 { grid-column: span 2; }
  .filter-actions .btn { flex: 1; justify-content: center; }

  /* Results toolbar */
  .results-toolbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .results-sort { width: 100%; }
  .results-sort select { flex: 1; }

  .stats-band .home-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .section--dark .home-stat + .home-stat { border-left: none; }

  /* Footer */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 16px; }

  /* CTA */
  .cta-band { padding: 48px 28px; }

  /* Details page */
  .property-details, .property-details-page { padding: 28px 0 56px; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .property-title-row { flex-direction: column; gap: 14px; }
  .property-meta-row { gap: 12px; }
  .key-facts { padding: 16px; gap: 16px 12px; }
  .features-grid { grid-template-columns: 1fr; }
  .listing-disclaimer { padding: 36px 0 0; }
  .listing-disclaimer-card { padding: 22px 20px; }
  .legal-card { padding: 32px 24px; }

  /* Forms */
  .form-card { padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group--full { grid-column: 1; }
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; }

  /* Pricing */
  .pricing-card.popular { transform: none; }

  /* Stats */
  .stat-cards { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Dashboard grids */
  .quick-actions { grid-template-columns: 1fr; }
  .saved-grid { grid-template-columns: 1fr; }

  /* Tables */
  .dash-table-wrap { overflow-x: auto; }
  .dash-table { min-width: 640px; }

  /* Wizard */
  .wizard-step-label { display: none; }
  .wizard-nav { flex-direction: column-reverse; }
  .wizard-nav .btn { width: 100%; justify-content: center; }

  /* Uploads */
  .upload-preview-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   6. Small phones (max 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .site-header { padding: 0 16px; }
  .footer-logo { width: clamp(280px, 19vw, 360px); max-height: 88px; }
  .hero-search-tab { padding: 13px 14px; font-size: 0.82rem; }
  .destinations-grid { grid-template-columns: 1fr; }
  .gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
  .key-facts { grid-template-columns: 1fr 1fr; }
  .filter-row { grid-template-columns: 1fr; }
  .filter-group--span3, .filter-group--span2 { grid-column: 1 / -1; }
  .stat-cards { grid-template-columns: 1fr; }
  .upload-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .toast-container { right: 12px; left: 12px; max-width: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .pagination { flex-wrap: wrap; }
  .admin-cards { grid-template-columns: 1fr; }
  .saved-search-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 24px; }
  .legal-card { padding: 28px 20px; }
  .form-card--wide { max-width: 100%; padding: 28px 20px; }
  .travel-services-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
    7. Tiny phones (max 375px)
   ========================================================================== */
@media (max-width: 375px) {
  .header-icon-btn { width: 38px; height: 38px; }
  .hero-search-tab { padding: 11px 12px; }
  .stats-band .home-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .purpose-grid, .escapes-grid { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }
  .form-card { padding: 22px 16px; }
  .form-card--wide { max-width: 100%; }
  .cta-band { padding: 36px 20px; }
  .legal-card { padding: 24px 18px; }
  .gallery-lightbox { padding: 20px 12px; }
  .hero-scroll-cue { bottom: 12px; }
  .hero-scroll-cue svg { width: 14px; height: 14px; }
  .destination-card { height: 180px; }
  .agent-profile-card { padding: 24px 16px; }
  .agent-profile-avatar { width: 100px; height: 100px; }
  .wizard-section { padding: 16px; }
}

/* ==========================================================================
    8. Extra tiny phones (max 320px)
   ========================================================================== */
@media (max-width: 320px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .site-header { padding: 0 12px; }
  .hero { min-height: 400px; }
  .hero-content { padding: 18px 14px; }
  .hero-title { font-size: 1.6rem; }
  .hero-subtitle { font-size: 1rem; }
  .hero-search-wrap { padding: 12px; border-radius: var(--radius-lg); }
  .hero-search-tab { padding: 10px 10px; font-size: 0.78rem; gap: 4px; }
  .hero-search-tab svg { width: 14px; height: 14px; }
  .property-card-body { padding: 16px; }
  .property-card-price { font-size: 1.15rem; }
  .admin-cards { grid-template-columns: 1fr; }
  .filter-row { grid-template-columns: 1fr; }
  .page-hero { padding: 36px 0; }
  .page-hero h1 { font-size: 1.4rem; }
  .section { padding: 40px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-brand { grid-column: 1; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.popular { transform: none; }
  .destinations-grid { grid-template-columns: 1fr; }
  .home-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .how-grid, .why-grid, .testimonials-grid { grid-template-columns: 1fr; }
  .agents-grid, .venue-grid, .weather-grid, .explore-category-grid { grid-template-columns: 1fr; }
  .dest-gallery, .dest-extra-grid, .explore-stats { grid-template-columns: 1fr; }
  .key-facts { grid-template-columns: 1fr 1fr; padding: 12px; gap: 12px 8px; }
  .features-grid { grid-template-columns: 1fr; }
  .house-rules { grid-template-columns: 1fr; }
  .gallery-thumbs { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stat-cards { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: 1fr; }
  .saved-grid { grid-template-columns: 1fr; }
  .member-type-grid { grid-template-columns: 1fr; }
  .pricing-plan-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .img-grid { grid-template-columns: repeat(2, 1fr); }
  .dest-guide-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
  .checkbox-pills { gap: 6px; }
  .checkbox-pill label { padding: 7px 12px; font-size: 0.82rem; }
  .promo-code-row { flex-direction: column; }
  .promo-code-row input { width: 100%; }
}

/* ==========================================================================
    9. Touch / pointer fine adjustments
   ========================================================================== */
@media (hover: none) {
  .property-card .property-card-img img { transform: none !important; }
}