/* Blok „O nas" */

.rb-people {
	background: var(--rb-color-bg);
	padding-block: var(--rb-space-12) var(--rb-space-16);
}

/* ------------------------------- wstęp z nadtytułem ----------------------------- */

.rb-people__head {
	display: grid;
	grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.rb-people__eyebrow {
	font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
	line-height: 1;
	font-weight: 300;
	color: var(--rb-color-heading);
	margin-bottom: 0;
}

.rb-people__intro {
	font-size: var(--rb-fs-body-m);
	line-height: 1.65;
	color: var(--rb-gray-600);
}
.rb-people__intro p { margin-bottom: var(--rb-space-5); }
.rb-people__intro p:last-child { margin-bottom: 0; }
.rb-people__intro strong { color: var(--rb-color-heading); }

/* ---------------------------------- sylwetki ------------------------------------ */

.rb-people__person {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.55fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.rb-people__person:last-child { margin-bottom: 0; }

/* Co druga sylwetka ma zdjęcie po lewej. Kolejność w HTML zostaje bez zmian,
   więc czytnik ekranu zawsze czyta najpierw nazwisko i opis. */
.rb-people__person--flip { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.5fr); }
.rb-people__person--flip .rb-people__body  { grid-column: 2; grid-row: 1; }
.rb-people__person--flip .rb-people__photo { grid-column: 1; grid-row: 1; }

.rb-people__name {
	font-size: clamp(1.25rem, 0.95rem + 1vw, 1.75rem);
	line-height: 1.25;
	margin-bottom: var(--rb-space-5);
}

.rb-people__bio {
	font-size: var(--rb-fs-body-m);
	line-height: 1.7;
	color: var(--rb-gray-600);
}
.rb-people__bio p { margin-bottom: var(--rb-space-5); }
.rb-people__bio p:last-child { margin-bottom: 0; }

/* Zdjęcia mają wtopioną pomarańczową plamę — motyw nie dokłada tła ani ramki. */
.rb-people__photo { align-self: start; }
.rb-people__image { width: 100%; height: auto; }

/* ---------------------------------- responsywnie -------------------------------- */

@media (max-width: 900px) {
	.rb-people { padding-block: var(--rb-space-8) var(--rb-space-10); }

	.rb-people__head {
		grid-template-columns: 1fr;
		gap: var(--rb-space-4);
		margin-bottom: var(--rb-space-10);
	}

	/*
	 * Na mobile kolejność z projektu to: nazwisko, zdjęcie, opis — zdjęcie wchodzi
	 * między nagłówek a tekst, więc nazwisko i opis muszą być osobnymi elementami siatki.
	 */
	.rb-people__person,
	.rb-people__person--flip {
		grid-template-columns: 1fr;
		gap: var(--rb-space-5);
		margin-bottom: var(--rb-space-10);
	}
	.rb-people__person--flip .rb-people__body,
	.rb-people__person--flip .rb-people__photo { grid-column: 1; grid-row: auto; }

	.rb-people__body { display: contents; }
	.rb-people__name  { order: 1; margin-bottom: 0; }
	.rb-people__photo { order: 2; max-width: 320px; margin-inline: auto; }
	.rb-people__bio   { order: 3; }
}