/* ═══════════════════════════════════════
   MODAL – generyczny shell (natywny <dialog>) + wzorzec treści „osoba".
   Shell (.modal*) jest content-agnostyczny; wzorzec .modal-person* reużywany
   przez biogramy jury / gości. Ładowane warunkowo: handle '-modal' (inc/enqueue.php).
   Tokeny z theme.json (BEM). Animacja wejścia: @starting-style + transition allow-discrete.
   ═══════════════════════════════════════ */

/* ── Shell ── */
.modal {
	width: min(840px, calc(100vw - 1.5rem));
	max-height: 90vh;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text);
	overflow: hidden;

	/* Wyśrodkowanie modala. showModal() daje od UA `position:fixed; inset:0`, a centruje
	   `margin:auto`. ALE globalny reset `* { margin: 0 }` (base.css) bije UA i przykleja
	   dialog do lewego-górnego rogu – więc PRZYWRACAMY margin:auto jawnie. Responsywne:
	   stała szerokość/max-height + margin:auto = środek w obu osiach na każdym ekranie.
	   BEZ position:relative – nadpisałoby UA `position:fixed` i znów zepsuło środek;
	   .modal__close (absolute, bezpośrednie dziecko) kotwiczy się do tego fixed-boxa. */
	margin: auto;

	/* Animacja wejścia/wyjścia: fade + lekki podjazd/scale.
	   allow-discrete pozwala animować display/overlay przy zamknięciu. */
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition:
		opacity 0.28s ease,
		transform 0.28s ease,
		overlay 0.28s ease allow-discrete,
		display 0.28s ease allow-discrete;
}
.modal[open] {
	opacity: 1;
	transform: translateY(0) scale(1);
}
@starting-style {
	.modal[open] {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
}

.modal::backdrop {
	background: rgba(19, 45, 74, 0.6);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition:
		opacity 0.28s ease,
		overlay 0.28s ease allow-discrete,
		display 0.28s ease allow-discrete;
}
.modal[open]::backdrop {
	opacity: 1;
}
@starting-style {
	.modal[open]::backdrop {
		opacity: 0;
	}
}

.modal__inner {
	max-height: 90vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* momentum scroll na iOS */
}

/* Przycisk zamykania – mobile-first: duży, wygodny cel dotykowy. */
.modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;  /* ≥48px – komfortowy tap na telefonie (WCAG target size) */
	height: 3rem;
	border: 0;
	border-radius: 999px;
	/* Flat (bez cienia): pełny granat + biała ikona = czytelne na każdym zdjęciu. */
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.modal__close:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-hover);
}
.modal__close:active {
	transform: scale(0.92); /* feedback dotyku */
}
.modal__close svg {
	width: 1.6rem;
	height: 1.6rem;
}

/* Kontener treści – bez własnego paddingu (treść bywa full-bleed; padding daje wzorzec). */
.modal__content {
	display: block;
}

/* ── Wzorzec treści: osoba (biogram) ── */
.modal-person {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0;
}
.modal-person__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: 42vh; /* na telefonie zdjęcie nie zjada ekranu – biogram bliżej kciuka */
	object-fit: cover;
	display: block;
	background: var(--wp--preset--color--surface);
}
.modal-person__img[hidden] {
	display: none;
}
.modal-person__content {
	padding: 1.75rem 1.75rem 2rem;
}
.modal-person__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.15;
	color: var(--wp--preset--color--primary);
	margin: 0;
}
.modal-person__role {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	margin: 0.35rem 0 0;
}
.modal-person__bio {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text);
	margin-top: 1.25rem;
	white-space: pre-line; /* zachowuje akapity z danych (\n) */
}

@media (min-width: 768px) {
	.modal-person {
		grid-template-columns: 300px 1fr;
	}
	.modal-person__img {
		aspect-ratio: auto;
		height: 100%;
		max-height: none; /* desktop: kolumna ze zdjęciem na pełną wysokość */
	}
	.modal-person__content {
		padding: 2.5rem 2.5rem 2.75rem;
	}
	.modal-person__name {
		font-size: 1.75rem;
	}

	/* Desktop: precyzyjny wskaźnik – przycisk może być mniejszy. */
	.modal__close {
		top: 0.85rem;
		right: 0.85rem;
		width: 2.5rem;
		height: 2.5rem;
	}
	.modal__close svg {
		width: 1.35rem;
		height: 1.35rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.modal,
	.modal::backdrop {
		transition: none;
	}
	.modal__close {
		transition: none;
	}
}