/**
 * MG 2025 Theme - Images Gallery Styles UNIFICATE
 * Stesso layout per homepage, user profile, explorer
 * Version: 20251204 - MOBILE 2 COLONNE ATTIVO + LOADER
 * TIMESTAMP: 2025-12-04 18:00 - 2 COLONNE MOBILE + LOADING SPINNER
 */

/* ============================================
   PHOTO LOADING SPINNER - ENHANCED
   ============================================ */

.photo-loading {
    position: relative;
    min-height: 250px;
    background: rgba(255, 255, 255, 0.05);
}

.photo-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.photo-loading img {
    opacity: 0 !important;
    transition: opacity 0.4s ease;
}

/* Quando la foto è caricata */
.mg-card:not(.photo-loading) img,
.pt:not(.photo-loading) img,
.mg2025-photo:not(.photo-loading) img {
    opacity: 1 !important;
}

.photo-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: photo-spin 0.6s linear infinite;
}

@keyframes photo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Nascondi loader quando foto è caricata */
.mg-card:not(.photo-loading) .photo-loader,
.pt:not(.photo-loading) .photo-loader,
.mg2025-photo:not(.photo-loading) .photo-loader {
    display: none !important;
}

/* GALLERY UNIFICATA - Zero gap, 6 colonne Desktop XL */
/* Increased specificity with body selector to override framework styles without !important */
body .photo-gallery,
body .mg2025-photo-gallery,
body .mg-masonry-grid {
    /* Layout masonry RESPONSIVE - 6 colonne default */
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    -webkit-column-fill: balance;
    -moz-column-fill: balance;
    column-fill: balance;

    /* Elimina micro-gap verticali */
    line-height: 0;
    font-size: 0;

    /* Container responsive */
    width: 100%;
    box-sizing: border-sizing;
    padding: 0;
    margin: 0;

    /* Forza layout masonry */
    display: block;
    position: relative;
}

/* === RESPONSIVE BREAKPOINTS === */

/* Desktop L: 5 colonne (1200px - 1439px) */
@media (max-width: 1439px) {

    body .photo-gallery,
    body .mg2025-photo-gallery {
        -webkit-column-count: var(--gallery-columns-desktop);
        -moz-column-count: var(--gallery-columns-desktop);
        column-count: var(--gallery-columns-desktop);
    }
}

