/**
 * DEV-5.11 "Chi sono" page.
 * A brighter, more personal editorial page that reuses the frozen DEV-5.10
 * design language without duplicating the Homepage layout.
 */

.am-shell-main--about {
	overflow: clip;
	background: var(--am-color-background);
}

.am-about-eyebrow {
	margin: 0;
	color: var(--am-color-primary-dark);
	font-size: var(--am-font-size-label);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.am-about-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--am-space-3);
}

/* Hero ---------------------------------------------------------------- */

.am-about-hero {
	border-bottom: var(--am-border-width) solid var(--am-color-border);
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--am-color-surface) 72%, var(--am-color-background)) 0 46%, var(--am-color-background) 46% 100%);
}

.am-about-hero__grid {
	display: grid;
	min-height: clamp(29rem, 56svh, 37rem);
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: stretch;
}

.am-about-hero__media {
	position: relative;
	min-height: 21rem;
	overflow: hidden;
	background: color-mix(in srgb, var(--am-color-primary) 16%, var(--am-color-surface));
}

.am-about-hero__media::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--am-color-primary-dark) 8%, transparent)),
		linear-gradient(90deg, transparent 72%, color-mix(in srgb, var(--am-color-background) 18%, transparent));
	content: "";
	pointer-events: none;
}

.am-about-hero__image {
	width: 100%;
	height: 100%;
	min-height: inherit;
	object-fit: cover;
}

.am-about-hero__fallback {
	display: grid;
	width: 100%;
	height: 100%;
	min-height: inherit;
	place-items: center;
	color: color-mix(in srgb, var(--am-color-primary-dark) 28%, transparent);
	font-family: var(--am-font-display);
	font-size: clamp(10rem, 22vw, 20rem);
	line-height: 0.8;
}

.am-about-hero__content {
	display: flex;
	max-width: 40rem;
	padding: clamp(2.75rem, 4.2vw, 4.5rem) clamp(2rem, 4vw, 4.75rem);
	align-self: center;
	flex-direction: column;
	gap: var(--am-space-4);
}

.am-about-hero__title {
	max-width: 13ch;
	margin: 0;
	font-size: clamp(2.85rem, 2.35rem + 2.25vw, 4.55rem);
	line-height: 0.98;
	text-wrap: balance;
}

.am-about-hero__intro {
	max-width: 32rem;
	margin: 0;
	color: color-mix(in srgb, var(--am-color-text) 82%, var(--am-color-muted));
	font-size: clamp(1rem, 0.97rem + 0.12vw, 1.1rem);
	line-height: 1.55;
}

/* Professional information strip ------------------------------------- */

.am-about-trust {
	border-bottom: var(--am-border-width) solid var(--am-color-border);
	background: color-mix(in srgb, var(--am-color-surface) 82%, var(--am-color-background));
}

.am-about-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.am-about-trust__item {
	display: flex;
	min-height: 6.25rem;
	padding: var(--am-space-4);
	align-items: center;
	gap: var(--am-space-4);
	border-right: var(--am-border-width) solid var(--am-color-border);
}

.am-about-trust__item:last-child {
	border-right: 0;
}

.am-about-trust__icon {
	display: grid;
	width: var(--am-manager-trust-icon-size, 2.75rem);
	height: var(--am-manager-trust-icon-size, 2.75rem);
	flex: 0 0 auto;
	place-items: center;
	border: var(--am-border-width) solid color-mix(in srgb, var(--am-color-primary-dark) 20%, var(--am-color-border));
	border-radius: 50%;
	color: var(--am-color-primary-dark);
}

.am-about-trust__icon .am-icon {
	width: var(--am-manager-trust-icon-glyph, 1.25rem);
	height: var(--am-manager-trust-icon-glyph, 1.25rem);
}

.am-about-trust__item > div {
	display: grid;
	gap: 0.3rem;
}

