/**
 * "Projectgalerij" widget (inc/elementor/class-vlt-project-gallery-widget.php), ported from the design's
 * styles/gallery.css. Layouts: data-layout="mozaiek" and data-layout="strook" (Filmstrook).
 * Corners stay square, as everywhere on the site.
 */

.vlt-gallery__list { list-style: none; margin: 0; padding: 0; }
.vlt-gallery__item { position: relative; margin: 0; }
.vlt-gallery__item[hidden] { display: none; } /* tiles after "+N"; still part of the lightbox slideshow */
.vlt-gallery__open {
	position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
	background: var(--line, #e3e6ef); cursor: zoom-in;
}
.vlt-gallery__open img {
	display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
	transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vlt-gallery__open:hover img { transform: scale(1.04); }
.vlt-gallery__open:focus-visible { outline: 3px solid var(--primary, #2a3198); outline-offset: 3px; }
.vlt-gallery__caption { margin: 0.5rem 0 0; font-size: var(--text-sm, 0.875rem); line-height: 1.4; color: var(--muted, #5b6075); }
.vlt-gallery__num { margin-right: 4px; font-family: var(--font-heading, inherit); font-weight: 500; color: var(--primary, #2a3198); }
.vlt-gallery[data-captions="uit"] .vlt-gallery__caption { display: none; }

/* A band whose project has no photos is hidden altogether */
.band:has(.vlt-gallery-empty) { display: none !important; } /* beats the band class's own display */
.vlt-gallery-placeholder { padding: 2rem; text-align: center; color: var(--muted, #5b6075); border: 1px dashed var(--line, #e3e6ef); }

/* ===================== Mozaïek ===================== */
.vlt-gallery[data-layout="mozaiek"] .vlt-gallery__list {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(150px, 15vw, 220px); gap: 8px;
}
.vlt-gallery[data-layout="mozaiek"] .vlt-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
/* Titles sit on the photo over a navy fade */
.vlt-gallery[data-layout="mozaiek"] .vlt-gallery__caption {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 2rem 12px 10px;
	color: var(--surface, #fff); background: linear-gradient(180deg, rgba(13, 16, 54, 0), rgba(13, 16, 54, 0.85));
	pointer-events: none;
}
.vlt-gallery[data-layout="mozaiek"] .vlt-gallery__caption .vlt-gallery__num { color: var(--accent, #4fb3ff); }
.vlt-gallery[data-layout="mozaiek"] .vlt-gallery__item:has([data-more]) .vlt-gallery__caption { display: none; }
/* Without titles the photo number slides up from the bottom-left corner on hover */
.vlt-gallery[data-layout="mozaiek"][data-captions="uit"] .vlt-gallery__open::before {
	content: attr(data-num); position: absolute; z-index: 1; left: 0; bottom: 0; padding: 6px 10px;
	font-family: var(--font-heading, inherit); font-size: var(--text-sm, 0.875rem); color: var(--surface, #fff);
	background: var(--primary, #2a3198); transform: translateY(100%); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vlt-gallery[data-layout="mozaiek"][data-captions="uit"] .vlt-gallery__open:is(:hover, :focus-visible)::before { transform: none; }
/* Last visible tile: "+N foto's" over a navy veil */
.vlt-gallery[data-layout="mozaiek"] .vlt-gallery__open[data-more]::after {
	content: attr(data-more); position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
	font-family: var(--font-heading, inherit); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); color: var(--surface, #fff);
	background: rgba(13, 16, 54, 0.62); transition: background-color 200ms ease;
}
.vlt-gallery[data-layout="mozaiek"] .vlt-gallery__open[data-more]:hover::after { background: rgba(42, 49, 152, 0.72); }
@media (max-width: 767px) {
	.vlt-gallery[data-layout="mozaiek"] .vlt-gallery__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38vw; }
	.vlt-gallery[data-layout="mozaiek"] .vlt-gallery__item:first-child { grid-column: 1 / -1; grid-row: span 1; }
}

/* ===================== Filmstrook ===================== */
.vlt-gallery[data-layout="strook"] { --strip-h: clamp(240px, 30vw, 420px); }
.vlt-gallery[data-layout="strook"] .vlt-gallery__list {
	display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.vlt-gallery[data-layout="strook"] .vlt-gallery__list::-webkit-scrollbar { display: none; }
.vlt-gallery[data-layout="strook"] .vlt-gallery__item { flex: none; scroll-snap-align: start; }
.vlt-gallery[data-layout="strook"] .vlt-gallery__open { width: auto; height: var(--strip-h); }
.vlt-gallery[data-layout="strook"] .vlt-gallery__open img { width: auto; height: 100%; }
/* The caption never makes the item wider than its photo */
.vlt-gallery[data-layout="strook"] .vlt-gallery__caption { width: 0; min-width: 100%; }
@media (max-width: 767px) {
	.vlt-gallery[data-layout="strook"] { --strip-h: 62vw; }
}

/* Counter, progress line and arrows (square navy blocks; the icon turns around for "previous") */
.vlt-gallery__controls { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.vlt-gallery__counter { margin: 0; font-family: var(--font-heading, inherit); font-weight: 500; font-variant-numeric: tabular-nums; }
.vlt-gallery__progress { flex: 1; height: 2px; background: var(--line, #e3e6ef); }
.vlt-gallery__progress span {
	display: block; height: 100%; background: var(--primary, #2a3198);
	transform-origin: left; transition: transform 200ms ease;
}
.vlt-gallery__step {
	display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 0;
	color: var(--surface, #fff); background: var(--navy, #15194c); cursor: pointer; transition: background-color 200ms ease;
}
.vlt-gallery__step:hover, .vlt-gallery__step:focus { color: var(--surface, #fff); background: var(--primary, #2a3198); }
.vlt-gallery__step:disabled { opacity: 0.35; cursor: default; background: var(--navy, #15194c); }
.vlt-gallery__step svg { width: 20px; height: 20px; }
.vlt-gallery__step[data-vlt-gallery-step="-1"] svg { transform: rotate(180deg); }
.vlt-gallery__step:focus-visible { outline: 3px solid var(--primary, #2a3198); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.vlt-gallery__open img, .vlt-gallery__progress span, .vlt-gallery__open::before { transition: none; }
	.vlt-gallery__open:hover img { transform: none; }
	.vlt-gallery[data-layout="strook"] .vlt-gallery__list { scroll-behavior: auto; }
}