.fpmg-gallery {
    width: 100%;
}

/*
 * Masonry a griglia: gli elementi orizzontali possono occupare due colonne,
 * mantenendo le proporzioni e senza deformare foto o video.
 */
.fpmg-grid {
    --fpmg-columns: 4;
    --fpmg-gap: 14px;
    --fpmg-row: 8px;
    display: grid;
    grid-template-columns: repeat(var(--fpmg-columns), minmax(0, 1fr));
    grid-auto-rows: var(--fpmg-row);
    grid-auto-flow: dense;
    gap: var(--fpmg-gap);
    width: 100%;
    align-items: start;
}

.fpmg-card {
    --fpmg-radius: 0px;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--fpmg-radius);
    background: #eceae5;
    isolation: isolate;
    grid-column: span 1;
}

.fpmg-card.fpmg-wide {
    grid-column: span 2;
}

.fpmg-media-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.fpmg-card.fpmg-fixed-ratio .fpmg-media-wrap {
    aspect-ratio: var(--fpmg-aspect-ratio);
}

.fpmg-media {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: inherit;
    transform: scale(1.001);
    transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}

.fpmg-card.fpmg-fixed-ratio .fpmg-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--fpmg-object-position, center center);
}

.fpmg-card:hover .fpmg-media {
    transform: scale(1.025);
}

/* Elementi usati per pareggiare il fondo della masonry. Il media viene ritagliato, mai deformato. */
.fpmg-card.fpmg-bottom-fill {
    height: var(--fpmg-fill-height);
}
.fpmg-card.fpmg-bottom-fill .fpmg-media-wrap {
    height: 100%;
    aspect-ratio: auto !important;
}
.fpmg-card.fpmg-bottom-fill .fpmg-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--fpmg-object-position, center center);
}

.fpmg-video {
    background: #171717;
}

.fpmg-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: clamp(14px, 2vw, 26px);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}

.fpmg-card:hover .fpmg-overlay,
.fpmg-card:focus-within .fpmg-overlay {
    opacity: 1;
    transform: translateY(0);
}

.fpmg-overlay-inner { width: 100%; }
.fpmg-title { font-size: clamp(17px, 1.6vw, 24px); line-height: 1.12; font-weight: 600; }
.fpmg-caption { margin-top: 6px; font-size: 13px; line-height: 1.4; opacity: .88; }
.fpmg-click-video { cursor: pointer; }

.fpmg-open {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0;
    color: transparent !important;
    opacity: 1 !important;
    cursor: zoom-in;
    -webkit-appearance: none;
    appearance: none;
}
.fpmg-open:hover,
.fpmg-open:focus,
.fpmg-open:focus-visible,
.fpmg-open:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: transparent !important;
    border: 0 !important;
    outline: 0 !important;
}
.fpmg-not-clickable { cursor: default; }

.fpmg-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 52px;
    height: 52px;
    transform: translate(-50%, -50%);
    opacity: .9;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.fpmg-play svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 12px rgba(0,0,0,.22)); }
.fpmg-play circle { fill: rgba(248,247,243,.92); stroke: none; }
.fpmg-play path { fill: #333333; }
.fpmg-type-video:hover .fpmg-play,
.fpmg-type-video.is-playing .fpmg-play { opacity: 0; transform: translate(-50%, -50%) scale(.9); }

.fpmg-empty { padding: 24px; border: 1px dashed #c8c5bc; color: #666; text-align: center; background: #f8f7f3; }

/* Lightbox */
.fpmg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 28px;
    background: rgba(12,12,12,.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
.fpmg-lightbox.is-open { opacity: 1; visibility: visible; }
.fpmg-lightbox-dialog { position: relative; width: min(1200px, 92vw); height: min(86vh, 900px); display: flex; align-items: center; justify-content: center; }
.fpmg-lightbox-media { max-width: 100%; max-height: 86vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.fpmg-lightbox-close,
.fpmg-lightbox-prev,
.fpmg-lightbox-next {
    position: fixed; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
    border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; background: rgba(0,0,0,.25);
    font: inherit; font-size: 28px; line-height: 1; cursor: pointer; backdrop-filter: blur(8px);
}
.fpmg-lightbox-close { top: 20px; right: 20px; }
.fpmg-lightbox-prev, .fpmg-lightbox-next { top: 50%; transform: translateY(-50%); }
.fpmg-lightbox-prev { left: 20px; }
.fpmg-lightbox-next { right: 20px; }
.fpmg-lightbox-meta { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: min(800px, calc(100vw - 60px)); color: #fff; text-align: center; font-size: 14px; opacity: .88; }
body.fpmg-no-scroll { overflow: hidden; }

@media (max-width: 767px) {
    /* Mobile: un elemento per riga, sempre a tutta larghezza.
       Niente masonry a micro-righe: evita ricalcoli continui e rende stabili anche i video. */
    .fpmg-grid {
        --fpmg-columns: 1;
        --fpmg-gap: 10px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        grid-auto-flow: row;
        gap: var(--fpmg-gap);
    }
    .fpmg-card,
    .fpmg-card.fpmg-wide {
        grid-column: 1 / -1 !important;
        grid-row-end: auto !important;
        width: 100%;
        height: auto;
    }
    .fpmg-card.fpmg-bottom-fill {
        height: auto;
    }
    .fpmg-card.fpmg-bottom-fill .fpmg-media-wrap {
        height: auto;
    }
    .fpmg-card.fpmg-fixed-ratio.fpmg-bottom-fill .fpmg-media-wrap {
        height: auto;
        aspect-ratio: var(--fpmg-aspect-ratio) !important;
    }
    .fpmg-card:not(.fpmg-fixed-ratio) .fpmg-media {
        height: auto;
        object-fit: initial;
    }
    .fpmg-overlay { padding: 12px; }
    .fpmg-caption { display: none; }
    .fpmg-play { width: 42px; height: 42px; }
    .fpmg-lightbox { padding: 14px; }
    .fpmg-lightbox-prev { left: 8px; }
    .fpmg-lightbox-next { right: 8px; }
    .fpmg-lightbox-close { top: 10px; right: 10px; }
}

@media (hover: none), (pointer: coarse) {
    /* Evita effetti hover sintetici sui touch device, soprattutto sui video. */
    .fpmg-card:hover .fpmg-media { transform: scale(1.001); }
    .fpmg-type-video:hover .fpmg-play { opacity: .9; transform: translate(-50%, -50%); }
    .fpmg-type-video.is-playing .fpmg-play { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
}