/*
 * O nama (About) — page-about.php
 *
 * Loaded after services.css so the layout primitives (.service-hero,
 * .service-content, .service-sidebar) and overlay-header rule are
 * already in scope. This file only owns the About-specific bits:
 *   - overlay-header keyed to .page-template-page-about,
 *   - small hero typography tweaks (40px title vs. the 56px service hero),
 *   - intro paragraph + alternating image/text rows in the main column.
 *
 * Maps Figma frame 90:337 "O AGENT PLUS GRUPI".
 */

.page-template-page-about .site-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
}

.page-template-page-about .site-main {
	margin-top: 0;
	overflow-x: clip;
}

/* Hero ---------------------------------------------------------------
 * Figma 90:344 places the title at Tahoma Bold 40/53, 2px tracking — a
 * shorter visual weight than .service-hero__title (56px). Override
 * those two properties and inherit everything else.
 * ------------------------------------------------------------------ */
.about-hero {
	min-height: 630px;
	padding: 220px 0 96px;
}

.about-hero .service-hero__title {
	max-width: 760px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 40px;
	line-height: 53px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}

.about-hero .service-hero__text {
	max-width: 558px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0.5px;
	color: #fff;
}

/* Body --------------------------------------------------------------- */
.about-article {
	color: #424242;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0;
}

.about-article > * + * {
	margin-top: 40px;
}

.about-article p {
	margin: 0 0 16px;
}

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

.about-article__intro {
	max-width: 774px;
}

/* Image + paragraph row. Image stacks above the paragraph; both are
 * full width of the main column. Figma renders images with ~10px
 * radius; mirror that here. */
.about-row {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 774px;
}

.about-row__media {
	margin: 0;
	border-radius: var(--radius-md, 10px);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #f3f3f3;
}

.about-row__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-row__body p {
	margin: 0 0 16px;
}

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

/* Responsive --------------------------------------------------------- */
@media screen and (max-width: 1499px) {
	.about-hero {
		min-height: 560px;
		padding: 200px 0 80px;
	}
}

@media screen and (max-width: 991px) {
	.about-hero {
		min-height: 480px;
		padding: 180px 0 72px;
	}

	.about-hero .service-hero__title {
		font-size: 32px;
		line-height: 1.3;
		letter-spacing: 1.5px;
	}

	.about-hero .service-hero__text {
		font-size: 16px;
		line-height: 26px;
	}

	.about-article > * + * {
		margin-top: 32px;
	}
}

@media screen and (max-width: 599px) {
	.about-hero {
		min-height: 420px;
		padding: 160px 0 56px;
	}

	.about-hero .service-hero__title {
		font-size: 26px;
		line-height: 1.25;
	}

	.about-hero .service-hero__text {
		font-size: 15px;
		line-height: 24px;
	}

	.about-article {
		font-size: 15px;
		line-height: 24px;
	}

	.about-row {
		gap: 18px;
	}
}