/*
 * Zakładki produktu (CHARAKTER / ZAPACH / SKŁAD / INFORMACJE). Wymiary z
 * Figmy przez jednostkę --u (tokens.css). "Informacje" to czwarta zakładka
 * dodana poza projektem — wszystkie cztery etykiety stoją w jednym wierszu:
 * na mobile rozłożone na całą szerokość kolumny, na desktopie co 51px.
 *
 * Figma: etykiety są szare także w stanie aktywnym; aktywną zakładkę
 * wyróżnia tylko szara linia 1px pod etykietą.
 */

.product-tabs__list {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.product-tabs__trigger {
	position: relative;
	padding-bottom: calc(2 * var(--u));
	font-size: calc(10 * var(--u));
	line-height: calc(12 * var(--u));
	color: var(--color-muted);
	text-transform: uppercase;
	white-space: nowrap;
}

.product-tabs__trigger.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--color-muted);
}

/*
 * Panele leżą w tej samej komórce siatki. Desktop (Figma, Runda III): układ
 * zwarty - widać tylko aktywny panel (nieaktywne display: none przez atrybut
 * `hidden` z product-tabs.js), pod nim informacja o limitowanej edycji, cena
 * i przycisk; przełączenie zakładki zmienia wysokość kolumny.
 */
.product-tabs__panels {
	display: grid;
	margin-top: calc(16 * var(--u));
}

/* Figma mobile: pole tekstu ma 307px (węższe niż kolumna 322px). */
.product-tabs__panel {
	display: flex;
	flex-direction: column;
	grid-area: 1 / 1;
	min-width: 0;
	max-width: calc(307 * var(--u));
	font-size: calc(14 * var(--u));
	line-height: calc(20 * var(--u));
	color: var(--color-ink);
}

.product-tabs__panel[hidden] {
	display: none;
}

/*
 * Mobile: obszar zakładek ma stałą wysokość, więc przełączanie zakładek nie
 * przesuwa ceny ani przycisku. Nieaktywny panel jest niewidoczny
 * (visibility), ale zajmuje miejsce (atrybut `hidden` zostaje dla czytników
 * ekranu), więc obszar ma wysokość najdłuższej treści. Minimalna wysokość =
 * dotychczasowa wysokość zwiniętej zakładki "Informacje": 5 nagłówków
 * akordeonu (16 + interlinia + 1px ramki) + akapit "Dane producenta" (20
 * odstępu, nagłówek + 3 wiersze adresu, w EN 4 z krajem); od Rundy III dane
 * producenta są zwijane, a zwolnione miejsce zajmuje informacja o limitowanej
 * edycji (dosuwana do dołu panelu, single-product.css). Figma: 180px.
 * Rozwinięcie sekcji w "Informacjach" naturalnie zwiększa wysokość.
 */
@media (max-width: 899px) {
	.product-tabs__panels {
		min-height: calc(5 * (36 * var(--u) + 1px) + 20 * var(--u) + 4 * 20 * var(--u));
	}

	.product-tabs__panels:lang(en) {
		min-height: calc(5 * (36 * var(--u) + 1px) + 20 * var(--u) + 5 * 20 * var(--u));
	}

	.product-tabs__panel[hidden] {
		display: flex;
		visibility: hidden;
	}
}

/* Ostatni akordeon "Informacji" ma ten sam odstęp do informacji o limitowanej
   edycji co akapity treści w pozostałych zakładkach. */
.product-tabs__panel p:not(:last-child),
.product-info-accordion:last-of-type {
	margin-bottom: calc(20 * var(--u));
}

/* INFORMACJE: rozwijane sekcje + dane producenta (treść poza Figmą). */

.product-info-accordion {
	border-bottom: 1px solid var(--color-muted);
}

.product-info-accordion__heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: calc(12 * var(--u));
	padding: calc(8 * var(--u)) 0;
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	list-style: none;
}

.product-info-accordion__heading::-webkit-details-marker {
	display: none;
}

.product-info-accordion__heading::after {
	content: "+";
	font-weight: normal;
}

.product-info-accordion[open] > .product-info-accordion__heading::after {
	content: "\2212";
}

.product-tabs__panel .product-info-accordion p {
	margin: 0 0 calc(12 * var(--u));
}

@media (min-width: 900px) {
	/*
	 * Figma: etykiety zaczynają się w stałych punktach - Charakter 908,
	 * Zapach 1072 (+164), Skład 1203 (+131) - niezależnie od szerokości
	 * tekstu, stąd kolumny o stałej szerokości zamiast równego odstępu.
	 * Czwarta zakładka (poza Figmą) stoi 51px za trzecią. Etykieta dłuższa
	 * niż kolumna (inny język) poszerza ją zamiast nachodzić na następną.
	 */
	.product-tabs__list {
		display: grid;
		grid-template-columns:
			minmax(calc(164 * var(--u)), max-content)
			minmax(calc(131 * var(--u)), max-content)
			max-content
			max-content;
		justify-content: start;
		justify-items: start;
	}

	.product-tabs__trigger:nth-child(4) {
		margin-left: calc(51 * var(--u));
	}

	.product-tabs__trigger {
		padding-bottom: 0;
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.product-tabs__panels {
		margin-top: calc(20 * var(--u));
	}

	.product-tabs__panel {
		max-width: calc(659 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.product-tabs__panel p:not(:last-child),
	.product-info-accordion:last-of-type {
		margin-bottom: calc(26 * var(--u));
	}
}