/* ============================================================
   RJ THEME — RESPONSIVE PATCH
   Fixes critical and major responsive issues from code audit.
   Loaded last so overrides land cleanly on all other sheets.
   ============================================================ */

/* FOR HOME PAGE */
@media (min-width:481px) and (max-width:1024px) {
	 .home-hero__title {
		width: 50%;
	}
	.home-hero__overlay-image {
		width: 50%;
	}
  .brandmark-logo {
    display: none;
  }
}

@media (max-width:480px) {
    .home-hero__title {
		width: 100%;
	}
	.home-hero__overlay-image {
		width: 100%;
	}
}

@media (max-width: 767px) {
		.home-properties__grid,
	.home-insights__grid
	{
		grid-template-columns: 1fr;
	}
    .about-hero__quote-content--how-it-works {
    padding-top: 0px;
  }
    .suburb-properties__grid,
  .suburb-testimonials__carousel {
    grid-template-columns: 1fr;
  }
}

@media (min-width:481px) and (max-width:1440px) {
.home-suburb-guide__media {
    aspect-ratio: 16 / 9;
}
}

@media (max-width: 1440px) {
    .home-suburb-guide__content {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   About page
   ============================================================ */

@media (min-width:481px) and (max-width:1024px) {
  .brandmark-logo {
    display: none;
  }
}

/* ============================================================
what we buy page 
============================================================ */

@media (max-width: 1440px) {
	.filter-tabs {
		width: 100%;
		justify-content: center;
		overflow: auto;
	}

	.filter-tabs__item {
		flex: 1;
		padding: 12px 12px !important;
		min-width: fit-content;
		font-size: 0.875rem;
	}
    
    .what-we-buy__filters {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
    padding-bottom: 0;
    }
    .filter-group--secondary .filter-select + .filter-select {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    }
}
/* ============================================================
   Individual property page
   ============================================================ */
.property-details-wrapper {
    width: 100%;
    max-width: 1440px;
}

@media(max-width: 1024px) {
    .properties-container {
        padding: 20px 0px !important;
    }
    .property-back-wrapper {
        padding: 0px;
        margin-bottom: 10px;
    }
    .home-stats__grid {
        margin: 0px;
                padding: 0px 0px 40px;
    }
    .large-gallery-carousel__dot {
        width: 6px;
        height: 6px;
    }
 
    .about-hero__image img {
        object-fit: cover;
        height: 100%;
    }
}

@media (max-width:480px) {
   .about-hero__image {
        aspect-ratio: 1;
    }
}

@media (min-width:481px) and (max-width:1440px) {

       .about-hero__image {
        aspect-ratio: 16/9;
    }
}






/* ============================================================
   CRITICAL FIX 2
   blog-post-container: hard-coded width: 1440px
   overflows viewport on screens 1025–1440px wide.
   SOURCE: style-single-blog.css line 10
   ============================================================ */
.blog-post-container {
    width: 100%;
    max-width: 1440px;
}


/* ============================================================
   CRITICAL FIX 3
   insights-featured: hard-coded width: 1440px
   overflows viewport on screens 769–1440px (only had 768px override).
   SOURCE: style-insights.css line 48
   ============================================================ */
.insights-featured {
    width: 100%;
    max-width: 1440px;
}

@media (max-width: 1024px) {
    .insights-featured {
        margin: 0 20px;
        padding: 40px 20px;
        max-width: calc(100% - 40px);
    }
}


/* ============================================================
   CRITICAL FIX 4
   property-gallery__image: width: 60vw inside a 2-column grid.
   Two 60vw items = 120vw total — guaranteed horizontal scroll.
   SOURCE: style.css line 1079
   ============================================================ */
.property-gallery__image {
    width: 100%;
}


/* ============================================================
   CRITICAL FIX 5
   property-item at ≤1024px: width: 90vw inside a 1fr grid.
   Overflows padded containers; let the grid column handle width.
   SOURCE: style-buy.css line 398
   ============================================================ */
@media (max-width: 1024px) {
    .property-item {
        width: 100%;
    }
}


/* ============================================================
   CRITICAL FIX 6
   large-gallery-carousel: margin-left: calc((100vw - 1440px) / 2)
   produces a NEGATIVE value on screens narrower than 1440px,
   shifting the entire carousel off-screen to the left.
   Only reset at 768px in original — leaves 769–1440px broken.
   SOURCE: style-gallery-carousel.css line 8
   ============================================================ */
@media (max-width: 1440px) {
    .large-gallery-carousel {
        margin-left: 0;
        padding-left: 20px;
    }
}


/* ============================================================
   CRITICAL FIX 7
   large-gallery-carousel nav--next: right: calc((100vw - 1350px) / 2)
   goes negative on screens narrower than 1350px, pushing the
   arrow button off the right edge of the screen.
   Only fixed at 768px in original — leaves 769–1350px broken.
   SOURCE: style-gallery-carousel.css line 81
   ============================================================ */
@media (max-width: 1350px) {
    .large-gallery-carousel__nav--next {
        right: 20px;
    }
}


/* ============================================================
   MAJOR FIX 1
   align-items: anchor-center — CSS Anchor Positioning value
   with near-zero browser support (Chrome 125+ only).
   Ignored entirely in Safari and Firefox.
   SOURCE: style.css line 1787
   ============================================================ */
.site-header--mobile-open .site-header__btn {
    align-items: center;
}


/* ============================================================
   MAJOR FIX 2
   .title-left: width: 40% — no responsive override.
   At 375px, 40% = ~150px for a heading — far too narrow.
   SOURCE: style.css line 328
   ============================================================ */
@media (max-width: 768px) {
    .title-left {
        width: 100%;
    }
}


/* ============================================================
   MAJOR FIX 3
   .w-33 on home stats headline (front-page.php line 428).
   33% width is too narrow on tablet (769–1024px range).
   Scoped to .home-stats to avoid affecting other .w-33 uses.
   SOURCE: front-page.php line 428, utils.css
   ============================================================ */
@media (max-width: 1024px) {
    .home-stats .w-33 {
        width: 100%;
    }
}


/* ============================================================
   MAJOR FIX 4
   .media-block__container starts at transform: scale(1.8).
   Before scroll-reveal JS fires, the scaled-up element bleeds
   well outside the viewport. Clip it on the parent section.
   SOURCE: style-about.css line 196
   ============================================================ */
.media-block {
    overflow: hidden;
}


/* ============================================================
   MAJOR FIX 5
   Contact form submit button: padding shrinks to 6px on mobile.
   This fails the 44×44px minimum touch target guideline.
   SOURCE: forms.css line 292
   ============================================================ */
@media (max-width: 768px) {
    .gform_wrapper form.rj-contact .gform_button {
        padding: 14px 24px;
        width: 100%;
        text-align: center;
    }
}


/* ============================================================
   MINOR FIX 1
   .cta-block-2__title: width: 70% — no mobile override exists.
   When the CTA block 2 stacks to 1-col at 768px, the title
   stays at 70% and wastes horizontal space.
   SOURCE: style-home.css line 166
   ============================================================ */
@media (max-width: 768px) {
    .cta-block-2__title {
        width: 100%;
    }
}


/* ============================================================
   MINOR FIX 2
   Testimonial cards at ≤1024px: overflow-y: scroll is applied
   to the review text, adding visible scrollbars inside the
   marquee carousel. Replace with proper line-clamp.
   SOURCE: style-home.css line 1017
   ============================================================ */
@media (max-width: 1024px) {
    .testimonial-card__review {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
    }
}


/* ============================================================
   MINOR FIX 3
   Google Maps embed on suburb page: inline style="height:550px"
   takes up most of the viewport on mobile. Override with
   !important to beat the inline style.
   SOURCE: template-suburb-insights.php line 516
   ============================================================ */
@media (max-width: 768px) {
    #suburb-google-map {
        height: 300px !important;
    }
}


/* ============================================================
   MINOR FIX 4
   Mobile footer address row: inline display:inline-flex +
   justify-content:space-between on a single <p> can cause
   text overlap on very narrow screens (320px). Let it wrap.
   SOURCE: footer.php line 392
   ============================================================ */
@media (max-width: 480px) {
    .site-footer__mobile .site-footer__address-line {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
    }
}