/* ==========================================================================
   Hero images

   The hero image on every landing page used to be an empty
   <div class="bb-hero"></div> styled purely with a CSS background-image.
   A background image has no aspect ratio of its own, so as the .hero
   section changed height at each breakpoint (and with .hero having
   overflow:hidden), the image was liable to be visually cropped or cut
   off - most noticeably on mobile.

   This replaces that div with a real <img class="bb-hero-img">. Using
   object-fit: contain guarantees the whole image is always visible and
   never distorted or cropped, whatever size its box ends up being. On
   mobile the image is taken out of absolute positioning entirely and
   just flows underneath the hero text, which is what actually stops it
   being clipped by the section's overflow:hidden.

   IMPORTANT: sizing is done with WIDTH percentages/max-width, not height
   percentages. The .hero section's height comes from its content (it's
   not an explicit height), and a height:% on an absolutely positioned
   descendant of a content-sized ancestor is unreliable across browsers -
   that's what caused the image to render enormous and badly placed on
   the first pass of this fix. Width is always well-defined against the
   containing block, so it's the safe axis to size from; height is then
   left to "auto" and capped with a viewport-relative max-height so it
   can never run away regardless of section height.

   Planit Scotland - 2026-08-14
   ========================================================================== */

.bb-hero-img {
    position: absolute;
    bottom: 0;
    /* Align with the .container's right edge, not the raw viewport edge -
       the .hero section itself is full-bleed, so right:0 alone hugs the
       browser window on wide screens instead of lining up with the text
       column above it. 1140px matches Bootstrap's .container max-width
       at the lg breakpoint used across this theme. */
    right: max(15px, calc((100vw - 1140px) / 2));
    width: 42%;
    max-width: 460px;
    height: auto;
    max-height: 65vh;
    object-fit: contain;
    object-position: bottom right;
    pointer-events: none;
}

@media (max-width: 992px) {
    .bb-hero-img {
        position: static;
        display: block;
        width: 60%;
        max-width: 260px;
        height: auto;
        max-height: 40vh;
        margin: 24px auto 0;
        object-fit: contain;
    }
}

/* ---- Home page + New CTA page (share the same "dec23-hero" hero) ---- */
@media (min-width: 993px) {
    .dec23-hero .bb-hero-img {
        width: 46%;
        max-width: 480px;
    }
}

/* ---- Info Hub ---- */
@media (min-width: 993px) {
    .info-hub-hero .bb-hero-img {
        width: 42%;
        max-width: 440px;
        margin-right: -60px;
    }
}

/* ---- BrawBand page + BrawPhone page (share the Brawphone hero image) ---- */
@media (min-width: 993px) {
    .brawband-page-hero .bb-hero-img,
    .brawphone-hero .bb-hero-img {
        width: 42%;
        max-width: 440px;
    }
}

/* ---- Refer a friend ---- */
@media (min-width: 993px) {
    .refer-page-hero .bb-hero-img {
        width: 46%;
        max-width: 480px;
    }
}

/* ---- Business Broadband + B2B Referral (share the "business-hero" hero, each with its own image) ---- */
@media (min-width: 993px) {
    .business-hero .bb-hero-img {
        width: 42%;
        max-width: 440px;
        bottom: 0;
        right: max(15px, calc((100vw - 1140px) / 2));
        object-position: bottom right;
    }
}
@media (max-width: 992px) {
    .business-hero .bb-hero-img {
        width: 50%;
        max-width: 260px;
        right: auto;
    }
}

/* ---- Business Phone (its own image, same box as business-hero) ---- */
@media (min-width: 993px) {
    .business-hero.phone-hero .bb-hero-img {
        width: 42%;
        max-width: 440px;
    }
}

/* ---- Home page "sale-bg" hero (set via WP Customizer Additional CSS, not
   a theme file - .hero.sale-bg .bb-hero used a different, higher-specificity
   image swap than the plain .dec23-hero rule, with its own square crop for
   mobile). t-home.php now renders TWO separate <img> tags (desktop crop +
   mobile square crop) toggled with plain CSS display, rather than a
   <picture><source media> pair - the WebP Converter for Media plugin
   auto-injects its own unconditional webp <source> ahead of any hand-written
   <source media=...>, which always wins in a <picture> and silently defeats
   the breakpoint swap. Two independent <img> elements can't be reordered
   like that, since each is rewritten into its own private <picture> by that
   plugin, so this is more robust across the site's optimisation stack. ---- */
.bb-hero-img--desktop { object-position: top; }
.bb-hero-img--mobile { display: none; }
@media (max-width: 992px) {
    .bb-hero-img--desktop { display: none; }
    .bb-hero-img--mobile { display: block; object-position: top center; }
}