/* Specjalisci: archiwum i profil. */

/* Dwie kolumny od najwezszego ekranu. Przy auto-fill z minmax(160px) na
   360-390 px siatka spadala do JEDNEJ kolumny i zdjecie 4:5 zajmowalo
   428 px wysokosci - jedna twarz na pol ekranu zamiast przegladu zespolu. */
.spec-lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
	margin: 0; padding: 0;
	list-style: none;
}
@media (min-width: 560px) {
	.spec-lista { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-5); }
}
@media (min-width: 700px) {
	.spec-lista { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

.spec-karta a { display: block; text-decoration: none; }
.spec-karta img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin-bottom: var(--sp-3);
	/* Zdjecia w pelnym kolorze - naturalne twarze buduja zaufanie lepiej
	   niz jednolity zabieg stylistyczny. */
	transition: transform 0.3s var(--ease);
}
.spec-karta a:hover img { transform: scale(1.02); }
.spec-karta__imie {
	display: block;
	font-family: var(--f-heading);
	font-size: 1rem; font-weight: 600;
	color: var(--c-brand-dark);
}
.spec-karta__rola { display: block; font-size: 0.8rem; color: var(--c-text-muted); margin-top: 2px; }

/* --- profil --- */
.spec-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5);
	padding-block: var(--sp-6);
}
@media (min-width: 800px) {
	.spec-single__grid { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: var(--sp-8); }
}
.spec-single__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Ponizej progu dwoch kolumn zdjecie 4:5 na pelnej szerokosci spychalo H1
   ponizej zalamania (na 768 px lądowalo na 1110 px). Kadr poziomy i limit
   wysokosci sprawiaja, ze imie i stanowisko widac od razu po wejsciu. */
@media (max-width: 799.98px) {
	.spec-single__foto img {
		aspect-ratio: 3 / 2;
		max-height: 320px;
	}
}
.spec-single__stanowisko {
	margin: 0 0 var(--sp-5);
	font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--c-brand);
}
.spec-single__cta { margin-top: var(--sp-6); }

.spec-pozostali { padding-bottom: var(--sp-8); }
.spec-pozostali__title {
	font-size: 0.84rem; font-weight: 700; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--c-brand);
	padding-bottom: var(--sp-2); margin-bottom: var(--sp-5);
	border-bottom: 2px solid var(--c-brand-light);
}