/**
 * Strona O mnie — rozbudowa z jednej statycznej sekcji do pięciopokojowej
 * narracji .gd-morph (shape 2026-08-11): hero / manifest / proces / filary /
 * zamknięcie. Osobny plik, nie dotyka style.css (plik chroniony, §18
 * CLAUDE.md) poza tym, co już tam było. Ten sam wzorzec co contact.css
 * (Kontakt, 2026-08-10).
 *
 * Treść hero (bio), cytatu, sekcji "Cień i światło" i filaru "Wykształcenie"
 * to prawdziwe, dosłowne słowa Agaty (przekazane 2026-08-29, referencja:
 * docs/teksty/o-mnie.md) — nie parafrazować. Nagłówki sekcji, tekst
 * zamknięcia/CTA i galeria procesu (3 puste kafle) to nadal robocza kopia
 * Claude, do zatwierdzenia/uzupełnienia przez Agatę.
 */

/* style.css nadaje .gd-about-page nieprzezroczyste tło (var(--gd-ink)), które
   przykrywałoby body i blokowało color-morph .gd-morph (main.js animuje
   background-color na document.body — patrz commissions.css/contact.css dla
   tego samego triku). */
.gd-about-page {
	background: transparent;
}

/* Nagi <h2> w pokoju procesu renderowałby się jako 16px (theme.json
   font-size preset nie trafia do #global-styles-inline-css — ten sam,
   udokumentowany bug co w contact.css/commissions.css). Skala Title.
   Zawężone do .gd-about-process__inner, żeby nie nadpisać już poprawnie
   ostylowanego .gd-cta-band__title (własna, większa skala + magenta na em
   w style.css) wyższą specyficznością. */
.gd-about-process__inner h2 {
	font-family: var(--gd-font-display);
	font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem);
	font-weight: 380;
	line-height: 1.15;
	margin: 0 0 1.25rem;
}

.gd-about-process__inner h2 em {
	font-style: italic;
	color: var(--gd-ochre-bright);
}

/* --- Pokój 1: hero (tytuł + zdjęcie) ------------------------------------- */

.gd-about-hero {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

.gd-about-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: clamp(2.5rem, 5vw, 5rem);
	max-width: 1200px;
	margin-inline: auto;
	align-items: start;
}

.gd-about-hero__title.wp-block-post-title {
	font-family: var(--gd-font-display);
	font-size: clamp(4rem, 9vw, 8rem);
	color: var(--gd-cream);
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0 !important;
}

.gd-about-hero__bio {
	max-width: 46ch;
	margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
	color: var(--gd-muted);
	font-size: 1.05rem;
	line-height: 1.7;
}

.gd-about-hero__bio p {
	margin: 0 0 1.1em;
}

.gd-about-hero__bio p:last-child {
	margin-bottom: 0;
}

.gd-about-hero__photo-wrap {
	align-self: start;
}

.gd-about-hero__photo.wp-block-post-featured-image {
	margin: 0 !important;
}

.gd-about-hero__photo.wp-block-post-featured-image img {
	width: 100%;
	height: 480px;
	object-fit: cover;
	object-position: center 20%;
	display: block;
	outline: 1px solid color-mix(in srgb, var(--gd-violet) 35%, transparent);
	outline-offset: 10px;
}

@media (max-width: 900px) {
	.gd-about-hero__inner {
		grid-template-columns: 1fr;
	}
	.gd-about-hero__photo-wrap {
		max-width: 320px;
		margin-inline: auto;
	}
	.gd-about-hero__photo.wp-block-post-featured-image img {
		height: 380px;
	}
}

/* --- Pokój 3: proces / pracownia ----------------------------------------- */

.gd-about-process__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	max-width: 1200px;
	margin-inline: auto;
	align-items: center;
}

.gd-about-process__text p {
	max-width: 52ch;
	color: var(--gd-muted);
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.85;
	margin: 0 0 1.1em;
}

.gd-about-process__text p:last-child {
	margin-bottom: 0;
}

.gd-about-process__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.75rem, 2vw, 1rem);
}

.gd-about-process__tile {
	aspect-ratio: 3 / 4;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.gd-about-process__tile--a {
	background: linear-gradient(155deg, var(--gd-cobalt), var(--gd-magenta) 60%, var(--gd-orange));
}

.gd-about-process__tile--b {
	background: linear-gradient(155deg, var(--gd-wine), var(--gd-magenta) 55%, var(--gd-ochre));
	transform: translateY(1.5rem);
}

.gd-about-process__tile--c {
	background: linear-gradient(155deg, var(--gd-teal), var(--gd-cobalt-bright) 60%, var(--gd-ochre-bright));
}

@media (max-width: 900px) {
	.gd-about-process__inner {
		grid-template-columns: 1fr;
	}
	.gd-about-process__gallery {
		order: -1;
	}
}

@media (max-width: 560px) {
	.gd-about-process__tile--b {
		transform: none;
	}
}

/* --- Pokój 4: filary ------------------------------------------------------ */

/* .gd-pillars (style.css, dzielone z front-page) zakłada 3 kolumny — tu
   celowo 2, bo trzeci filar usunięty (duplikował front-page, krytyka
   2026-08-11). Zawężone do .gd-about-pillars, nie dotyka współdzielonej
   klasy globalnej. */
.gd-about-pillars {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 620px) {
	.gd-about-pillars {
		grid-template-columns: 1fr;
	}
}

/* --- Pokój 5: zamknięcie / CTA -------------------------------------------- */

.gd-about-closing__text {
	max-width: 52ch;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	color: var(--gd-muted);
	font-size: 1.05rem;
	line-height: 1.8;
	text-align: center;
}