/* Yana Berg — «Sobre mim». Светлая секция («бумага»), геометрия как у остальных блоков:
 * контейнер 1280, сетка 5/7, острые углы, фото 4:5 со смещённой подложкой (зеркально «Serviços»).
 */

.yb-about {
	background: var(--yb-paper);
	color: var(--yb-ink-text);
	padding: 120px 24px 96px;
	font-family: var(--yb-font-body);
	text-align: left;
}

.yb-about * {
	box-sizing: border-box;
}

.yb-about__inner {
	max-width: var(--yb-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 112px;
	align-items: center;
}

/* -------- фото с подложкой -------- */

.yb-about__media {
	position: relative;
	margin: 56px 0 0 56px;
	aspect-ratio: 4 / 5;
}

/* Тёмная подложка смещена вверх-влево и выглядывает буквой «Г» — зеркально светлой подложке в «Serviços». */
.yb-about__backdrop {
	position: absolute;
	top: -56px;
	left: -56px;
	right: 56px;
	bottom: 18%;
	background: var(--yb-ink);
	opacity: 0.92;
}

.yb-about__media img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/* -------- текст -------- */

.yb-about__content {
	max-width: 600px;
}

.yb-about__index {
	display: block;
	margin-bottom: 24px;
	font-size: var(--yb-fs-xs);
	font-weight: 600;
	letter-spacing: var(--yb-track-caps);
	text-transform: uppercase;
	color: var(--yb-marsala);
}

.yb-about__title {
	margin: 0;
	font-family: var(--yb-font-display);
	font-size: clamp(48px, 5.4vw, 80px);
	font-weight: 400;
	line-height: 1;
	color: var(--yb-ink-text);
}

.yb-about__role {
	margin: 16px 0 0;
	font-size: 12.5px;
	letter-spacing: var(--yb-track-caps);
	text-transform: uppercase;
	color: var(--yb-paper-muted);
}

/* Цитата — тонкий журнальный курсив с большими марсаловыми кавычками. Двойной класс перебивает
 * стандартный стиль WordPress blockquote:not(.is-large). */
.yb-about .yb-about__quote {
	position: relative;
	margin: 48px 0 40px;
	padding: 0 0 0 64px;
	border: 0;
	background: none;
}

.yb-about .yb-about__quote::before {
	content: "“";
	display: block;
	position: absolute;
	left: -6px;
	top: -22px;
	font-family: var(--yb-font-accent);
	font-style: italic;
	font-weight: 300;
	font-size: 128px;
	line-height: 1;
	color: var(--yb-marsala);
}

.yb-about .yb-about__quote p {
	margin: 0;
	font-family: var(--yb-font-accent);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.2;
	color: var(--yb-ink-text);
}

.yb-about__text p {
	margin: 0 0 16px;
	font-size: var(--yb-fs-md);
	line-height: 1.7;
	color: var(--yb-paper-muted);
}

.yb-about__facts {
	list-style: none;
	margin: 32px 0 40px;
	padding: 28px 0 0;
	border-top: 1px solid var(--yb-paper-line);
	display: grid;
	gap: 14px;
}

.yb-about__facts li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--yb-fs-base);
	line-height: 1.4;
	color: var(--yb-ink-text);
}

.yb-about__bullet {
	flex: none;
	width: 16px;
	height: auto;
	color: var(--yb-marsala);
}

/* Тонкая линия внизу — отделяет «Sobre» от «Formação» внутри одной светлой главы. */
.yb-about + .yb-diplomas {
	border-top: 1px solid var(--yb-paper-line);
}

/* -------- адаптив -------- */

@media (max-width: 1100px) {
	.yb-about__inner {
		gap: 72px;
	}
}

@media (max-width: 900px) {
	.yb-about {
		padding: 72px 20px;
	}

	.yb-about__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
	}

	.yb-about__media {
		max-width: 420px;
		width: calc(100% - 24px);
		margin: 24px 0 0 24px;
	}

	.yb-about__backdrop {
		top: -24px;
		left: -24px;
		right: 24px;
	}

	.yb-about .yb-about__quote {
		padding-left: 48px;
	}

	.yb-about .yb-about__quote::before {
		font-size: 96px;
		top: -14px;
	}
}

@media (max-width: 480px) {
	.yb-about {
		padding: 56px 16px;
	}

	.yb-about .yb-about__quote p {
		font-size: var(--yb-fs-2xl);
	}
}