/* ==========================================================================
   SMART IMAGE FIT — companion styles for assets/js/smart-image-fit.js
   Loaded after sharp-theme.css (see inc/enqueue.php).

   Baseline: every photo is shown in full (contain) until the script fits it,
   so nothing is ever cropped even if JavaScript is slow or disabled.
   ========================================================================== */
.hero-equip-item,
.cat-card .cat-img,
.equip-card .card-img,
.card-img-box,
.product-image-container {
    position: relative !important;
    overflow: hidden !important;
}

.hero-equip-item img,
.cat-card .cat-img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Hero strip: the theme darkened the <img> itself with filter: brightness().
   The script paints the photo's background colour around the photo, so the
   dimming must cover the photo AND that colour equally — use an overlay on
   the whole tile instead of a filter on the image. */
.hero-equip-item { background-color: #FFFFFF; }
.hero-equip-item img,
.hero-equip-item:hover img { filter: none !important; }
.hero-equip-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(6, 13, 26, 0.35);
    transition: background 0.4s ease;
    pointer-events: none;
    z-index: 1;
}
.hero-equip-item:hover::after { background: rgba(6, 13, 26, 0.1); }
.hero-equip-item .equip-label { z-index: 2; }

/* Touch devices (phones/tablets) can't hover to reveal the original photo,
   so show it undimmed by default. The label keeps its own gradient for
   legibility. */
@media (hover: none) {
    .hero-equip-item::after,
    .hero-equip-item:hover::after { background: transparent; }
}

/* Scene photos shown in full: blurred, zoomed copy of the same photo behind */
.sif-backdrop {
    position: absolute;
    inset: -24px;
    background-size: cover;
    background-position: center;
    filter: blur(24px) brightness(0.75) saturate(1.1);
    transform: scale(1.1);
    z-index: 0;
    pointer-events: none;
}
/* The photo (or the link wrapping it) sits above the blurred backdrop */
.sif-media {
    position: relative !important;
    z-index: 1 !important;
}
.card-img-box .card-badge-top { z-index: 3 !important; }