.am-about-trust__label {
	color: var(--am-color-muted);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: var(--am-letter-spacing-label);
	text-transform: uppercase;
}

.am-about-trust__item strong {
	font-family: var(--am-font-display);
	font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.6rem);
	font-weight: 500;
	line-height: 1.15;
}

/* Shared section language -------------------------------------------- */

.am-about-section {
	position: relative;
	padding-block: clamp(3.25rem, 5vw, 5.25rem);
}

.am-about-section::before {
	position: absolute;
	top: 0;
	left: max(var(--am-gutter), calc((100vw - var(--am-wide-width)) / 2));
	width: min(calc(100% - (2 * var(--am-gutter))), var(--am-wide-width));
	height: 1px;
	background: color-mix(in srgb, var(--am-color-primary-dark) 20%, transparent);
	content: "";
}

.am-about-section__heading {
	display: grid;
	gap: var(--am-space-4);
}

.am-about-section__heading h2,
.am-about-areas__header h2,
.am-about-final-cta h2 {
	margin: 0;
	font-size: clamp(2.25rem, 1.9rem + 1.65vw, 3.6rem);
	line-height: 1;
	text-wrap: balance;
}

/* Profile copy -------------------------------------------------------- */

.am-about-profile {
	background: var(--am-color-background);
}

.am-about-profile__grid {
	display: grid;
	grid-template-columns: minmax(15rem, 0.78fr) minmax(0, 1.18fr) minmax(14rem, 0.64fr);
	align-items: start;
	gap: clamp(1.75rem, 3vw, 3.75rem);
}

.am-about-profile__body {
	display: grid;
	gap: var(--am-space-4);
	color: color-mix(in srgb, var(--am-color-text) 83%, var(--am-color-muted));
	font-size: clamp(1rem, 0.98rem + 0.12vw, 1.08rem);
	line-height: 1.55;
}

.am-about-profile__body p,
.am-about-profile__note p {
	margin: 0;
}

.am-about-profile__note {
	display: grid;
	gap: var(--am-space-3);
	padding: var(--am-space-4);
	border-left: 2px solid var(--am-color-primary);
	background: color-mix(in srgb, var(--am-color-surface) 72%, var(--am-color-background));
}

.am-about-profile__note span {
	color: var(--am-color-primary-dark);
	font-size: var(--am-font-size-label);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.am-about-profile__note p {
	font-family: var(--am-font-display);
	font-size: clamp(1.25rem, 1.14rem + 0.48vw, 1.6rem);
	line-height: 1.25;
}

/* Areas teaser -------------------------------------------------------- */

.am-about-areas {
	background: color-mix(in srgb, var(--am-color-surface) 68%, var(--am-color-background));
}

.am-about-areas__header {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.72fr);
	align-items: end;
	gap: clamp(1.75rem, 4vw, 4.5rem);
	margin-bottom: clamp(2rem, 3vw, 3.25rem);
}

.am-about-areas__header > div:first-child {
	display: grid;
	gap: var(--am-space-4);
}

.am-about-areas__summary {
	display: grid;
	justify-items: start;
	gap: var(--am-space-4);
}

.am-about-areas__summary p {
	margin: 0;
	color: var(--am-color-muted);
	line-height: 1.7;
}

.am-about-areas__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--am-grid-gap);
}

.am-about-area-item {
	position: relative;
	display: grid;
	min-height: 12.75rem;
	padding: clamp(1.35rem, 2vw, 1.85rem);
	align-content: end;
	gap: var(--am-space-3);
	border-top: 1px solid color-mix(in srgb, var(--am-color-primary-dark) 38%, var(--am-color-border));
	background: color-mix(in srgb, var(--am-color-white) 52%, transparent);
}

.am-about-area-item__icon {
	display: grid;
	width: 3rem;
	height: 3rem;
	margin-bottom: auto;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--am-color-primary) 24%, var(--am-color-background));
	color: var(--am-color-primary-dark);
}

