/**
 * File: /shared/css/product-images.css
 * Purpose: Shared product image and carousel image presentation.
 *
 * Defines the sizing hierarchy required by product images and product
 * carousels across the Signs Platform.
 *
 * Product image containers use a square aspect ratio while allowing
 * responsive sizing across mobile, tablet, and desktop layouts.
 *
 * Header logo sizing belongs in:
 * - /brand/{brand}/css/navigation.css
 *
 * Brand-specific image assets must not be defined in this file.
 *
 * Dependencies:
 * - Bootstrap Carousel where .carousel-* classes are used
 *
 * This file must not contain:
 * - Brand-specific image URLs
 * - Brand-specific colors
 * - Product data
 * - Carousel initialization logic
 * - Header / navigation presentation
 */


/* ==========================================
   PRODUCT IMAGE CONTAINER
   ========================================== */

/*
 * Primary image viewport.
 *
 * The container establishes the clipping boundary for both
 * standalone product images and product image carousels.
 */
 .product-image-container {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 0.5rem;

    background-color: var(
        --brand-surface,
        var(--color-surface)
    );

    flex-shrink: 0;
}


/* ==========================================
   SQUARE IMAGE WRAPPER
   ========================================== */

/*
 * Establish the square viewport used by both standalone
 * product images and product carousels.
 */
.product-image-container .square-inner,
.square-inner {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    padding: 0 !important;
}


/* ==========================================
   DIRECT IMAGE / CAROUSEL
   ========================================== */

/*
 * Both a standalone image and a carousel must fill the
 * square wrapper completely.
 */
.square-inner .product-carousel,
.square-inner > img {
    width: 100%;
    height: 100%;
}


/* ==========================================
   CAROUSEL INTERNAL STRUCTURE
   ========================================== */

/*
 * Bootstrap carousel containers must inherit the full height
 * of the square image wrapper.
 *
 * Without these explicit heights, the carousel may collapse
 * or size itself according to the source image dimensions.
 */
.square-inner .carousel-inner,
.square-inner .carousel-item {
    width: 100%;
    height: 100%;
}


/* ==========================================
   PRODUCT IMAGES
   ========================================== */

/*
 * Product images completely fill their viewport.
 *
 * object-fit: cover intentionally crops images when necessary
 * rather than introducing empty/letterboxed space.
 */
.product-image-container img,
.product-image-container .carousel-inner img,
.product-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 0.5rem;
}


/* ==========================================
   MOBILE
   ========================================== */

/*
 * Mobile product images consume the available width of
 * the product card.
 */
@media (max-width: 767px) {
    #home_section .product-image-container {
        width: 100%;
    }
}


/* ==========================================
   TABLET
   ========================================== */

/*
 * Product body switches to a side-by-side layout on tablet.
 * Maintain the existing 300px product image viewport.
 */
@media (min-width: 768px) and (max-width: 1024px) {
    #home_section .product-image-container {
        position: relative;

        flex: 0 0 300px;

        width: 300px;

        overflow: hidden;

        border-radius: 5px;

        align-self: flex-start;
    }
}


/* ==========================================
   DESKTOP
   ========================================== */

/*
 * Desktop product images use the 400px WebP viewport.
 */
@media (min-width: 1025px) {
    #home_section .product-image-container {
        width: 400px;

        aspect-ratio: 1 / 1;

        overflow: hidden;

        border-radius: 5px;
    }
}