/* ==========================================================================
   Media surfaces, Gallery normalization and adaptive image treatment
   ========================================================================== */

:root {
    --msdl-card-border: #cbd4da;
    --msdl-card-shadow: 0 2px 4px rgba(15, 29, 40, .045), 0 14px 36px rgba(15, 29, 40, .09);
    --msdl-card-shadow-hover: 0 3px 8px rgba(15, 29, 40, .06), 0 22px 52px rgba(15, 29, 40, .14);
    --msdl-media-frame-border: #c5cfd5;
}

/* White cards need enough depth to remain legible against the off-white canvas. */
body.msdl-ui .msdl-home-actions > .wp-block-column,
body.msdl-ui .msdl-service-card,
body.msdl-ui .msdl-engine-card,
body.msdl-ui .msdl-value-card,
body.msdl-ui .msdl-contact-card,
body.msdl-ui .msdl-contact-form-wrap,
body.msdl-ui .msdl-spec-table,
body.msdl-ui.msdl-route-product .msdl-engines-section > .msdl-shell,
body.msdl-ui.msdl-route-product .msdl-engine-detail > .msdl-shell,
body.msdl-ui.msdl-route-used-detail .msdl-source-page > .msdl-shell {
    border-color: var(--msdl-card-border);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
    box-shadow: var(--msdl-card-shadow);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.msdl-ui .msdl-home-actions > .wp-block-column:hover,
    body.msdl-ui .msdl-service-card:hover,
    body.msdl-ui .msdl-engine-card:hover,
    body.msdl-ui .msdl-contact-card:hover {
        border-color: #b7c3ca;
        box-shadow: var(--msdl-card-shadow-hover);
    }
}

/* Gallery: explicitly override WordPress core gallery flex widths. The previous
   core width calculation was surviving inside our grid and produced the tall,
   narrow thumbnails seen on the supplied screenshot. */
body.msdl-ui .msdl-source-gallery,
body.msdl-ui .wp-block-gallery.msdl-source-gallery {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.5vw, 18px) !important;
    align-items: stretch;
    width: 100%;
}

body.msdl-ui .msdl-source-gallery.has-nested-images figure.wp-block-image,
body.msdl-ui .msdl-source-gallery figure.wp-block-image {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex-basis: auto !important;
    align-self: stretch !important;
    margin: 0 !important;
    min-width: 0;
    min-height: 0;
}

body.msdl-ui .msdl-source-gallery figure:nth-child(1),
body.msdl-ui .msdl-source-gallery figure:nth-child(6) {
    grid-column: auto !important;
}

body.msdl-ui .msdl-source-gallery .msdl-gallery-open,
body.msdl-ui .msdl-source-gallery figure.wp-block-image > img {
    position: relative;
    display: block;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 1px solid #c8d1d7;
    border-radius: 16px;
    background: #dfe5e8;
    box-shadow: 0 2px 4px rgba(15, 29, 40, .05), 0 14px 34px rgba(15, 29, 40, .10);
    isolation: isolate;
}

body.msdl-ui .msdl-source-gallery .msdl-gallery-open::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30);
}

body.msdl-ui .msdl-source-gallery .msdl-gallery-open::after {
    content: "+";
    position: absolute;
    z-index: 3;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    color: #fff;
    background: rgba(17, 28, 37, .72);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    font-size: 21px;
    line-height: 1;
    opacity: .82;
    transform: translateY(2px);
    transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease;
    pointer-events: none;
}

