/* Bundels-grid: loaded on bundle pages and in the editor. The site-wide style (mh_bundels_grid_stijl())
   is a class on the gallery: bundels-grid--plank, --passe-partout or --raster. */

.bundels-grid .wp-element-caption {
	display: none;
}

/* Core draws a blurred fade behind captions; the captions are hidden, so drop it too */
.bundels-grid figure.wp-block-image::before {
	content: none !important;
}

/* Covers keep their column width; core would stretch the ones in an unfilled last row */
.bundels-grid.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
}

.bundels-grid.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
}


/* ~~ Boekenplank: every cover at the column width in its own shape, standing on a shelf line under
   each row, drawn in the weight and colour of the site's other lines ~~ */

.bundels-grid--plank.wp-block-gallery.has-nested-images {
	align-items: flex-end;
	row-gap: calc(3 * var(--global--spacing-vertical));
	padding-bottom: 3px;
}

/* Stand on the bottom of the row; core pins uncropped images to the top with margin-bottom: auto */
.bundels-grid--plank.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	margin-top: auto;
	margin-bottom: 0;
}

.bundels-grid--plank.wp-block-gallery.has-nested-images figure.wp-block-image img {
	box-shadow: 4px 2px 10px rgba(0, 0, 0, 0.35);
}

/* Each cover's piece of the shelf reaches halfway into the gap on both sides, so a row's
   pieces join into one line */
.bundels-grid--plank.wp-block-gallery.has-nested-images figure.wp-block-image::after {
	content: "";
	position: absolute;
	left: calc(var(--wp--style--unstable-gallery-gap, 16px) / -2);
	right: calc(var(--wp--style--unstable-gallery-gap, 16px) / -2);
	bottom: -3px;
	border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
}


/* ~~ Passe-partout and Raster: every tile the same A-format size (1:√2, the shape of most bundles) ~~ */

.bundels-grid--passe-partout.wp-block-gallery.has-nested-images figure.wp-block-image img,
.bundels-grid--raster.wp-block-gallery.has-nested-images figure.wp-block-image img {
	aspect-ratio: 1 / 1.414;
	height: auto;
}

/* Passe-partout: the whole cover, centred on a slightly darker panel */
.bundels-grid--passe-partout.wp-block-gallery.has-nested-images figure.wp-block-image a {
	background: rgba(0, 0, 0, 0.07);
}

.bundels-grid--passe-partout.wp-block-gallery.has-nested-images figure.wp-block-image img {
	box-sizing: border-box;
	padding: 9%;
	object-fit: contain;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.28));
}

/* Raster: covers fill their tile; narrower ones lose a little at the top and bottom */
.bundels-grid--raster.wp-block-gallery.has-nested-images figure.wp-block-image img {
	object-fit: cover;
}