/* =============================================================================
   Memorial Gallery — memorial-gallery.css
   Front-end styles for the [memorial_gallery] shortcode.
   ============================================================================= */

.yf-mg-gallery {
    width: 100%;
}

.yf-mg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.yf-mg-grid-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #ececec;
}

.yf-mg-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.yf-mg-grid-item:hover img {
    transform: scale(1.05);
}

.yf-mg-grid-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background .2s ease;
}
.yf-mg-grid-item:hover::after {
    background: rgba(0, 0, 0, .12);
}

.yf-mg-empty-frontend {
    color: #6b6560;
    font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 780px) {
    .yf-mg-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .yf-mg-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}