/* ============================================================
 * GALLERY
 * Drie weergaves: tiled (raster), masonry (kolommen) en swiper
 * (horizontaal scrollen met snap). Het aantal kolommen is bij
 * swiper het aantal zichtbare beelden.
 * ============================================================ */

.gallery__viewport{
	position: relative;
}

/* De globale regel in structural.css zet picture op height 100%. In een
   galerij is de figure een grid- of flexitem dat uitgerekt wordt, waardoor
   de picture die volle hoogte overneemt en de img mee uitrekt: de
   aspect-ratio hieronder telde dan niet mee, het beeld was niet vierkant en
   het bijschrift viel buiten de figure, onder het volgende beeld. Hier
   bepaalt het beeld zijn eigen hoogte en groeit de figure eromheen. */
.gallery-item picture{
	height: auto;
}

.gallery-item img{
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--border-radius-medium);
}


/* ------------------------------------------------------------
 * TILED
 * ---------------------------------------------------------- */
.gallery--tiled .gallery__items{
	display: grid;
	gap: var(--gallery-gap);
}
.gallery--tiled.gallery--cols-1 .gallery__items{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gallery--tiled.gallery--cols-2 .gallery__items{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--tiled.gallery--cols-3 .gallery__items{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery--tiled.gallery--cols-4 .gallery__items{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery--tiled.gallery--cols-5 .gallery__items{ grid-template-columns: repeat(5, minmax(0, 1fr)); }

.gallery--tiled .gallery-item img{
	aspect-ratio: 1 / 1;
}


/* ------------------------------------------------------------
 * MASONRY
 * ---------------------------------------------------------- */
/* Een grid, geen CSS-kolommen: die lezen van boven naar onder per kolom,
   waardoor de volgorde van de beelden niet klopt. Hier krijgt elk beeld een
   rij-span die overeenkomt met zijn hoogte (zie blocks/js/gallery.js). De
   auto-plaatsing van grid zoekt dan vanzelf de kortste kolom, en de leesorde
   blijft van links naar rechts. Zonder JS blijft het een gewoon raster. */
.gallery--masonry .gallery__items{
	display: grid;
	gap: var(--gallery-gap);
	align-items: start;
}
.gallery--masonry.gallery--cols-1 .gallery__items{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gallery--masonry.gallery--cols-2 .gallery__items{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--masonry.gallery--cols-3 .gallery__items{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery--masonry.gallery--cols-4 .gallery__items{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery--masonry.gallery--cols-5 .gallery__items{ grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Rijen van 1px; de tussenruimte zit in de span-berekening, niet in row-gap. */
.gallery--masonry .gallery__items.is-masonry{
	grid-auto-rows: 1px;
	row-gap: 0;
}

/* Let op: hier bewust geen aspect-ratio. Het beeld houdt zijn eigen
   verhouding - dat is wat de masonry zichtbaar maakt - en die komt uit de
   width/height-attributen die render_picture() meegeeft. Zet je hier
   aspect-ratio (ook 'auto'), dan vervalt die en is het beeld 0px hoog
   zolang het nog niet ingeladen is. */


/* ------------------------------------------------------------
 * SWIPER — horizontaal scrollen met snap
 * ---------------------------------------------------------- */
.gallery--swiper .gallery__items{
	display: flex;
	gap: var(--gallery-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gallery--swiper .gallery__items::-webkit-scrollbar{ display: none; }

.gallery--swiper .gallery-item{
	scroll-snap-align: start;
	flex: 0 0 100%;
}
.gallery--swiper.gallery--cols-2 .gallery-item{ flex-basis: calc((100% - 1 * var(--gallery-gap)) / 2); }
.gallery--swiper.gallery--cols-3 .gallery-item{ flex-basis: calc((100% - 2 * var(--gallery-gap)) / 3); }
.gallery--swiper.gallery--cols-4 .gallery-item{ flex-basis: calc((100% - 3 * var(--gallery-gap)) / 4); }
.gallery--swiper.gallery--cols-5 .gallery-item{ flex-basis: calc((100% - 4 * var(--gallery-gap)) / 5); }

.gallery--swiper .gallery-item img{
	aspect-ratio: 1 / 1;
}

/* Slides die buiten beeld staan mogen niet door de reveal verborgen blijven. */
.gallery--swiper [data-reveal]{
	opacity: 1;
	transform: none;
}

.gallery__arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background-color: var(--fg);
	color: var(--bg);
	border-color: var(--fg);
	margin-top: 0;
}
.gallery__arrow[hidden]{ display: none; }
.gallery__arrow--prev{ left: calc(-1 * var(--gallery-gap)); }
.gallery__arrow--next{ right: calc(-1 * var(--gallery-gap)); }
.gallery__arrow:hover{
	background-color: var(--bg);
	color: var(--fg);
}
.gallery__arrow span{
	margin-bottom: 0;
}

/* ------------------------------------------------------------
 * RESPONSIVE
 * ---------------------------------------------------------- */
@media screen and (max-width: 1200px){
	.gallery--tiled.gallery--cols-3 .gallery__items,
	.gallery--tiled.gallery--cols-4 .gallery__items,
	.gallery--tiled.gallery--cols-5 .gallery__items{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.gallery--masonry.gallery--cols-3 .gallery__items,
	.gallery--masonry.gallery--cols-4 .gallery__items,
	.gallery--masonry.gallery--cols-5 .gallery__items{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.gallery--swiper.gallery--cols-3 .gallery-item,
	.gallery--swiper.gallery--cols-4 .gallery-item,
	.gallery--swiper.gallery--cols-5 .gallery-item{ flex-basis: calc((100% - 1 * var(--gallery-gap)) / 2); }
}

@media screen and (max-width: 600px){
	.gallery--tiled .gallery__items{ grid-template-columns: minmax(0, 1fr) !important; }
	.gallery--masonry .gallery__items{ grid-template-columns: minmax(0, 1fr) !important; }
	.gallery--swiper .gallery-item{ flex-basis: 100% !important; }

	.gallery__arrow{ display: none; }
}