/**
 * AccordionGallery (design-references/AccordionGallery-reactbits.md).
 *
 * Kolejnosc mysli w tym pliku jest celowa:
 *  1. stan DOMYSLNY - rowne panele, pelny kolor, etykiety widoczne. Tak
 *     wyglada sekcja bez JS, przy blednym skrypcie i przed jego wykonaniem.
 *  2. stan .is-enhanced - dopiero tu wchodzi wyszarzenie, ukryte etykiety
 *     i perspektywa 3D, czyli wszystko, czym steruje GSAP.
 * Dzieki temu nigdy nie ma momentu, w ktorym tresc jest niewidoczna, bo
 * skrypt sie jeszcze nie doladowal.
 */

.accordion-gallery {
	display: flex;
	flex-direction: row;
	gap: 10px;
	width: 100%;
	height: clamp(340px, 46vh, 520px);
}

.ag-panel {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius-lg, 16px);
	color: var(--color-text);
	text-decoration: none;
	background: var(--color-bg-elevated);
}

.ag-panel__media {
	position: absolute;
	/* Zapas po bokach: zdjecie jest szersze niz panel, wiec parallax drift
	   moze przesunac je bez odslaniania tla. Maksymalny drift z JS to 9%
	   szerokosci zwinietego panelu - 12% daje margines na zaokraglenia. */
	inset: 0 -12%;
	display: block;
	--ag-gray: 0;
	--ag-dim: 0;
	filter: grayscale(var(--ag-gray));
}

.ag-panel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Przyciemnienie nieaktywnych paneli - osobna warstwa, zeby nie mieszac
   opacity zdjecia z opacity etykiety. */
.ag-panel__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--ag-dim);
	pointer-events: none;
}

/* Placeholder dla realizacji bez zdjecia. */
.ag-panel__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, transparent 60%),
		var(--color-bg-elevated);
}

.ag-panel__placeholder-mark {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	opacity: 0.45;
}

.ag-panel__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--color-bg) 82%, transparent) 100%);
}

.ag-panel__label {
	position: absolute;
	left: var(--space-5, 20px);
	right: var(--space-5, 20px);
	bottom: var(--space-5, 20px);
	display: flex;
	align-items: stretch;
	gap: 12px;
	pointer-events: none;
}

.ag-panel__bar {
	flex: 0 0 3px;
	border-radius: 3px;
	background: var(--color-accent);
}

.ag-panel__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ag-panel__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(0.95rem, 1.6vw, 1.125rem);
	line-height: 1.25;
	color: var(--color-text);
	/* Panel bywa waski w trakcie animacji - tekst ma sie NIE lamac
	   literowo, tylko zostac uciety wielokropkiem. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ag-panel__meta {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ag-panel:focus-visible {
	outline: 2px solid var(--color-accent-text);
	outline-offset: 3px;
}

/* ---------- Stan sterowany przez JS ---------- */
.accordion-gallery.is-enhanced {
	perspective: 1400px;
}

.is-enhanced .ag-panel {
	cursor: pointer;
	transform-style: preserve-3d;
	will-change: flex-grow, transform;
}

.is-enhanced .ag-panel__media {
	--ag-gray: 1;
	--ag-dim: 0.35;
	will-change: transform, filter;
}

.is-enhanced .ag-panel.is-active .ag-panel__media {
	--ag-gray: 0;
	--ag-dim: 0;
}

/* Etykiety nieaktywnych paneli sa niewidoczne, ale POZOSTAJA w drzewie
   dostepnosci - czytnik ekranu odczyta nazwe kazdego odnosnika. Uzytkownik
   klawiatury dostaje etykiete z powrotem, bo focus aktywuje panel (JS). */
.is-enhanced .ag-panel__bar,
.is-enhanced .ag-panel__text {
	opacity: 0;
	transform: translateX(-14px);
}

.is-enhanced .ag-panel.is-active .ag-panel__bar,
.is-enhanced .ag-panel.is-active .ag-panel__text {
	opacity: 1;
	transform: none;
}

/* ---------- Mobile: uklad pionowy ---------- */
@media (max-width: 520px) {
	.accordion-gallery {
		flex-direction: column;
		height: 420px;
	}
	.accordion-gallery.is-enhanced {
		perspective: none;
	}
	.ag-panel {
		min-height: 84px;
	}
	/* Bez obrotu 3D w pionie - wygladalby jak blad renderowania. */
	.is-enhanced .ag-panel {
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-enhanced .ag-panel,
	.is-enhanced .ag-panel__media {
		will-change: auto;
	}
	.is-enhanced .ag-panel {
		transform: none !important;
	}
}