body.msdl-ui .msdl-source-gallery .msdl-gallery-open img,
body.msdl-ui .msdl-source-gallery figure.wp-block-image > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.msdl-ui .msdl-source-gallery .msdl-gallery-open {
        transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }

    body.msdl-ui .msdl-source-gallery .msdl-gallery-open img {
        transition: transform 320ms cubic-bezier(.2, .7, .2, 1), filter 220ms ease;
    }

    body.msdl-ui .msdl-source-gallery .msdl-gallery-open:hover,
    body.msdl-ui .msdl-source-gallery .msdl-gallery-open:focus-visible {
        transform: translateY(-5px);
        border-color: #aebbc3;
        box-shadow: 0 4px 10px rgba(15, 29, 40, .07), 0 24px 52px rgba(15, 29, 40, .16);
    }

    body.msdl-ui .msdl-source-gallery .msdl-gallery-open:hover img,
    body.msdl-ui .msdl-source-gallery .msdl-gallery-open:focus-visible img {
        transform: scale(1.025);
        filter: saturate(1.02) contrast(1.015);
    }

    body.msdl-ui .msdl-source-gallery .msdl-gallery-open:hover::after,
    body.msdl-ui .msdl-source-gallery .msdl-gallery-open:focus-visible::after {
        opacity: 1;
        transform: none;
        background: var(--msdl-red);
    }
}

/* Adaptive treatment for images whose actual source has a predominantly white
   background. the Adaptive Media component assigns these classes after sampling the image pixels;
   new images receive the same treatment automatically. */
body.msdl-ui img.msdl-image-light-source {
    border-color: var(--msdl-media-frame-border);
}

body.msdl-ui .msdl-home-slide-image.msdl-image-light-source {
    padding: clamp(18px, 2.5vw, 32px);
    border: 1px solid var(--msdl-media-frame-border);
    background: linear-gradient(145deg, #e5eaed 0%, #f0f3f5 58%, #dfe5e8 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.85) inset,
        0 0 0 1px rgba(16,24,32,.035),
        0 24px 64px rgba(0,0,0,.30);
}

body.msdl-ui .msdl-feature-image.msdl-media-light-source,
body.msdl-ui figure.wp-block-image.msdl-media-light-source,
body.msdl-ui .msdl-media-light-source.msdl-image-frame {
    padding: clamp(10px, 1.6vw, 18px);
    border: 1px solid var(--msdl-media-frame-border);
    border-radius: 18px;
    background: linear-gradient(145deg, #dfe5e8, #eef2f4);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 2px 5px rgba(15,29,40,.05),
        0 18px 44px rgba(15,29,40,.12);
}

body.msdl-ui .msdl-feature-image.msdl-media-light-source img,
body.msdl-ui figure.wp-block-image.msdl-media-light-source img,
body.msdl-ui .msdl-media-light-source.msdl-image-frame img {
    display: block;
    border: 1px solid rgba(16,24,32,.08);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15,29,40,.07);
}

/* Product renders get visual separation even before the luminance classifier
   runs, preventing white-on-off-white flashes during image loading. */
body.msdl-ui.msdl-route-product .msdl-feature-image {
    border-color: #c7d0d6;
    background: linear-gradient(145deg, #e4e9ec, #f0f3f5);
    box-shadow: 0 2px 5px rgba(15,29,40,.045), 0 18px 44px rgba(15,29,40,.10);
}

body.msdl-ui.msdl-route-product .msdl-feature-image img {
    border-radius: 11px;
}

@media (max-width: 1080px) {
    body.msdl-ui .msdl-source-gallery,
    body.msdl-ui .wp-block-gallery.msdl-source-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    body.msdl-ui .msdl-source-gallery,
    body.msdl-ui .wp-block-gallery.msdl-source-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.msdl-ui .msdl-home-slide-image.msdl-image-light-source {
        padding: 14px;
    }
}

@media (max-width: 430px) {
    body.msdl-ui .msdl-source-gallery,
    body.msdl-ui .wp-block-gallery.msdl-source-gallery {
        grid-template-columns: 1fr !important;
    }

    body.msdl-ui .msdl-source-gallery .msdl-gallery-open,
    body.msdl-ui .msdl-source-gallery figure.wp-block-image > img {
        aspect-ratio: 4 / 3;
    }
}