/* ==========================================================================
   Avani Abode - Responsive overrides
   ========================================================================== */

/* Mobile Hero Reference Match (client feedback): .hero__mobile-stats is a
   new sibling element after </section class="hero"> in index.php, hidden
   by default so tablet/desktop never render it, then switched on only
   inside the existing Mobile (<=767.98px) block below. This single
   default-hide declaration is the only rule outside that media query -
   it mirrors the exact same pattern already used in style.css for
   .top-bar__mobile-enquire (display:none by default, shown via its own
   media query), applied here instead so style.css stays untouched. */
.hero__mobile-stats { display: none; }

/* Reserve space for the mobile sticky CTA bar so it never covers content */
@media (max-width: 991.98px) {
  body { padding-bottom: 60px; }
}

/* ---------------- Tablet (≤991px) ---------------- */
@media (max-width: 991.98px) {
  .hero { min-height: 0; }
  .hero__title { font-size: 2.1rem; }
  .hero__form-card { margin-top: 1.5rem; }
  .section { padding: 3rem 0; }
  .section-title { font-size: 1.6rem; }
  .floorplan-card__zoom, .master-plan-frame__zoom { opacity: 1; }
}

/* ---------------- Mobile (≤767px) ---------------- */
@media (max-width: 767.98px) {
  .top-bar__logo img { height: 55px; }
  .top-bar__mobile-enquire { padding: .5rem .9rem; font-size: .72rem; }
  .section-tabs__nav { overflow-x: auto; scrollbar-width: none; }
  .section-tabs__nav::-webkit-scrollbar { display: none; }
  .section-tabs .nav-link { padding: .75rem .6rem; font-size: .78rem; }

  .hero { padding-top: 1.5rem; }

  /* Hero Banner Visual Fix v5 (client feedback): root cause identified via
     DevTools inspection - the RERA area looked blurred/inconsistent because
     .hero__strip (style.css, untouched) carries its own
     `backdrop-filter: blur(2px)`, which blurs the hero photo directly
     behind that strip. That, combined with the strip's separate dark
     background, is what made the tint look uneven - not the overlay
     itself. Live measurement re-confirmed .hero__overlay (position:absolute;
     inset:0 inside .hero, style.css, untouched) already spans the FULL
     .hero box top-to-bottom (identical rect to .hero), so no structural or
     z-index change is needed: .hero__overlay has z-index:auto while both
     .hero__inner and .hero__strip have z-index:1 (style.css), which already
     stacks the overlay below the text/strip and above the image - exactly
     the required order. Set back to the requested flat 0.18 now that the
     strip's blur (removed just below) is no longer distorting how the tint
     reads. No gradient, no blur, no backdrop-filter on this element. */
  .hero__overlay {
    background: rgba(0, 0, 0, 0.18);
  }

  /* Hero Banner Visual Fix v7 (client feedback): the RERA row should no
     longer read as a separate dark strip on mobile - the hero photo (with
     the existing .hero__overlay tint) should continue visibly behind the
     RERA text instead. Mobile-only: strips .hero__strip of its background,
     both borders, and the blur, leaving it as a plain transparent
     container so only the RERA text itself renders, directly over the
     image. .hero__strip is NOT hidden (display is untouched, still
     block/flex from style.css) - only its own visual chrome is removed.
     RERA text color is untouched here: style.css's existing
     .hero__rera { color: rgba(255,255,255,.92) } already reads clearly
     against the image+overlay, so it did not need changing. The stats row
     inside .hero__strip is unaffected - .hero__strip-stats is still
     display:none on mobile (existing rule above, untouched) and
     .hero__mobile-stats (the separate white/grey block) is untouched.
     Desktop/tablet .hero__strip keeps its full styling and blur -
     completely untouched by this mobile-only override. */
  .hero__strip {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
    border-bottom: none;
  }

  .hero__title { font-size: 1.6rem; }
  .hero__subtitle { font-size: .95rem; }
  /* Hero Banner Visual Fix v3: the location icon is styled gold globally
     (style.css: .hero__subtitle i { color: var(--gold); }). Title and
     subtitle TEXT already render white via the existing .hero { color:#fff }
     rule, so only the icon needs an explicit override here, scoped to
     mobile only - desktop/tablet keep the gold icon untouched. */
  .hero__subtitle i { color: #fff; }
  .hero__form-card { padding: 1.25rem; border-radius: 8px; }
  .hero__form-card { display: none; }
  .hero__rera { font-size: .82rem; }
  .hero__rera--top { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

  /* Mobile Hero Reference Match (client feedback): show the full hero
     photo (matches the reference site's object-fit:fill behavior) instead
     of the existing cover crop. Mobile-only - the base .hero rule in
     style.css and the Issue #1 desktop rule are both untouched. */
  .hero { background-size: 100% 100%; }

  /* Hide only the existing stats row inside .hero__strip on mobile - RERA
     (a sibling of this row, not touched here) stays visible over the
     image exactly as before. Tablet/desktop keep this row untouched. */
  .hero__strip-stats { display: none; }

  /* New mobile-only stats block (sibling of .hero, see index.php) - white
     outer background with grey individual stat boxes, matching the
     reference site's separate stats section. Switched on here;
     default-hidden rule is above, outside this media query (see comment
     there). Hero Banner Visual Fix v3: outer background changed from grey
     (#8f8f8f) to white so it reads as a distinct section instead of one
     uniform grey block; the individual .hero__mobile-stats-item boxes
     below keep their existing grey (#999) unchanged. */
  .hero__mobile-stats {
    display: block;
    background: #fff;
    padding: 1.1rem 0;
  }
  .hero__mobile-stats-item {
    background: #999;
    color: #fff;
    border-radius: 6px;
    padding: .65rem .5rem;
  }
  .hero__mobile-stats-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
    margin-bottom: .3rem;
  }
  .hero__mobile-stats-value {
    font-size: 1rem;
    font-weight: 700;
  }
  .hero__mobile-stats-value--accent { color: #fff; }

  .hero__strip-value { font-size: 1rem; }
  .hero__strip-label { font-size: .68rem; }

  .section { padding: 2.25rem 0; }
  .section-title { font-size: 1.4rem; margin-bottom: 1.5rem; }
  .section-body-text { font-size: .92rem; }

  /* Price table -> stacked cards */
  .price-table thead { display: none; }
  .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table tr {
    border: 1px solid #eceef2;
    border-radius: var(--radius);
    margin-bottom: .85rem;
    background: #fff;
    padding: .25rem .25rem;
  }
  .price-table td {
    border: none;
    padding: .4rem .9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .price-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: .75rem;
    text-transform: uppercase;
  }
  .price-table td[data-label="Enquire"] { justify-content: flex-end; padding-top: .6rem; padding-bottom: .75rem; }
  .price-table td[data-label="Enquire"]::before { content: none; }

  /* Amenities: smaller cards, natural swipe */
  .amenities-carousel { padding: 0 2.25rem; }
  .amenity-card { flex: 0 0 190px; height: 190px; }
  .amenity-card--icon .amenity-card__icon { width: 50px; height: 50px; }
  .amenity-card--icon .amenity-card__icon i { font-size: 1.3rem; }
  .amenity-card--icon .amenity-card__label { font-size: .85rem; }
  .amenity-card__overlay-text { font-size: 1.05rem; }

  /* Gallery: single column on small phones */
  .gallery-grid { grid-template-columns: 1fr; }

  .floorplan-card__meta { font-size: .68rem; padding-left: 2.2rem; }

  .developer-contact-card { padding: 1.25rem; }
  .developer-logo { max-height: 130px; }
  .location-map { height: 300px; }

  .site-visit-banner .btn { width: 100%; }
  .site-visit-banner .d-flex.justify-content-between { flex-direction: column; align-items: flex-start !important; }

  /* Hide the horizontal in-page section nav on mobile only (client
     feedback). Exact selector confirmed by inspecting includes/section-nav.php:
     the whole nav is <nav class="section-tabs" id="sectionTabs"> - a single
     top-level element, so hiding .section-tabs removes the entire bar
     (tab links + phone number) in one rule, with nothing left behind.
     main.js reads tabs.offsetHeight defensively (falls back to 0) and only
     binds click/scroll behavior to links that are simply no longer visible,
     so this causes no JS errors. Header, hero, RERA, mobile stats, and the
     Overview section itself are untouched - Overview now sits directly
     after the stats block. Tablet/desktop keep this nav untouched. */
  .section-tabs { display: none; }
}

/* Desktop Hero Banner Visual Fix (client feedback): "same clean treatment
   as mobile, without the dark band" - the dark navy .hero__strip band
   (background: rgba(8,16,36,.62) + blur(2px) + top/bottom borders,
   style.css, untouched there) sits behind the RERA text and the
   units/property-type/starting-price stats row on every viewport style.css
   doesn't already override. The mobile fix above already strips this same
   chrome at <=767.98px; this mirrors it for tablet+desktop (>=768px) so
   the hero photo (with the existing .hero__overlay tint, style.css,
   untouched) shows through continuously with no rectangular band, exactly
   like the approved mobile version. Scoped with min-width so the mobile
   media query above is completely untouched - not merged, not modified.
   Only .hero__strip's own background/blur/borders are removed; its
   position, z-index and padding (which sets the strip's height) are left
   exactly as style.css defines them, so hero height/layout do not change.
   RERA text and the stats row/values keep their own existing color rules
   from style.css (.hero__rera, .hero__strip-label/-value/-value--accent)
   untouched, so everything stays fully readable against the image +
   overlay - nothing is hidden, no HTML changed. */
@media (min-width: 768px) {
  .hero__strip {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
    border-bottom: none;
  }

  /* Location marker icon (client feedback): style.css sets this gold by
     default (.hero__subtitle i { color: var(--gold); }). The mobile block
     above already overrides it to white at <=767.98px; this mirrors that
     for tablet+desktop so the icon is white everywhere. Only the icon's
     color changes - .hero__subtitle's text, layout and the title are
     untouched, no HTML modified. */
  .hero__subtitle i {
    color: #fff;
  }
}

/* Small phones */
@media (max-width: 420px) {
  .hero__title { font-size: 1.4rem; }
  .amenity-card { flex: 0 0 160px; height: 160px; }
  .info-tile__value { font-size: .92rem; }
}

/* Never allow horizontal scroll.
   IMPORTANT: overflow-x:hidden on BOTH html and body turns body into its
   own scroll container in some browsers, which breaks `position: sticky`
   on the nav (it stops pinning and just scrolls away). Keep the clip on
   html only; body just gets a max-width guard. */
html { overflow-x: hidden; }
body { max-width: 100%; }