/* Desktop M: 4 colonne (992px - 1199px) */
@media (max-width: 1199px) {

    body .photo-gallery,
    body .mg2025-photo-gallery {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

/* Tablet: 3 colonne (768px - 991px) */
@media (max-width: 991px) {

    body .photo-gallery,
    body .mg2025-photo-gallery {
        -webkit-column-count: var(--gallery-columns-tablet);
        -moz-column-count: var(--gallery-columns-tablet);
        column-count: var(--gallery-columns-tablet);
    }
}

/* Mobile verticale: 2 colonne (< 768px) */
@media (max-width: 767px) {

    body .photo-gallery,
    body .mg2025-photo-gallery {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Elementi foto: larghezza 100% */
    body .photo-gallery .pt,
    body .photo-gallery .mg2025-photo,
    body .mg2025-photo-gallery .pt,
    body .mg2025-photo-gallery .mg2025-photo,
    body .mg-card,
    body .pt {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Override per max-width profile layout */
    body .mg2025-profile-layout .mg2025-photo-gallery .pt,
    body .mg2025-profile-layout .mg2025-photo-gallery .mg2025-photo,
    body .mg2025-photo-gallery .pt,
    body .mg2025-photo-gallery .mg2025-photo {
        max-width: none;
        width: 100%;
    }

    /* Mobile: mostra immagini complete senza taglio */
    body .photo-gallery .pt img,
    body .photo-gallery .pt-image,
    body .mg2025-photo-gallery .pt img,
    body .mg2025-photo-gallery .mg2025-photo-img {
        object-fit: contain;
        background-color: var(--color-primary);
        /* Sfondo nero (o primario) */
        background: var(--color-primary);
        width: 100%;
    }

    /* Rimuovi border-radius su mobile */
    body .photo-gallery .pt,
    body .photo-gallery .mg2025-photo,
    body .mg2025-photo-gallery .pt,
    body .mg2025-photo-gallery .mg2025-photo,
    body .mg-card {
        border-radius: 0;
    }

    /* Forza sfondo */
    body .photo-gallery .pt,
    body .mg2025-photo-gallery .pt,
    body .mg2025-photo-gallery .mg2025-photo,
    body .mg-card {
        background-color: var(--color-primary);
        background: var(--color-primary);
    }
}

/* Mobile S: già gestito dalla regola @media (max-width: 767px) */

/* Elementi della gallery UNIFICATI */
body .photo-gallery .pt,
body .photo-gallery .mg2025-photo,
body .mg2025-photo-gallery .pt,
body .mg2025-photo-gallery .mg2025-photo {
    display: inline-block;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0;
    break-inside: avoid;
    position: relative;
    border: 10px solid #fff;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    box-sizing: border-box;
    vertical-align: top;
    font-size: initial;
}

/* Immagini UNIFICATE */
body .photo-gallery .pt img:not(.pt-avatar):not(.mg-card-avatar),
body .photo-gallery .pt-image:not(.pt-avatar):not(.mg-card-avatar),
body .mg2025-photo-gallery .pt img:not(.pt-avatar):not(.mg-card-avatar),
body .mg2025-photo-gallery .mg2025-photo-img:not(.pt-avatar):not(.mg-card-avatar) {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    object-fit: contain;
}

/* Link delle foto UNIFICATI */
body .photo-gallery .pt-link,
body .mg2025-photo-gallery .pt-link,
body .mg2025-photo-gallery .mg2025-photo-link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

/* Overlay hover UNIFICATI */
body .photo-gallery .pt-overlay,
body .mg2025-photo-gallery .mg2025-photo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-secondary);
    background: rgba(0, 0, 0, 0.35);
    /* Keep strict rgba for overlay */
    opacity: 0;
    transition: opacity 180ms ease-in-out;
    pointer-events: none;
    padding: var(--padding-small);
    margin: 0;
    border-radius: 0;
    transform: none;
    z-index: 1;
}

/* Testo overlay UNIFICATO */
body .photo-gallery .pt-title,
body .mg2025-photo-gallery .mg2025-photo-title {
    font-size: 16px;
    line-height: 1.3;
    font-weight: var(--font-weight-bold);
    margin: 0 0 6px 0;
    padding: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    color: var(--color-secondary);
    text-align: center;
}

body .photo-gallery .pt-author,
body .mg2025-photo-gallery .mg2025-photo-author {
    font-size: 13px;
    line-height: 1.3;
    font-weight: var(--font-weight-normal);
    margin: 0;
    padding: 0;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    color: var(--color-secondary);
    text-align: center;
}

/* Avatar nell'overlay delle thumbnail - 138px (120px + 15%) */
body .photo-gallery .pt-avatar-container,
body .mg2025-photo-gallery .mg-card-avatar-container {
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 138px !important;
    height: 138px !important;
    min-width: 138px !important;
    min-height: 138px !important;
    max-width: 138px !important;
    max-height: 138px !important;
    flex-shrink: 0;
}

body .photo-gallery .pt-avatar,
body .mg2025-photo-gallery .mg-card-avatar,
body .photo-gallery .pt-overlay .pt-avatar,
body .mg2025-photo-gallery .mg-card-overlay .mg-card-avatar,
body .mg-card-overlay .mg-card-avatar,
body .pt-overlay .pt-avatar {
    width: 138px !important;
    height: 138px !important;
    min-width: 138px !important;
    min-height: 138px !important;
    max-width: 138px !important;
    max-height: 120px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Hover effects UNIFICATI */
body .photo-gallery .pt:hover .pt-overlay,
body .photo-gallery .pt:focus-within .pt-overlay,
body .mg2025-photo-gallery .mg2025-photo:hover .mg2025-photo-overlay,
body .mg2025-photo-gallery .mg2025-photo:focus-within .mg2025-photo-overlay {
    opacity: 1;
}

/* NESSUN effetto di trasformazione/ingrandimento sulla cella */
body .photo-gallery .pt:hover,
body .mg2025-photo-gallery .mg2025-photo:hover,
body .photo-gallery .pt,
body .mg2025-photo-gallery .mg2025-photo,
body .photo-gallery .pt img,
body .mg2025-photo-gallery .mg2025-photo img,
body .photo-gallery .pt:hover img,
body .mg2025-photo-gallery .mg2025-photo:hover img {
    transform: none !important;
    scale: 1 !important;
    transition: none !important;
}

/* Responsive breakpoints UNIFICATI */
/* Mobile: full width gallery container - 2 COLONNE */
@media (max-width: 767px) {

    /* Avatar su mobile: 29px (25px + 15% = 28.75px, arrotondato a 29px) */
    body .photo-gallery .pt-avatar-container,
    body .mg2025-photo-gallery .mg-card-avatar-container {
        width: 29px !important;
        height: 29px !important;
        min-width: 29px !important;
        min-height: 29px !important;
        max-width: 29px !important;
        max-height: 29px !important;
    }

    body .photo-gallery .pt-avatar,
    body .mg2025-photo-gallery .mg-card-avatar,
    body .photo-gallery .pt-overlay .pt-avatar,
    body .mg2025-photo-gallery .mg-card-overlay .mg-card-avatar,
    body .mg-card-overlay .mg-card-avatar,
    body .pt-overlay .pt-avatar,
    body .photo-gallery .pt .pt-overlay .pt-avatar,
    body .mg2025-photo-gallery .mg2025-photo .mg-card-overlay .mg-card-avatar {
        width: 29px !important;
        height: 29px !important;
        min-width: 29px !important;
        min-height: 29px !important;
        max-width: 29px !important;
        max-height: 29px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    body .photo-gallery,
    body .mg2025-photo-gallery,
    body .mg-masonry-grid {
        -webkit-column-width: auto;
        -moz-column-width: auto;
        column-width: auto;
        /* Column-count gestito da mg2025-override.css con breakpoint responsive */
        /* Mobile: 2 colonne, Desktop: 6 colonne (≥1600px) */
        padding: 0;
        margin: 0;
    }

    /* Rimuovi padding anche dai container parent */
    body .mg2025-gallery-container,
    body .mg2025-main,
    body .container,
    body .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    /* Homepage: rimuovi padding dalla section e dal container */
    body .section-spacing,
    body .bg-dark,
    body section {
        padding-left: 0;
        padding-right: 0;
    }

    /* Homepage: container Bootstrap senza padding */
    body .mg2025-full-page-layout .container,
    body .mg2025-full-page-layout .container-fluid,
    body section .container,
    body section .container-fluid {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Forza gallery a piena larghezza */
    body #homepage-gallery,
    body #explorer-gallery,
    body #user-gallery,
    body .mg-masonry-grid {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    /* Body senza overflow laterale - SOLO x, non y */
    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        touch-action: pan-y !important;
    }

    /* Main e wrapper senza padding */
    body main,
    body .main,
    body .mg2025-full-page-layout {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Fix Bootstrap container padding override ultra-specifico */
    body .container,
    body section .container,
    body .mg2025-full-page-layout .container {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        width: 100%;
    }

    /* Fix specifico per Opera Mobile - usa % invece di vw */
    body .photo-gallery,
    body .mg2025-photo-gallery,
    body .mg-masonry-grid,
    body #homepage-gallery,
    body #explorer-gallery,
    body #user-gallery {
        width: 100%;
        max-width: 100%;
    }

    /* Elementi foto: larghezza 100% (non vw per Opera) */
    body .photo-gallery .pt,
    body .photo-gallery .mg2025-photo,
    body .mg2025-photo-gallery .pt,
    body .mg2025-photo-gallery .mg2025-photo {
        width: 100%;
        max-width: 100%;
    }
}

/* Rimosso: ora mobile usa 1 colonna fino a 767px */

@media (min-width: 768px) and (max-width: 1199px) {

    body .photo-gallery,
    body .mg2025-photo-gallery {
        -webkit-column-width: calc(33.333% - 0px);
        -moz-column-width: calc(33.333% - 0px);
        column-width: calc(33.333% - 0px);
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (min-width: 1200px) {

    body .photo-gallery,
    body .mg2025-photo-gallery {
        -webkit-column-width: calc(20% - 0px);
        -moz-column-width: calc(20% - 0px);
        column-width: calc(20% - 0px);
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

/* OVERRIDE AGGESSIVO UNIFICATO */
body .photo-gallery *,
body .mg2025-photo-gallery * {
    box-sizing: border-box;
}

body .photo-gallery .pt,
body .photo-gallery .mg2025-photo,
body .mg2025-photo-gallery .pt,
body .mg2025-photo-gallery .mg2025-photo {
    /* Forza layout masonry */
    display: inline-block;
    width: 100%;
    margin: 0 !important; /* Zero margin per eliminare spazio sotto */
    padding: 0;
    break-inside: avoid;
    position: relative;
    border: 10px solid #fff;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    vertical-align: top;
    font-size: initial;
    box-sizing: border-box;

    /* Sovrascrive qualsiasi float o flex */
    float: none;
    clear: none;
    flex: none;
}

/* FORZA LAYOUT MASONRY UNIFICATO */
body .photo-gallery,
body .mg2025-photo-gallery {
    /* Sovrascrive qualsiasi display esistente */
    display: block;

    /* Forza CSS columns */
    -webkit-column-width: 280px;
    -moz-column-width: 280px;
    column-width: 280px;

    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;

    -webkit-column-fill: balance;
    -moz-column-fill: balance;
    column-fill: balance;

    /* Sovrascrive qualsiasi grid o flex */
    grid-template-columns: none;
    grid-template-rows: none;
    grid-gap: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
}

/* Classe .pt per compatibilità - SOLO DESKTOP */
/* Max-width rimosso per permettere 6 colonne nella gallery profilo */
@media (min-width: 768px) {
    body .pt {
        /* max-width rimosso per gallery profilo a 6 colonne */
    }
}

/* FORZA DIMENSIONI IDENTICHE - Profilo utente */
body .mg2025-profile-layout .mg2025-gallery-container {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* SOVRASCRIVE TUTTI I CSS ESISTENTI */
body .mg2025-photo-gallery {
    /* Forza display block invece di grid */
    display: block;

    /* Sovrascrive qualsiasi grid */
    grid-template-columns: none;
    grid-template-rows: none;
    grid-gap: 0;
    gap: 0;

    /* Forza CSS columns */
    -webkit-column-width: 280px;
    -moz-column-width: 280px;
    column-width: 280px;

    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;

    -webkit-column-fill: balance;
    -moz-column-fill: balance;
    column-fill: balance;

    /* Sovrascrive qualsiasi flex */
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
}

/* REGOLA BASE RIMOSSA - DUPLICATA CON QUELLA ALLA RIGA 968 */
/* Column-count gestito SOLO nei media query responsive sotto e in mg2025-override.css */

body .mg2025-profile-layout .mg2025-photo-gallery .pt,
body .mg2025-profile-layout .mg2025-photo-gallery .mg2025-photo {
    /* Forza le stesse dimensioni della homepage */
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    break-inside: avoid;
    position: relative;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    box-sizing: border-box;
    vertical-align: top;
    font-size: initial;
}

/* Max-width rimosso per permettere 6 colonne nella gallery profilo */
@media (min-width: 768px) {

    body .mg2025-profile-layout .mg2025-photo-gallery .pt,
    body .mg2025-profile-layout .mg2025-photo-gallery .mg2025-photo {
        /* max-width rimosso per permettere 6 colonne */
        width: 100%;
    }
}

body .mg2025-profile-layout .mg2025-photo-gallery .pt img,
body .mg2025-profile-layout .mg2025-photo-gallery .mg2025-photo-img {
    /* Forza le stesse dimensioni delle immagini */
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    object-fit: contain; /* Masonry layout - mantiene proporzioni naturali */
}

/* Override per elementi foto */
body .mg2025-photo-gallery .pt,
body .mg2025-photo-gallery .mg2025-photo {
    /* Forza layout masonry */
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    break-inside: avoid;
    position: relative;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    box-sizing: border-box;
    vertical-align: top;
    font-size: initial;

    /* Sovrascrive qualsiasi float o flex */
    float: none;
    clear: none;
    flex: none;

    /* Sovrascrive qualsiasi grid */
    grid-column: unset;
    grid-row: unset;
    grid-area: unset;
}

/* Max-width rimosso per permettere 6 colonne nella gallery profilo */
@media (min-width: 768px) {

    body .mg2025-photo-gallery .pt,
    body .mg2025-photo-gallery .mg2025-photo {
        /* max-width rimosso per permettere 6 colonne */
        width: 100%;
    }
}

body .mg2025-photo-gallery .pt img,
body .mg2025-photo-gallery .mg2025-photo-img {
    /* Forza dimensioni identiche */
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    object-fit: contain; /* Masonry layout - mantiene proporzioni naturali */

    /* Sovrascrive qualsiasi transform */
    transform: none;
    scale: 1;
}

/* ============================================
   PROFILO UTENTE
   ============================================ */

/* Layout profilo con Flexbox responsive */
body .mg2025-profile-layout {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    background-color: var(--color-background);
    background: var(--color-background);
}

/* Sidebar sticky desktop */
body .mg2025-profile-layout .mg2025-sidebar {
    flex: 0 0 320px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--color-background);
    padding: var(--padding-large) var(--padding-medium);
}

/* Main content */
body .mg2025-profile-layout .mg2025-main {
    flex: 1;
    background: var(--color-background);
    padding: 0;
}

/* Desktop Large (≥1440px) */
@media (min-width: 1440px) {
    body .mg2025-profile-layout .mg2025-sidebar {
        flex: 0 0 340px;
    }
}

/* Tablet (768-991px) - 1 colonna, sidebar sopra */
@media (min-width: 768px) and (max-width: 991px) {
    body .mg2025-profile-layout {
        flex-direction: column;
    }

    body .mg2025-profile-layout .mg2025-sidebar {
        flex: 0 0 auto;
        position: static;
        height: auto;
        padding: var(--padding-medium) var(--padding-small);
    }

    body .mg2025-profile-layout .mg2025-main {
        flex: 1;
    }
}

/* Sfondo nero per sidebar e main */
body .mg2025-profile-layout .mg2025-sidebar,
body .mg2025-profile-layout .mg2025-main,
body .mg2025-profile-layout .mg2025-gallery-container,
body .mg2025-profile-layout .mg2025-photo-gallery {
    background-color: var(--color-background);
    background: var(--color-background);
}

/* Sfondo nero per la profile card */
body .mg2025-profile-layout .mg2025-profile-card {
    background-color: rgba(255, 255, 255, 0.05);
    /* Potrebbe aver bisogno di var(--card-bg) */
}

body .mg2025-gallery-container {
    background-color: var(--color-background);
}

/* ============================================
   GALLERY TOOLBAR - BREADCRUMB
   ============================================ */

/* Toolbar breadcrumb nella colonna destra */
body .mg2025-gallery-toolbar {
    position: sticky;
    top: 70px;
    /* sotto la navbar */
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.95);
    /* TODO: Make this variable-aware or transparent */
    backdrop-filter: blur(8px);
    padding: 12px 0;
    margin-bottom: var(--padding-medium);
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Breadcrumb allineato a destra */
body .mg2025-gallery-toolbar #breadcrumb-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

body .mg2025-gallery-toolbar .breadcrumb-container {
    width: auto;
    max-width: 100%;
}

body .mg2025-gallery-toolbar .breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

body .mg2025-gallery-toolbar .breadcrumb-item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

body .mg2025-gallery-toolbar .breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

body .mg2025-gallery-toolbar .breadcrumb-link:hover {
    color: var(--color-secondary);
    background-color: rgba(255, 255, 255, 0.05);
}

body .mg2025-gallery-toolbar .breadcrumb-current {
    color: var(--color-secondary);
    font-weight: 500;
    padding: 4px 8px;
}

body .mg2025-gallery-toolbar .breadcrumb-separator {
    display: flex;
    align-items: center;
    margin: 0 4px;
    opacity: 0.5;
}

body .mg2025-gallery-toolbar .breadcrumb-home-icon,
body .mg2025-gallery-toolbar .breadcrumb-separator-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body .mg2025-gallery-toolbar .breadcrumb-home-icon {
    margin-right: 4px;
}

/* Mobile: allineamento a sinistra e non-sticky */
@media (max-width: 767px) {
    body .mg2025-gallery-toolbar {
        position: static;
        top: auto;
        padding: 12px 16px;
        margin-bottom: var(--padding-small);
    }

    body .mg2025-gallery-toolbar #breadcrumb-nav {
        justify-content: flex-start;
    }

    body .mg2025-gallery-toolbar .breadcrumb-list {
        font-size: 13px;
    }

    body .mg2025-gallery-toolbar .breadcrumb-link {
        padding: 4px 6px;
    }

    /* Profilo: layout mobile 1 colonna verticale */
    body .mg2025-profile-layout.mg2025-profile-layout {
        flex-direction: column;
        padding: 0;
    }

    body .mg2025-profile-layout.mg2025-profile-layout .mg2025-sidebar {
        flex: 0 0 auto;
        position: static;
        height: auto;
        width: 100%;
        padding: var(--padding-medium) var(--padding-small);
    }

    body .mg2025-profile-layout.mg2025-profile-layout .mg2025-main {
        flex: 1;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    body .mg2025-profile-layout .mg2025-gallery-container {
        padding: 0;
        margin: 0;
        max-width: 100%;
        width: 100%;
    }

    body .mg2025-profile-layout .mg2025-photo-gallery {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
}

/* OVERRIDE AGGESSIVO SPECIFICO PER PROFILO */
body .mg2025-profile-layout .mg2025-photo-gallery * {
    box-sizing: border-box;
}

/* REGOLA BASE: NO column-count qui - solo nei media query responsive */
body .mg2025-profile-layout .mg2025-photo-gallery,
body .mg2025-detail-layout .mg2025-photo-gallery {
    /* Sovrascrive qualsiasi CSS del profilo - USA COLUMN-COUNT */
    display: block;
    /* IMPORTANTE: column-count impostato SOLO nei media query sotto, NON qui nella regola base */
    /* Desktop: 6 colonne (≥1600px) - vedi media query sotto */
    /* Mobile: 2 colonne (≤767px) - vedi media query sotto */
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    -webkit-column-fill: balance;
    -moz-column-fill: balance;
    column-fill: balance;
    background-color: var(--color-background);
    background: var(--color-background);
    /* RIMOSSO: unset rimuoveva column-count anche dai media query successivi */
    /* Il column-count viene impostato solo nei media query responsive sotto */
}

/* FORZA 6 COLONNE SU DESKTOP - PRIORITÀ MASSIMA - SPECIFICITÀ MASSIMA */
@media (min-width: 1600px) {
    html body .mg2025-profile-layout .mg2025-photo-gallery,
    html body .mg2025-detail-layout .mg2025-photo-gallery,
    body .mg2025-profile-layout .mg2025-photo-gallery,
    body .mg2025-detail-layout .mg2025-photo-gallery {
        -webkit-column-count: 6 !important;
        -moz-column-count: 6 !important;
        column-count: 6 !important;
    }
}

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

@media (min-width: 1200px) and (max-width: 1439px) {
    body .mg2025-profile-layout .mg2025-photo-gallery,
    body .mg2025-detail-layout .mg2025-photo-gallery {
        -webkit-column-count: 4 !important;
        -moz-column-count: 4 !important;
        column-count: 4 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    body .mg2025-profile-layout .mg2025-photo-gallery,
    body .mg2025-detail-layout .mg2025-photo-gallery {
        -webkit-column-count: 3 !important;
        -moz-column-count: 3 !important;
        column-count: 3 !important;
    }
}

/* Mobile: 2 colonne */
@media (max-width: 767px) {
    body .mg2025-profile-layout .mg2025-photo-gallery,
    body .mg2025-detail-layout .mg2025-photo-gallery {
        -webkit-column-count: 2 !important;
        -moz-column-count: 2 !important;
        column-count: 2 !important;
    }
}