/* ============================================================
   mobile-fixes.css — Global Mobile Image Quality Improvements
   Fixes blurry / low-quality images on retina / HiDPI screens
   ============================================================ */

/* ------------------------------------------------------------------
   1. ALL <img> elements: force bicubic interpolation (IE fallback)
      and opt-out of any accidental pixelation
   ------------------------------------------------------------------ */
img {
    -ms-interpolation-mode: bicubic;   /* IE8 legacy */
    image-rendering: auto;             /* crisp, browser-native default */
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------
   2. Triple-banner cards: remove the GPU-compositing hint
      (transform: translateZ(0)) from the base state.
      That hint creates a texture layer on mobile Safari that is
      rasterised at a lower DPR, making background images look blurry.
      We keep it only on :hover (desktop) where it helps with animation.
   ------------------------------------------------------------------ */
.triple-banner-item {
    /* GPU compositing must NOT be forced in the base state */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Ensure the background renders sharply */
    background-attachment: scroll;
}

/* ------------------------------------------------------------------
   3. Cover-background sections (hero banners on property / refurb pages)
      Same fix: prevent unnecessary compositing layers
   ------------------------------------------------------------------ */
.cover-background {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-attachment: scroll;
}

/* ------------------------------------------------------------------
   4. Figure slide-animation wrappers:
      The JS anime library clips these with overflow:hidden + transform.
      On mobile that GPU layer degrades the photo inside.
      We undo the transform after the animation has already played via
      the will-change / backface trick.
   ------------------------------------------------------------------ */
figure img,
figure picture {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: auto;
}

/* ------------------------------------------------------------------
   5. High-DPI / Retina specific rules (iPhone, iPad, Retina MacBook)
   ------------------------------------------------------------------ */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 1.5dppx),
       only screen and (min-resolution: 144dpi) {

    /* Explicitly request the highest quality interpolation available */
    img {
        image-rendering: -webkit-optimize-contrast; /* WebKit HiDPI quality hint */
        image-rendering: crisp-edges;             /* Modern CSS standard fallback */
    }

    /* Triple-banner: on retina we want NO extra GPU layer */
    .triple-banner-item {
        -webkit-transform: none;
        transform: none;
        will-change: auto;
    }

    /* Keep the hover lift working on non-touch (desktop retina) */
    @media (hover: hover) and (pointer: fine) {
        .triple-banner-item:hover {
            -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
        }
    }
}

/* ------------------------------------------------------------------
   6. Mobile-only rules (≤ 767px — touch devices)
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {

    /* Triple-banner: hard reset of any transforms on mobile */
    .triple-banner-item {
        -webkit-transform: none !important;
        transform: none !important;
        will-change: auto;
    }

    /* Marquee property photos */
    .marquee-item img {
        image-rendering: auto;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* Testimonial / services panel background covers */
    .services-box-img .cover-background,
    .xs-h-350px .cover-background {
        -webkit-transform: none;
        transform: none;
    }

    /* Property / house card images */
    .border-radius-6px.overflow-hidden img,
    .image img {
        image-rendering: auto;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* General figure images — remove any inherited transform blur */
    figure img {
        -webkit-transform: none;
        transform: none;
        will-change: auto;
    }
}