/* TGC Sourcing — media layout hotfix — 2026-10-18
   Safe supplemental layer: leaves taxonomy, product data, images and admin untouched.
   Loaded after sourcing-v3.css via partials/header.php. */

/* Every sector card stays inside its grid column. */
.ux-browse-grid { align-items: stretch; }
.ux-browse-grid > .ux-browse-card { min-width: 0; }
.ux-browse-grid > .ux-browse-card.ux-has-photo { overflow: hidden; }
.ux-browse-grid > .ux-browse-card.ux-has-photo > img.ux-browse-photo {
    display: block !important;
    position: static !important;
    width: calc(100% + 56px) !important;
    max-width: none !important;
    height: 180px !important;
    min-height: 0 !important;
    max-height: 180px !important;
    margin: -28px -28px 20px !important;
    flex: 0 0 auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
}

/* Industry detail hero: keep the uploaded image compact. */
.ux-inner-hero img.ux-hero-side-image {
    display: block !important;
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    height: 230px !important;
    max-height: 230px !important;
    margin: 22px 0 4px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 5px !important;
}

/* Industry group banner images. */
.ux-group-media { overflow: hidden; }
.ux-group-media img.ux-group-photo {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 175px !important;
    max-height: 175px !important;
    object-fit: cover !important;
}

/* Product images retain the full product silhouette. */
img.ux-type-hero-photo {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 380px !important;
    object-fit: contain !important;
}

@media (max-width: 860px) {
    .ux-inner-hero img.ux-hero-side-image {
        width: min(100%, 400px) !important;
        height: 210px !important;
        max-height: 210px !important;
    }
}
@media (max-width: 520px) {
    .ux-browse-grid > .ux-browse-card.ux-has-photo > img.ux-browse-photo {
        width: calc(100% + 44px) !important;
        height: 160px !important;
        max-height: 160px !important;
        margin: -22px -22px 16px !important;
    }
    .ux-inner-hero img.ux-hero-side-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 185px !important;
        max-height: 185px !important;
    }
    .ux-group-media img.ux-group-photo {
        height: 140px !important;
        max-height: 140px !important;
    }
}