.am-about-area-item h3,
.am-about-principle h3 {
	margin: 0;
	font-size: clamp(1.4rem, 1.28rem + 0.45vw, 1.75rem);
}

.am-about-area-item p,
.am-about-principle p {
	margin: 0;
	color: var(--am-color-muted);
	line-height: 1.55;
}

/* Approach ------------------------------------------------------------ */

.am-about-approach {
	background: var(--am-color-background);
}

.am-about-approach__grid {
	display: grid;
	grid-template-columns: minmax(21rem, 0.95fr) minmax(0, 1.3fr);
	gap: clamp(2.5rem, 4.5vw, 5.25rem);
}

.am-about-approach__heading {
	position: sticky;
	top: calc(var(--am-shell-desktop-navigation-height, 4rem) + 2rem);
	align-self: start;
}

.am-about-approach__items {
	display: grid;
}

.am-about-principle {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--am-space-4);
	padding-block: clamp(1.35rem, 2vw, 1.85rem);
	border-top: var(--am-border-width) solid var(--am-color-border);
}

.am-about-principle:last-child {
	border-bottom: var(--am-border-width) solid var(--am-color-border);
}

.am-about-principle__icon {
	display: grid;
	width: 3.25rem;
	height: 3.25rem;
	place-items: center;
	border: var(--am-border-width) solid color-mix(in srgb, var(--am-color-primary-dark) 24%, var(--am-color-border));
	border-radius: 50%;
	color: var(--am-color-primary-dark);
}

.am-about-principle > div {
	display: grid;
	gap: var(--am-space-3);
}

/* Final CTA ----------------------------------------------------------- */

.am-about-final-cta {
	position: relative;
	overflow: hidden;
	background: color-mix(in srgb, var(--am-color-primary) 76%, var(--am-color-background));
}

.am-about-final-cta__inner {
	position: relative;
	display: grid;
	min-height: 21rem;
	grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.75fr);
	align-items: center;
	gap: var(--am-grid-gap);
	padding-block: clamp(3.25rem, 5vw, 4.75rem);
}

.am-about-final-cta__copy {
	position: relative;
	z-index: 2;
	display: grid;
	max-width: 38rem;
	gap: var(--am-space-4);
}

.am-about-final-cta__copy > p:not(.am-about-eyebrow) {
	max-width: 32rem;
	margin: 0;
	font-size: var(--am-font-size-large);
	line-height: 1.55;
}

.am-about-final-cta__mark {
	position: absolute;
	right: -0.06em;
	bottom: -0.12em;
	color: color-mix(in srgb, var(--am-color-white) 21%, transparent);
	font-family: var(--am-font-display);
	font-size: clamp(15rem, 31vw, 29rem);
	font-weight: 500;
	letter-spacing: -0.11em;
	line-height: 0.75;
	pointer-events: none;
	user-select: none;
}

/* Responsive ---------------------------------------------------------- */

@media (max-width: 63.99rem) {
	.am-about-hero {
		background: var(--am-color-background);
	}

	.am-about-hero__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}

	.am-about-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.am-about-trust__item:nth-child(2n) {
		border-right: 0;
	}

	.am-about-trust__item:nth-child(-n + 2) {
		border-bottom: var(--am-border-width) solid var(--am-color-border);
	}

	.am-about-profile__grid {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	}

	.am-about-profile__note {
		grid-column: 2;
	}

	.am-about-areas__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.am-about-area-item:last-child {
		grid-column: span 2;
	}
}

