/*
 * Referencje / References
 * Kompletny arkusz po wszystkich poprawkach.
 */

/* GŁÓWNY KOMPONENT */

.promo-references {
	display: flex;
	flex-direction: column;
	gap: 96px;
}

/* KAFELKI */

.promo-references .promo-references__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

.promo-references .promo-references__tab {
	box-sizing: border-box;
	width: calc((100% - 32px) / 3);
	min-height: 128px;
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--theme-palette-color-2);
	border-radius: 4px;
	transition: background-color 0.12s ease;
}

.promo-references .promo-references__tab:hover,
.promo-references .promo-references__tab:focus-visible,
.promo-references .promo-references__tab.active {
	background: var(--theme-palette-color-8);
	cursor: pointer;
}

.promo-references .promo-references__tab:focus-visible {
	outline: 2px solid var(--theme-palette-color-5);
	outline-offset: 3px;
}

/* SEPARATOR */

.promo-references > .break-line {
	width: 100%;
	height: 2px;
	background-color: var(--theme-palette-color-5);
}

/* PANELE */

.promo-references .promo-references__panel {
	display: none;
	flex-direction: column;
	gap: 48px;
}

.promo-references .promo-references__panel.active {
	display: flex;
}

/* OPIS */

.promo-references .promo-reference__description > *:first-child {
	margin-top: 0;
}

.promo-references .promo-reference__description > *:last-child {
	margin-bottom: 0;
}

.promo-references .promo-reference__description p {
	font-size: 24px;
}

.promo-references .promo-reference__description {
	margin-bottom: 24px;
}

/* GRUPY: GALERIA + LINKI */

.promo-references .promo-reference__graphic-groups {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.promo-references .promo-reference__graphic-group {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* GALERIA GRID */

.promo-references .promo-reference__gallery--grid {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	align-items: stretch;
	width: 100%;
}

/*
 * AUTO:
 * - wszystkie zdjęcia mają wspólną wysokość,
 * - szerokość wynika z proporcji obrazu,
 * - cały rząd wypełnia dostępną szerokość,
 * - nic nie jest przycinane.
 */
.promo-references .promo-reference__image--auto {
	flex-grow: var(--image-ratio, 1);
	flex-shrink: 1;
	flex-basis: 0;
	min-width: 0;
	width: auto;
	display: flex;
}

/* POZOSTAŁE SZEROKOŚCI */

.promo-references .promo-reference__image--full {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
}

.promo-references .promo-reference__image--half {
	flex: 0 0 calc((100% - 24px) / 2);
	width: calc((100% - 24px) / 2);
	display: flex;
}

.promo-references .promo-reference__image--third {
	flex: 0 0 calc((100% - 48px) / 3);
	width: calc((100% - 48px) / 3);
	display: flex;
}

/*
 * Wspólna wysokość jest wyznaczana przez szerokości wynikające z proporcji.
 * Anchor i obraz rozciągają się do tej samej wysokości w rzędzie.
 */
.promo-references .promo-reference__gallery--grid .promo-reference__image > a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 4px;
}

.promo-references .promo-reference__gallery--grid .promo-reference__image-element {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	border-radius: 4px;
}

/* GALERIA PIONOWA */

.promo-references .promo-reference__gallery--stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
}

.promo-references .promo-reference__gallery--stack .promo-reference__image {
	width: 100%;
	flex: 0 0 100%;
	display: flex;
	justify-content: center;
}

.promo-references .promo-reference__gallery--stack .promo-reference__image > a {
	display: block;
	width: 100%;
	height: auto;
}

.promo-references .promo-reference__gallery--stack .promo-reference__image-element {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
}

/* INFORMACJA O POWIĘKSZENIU */

.promo-references .promo-reference__zoom-info {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.promo-references .promo-reference__zoom-info svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

/* LINKI */

.promo-references .promo-reference__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: flex-start;
}

.promo-references .promo-reference__link {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 16px 12px;
	border: 2px solid #fff;
	border-radius: 4px;
	font-size: 16px;
	max-width: max-content;
	transition: transform 0.12s ease;
}

.promo-references .promo-reference__link:hover {
	transform: translateY(-3px);
}

.promo-references .promo-reference__link svg {
	flex: 0 0 16px;
}

/* TABLET */

@media only screen and (max-width: 999px) {

	.promo-references {
		gap: 64px;
	}

	.promo-references .promo-references__tab {
		width: calc((100% - 16px) / 2);
	}

	/*
	 * Na tabletach nadal zachowujemy układ w jednym rzędzie,
	 * dopóki zdjęcia mają wystarczającą ilość miejsca.
	 */
	.promo-references .promo-reference__gallery--grid {
		gap: 16px;
	}
}

/* TELEFON */

@media only screen and (max-width: 767px) {

	.promo-references {
		gap: 48px;
	}

	.promo-references .promo-references__tabs {
		gap: 12px;
	}

	.promo-references .promo-references__tab {
		width: 100%;
		min-height: 96px;
		padding: 24px 20px;
	}

	.promo-references .promo-references__panel {
		gap: 32px;
	}

	.promo-references .promo-reference__graphic-groups {
		gap: 40px;
	}

	.promo-references .promo-reference__gallery--grid {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 24px;
	}

	.promo-references .promo-reference__image--auto,
	.promo-references .promo-reference__image--full,
	.promo-references .promo-reference__image--half,
	.promo-references .promo-reference__image--third {
		width: 100%;
		min-width: 0;
		flex: 0 0 auto;
	}

	.promo-references .promo-reference__gallery--grid .promo-reference__image > a {
		width: 100%;
		height: auto;
	}

	.promo-references .promo-reference__gallery--grid .promo-reference__image-element {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.promo-references .promo-reference__links {
		flex-direction: column;
	}

	.promo-references .promo-reference__link {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		justify-content: center;
	}
}


.promo-references .promo-references__separator {
	display: none;
}

.promo-references.has-active-reference .promo-references__separator {
	display: block;
}


.promo-references .promo-references__panel--all {
	gap: 64px;
}

.promo-references .promo-reference__all-item {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.promo-references .promo-references__all-separator {
	display: block !important;
	flex: 0 0 2px;
	width: 100%;
	height: 2px;
	background-color: var(--theme-palette-color-5);
}

.promo-references .promo-references__all-separator:last-child {
	display: none !important;
}