/**
 * MG2025 Theme - Profile Gallery Masonry
 * Gallery masonry per pagine profilo (fotografi/modelle)
 * 6 colonne desktop (≥1600px), 5 colonne (1440-1599px), 4 colonne (1200-1439px), 3 colonne (768-1199px), 2 colonne mobile
 * Zero gap, stesso sistema masonry della home page
 */

/* ============================================
   GALLERY CONTAINER
   ============================================ */

.mg2025-gallery-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #000000;
}

/* ============================================
   PHOTO GALLERY - CSS Columns Masonry
   ============================================ */

.mg2025-detail-layout .mg2025-photo-gallery {
    /* CSS Columns Masonry */
    display: block !important;
    
    /* DEFAULT: 6 colonne desktop (gestito da mg2025-override.css con breakpoint responsive) */
    /* Mobile: 2 colonne (vedi @media max-width: 767px) */
    
    /* Zero gap tra colonne */
    column-gap: 0 !important;
    -webkit-column-gap: 0 !important;
    -moz-column-gap: 0 !important;
    
    /* Bilanciamento colonne */
    column-fill: balance !important;
    -webkit-column-fill: balance !important;
    -moz-column-fill: balance !important;
    
    /* Elimina micro-spazi verticali (whitespace + baseline) */
    line-height: 0 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    
    /* Container settings */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #000000 !important;
}

/* ============================================
   PHOTO ITEMS - Break-inside avoid
   ============================================ */

.mg2025-detail-layout .mg2025-photo-gallery .pt,
.mg2025-detail-layout .mg2025-photo-gallery .mg2025-photo,
.mg2025-detail-layout .mg2025-photo-gallery .mg-card {
    /* Evita break dentro l'elemento (Firefox/Chrome/Safari) */
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
    
    /* Layout inline-block per masonry */
    display: inline-block !important;
    width: 100% !important;
    vertical-align: top !important;
    
    /* Zero margins, padding, borders, border-radius */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    
    /* Overflow hidden */
    overflow: hidden !important;
    
    /* Ripristina font-size per contenuto interno */
    font-size: initial !important;
    
    /* Box sizing */
    box-sizing: border-box !important;
    
    /* Position relative per overlay */
    position: relative !important;
    
    /* Elimina line-height */
    line-height: 0 !important;
}

/* ============================================
   IMAGES - No border-radius, ZERO gap
   ============================================ */

.mg2025-detail-layout .mg2025-photo-gallery .pt img,
.mg2025-detail-layout .mg2025-photo-gallery .mg2025-photo img,
.mg2025-detail-layout .mg2025-photo-gallery .mg-card img,
.mg2025-detail-layout .mg2025-photo-gallery .mg2025-photo-img,
.mg2025-detail-layout .mg2025-photo-gallery .mg-card-img {
    /* Display block per eliminare whitespace */
    display: block !important;
    
    /* Full width, auto height */
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    
    /* Zero margins, padding, borders, border-radius */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    
    /* Object fit contain - masonry layout mantiene proporzioni naturali */
    object-fit: contain !important;
    
    /* Smooth lazy loading */
    opacity: 1;
    transition: opacity 0.3s ease;
    
    /* Elimina spazi sotto l'immagine */
    vertical-align: top !important;
    line-height: 0 !important;
}

/* Placeholder per lazy loading */
.mg2025-detail-layout .mg2025-photo-gallery img[loading="lazy"]:not([src]) {
    opacity: 0;
    background: rgba(255, 255, 255, 0.05);
    min-height: 200px;
}

/* ============================================
   LINKS
   ============================================ */

.mg2025-detail-layout .mg2025-photo-gallery .pt-link,
.mg2025-detail-layout .mg2025-photo-gallery .mg2025-photo-link,
.mg2025-detail-layout .mg2025-photo-gallery .mg-card-link {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
    line-height: 0 !important;
}

/* ============================================
   OVERLAY HOVER
   ============================================ */

.mg2025-detail-layout .mg2025-photo-gallery .pt-overlay,
.mg2025-detail-layout .mg2025-photo-gallery .mg2025-photo-overlay,
.mg2025-detail-layout .mg2025-photo-gallery .mg-card-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.mg2025-detail-layout .mg2025-photo-gallery .pt:hover .pt-overlay,
.mg2025-detail-layout .mg2025-photo-gallery .mg2025-photo:hover .mg2025-photo-overlay,
.mg2025-detail-layout .mg2025-photo-gallery .mg-card:hover .mg-card-overlay {
    opacity: 1 !important;
}

/* ============================================
   RESPONSIVE COLUMNS - SAME AS HOMEPAGE
   Desktop XL (≥1600px): 6 colonne
   Desktop L (1440-1599px): 5 colonne
   Desktop M (1200-1439px): 4 colonne
   Tablet (768-1199px): 3 colonne
   Mobile (480-767px): 2 colonne
   Mobile S (<480px): 1 colonna
   ============================================ */

/* Mobile: 2 colonne (<768px) - COME HOMEPAGE */
/* UNIFIED: Stesso sistema della homepage - gestito da mg2025-override.css */
@media (max-width: 767px) {
    #user-gallery,
    .mg2025-detail-layout .mg2025-photo-gallery {
        column-count: 2 !important;
        -webkit-column-count: 2 !important;
        -moz-column-count: 2 !important;
        max-width: 100% !important;
    }
}

/* Tablet Large: 3 colonne (768-1199px) - COME HOMEPAGE */
@media (min-width: 768px) and (max-width: 1199px) {
    #user-gallery,
    .mg2025-detail-layout .mg2025-photo-gallery {
        column-count: 3 !important;
        -webkit-column-count: 3 !important;
        -moz-column-count: 3 !important;
        max-width: 100% !important;
    }
}

