/* HomePost responsive fixes (mobile/tablet). Loaded after style.css. */
/* All rules are scoped to max-width media queries so desktop (>=992px) is unchanged. */

/* =====================================================================
   Global safety net + shared components (tablet and phone)
   ===================================================================== */
@media (max-width: 991.98px) {
  /* Clip (not hide) stray horizontal overflow; clip keeps position:sticky working */
  .wrapper { overflow-x: clip !important; }

  img, video { max-width: 100%; }
  iframe { max-width: 100% !important; }

  /* Long words / URLs should wrap rather than push the layout */
  h1, h2, h3, h4, h5, h6, p, li, td, th, .title { overflow-wrap: break-word; word-wrap: break-word; }

  /* Calculator tab strips (property details, budget lens): scroll horizontally instead of clipping */
  .calc-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .calc-tabs::-webkit-scrollbar { display: none !important; }
  .calc-tab-btn { flex: 0 0 auto !important; min-height: 44px !important; }

  /* Modals: never wider than the viewport */
  .modal-dialog:not(.modal-fullscreen) { max-width: calc(100vw - 24px) !important; }
}

@media (max-width: 767.98px) {
  /* Theme bug: style.css makes .slider-dib-sm .owl-stage-outer inline-block below 768px,
     so it grows to the full stage width (thousands of px) and the carousel overflows
     the page instead of clipping to one/two slides. */
  .slider-dib-sm.owl-theme .owl-stage-outer,
  .slider-dib-sm .owl-stage-outer {
    display: block !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Bigger owl nav/dots tap targets */
  .owl-theme .owl-nav button.owl-prev,
  .owl-theme .owl-nav button.owl-next { min-width: 40px !important; min-height: 40px !important; }
  .owl-theme .owl-dots .owl-dot { padding: 6px 4px !important; }

  .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* =====================================================================
   Homepage: feature cards ("Swipe to Discover", "Explore on Map", ...)
   ===================================================================== */
@media (max-width: 767.98px) {
  .slider-4-grid .item { padding: 0 !important; height: 100% !important; }
  .slider-4-grid .owl-stage { display: flex !important; }
  .slider-4-grid .owl-item { display: flex !important; }
  .slider-4-grid .owl-item > .item,
  .slider-4-grid .owl-item > .item > a { display: flex !important; flex-direction: column !important; width: 100% !important; }
  .slider-4-grid .owl-item > .item > a > .iconbox-style4 { flex: 1 1 auto !important; }
  .slider-4-grid .iconbox-style4 {
    padding: 18px 16px !important;
    min-height: 0 !important;
    height: 100% !important;
    margin-bottom: 16px !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
  }
  .slider-4-grid .iconbox-style4 .icon {
    width: 48px !important; height: 48px !important; line-height: 48px !important;
    font-size: 22px !important; margin-bottom: 10px !important;
  }
  .slider-4-grid .iconbox-style4 .title { font-size: 16px !important; line-height: 1.3 !important; }
  .slider-4-grid .iconbox-style4 .text { font-size: 13px !important; line-height: 1.45 !important; }
}

/* =====================================================================
   Property details page
   ===================================================================== */
@media (max-width: 767.98px) {
  /* Comments search bar: input's intrinsic width forced the bar to ~500px */
  .sf-commandbar { gap: 10px !important; }
  .sf-searchwrap { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .sf-searchwrap input { min-width: 0 !important; width: 100% !important; }
  .sf-counts { flex-wrap: wrap !important; flex-shrink: 1 !important; max-width: 100% !important; }
  .sf-count-chip { padding: 8px 12px !important; font-size: 13px !important; }
}

/* =====================================================================
   Listings: list view (?view=list)
   style.css positions the stats bar absolutely at the bottom of the card below 992px,
   but it lives in .list-content (not the image), so it sat on top of the price row.
   ===================================================================== */
@media (max-width: 991.98px) {
  .listing-style1.list-view-card .list-content { padding: 14px 16px 12px !important; }
  .listing-style1.list-view-card .list-stats-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    align-self: flex-start !important;
    margin: 6px 0 4px !important;
    background: rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
  .listing-style1.list-view-card .list-stats-bar .stat-item { color: var(--headings-color, #181A20) !important; text-shadow: none !important; }
  .listing-style1.list-view-card .list-stats-bar .stat-item i { color: #717171 !important; text-shadow: none !important; }
  .listing-style1.list-view-card .list-stats-bar .stat-divider { background: rgba(0, 0, 0, 0.15) !important; }
  .listing-style1.list-view-card .list-thumb { height: 220px !important; }
  .listing-style1.list-view-card .list-thumb .dtx-frame,
  .listing-style1.list-view-card .list-thumb a { display: block !important; height: 100% !important; }
}

/* Listing cards: icon buttons are 26px; make them comfortable to tap */
@media (max-width: 767.98px) {
  .listing-style1 .btn-show-on-map { min-width: 36px !important; min-height: 36px !important; }
}

/* =====================================================================
   Suburb page: Walkability score (.wdr-*)
   .wdr-grid falls back to "1fr" below 992px, but 1fr = minmax(auto,1fr) so the
   column grew to its content's min width and the cards poked past the right edge.
   ===================================================================== */
@media (max-width: 991.98px) {
  .wdr-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .wdr-grid > * { min-width: 0 !important; }
  .wdr-score-card { position: relative !important; top: auto !important; }
}
@media (max-width: 575.98px) {
  .wdr-category { padding: 14px 14px 14px 16px !important; }
  .wdr-cat-header { gap: 10px !important; }
  .wdr-cat-icon { width: 38px !important; height: 38px !important; font-size: 16px !important; }
  .wdr-cat-score-bar { width: 60px !important; }
  .wdr-cat-score-num { font-size: 18px !important; }
  .wdr-cat-toggle { margin-left: 0 !important; }
  .wdr-legend { flex-wrap: wrap !important; row-gap: 6px !important; }
  .wdr-score-card { padding: 22px 16px !important; }
}

/* =====================================================================
   Insights (.mi-*)
   ===================================================================== */
@media (max-width: 767.98px) {
  .mi-chart-box { padding: 20px 16px !important; }
  .mi-movers-card { padding: 18px 14px !important; }
  .mi-filter-bar { padding: 14px !important; gap: 10px !important; }
  .mi-temp-info, .mi-temp-meter-wrap { min-width: 0 !important; flex-basis: 100% !important; }
  .mi-region-grid { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)) !important; }
  /* Suburb data table: keep rows on one line and let the table scroll sideways
     (its .table-responsive wrapper already scrolls) instead of wrapping into tall rows */
  .mi-data-table th, .mi-data-table td { white-space: nowrap !important; }
  .mi-table-pagination { flex-wrap: wrap !important; gap: 10px !important; }
  .mi-page-btn { min-width: 40px !important; min-height: 40px !important; }
}

/* =====================================================================
   Pricing (.ps-*): stacked plan cards had no vertical gap between them
   ===================================================================== */
@media (max-width: 1199.98px) {
  .pricing-section-v2 .row > [class*="col-"] { margin-bottom: 24px !important; }
}
@media (max-width: 767.98px) {
  .pricing-section-v2 .ps-card { height: auto !important; }
}
@media (max-width: 575.98px) {
  .pricing-section-v2 .ps-card { padding: 26px 20px !important; }
}

/* =====================================================================
   Reports (.pgw-*): sticky cart bar wrapped into a lopsided second row
   ===================================================================== */
@media (max-width: 575.98px) {
  .pgw-cartbar-inner { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important; gap: 10px !important; }
  .pgw-cartbar-actions { flex: 1 1 100% !important; }
  .pgw-cartbar-clear { min-height: 44px !important; }
  .pgw-cartbar-checkout { flex: 1 !important; justify-content: center !important; min-height: 44px !important; padding: 12px 18px !important; }
}

/* Reports: "Exclusive - one buyer only" block (.bir-casino) had no side gutter
   (its inner container is max-width 1199px with 0 padding) */
@media (max-width: 1239.98px) {
  .bir-casino-inner { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 575.98px) {
  /* Photo card: the two top tags and the address/specs overlapped on a short image */
  .bir-photo-wrap img { min-height: 260px !important; }
  .bir-photo-tag { top: 12px !important; left: 12px !important; max-width: calc(100% - 140px) !important; padding: 6px 10px !important; font-size: 11px !important; line-height: 1.3 !important; white-space: normal !important; }
  .bir-photo-tag-right { top: 12px !important; right: 12px !important; font-size: 10px !important; padding: 5px 9px !important; }
  .bir-photo-bottom { left: 12px !important; right: 12px !important; bottom: 12px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .bir-photo-address { font-size: 14px !important; }
}

/* =====================================================================
   News: topic chips wrapped into 5 rows on phones; make them one swipeable row
   ===================================================================== */
@media (max-width: 575.98px) {
  .hpn-topic-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin-left: -12px !important; margin-right: -12px !important;
    padding: 2px 12px 6px !important;
    scroll-padding-left: 12px !important;
  }
  .hpn-topic-bar::-webkit-scrollbar { display: none !important; }
  .hpn-topic-btn { flex: 0 0 auto !important; white-space: nowrap !important; min-height: 40px !important; }
}

/* =====================================================================
   Homepage: "ARE.AI Powered" block (section.about-us)
   The heading is position:absolute (inline style) and the image column has a
   144px inline top padding to make room for it; on tablet the heading ran into
   the right-hand column. Put it back in flow below 992px.
   ===================================================================== */
@media (max-width: 991.98px) {
  section.about-us > .container > div[style*="position: absolute"] {
    position: relative !important;
    margin-left: 0 !important;
    z-index: 2 !important;
  }
  section.about-us > .container > div[style*="position: absolute"] h2.title { font-size: 32px !important; margin-bottom: 20px !important; }
  section.about-us .row > [class*="col-"] > .position-relative[style*="padding-top"] { padding-top: 0 !important; }
  section.about-us .about-box-1 .text[style*="justify"] { text-align: left !important; }
  section.about-us .about-box-1 { margin-top: 24px; }
}
@media (max-width: 575.98px) {
  section.about-us > .container > div[style*="position: absolute"] h2.title { font-size: 28px !important; }
  section.about-us .about-box-1 h3.title { font-size: 22px !important; }
}

/* Homepage CTA ("Start Listing or Buying..."): .our-cta2 has margin-bottom:-150px from the
   theme, built for the old footer's 150px+ top padding. The new footer (.hpu-footer) has
   48px, so the CTA covered the footer's first lines. (Desktop has the same overlap - see report.) */
@media (max-width: 991.98px) {
  .our-cta2:has(+ .hpu-footer) { margin-bottom: 0 !important; padding-bottom: 48px !important; }
}

/* Homepage testimonials: quote was 22px with a 45px line-height on phones */
@media (max-width: 575.98px) {
  .testi-text { font-size: 18px !important; line-height: 1.55 !important; }
}