/**
 * Bundle Image System - Intelligente Produktbild-Layouts für Bundles
 * Generiert automatisch 2er, 3er oder 4er Grids mit Plus-Icon
 */

/* ========================================
   Base Bundle Image Wrapper
   ======================================== */
.bundle-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f5;
}

/* Größenvarianten */
.bundle-img-small {
    max-width: 80px;
    max-height: 80px;
}

.bundle-img-medium {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

.bundle-img-large {
    max-width: 300px;
    max-height: 300px;
}

/* ========================================
   Bundle Image Items
   ======================================== */
.bundle-image-item {
    position: relative;
    overflow: hidden;
    background: white;
}

.bundle-image-item picture,
.bundle-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Quantity Badge auf Bundle-Items */
.bundle-qty-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ========================================
   Plus Icon (Zentral)
   ======================================== */
.bundle-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    z-index: 10;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
    pointer-events: none;
}

.bundle-img-small .bundle-plus-icon {
    width: 24px;
    height: 24px;
}

.bundle-img-large .bundle-plus-icon {
    width: 56px;
    height: 56px;
}

.bundle-plus-icon svg {
    width: 100%;
    height: 100%;
}

/* ========================================
   Layout: Single (1 Produkt - Fallback)
   ======================================== */
.bundle-img-single {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* ========================================
   Layout: Dual (2 Produkte - 50/50)
   ======================================== */
.bundle-img-dual {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 2px;
}

.bundle-img-dual .bundle-image-item-1 {
    grid-column: 1;
}

.bundle-img-dual .bundle-image-item-2 {
    grid-column: 2;
}

/* ========================================
   Layout: Triple (3 Produkte - L-Form)
   Produkt 1: Links (volle Höhe)
   Produkt 2: Rechts oben
   Produkt 3: Rechts unten
   ======================================== */
.bundle-img-triple {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.bundle-img-triple .bundle-image-item-1 {
    grid-column: 1;
    grid-row: 1 / 3; /* Volle Höhe links */
}

.bundle-img-triple .bundle-image-item-2 {
    grid-column: 2;
    grid-row: 1;
}

.bundle-img-triple .bundle-image-item-3 {
    grid-column: 2;
    grid-row: 2;
}

/* ========================================
   Layout: Quad (4 Produkte - 2x2 Grid)
   ======================================== */
.bundle-img-quad {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.bundle-img-quad .bundle-image-item-1 {
    grid-column: 1;
    grid-row: 1;
}

.bundle-img-quad .bundle-image-item-2 {
    grid-column: 2;
    grid-row: 1;
}

.bundle-img-quad .bundle-image-item-3 {
    grid-column: 1;
    grid-row: 2;
}

.bundle-img-quad .bundle-image-item-4 {
    grid-column: 2;
    grid-row: 2;
}

/* ========================================
   Hover-Effekte
   ======================================== */
.bundle-image-wrapper:hover .bundle-plus-icon {
    transform: translate(-50%, -50%) scale(1.1) rotate(90deg);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========================================
   Placeholder
   ======================================== */
.bundle-img-placeholder {
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bundle-img-placeholder img {
    opacity: 0.3;
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* ========================================
   Responsive Anpassungen
   ======================================== */
@media (max-width: 768px) {
    .bundle-img-medium {
        max-width: 120px;
        max-height: 120px;
    }
    
    .bundle-plus-icon {
        width: 32px;
        height: 32px;
    }
    
    .bundle-qty-badge {
        font-size: 9px;
        padding: 2px 5px;
    }
}

/* ========================================
   Integration in Product Cards
   ======================================== */
.product-card-exact .bundle-image-wrapper {
    border-radius: 0;
    width: 100%;
    height: auto;
}

.product-image-exact:has(.bundle-image-wrapper) {
    padding-top: 56.25% !important; /* 16:9 statt 100% (1:1) */
}

.product-image-exact .bundle-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* WooCommerce-Style Kategorien (categories/index.php, categories/show.php) */
/* WICHTIG: Der Parent-Container .woo-product-image-12345 hat padding-top: 75% aus main.css */
/* Bundle-Wrapper muss diesen Raum absolut positioniert ausfüllen */
.woo-product-image-12345 .bundle-image-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    display: grid !important;
    background: #f5f5f5;
}

/* Grid-Layouts für WooCommerce-Cards explizit definieren */
.woo-product-image-12345 .bundle-img-dual {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    gap: 2px !important;
}

.woo-product-image-12345 .bundle-img-triple {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 2px !important;
}

.woo-product-image-12345 .bundle-img-quad {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 2px !important;
}

.cart-item-image-12345 .bundle-image-wrapper,
.checkout-item-image-12345 .bundle-image-wrapper {
    border-radius: 6px;
}

/* Produktdetailseite */
.product-main-image-12345 .bundle-image-wrapper {
    border-radius: 8px;
    max-width: 600px;
    width: 100%;
}

.product-gallery-12345 .bundle-image-wrapper {
    width: 100%;
    height: auto;
}

/* ========================================
   Bundle Badge (Optional)
   ======================================== */
.bundle-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #FF6B6B 0%, #ee5a6f 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 11;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.product-image-exact .bundle-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 12;
}

/* ========================================
   Homepage Bundle Grid Anpassung
   ======================================== */
.product-card-exact:has(.bundle-image-wrapper) {
    min-width: 300px;
}

/* ========================================
   Dark Mode Support
   ======================================== */
@media (prefers-color-scheme: dark) {
    .bundle-image-wrapper {
        background: #2a2a2a;
    }
    
    .bundle-image-item {
        background: #333;
    }
    
    .bundle-plus-icon circle {
        fill: #1e1e1e;
        stroke: #4CAF50;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .bundle-plus-icon {
        display: none;
    }
    
    .bundle-qty-badge {
        background: #000;
        color: #fff;
    }
}