/* Akordeon ze zdjęć (inc/image-accordion.php). */

.image-accordion {
	container-type: inline-size;
	max-width: var(--accordion-width);
	margin-inline: auto;
}

.image-accordion__panels {
	display: flex;
	aspect-ratio: 1 / var(--accordion-ratio);
}

/* Wtyczka zaokrąglała wysokość w górę do pełnego piksela. */
@supports (height: round(up, 1.5px, 1px)) {
	.image-accordion__panels {
		aspect-ratio: auto;
		height: round(up, 100cqw * var(--accordion-ratio), 1px);
	}
}

.image-accordion__panel {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	transition: flex-grow 0.4s ease-in-out, flex-basis 0.4s ease-in-out;
}

/* Ujemny odstęp oznacza, że panele na siebie nachodzą — tak jak we wtyczce. */
.image-accordion__panel + .image-accordion__panel {
	margin-left: var(--accordion-distance);
}

.image-accordion__panel.is-open {
	flex: 0 0 var(--panel-open);
}

.image-accordion__image {
	display: block;
	width: auto;
	max-width: none;
	height: 100%;
}

.image-accordion__panel:focus-visible {
	outline: 2px solid #ff6104;
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.image-accordion__panel {
		transition: none;
	}
}