/**
 * MMTM Portfolio - Styles
 * Masonry CSS pur (column-count) - aucune dépendance JS
 */

.mmtm-portfolio {
    column-count: 3;
    column-gap: 10px;
    margin: 20px 0;
}

.mmtm-portfolio-item {
    display: block;
    margin: 0 0 10px 0;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    overflow: hidden;
    line-height: 0;
    position: relative;
}

/* Cible à la fois <img> ET <picture> (cas WebP via plugin) */
.mmtm-portfolio-item picture,
.mmtm-portfolio-item .mmtm-portfolio-img,
.mmtm-portfolio-item img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
    contain-intrinsic-size: auto !important;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.mmtm-portfolio-item:hover img {
    transform: scale(1.03);
    opacity: 0.92;
}

/* Responsive : 2 colonnes sur tablette */
@media (max-width: 900px) {
    .mmtm-portfolio {
        column-count: 2;
        column-gap: 8px;
    }
    .mmtm-portfolio-item {
        margin-bottom: 8px;
    }
}

/* Responsive : 2 colonnes sur mobile (gap réduit) */
@media (max-width: 600px) {
    .mmtm-portfolio {
        column-count: 2;
        column-gap: 5px;
    }
    .mmtm-portfolio-item {
        margin-bottom: 5px;
    }
}