@media (max-width: 47.99rem) {
	.am-about-hero__grid,
	.am-about-profile__grid,
	.am-about-areas__header,
	.am-about-approach__grid,
	.am-about-final-cta__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.am-about-hero__media {
		min-height: min(70svh, 34rem);
	}

	.am-about-hero__content {
		max-width: none;
		padding: var(--am-space-section-sm) 0;
	}

	.am-about-hero__title {
		max-width: 12ch;
	}

	.am-about-profile__note {
		grid-column: auto;
	}

	.am-about-areas__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.am-about-area-item,
	.am-about-area-item:last-child {
		min-height: 13rem;
		grid-column: auto;
	}

	.am-about-approach__heading {
		position: static;
	}

	.am-about-final-cta__inner {
		min-height: 30rem;
	}

	.am-about-final-cta__mark {
		right: -0.12em;
		bottom: -0.04em;
		font-size: clamp(11rem, 55vw, 17rem);
	}
}

@media (max-width: 35.99rem) {
	.am-about-trust__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.am-about-trust__item,
	.am-about-trust__item:nth-child(2n) {
		border-right: 0;
		border-bottom: var(--am-border-width) solid var(--am-color-border);
	}

	.am-about-trust__item:last-child {
		border-bottom: 0;
	}
}


/* DEV-5.12 proportional refinement ------------------------------------ */
@media (min-width: 64rem) {
	.am-about-hero__grid {
		max-height: 37rem;
	}

	.am-about-profile .am-about-section__heading h2 {
		max-width: 10ch;
		font-size: clamp(2.35rem, 2rem + 1.35vw, 3.45rem);
	}

	.am-about-areas__header h2 {
		max-width: 15ch;
	}

	.am-about-approach__heading h2 {
		max-width: 13ch;
		font-size: clamp(2.35rem, 2rem + 1.4vw, 3.55rem);
	}

	.am-about-final-cta h2 {
		max-width: 14ch;
		font-size: clamp(2.35rem, 2rem + 1.4vw, 3.55rem);
	}
}

/* DEV-5.13 compact editorial correction --------------------------------
 * Fixes the DEV-5.12 desktop hero height regression and removes artificial
 * text constraints that caused avoidable line breaks on wide screens.
 */
