/* ICON BALI DIGITAL
   Phase 3 — Product Media Standard v1.0
   Shared image sizing for all product pages.
   Loaded last to normalize media behavior regardless of source dimensions.
*/

/* Product hero brand mark: explicit size, never intrinsic 1026x821. */
body[data-product] .hero-logo {
    display: block !important;
    width: 72px !important;
    height: auto !important;
    max-width: 72px !important;
    max-height: 72px !important;
    object-fit: contain !important;
    margin: 0 auto 18px !important;
}

/* VDeck architecture cards: contain large diagrams without distortion. */
body[data-product="vdeck"] .arch-card .architecture-zoomable {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 390px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin-inline: auto !important;
}

/* Single architecture diagrams across product pages. */
body[data-product="opsdeck"] .arch-image-wrapper,
body[data-product="cydeck"] .arch-image-wrapper,
body[data-product="workdeck"] .arch-image-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
}

body[data-product="opsdeck"] .architecture-zoomable,
body[data-product="cydeck"] .architecture-zoomable,
body[data-product="workdeck"] .architecture-zoomable {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 820px) !important;
    max-height: 560px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin-inline: auto !important;
}

/* Safety: all product page content images remain inside their containers. */
body[data-product] main img,
body[data-product] section img {
    box-sizing: border-box;
}

/* Tablet / mobile product media. */
@media (max-width: 768px) {
    body[data-product] .hero-logo {
        width: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
        margin-bottom: 14px !important;
    }

    body[data-product="vdeck"] .arch-card .architecture-zoomable {
        max-height: 300px !important;
    }

    body[data-product="opsdeck"] .architecture-zoomable,
    body[data-product="cydeck"] .architecture-zoomable,
    body[data-product="workdeck"] .architecture-zoomable {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 360px !important;
    }
}

@media (max-width: 480px) {
    body[data-product] .hero-logo {
        width: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
    }

    body[data-product="vdeck"] .arch-card .architecture-zoomable {
        max-height: 250px !important;
    }

    body[data-product="opsdeck"] .architecture-zoomable,
    body[data-product="cydeck"] .architecture-zoomable,
    body[data-product="workdeck"] .architecture-zoomable {
        max-height: 300px !important;
    }
}

/* R7.3.3 — OpsDeck architecture image should blend with page and hide framing. */
body[data-product="opsdeck"] .arch-image-wrapper--transparent {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}
body[data-product="opsdeck"] .arch-image-wrapper--transparent::before {
    display: none !important;
    content: none !important;
}
body[data-product="opsdeck"] .arch-image-wrapper--transparent .architecture-zoomable {
    max-width: min(100%, 1120px) !important;
    max-height: none !important;
    border-radius: 20px !important;
}
@media (max-width: 768px) {
    body[data-product="opsdeck"] .arch-image-wrapper--transparent .architecture-zoomable {
        border-radius: 16px !important;
    }
}