/* Desktop: 4 colonne (1200-1439px) - COME HOMEPAGE */
@media (min-width: 1200px) and (max-width: 1439px) {
    #user-gallery,
    .mg2025-detail-layout .mg2025-photo-gallery {
        column-count: 4 !important;
        -webkit-column-count: 4 !important;
        -moz-column-count: 4 !important;
        max-width: 100% !important;
    }
}

/* Desktop Large: 6 colonne (≥1600px) - SAME AS HOMEPAGE */
@media (min-width: 1600px) {
    #user-gallery,
    .mg2025-detail-layout .mg2025-photo-gallery {
        column-count: 6 !important;
        -webkit-column-count: 6 !important;
        -moz-column-count: 6 !important;
        max-width: 100% !important;
    }
    
    /* Override più aggressivo per forzare 6 colonne */
    #user-gallery,
    .mg2025-detail-layout .mg2025-gallery-container .mg2025-photo-gallery {
        column-count: 6 !important;
        -webkit-column-count: 6 !important;
        -moz-column-count: 6 !important;
        max-width: 100% !important;
    }
}

/* Desktop Medium: 5 colonne (1440px-1599px) - SAME AS HOMEPAGE */
@media (min-width: 1440px) and (max-width: 1599px) {
    #user-gallery,
    .mg2025-detail-layout .mg2025-photo-gallery {
        column-count: 5 !important;
        -webkit-column-count: 5 !important;
        -moz-column-count: 5 !important;
        max-width: 100% !important;
    }
    
    /* Override più aggressivo per forzare 5 colonne */
    #user-gallery,
    .mg2025-detail-layout .mg2025-gallery-container .mg2025-photo-gallery {
        column-count: 5 !important;
        -webkit-column-count: 5 !important;
        -moz-column-count: 5 !important;
        max-width: 100% !important;
    }
}

/* ============================================
   OVERRIDE ULTRA AGRESSIVO - FORZA 6 COLONNE (SAME AS HOMEPAGE)
   ============================================ */

/* Forza 6 colonne su desktop large con specificity massima - UNIFIED con homepage */
@media (min-width: 1600px) {
    #user-gallery,
    .mg2025-detail-layout .mg2025-main .mg2025-gallery-container .mg2025-photo-gallery {
        column-count: 6 !important;
        -webkit-column-count: 6 !important;
        -moz-column-count: 6 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Override per qualsiasi CSS esistente */
    #user-gallery,
    .mg2025-detail-layout .mg2025-photo-gallery,
    .mg2025-detail-layout .mg2025-gallery-container .mg2025-photo-gallery,
    .mg2025-detail-layout .mg2025-main .mg2025-gallery-container .mg2025-photo-gallery {
        column-count: 6 !important;
        -webkit-column-count: 6 !important;
        -moz-column-count: 6 !important;
        max-width: 100% !important;
    }
}

/* Desktop Medium: 5 colonne (1440px-1599px) - UNIFIED con homepage */
@media (min-width: 1440px) and (max-width: 1599px) {
    #user-gallery,
    .mg2025-detail-layout .mg2025-main .mg2025-gallery-container .mg2025-photo-gallery {
        column-count: 5 !important;
        -webkit-column-count: 5 !important;
        -moz-column-count: 5 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Override per qualsiasi CSS esistente */
    #user-gallery,
    .mg2025-detail-layout .mg2025-photo-gallery,
    .mg2025-detail-layout .mg2025-gallery-container .mg2025-photo-gallery,
    .mg2025-detail-layout .mg2025-main .mg2025-gallery-container .mg2025-photo-gallery {
        column-count: 5 !important;
        -webkit-column-count: 5 !important;
        -moz-column-count: 5 !important;
        max-width: 100% !important;
    }
}

/* OVERRIDE FINALE - UNIFIED con homepage - Sovrascrive mg2025_images.css */
@media (min-width: 1200px) and (max-width: 1439px) {
    #user-gallery,
    .mg2025-detail-layout .mg2025-photo-gallery {
        column-count: 4 !important;
        -webkit-column-count: 4 !important;
        -moz-column-count: 4 !important;
        max-width: 100% !important;
    }
}

@media (min-width: 1440px) and (max-width: 1599px) {
    #user-gallery,
    .mg2025-detail-layout .mg2025-photo-gallery {
        column-count: 5 !important;
        -webkit-column-count: 5 !important;
        -moz-column-count: 5 !important;
        max-width: 100% !important;
    }
}

@media (min-width: 1600px) {
    #user-gallery,
    .mg2025-detail-layout .mg2025-photo-gallery {
        column-count: 6 !important;
        -webkit-column-count: 6 !important;
        -moz-column-count: 6 !important;
        max-width: 100% !important;
    }
}

/* ============================================
   UTILITIES
   ============================================ */

.mg2025-detail-layout .mg2025-photo-gallery * {
    box-sizing: border-box !important;
}

/* Reset eventuali stili globali */
.mg2025-detail-layout .mg2025-photo-gallery *:not(svg):not(path) {
    /* Previeni float/flex/grid che possono interferire */
    float: none !important;
    flex: none !important;
    grid-column: unset !important;
    grid-row: unset !important;
}

/* Override per garantire zero gap assoluto */
.mg2025-detail-layout .mg2025-gallery-container {
    overflow: hidden;
}

.mg2025-detail-layout .mg2025-photo-gallery::before,
.mg2025-detail-layout .mg2025-photo-gallery::after {
    display: none !important;
}