@media (min-width: 64rem) {
	/* Hero: natural height, no clipping/overlap, wider copy column. */
	.am-about-hero__grid {
		min-height: 0;
		max-height: none;
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		align-items: stretch;
	}

	.am-about-hero__media {
		min-height: clamp(25rem, 31vw, 29rem);
	}

	.am-about-hero__content {
		max-width: none;
		padding: clamp(2.1rem, 3vw, 3.1rem) clamp(2.5rem, 3.6vw, 4rem);
		gap: 0.95rem;
	}

	.am-about-hero__title {
		max-width: none;
		font-size: clamp(2.65rem, 2.25rem + 1.45vw, 3.55rem);
		line-height: 1.02;
		letter-spacing: -0.035em;
		text-wrap: pretty;
	}

	.am-about-hero__intro {
		max-width: 43rem;
		font-size: clamp(0.98rem, 0.94rem + 0.14vw, 1.06rem);
		line-height: 1.5;
	}

	/* Trust strip: less height, lighter typography, more room for long values. */
	.am-about-trust__grid {
		grid-template-columns: 0.9fr 1fr 0.95fr 1.25fr;
	}

	.am-about-trust__item {
		min-height: 5.15rem;
		padding: 0.9rem 1.25rem;
		gap: 0.8rem;
	}

	.am-about-trust__item strong {
		font-size: clamp(1.08rem, 1rem + 0.28vw, 1.3rem);
		line-height: 1.08;
	}

	.am-about-trust__label {
		font-size: 0.64rem;
	}

	/* Sections: denser rhythm, no giant editorial headings. */
	.am-about-section {
		padding-block: clamp(2.65rem, 3.8vw, 4rem);
	}

	.am-about-section__heading h2,
	.am-about-areas__header h2,
	.am-about-final-cta h2 {
		max-width: none;
		font-size: clamp(2.2rem, 1.92rem + 1.05vw, 3rem);
		line-height: 1.04;
		letter-spacing: -0.025em;
		text-wrap: pretty;
	}

	/* Profile: wider heading, less fragmented three-column composition. */
	.am-about-profile__grid {
		grid-template-columns: minmax(19rem, 0.95fr) minmax(0, 1.25fr) minmax(17rem, 0.8fr);
		gap: clamp(1.6rem, 2.5vw, 2.75rem);
	}

	.am-about-profile .am-about-section__heading h2 {
		max-width: none;
		font-size: clamp(2.25rem, 1.95rem + 1.05vw, 3rem);
	}

	.am-about-profile__body {
		gap: 0.95rem;
		font-size: clamp(0.98rem, 0.95rem + 0.1vw, 1.04rem);
		line-height: 1.5;
	}

	.am-about-profile__note {
		padding: 1.15rem 1.25rem;
		gap: 0.65rem;
	}

	.am-about-profile__note p {
		font-size: clamp(1.08rem, 1rem + 0.28vw, 1.28rem);
		line-height: 1.22;
	}

	/* Areas: title gets enough width; cards become compact editorial teasers. */
	.am-about-areas__header {
		grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.75fr);
		align-items: center;
		gap: clamp(1.5rem, 3vw, 3.5rem);
		margin-bottom: clamp(1.55rem, 2.4vw, 2.35rem);
	}

	.am-about-areas__header h2 {
		max-width: none;
	}

	.am-about-areas__summary {
		gap: 0.9rem;
	}

	.am-about-areas__summary p {
		line-height: 1.5;
	}

	.am-about-area-item {
		min-height: 10.25rem;
		padding: 1.25rem 1.35rem;
		gap: 0.7rem;
	}

	.am-about-area-item__icon {
		width: 2.65rem;
		height: 2.65rem;
	}

	.am-about-area-item h3,
	.am-about-principle h3 {
		font-size: clamp(1.25rem, 1.18rem + 0.3vw, 1.5rem);
	}

	.am-about-area-item p,
	.am-about-principle p {
		font-size: 0.96rem;
		line-height: 1.48;
	}

	/* Approach: full-width heading + three horizontal principles. */
	.am-about-approach__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.4rem, 2.4vw, 2.25rem);
	}

	.am-about-approach__heading {
		position: static;
		top: auto;
		max-width: none;
		gap: 0.8rem;
	}

	.am-about-approach__heading h2 {
		max-width: none;
		font-size: clamp(2.2rem, 1.92rem + 1.05vw, 3rem);
		line-height: 1.04;
		text-wrap: pretty;
	}

	.am-about-approach__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--am-grid-gap);
	}

	.am-about-principle {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		gap: 0.9rem;
		padding: 1.25rem 0.85rem 0.35rem 0;
		border-top: 1px solid color-mix(in srgb, var(--am-color-primary-dark) 26%, var(--am-color-border));
		border-bottom: 0;
	}

	.am-about-principle:last-child {
		border-bottom: 0;
	}

	.am-about-principle__icon {
		width: 2.8rem;
		height: 2.8rem;
	}

	.am-about-principle > div {
		gap: 0.55rem;
	}

	/* Final CTA: a closing band, not another oversized hero. */
	.am-about-final-cta__inner {
		min-height: 17rem;
		grid-template-columns: minmax(0, 1.1fr) minmax(15rem, 0.55fr);
		padding-block: clamp(2.6rem, 3.8vw, 3.75rem);
	}

	.am-about-final-cta__copy {
		max-width: 46rem;
		gap: 0.95rem;
	}

	.am-about-final-cta h2 {
		max-width: none;
	}

	.am-about-final-cta__copy > p:not(.am-about-eyebrow) {
		max-width: 40rem;
		font-size: 1rem;
		line-height: 1.5;
	}

	.am-about-final-cta__mark {
		font-size: clamp(12rem, 24vw, 22rem);
	}
}

@media (min-width: 80rem) {
	.am-about-hero__title,
	.am-about-approach__heading h2 {
		white-space: nowrap;
	}
}