/*
 * Photo gallery in a modal dialog (template-parts/components/gallery-dialog.php):
 * the text dialog (component-dialog.css) made wide and as tall as the
 * window allows, the carousel (component-carousel.css) showing one photo
 * at a time with the arrows over it. First used by the Miejsce rooms.
 * Photos keep their own proportions; a lower one sits in the middle.
 */

.hf-dialog.hf-gallery
{
	width: min(100% - 2rem, 64rem);
	max-height: calc(100% - 2rem);
}

.hf-gallery__title
{
	margin: 0 0 var(--hf-space-m);
	/* Room for the close button. */
	padding-right: 3rem;
	font-size: var(--hf-text-card-title);
}

.hf-gallery .hf-carousel
{
	--hf-carousel-item: 100%;
	/* Always shown, also with a mouse. */
	--hf-carousel-arrows: 1;
	/* Over the photo, just inside its edges. */
	--hf-carousel-arrow-offset: -0.75rem;
}

.hf-gallery .hf-carousel__item
{
	align-items: center;
}

.hf-gallery__figure
{
	width: 100%;
	margin: 0;
}

/* Title, padding and the arrows under the photo on smaller screens fit
   in the 14rem left of the window height. */
.hf-gallery__image
{
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100dvh - 14rem);
	object-fit: contain;
}

.hf-gallery__caption
{
	margin-top: var(--hf-space-xs);
	font-size: var(--hf-text-s);
	text-align: center;
}