/* =========================================================
   responsive.css (NEW)
   Strategy:
   - Minimal general responsive tweaks
   - Hard reset + rebuild Testimonials layout on <= 820px
   - Center Navbar + Contact page on mobile
   - Avoid relying on translate: (mobile Safari weirdness)
   - Use grid template-areas so centering cannot drift
   ========================================================= */


/* =========================================================
   1) GLOBAL RESPONSIVE HELPERS
   ========================================================= */

@media (max-width: 1024px){
  .section{ padding: 72px 18px; }
  .container{ padding: 0 14px; }
  .footer-container{ padding: 0 14px; }
}

@media (max-width: 900px){
  /* Header/Nav */
  header{ padding: 0.9rem 1rem; }
  nav{ gap: 0.75rem; }
  nav .logo img{ height: 64px; }
  nav .nav-links{ margin-right: 0; gap: 1.25rem; }

  /* Hero */
  .hero{ height: 68vh; background-attachment: scroll; }
  .hero-content{ width: min(760px, 92%); }
  .hero h1{ font-size: clamp(2.1rem, 5.5vw, 2.8rem); }

  /* Services grid */
  .services-grid{ gap: 22px; }

  /* Contact stacks sooner */
  .contact-container{ grid-template-columns: 1fr; }

  /* Footer stacks */
  .footer-container{ flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px){
  /* Sections */
  .section{ padding: 60px 16px; }
  .section-title{ font-size: 28px; }
  .section-subtitle{ margin-bottom: 38px; }

  /* Services: single column */
  .services-grid{ grid-template-columns: 1fr; gap: 18px; }
  .service-card{ padding: 18px; }

  /* About team cards stack */
  .team-card{
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem;
    gap: 1.5rem;
  }
  .team-info{ width: 100%; text-align: left; }
  .team-photo img{
    width: min(320px, 100%);
    height: auto;
    aspect-ratio: 1/1;
  }

  /* Contact button full width */
  .contact-page button{
    width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 480px){
  .section{ padding: 52px 14px; }
  .section-title{ font-size: 24px; }
  .hero{ height: 56vh; }
  .footer-bottom{ font-size: 0.85rem; }
}



/* =========================================================
   2) NAVBAR + CONTACT: MOBILE CENTERING (NEW)
   Applies at <= 820px
   ========================================================= */

@media (max-width: 820px){

  /* ---------- NAVBAR CENTER FIX ---------- */
  nav{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  nav .logo{
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  nav .nav-links{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;

    width: 100% !important;
    margin: 0 auto !important;
    padding: 0.5rem 0 0 !important;
    gap: 0.75rem 1.1rem !important;
  }

  /* ---------- CONTACT PAGE CENTER FIX ---------- */
  .contact-page{
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .contact-container{
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 2rem !important;

    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .contact-container form,
  .contact-info{
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .form-row{
    grid-template-columns: 1fr !important;
  }

  .contact-page button{
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
  }
}



/* =========================================================
   3) TESTIMONIALS: HARD RESET + REBUILD (NEW ANGLE)
   Applies at <= 820px to catch most phones + small tablets.
   ========================================================= */

@media (max-width: 820px){

  /* Section: make mobile stable (no fixed backgrounds) */
  .testimonials-section{
    padding: 4.75rem 0 !important;
    background-attachment: scroll !important;
  }

  /* Overlay: force a valid alpha */
  .testimonials-overlay{
    background: rgba(0,0,0,0.62) !important;
  }

  /* Inner container: true centered */
  .testimonials-inner{
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /*
    Grid template areas:
      Row 1: track (full width)
      Row 2: prev / next (centered pair)
  */
  .testimonial-carousel{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "track track"
      "prev  next" !important;

    align-items: center !important;
    justify-items: center !important;

    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 1rem !important;

    position: relative !important;
    box-sizing: border-box !important;
  }

  .testimonial-track{
    grid-area: track !important;
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;

    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Buttons: remove absolute positioning + remove translate */
  .testimonial-btn{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    translate: none !important;
    transform: none !important;

    appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;

    border-radius: 999px !important;
    line-height: 1 !important;
    font-size: 1.55rem !important;

    background: rgba(255,255,255,0.22) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
  }

  .testimonial-btn.prev{
    grid-area: prev !important;
    justify-self: center !important;
  }

  .testimonial-btn.next{
    grid-area: next !important;
    justify-self: center !important;
  }

  /* Card: center + glass */
  .testimonial-card{
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;

    padding: 1.6rem 1.25rem !important;
    border-radius: 14px !important;

    background: rgba(255,255,255,0.18) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
    backdrop-filter: blur(8px) !important;

    text-align: center !important;
  }

  /* Keep fade/slide but stable and centered */
  .testimonial-card{
    opacity: 0 !important;
    transform: translateX(14px) !important;
    transition: opacity 320ms ease, transform 320ms ease !important;
    pointer-events: none !important;
  }

  .testimonial-card.active{
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    z-index: 2 !important;
  }

  /* Quote: visually centered */
  .quote{
    width: 100% !important;
    max-width: 34ch !important;
    margin: 0 auto 1rem !important;
    text-align: center !important;
    line-height: 1.65 !important;
    font-size: 1.02rem !important;
  }

  .author{
    width: 100% !important;
    text-align: center !important;
    font-weight: 700 !important;
  }
}


/* Even smaller phones: tighten */
@media (max-width: 480px){
  .testimonials-inner{ padding: 0 0.85rem !important; }

  .testimonial-track{ max-width: 92vw !important; }
  .testimonial-card{ max-width: 92vw !important; }

  .quote{ max-width: 30ch !important; font-size: 0.98rem !important; }

  .testimonial-btn{
    width: 44px !important;
    height: 44px !important;
    font-size: 1.45rem !important;
  }
}


/* =========================================================
   4) NEW COMPONENTS — RESPONSIVE
   Covers: demo banner, featured listings, filter bar,
   listings page, listing detail, photo gallery
   ========================================================= */

/* --- Demo Banner --- */
@media (max-width: 480px){
  .demo-banner{ font-size: 0.72rem; padding: 0.45rem 0.75rem; }
}


/* --- Featured Listings --- */
@media (max-width: 900px){
  .featured-section{ padding: 3rem 1.25rem; }
  .featured-header h2{ font-size: 1.65rem; }
}

/* At 640px the JS switches to perPage=1. CSS must match:
   - card fills the full track width (flex: 0 0 100%)
   - gap is zeroed so the JS offset calc (cardW + gap) equals exactly one card width */
@media (max-width: 640px){
  .featured-section{ padding: 2.5rem 1rem; }

  .featured-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
  }

  .featured-track{ gap: 0; }

  .featured-card{
    flex: 0 0 100%;
    border-radius: 8px;
  }

  .featured-card img,
  .featured-card-placeholder{ height: 210px; }

  .featured-nav{ margin-top: 1rem; }
}


/* --- Filter Bar --- */
@media (max-width: 768px){
  .filter-group select{ min-width: 100px; font-size: 0.84rem; }
}

@media (max-width: 640px){
  .filter-bar-section{ padding: 0 1rem; }

  .filter-bar{
    flex-direction: column;
    gap: 0;
  }

  .filter-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.7rem 0.25rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-1);
  }

  .filter-toggle-caret{
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.72rem;
    opacity: 0.55;
  }

  .filter-toggle.active .filter-toggle-caret{
    transform: rotate(180deg);
  }

  .filter-groups-wrap{
    display: none;
    width: 100%;
    padding: 0.75rem 0 0.5rem;
  }

  .filter-bar.filters-open .filter-groups-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .filter-bar.filters-open .filter-group select{ min-width: 0; width: 100%; }

  .filter-bar.filters-open .filter-apply{
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    margin-top: 0.2rem;
  }

  .filter-bar.filters-open .filter-reset{
    grid-column: 1 / -1;
    text-align: center;
    padding: 0.25rem 0;
  }
}


/* --- Listings Page Grid & Hero --- */
@media (max-width: 768px){
  .listings-hero{ padding: 3.25rem 1.25rem; }

  .listings-grid{
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
  }

  .listings-pagination{ gap: 0.75rem; }
  .pagination-nav{ gap: 0.3rem; }
  .pagination-btn{ padding: 0.45rem 0.65rem; font-size: 0.82rem; min-width: 1.9rem; }
}

@media (max-width: 480px){
  .listings-hero{ padding: 2.5rem 1rem; }
  .listings-grid{ grid-template-columns: 1fr; gap: 1rem; }
  .pagination-btn{ padding: 0.4rem 0.5rem; font-size: 0.78rem; min-width: 1.65rem; }
  .pagination-ellipsis{ padding: 0; font-size: 0.85rem; }
}


/* --- Listing Detail Page --- */
@media (max-width: 768px){
  .detail-section{ padding: 1.75rem 1.25rem 3.5rem; }
  .detail-container{ max-width: 100%; }
  .detail-price{ font-size: 1.75rem; }
  .detail-stats{ gap: 1.5rem; }
  .gallery-main img{ max-height: 320px; }
}

@media (max-width: 480px){
  .detail-section{ padding: 1.25rem 1rem 3rem; }
  .detail-price{ font-size: 1.45rem; }
  .detail-stats{ gap: 1rem; flex-wrap: wrap; }
  .stat-value{ font-size: 1.3rem; }
  .gallery-main img{ max-height: 240px; }
  .gallery-thumb{ width: 58px; height: 44px; }

  .detail-facts-grid{
    grid-template-columns: 1fr 1fr;
  }

  .detail-footer{
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .detail-cta{
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
}