/* Blur-up (LQIP): ::before toont de base64-blur uit --hop-placeholder
   totdat de echte foto volledig geladen is (.is-loaded via JS). */
.album-photo__frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
}
.album-photo__frame::before {
    content: "";
    position: absolute;
    inset: -20%; /* geen zichtbare blur-randjes */
    background-image: var(--hop-placeholder, none);
    background-size: cover;
    background-position: center;
    filter: blur(16px);
    transform: scale(1.1);
    z-index: 0;
}
.album-photo__frame .album-photo__link,
.album-photo__frame .album-photo__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}
.album-photo__img {
    opacity: 0;
    transition: opacity 0.35s ease;
}
.album-photo__img.is-loaded {
    opacity: 1;
}
/* Info-tekst onder de foto */
.album-photo__caption {
	margin-top: 4px;
	font-size: 1rem;
    display: block;
}

/* -----------------------------------------------------------------------
   Niet-masonry Loop Grid (mobiel, 1 kolom): de loop-items krijgen hun
   hoogte via album-photo.js (sizeLoopItem), omdat Elementor's container-
   keten de aspect-ratio-hoogte van de frames niet meerekent en de items
   anders inklappen en overlappen.

   Tot de JS gedraaid heeft ('hop-sized' op de container) houden we de
   items onzichtbaar, zodat de ingeklapte tussentoestand nooit zichtbaar
   is. Scoped op mobiel + niet-masonry: desktop/masonry blijft volledig
   onaangeraakt, en als de JS onverhoopt niet draait is alleen de toch al
   kapotte situatie verborgen.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-loop-container:not(.elementor-posts-masonry):not(.hop-sized) .e-loop-item {
		opacity: 0;
	}
	.elementor-loop-container:not(.elementor-posts-masonry) .e-loop-item {
		transition: opacity 0.2s ease;
	}
}