/*
 * Style strony "O mnie" — StützSkin
 * Szablon: page-o-mnie.php
 * Uwaga: --rose-mid nie istnieje w palecie — zastąpiony rgba(83,41,51,0.35).
 */


/* ----------------------------------------------------------------
 * Wrapper główny — mobile: 1 kolumna
 * ---------------------------------------------------------------- */
.o-mnie-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	padding: 120px 24px 60px; /* 120px = 80px (fixed nav) + 40px (oddech) */
	max-width: 1440px;
	margin: 0 auto;
}

/* Tytuł w treści — zastępuje page-hero */
.o-mnie__title {
	font-family: var(--serif);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 300;
	line-height: 1.1;
	color: var(--ink);
	margin-top: var(--space-sm);
	margin-bottom: var(--space-md);
}

.o-mnie__title em {
	font-style: italic;
	color: var(--brick);
}

/* ----------------------------------------------------------------
 * Lewa kolumna: ramka zdjęcia
 * ---------------------------------------------------------------- */
.photo-frame {
	position: relative;
	aspect-ratio: 4 / 3; /* mobile: szersze, mniej miejsca w pionie */
	background: var(--cream-dark);
	overflow: hidden;
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
}

.photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.photo-frame__placeholder {
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--ink-muted);
}

/* Tag z lokalizacją — przyklejony do prawego dolnego rogu */
.photo-tag {
	position: absolute;
	bottom: 24px;
	right: -12px; /* lekko wychodzi poza ramkę */
	background: var(--brick);
	color: var(--white);
	padding: 12px 18px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ----------------------------------------------------------------
 * Prawa kolumna: treść biogramu
 * ---------------------------------------------------------------- */
.o-mnie__content > p {
	font-size: 16px;
	line-height: 1.85;
	color: var(--ink-light);
	margin-bottom: 24px;
}

.o-mnie__content > p:first-of-type {
	margin-top: var(--space-md);
}

/* ----------------------------------------------------------------
 * Siatka kredencjałów 2×2
 * ---------------------------------------------------------------- */
.credentials-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	margin: 40px 0;
}

.cred-box {
	background: var(--white);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Wariant brick (Charité) */
.cred-box.accent {
	background: var(--brick);
}

/* Wariant rose (towarzystwa) */
.cred-box.secondary {
	background: #793545;
}

/* Liczba / wartość główna */
.cred-box .num {
	display: block;
	font-family: var(--serif);
	font-size: 36px;
	font-weight: 300;
	line-height: 1;
	color: var(--brick);
}

/* Kafelek języków — dłuższy tekst, font zmniejszony o ~20% */
.cred-box--lang .num {
	font-size: 29px;
}

.cred-box.accent .num,
.cred-box.secondary .num {
	color: var(--white);
}

/* Etykieta pod liczbą */
.cred-box .lbl {
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--ink-muted);
}

.cred-box.accent .lbl,
.cred-box.secondary .lbl {
	color: rgba(255, 255, 255, 0.65);
}

/* ----------------------------------------------------------------
 * Towarzystwa naukowe
 * ---------------------------------------------------------------- */
.memberships {
	margin: 32px 0;
	padding: 28px 0;
	border-top: 0.5px solid var(--cream-deep);
	border-bottom: 0.5px solid var(--cream-deep);
}

.memberships-label {
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--rose);
	margin-bottom: 12px;
}

/* Każda pozycja z dekoracyjną kreską */
.mem-item {
	font-size: 13px;
	color: var(--ink-light);
	padding: 6px 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.mem-item::before {
	content: '';
	display: block;
	width: 18px;
	height: 0.5px;
	background: rgba(83, 41, 51, 0.35); /* --rose-mid (brak w palecie) */
	flex-shrink: 0;
}

/* ----------------------------------------------------------------
 * Sekcja "Prywatnie"
 * ---------------------------------------------------------------- */
.o-mnie__prywatnie {
	padding-top: 20px;
}

.o-mnie__prywatnie h3 {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 300;
	color: var(--ink);
	margin-bottom: 16px;
	line-height: 1.2;
}

.o-mnie__prywatnie p {
	font-size: 15px;
	line-height: 1.8;
	color: var(--ink-light);
}

/* ----------------------------------------------------------------
 * Mobile (≤767px) — wąskie ekrany
 * ---------------------------------------------------------------- */
@media (max-width: 767px) {
	.o-mnie-wrap {
		padding: 80px 20px 48px;
		gap: 16px;
	}

	.o-mnie__photo {
		margin-top: 0;
	}

	.photo-frame {
		aspect-ratio: unset;
		height: 420px;
	}

	.photo-frame img {
		object-fit: cover;
		object-position: top center;
	}

	.o-mnie__prywatnie {
		padding-top: 32px;
	}
}

/* ----------------------------------------------------------------
 * Desktop (≥768px): 2 kolumny 5fr / 7fr
 * ---------------------------------------------------------------- */
@media (min-width: 768px) {
	.o-mnie-wrap {
		grid-template-columns: 5fr 7fr;
		gap: 80px;
		padding: 120px 48px 80px;
	}

	/* Zdjęcie w pionie — proporcja portretowa */
	.photo-frame {
		aspect-ratio: 3 / 4;
	}

	/* Zdjęcie wyrównane z górą tekstu */
	.o-mnie__photo {
		align-self: start;
	}
}