/**
 * OSHIDA — about / team.
 *
 * @figma 2014:2549  Rectangle 1492 — 1234.65 x 650.36 at (102.67, 8105.89)
 * @figma 2014:2562  «تیـم مدیریتی» 222 x 39 at (607.04, 8154.23)
 * @figma 2014:2550  Frame 356 — card 276.47 x 460 at (1027.53, 8258.71)
 * @figma 2014:2551  the portrait, 327 wide, clipped by the 276.47 frame
 *
 * THE RAISED TAB, MEASURED. Tracing the silhouette off
 * tools/figma/renders/about-1440.webp: the tab's flat top runs x=612–820 at
 * y=8105, each side flares out and down to the panel's own top edge at y=8220,
 * reaching x=530 and x=905. That is a 114px rise on a ~208px cap with ~85px
 * shoulders.
 *
 * Reproduced as a rounded cap with two concave fillets, each a radial-gradient
 * pair — one layer for the 1px arc, one for the fill — so the outline follows
 * the curve instead of stopping at the cap. The design's shoulders are a
 * continuous flare rather than a circular fillet, so this is close, not exact.
 * The gradient centres are physical because radial-gradient has no logical
 * form; the layout is RTL-only, which is the same reasoning
 * docs/ai/design-tokens.md §3 applies to the notch polygon.
 *
 * Cards: four at 276.47 wide inside a 1168px run, i.e. a 20.7px gap, inset
 * 33.3px from the panel edge.
 *
 * Owner: work package C2.
 */

.o-about-team {
	padding-block-start: var(--o-about-gap);
}

.o-about-team__panel {
	--o-about-team-fill: var(--o-veil-card);

	display: flex;
	flex-direction: column;
	align-items: center;
}

/* --------------------------------------------------------------------------
 * The tab
 * -------------------------------------------------------------------------- */

.o-about-team__tab {
	position: relative;
	z-index: var(--o-z-raised);
	display: flex;
	align-items: center;
	min-block-size: 115px;
	margin-block-end: calc(var(--o-line-width) * -1);
	padding-block-start: var(--o-space-2xs);
	padding-inline: clamp(24px, 3.5vw, 50px);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-block-end: 0;
	border-start-start-radius: var(--o-radius-xl);
	border-start-end-radius: var(--o-radius-xl);
	background-color: var(--o-about-team-fill);
}

.o-about-team__tab-shoulder {
	position: absolute;
	inset-block-end: 0;
	inline-size: 40px;
	block-size: 40px;
	pointer-events: none;
}

.o-about-team__tab-shoulder--start {
	inset-inline-start: -40px;
	background-image:
		radial-gradient(circle at 100% 0, transparent 39px, var(--o-line-soft) 39px 40px, transparent 40px),
		radial-gradient(circle at 100% 0, transparent 40px, var(--o-about-team-fill) 40px);
}

.o-about-team__tab-shoulder--end {
	inset-inline-end: -40px;
	background-image:
		radial-gradient(circle at 0 0, transparent 39px, var(--o-line-soft) 39px 40px, transparent 40px),
		radial-gradient(circle at 0 0, transparent 40px, var(--o-about-team-fill) 40px);
}

.o-about-team__title {
	margin: 0;
	font-size: var(--o-fs-h2);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-tight);
	letter-spacing: var(--o-track-tight);
	text-align: center;
}

/* --------------------------------------------------------------------------
 * The panel body and its four cards
 * -------------------------------------------------------------------------- */

.o-about-team__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 21px; /* (1168 - 4 x 276.47) / 3 */
	inline-size: 100%;
	margin: 0;
	padding-block: clamp(20px, 2.7vw, 39px) clamp(20px, 2.6vw, 38px);
	padding-inline: clamp(16px, 2.3vw, 33px);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-xl);
	background-color: var(--o-about-team-fill);
	box-shadow: var(--o-shadow-panel);
	list-style: none;
}

.o-about-team__card {
	display: flex;
	flex-direction: column;
	padding-block-end: var(--o-space-md);
	border-radius: var(--o-radius-md);
	background-color: var(--o-veil-well);
	overflow: hidden;
	text-align: center;
}

.o-about-team__portrait {
	aspect-ratio: 276 / 327;
	inline-size: 100%;
	overflow: hidden;
}

.o-about-team__portrait-art {
	display: block;
	block-size: 100%;
	inline-size: 100%;
}

.o-about-team__portrait-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.o-about-team__name {
	margin: 0;
	margin-block-start: var(--o-space-md); /* 357 - 327 */
	padding-inline: var(--o-space-3xs);
	font-size: var(--o-fs-body);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-tight);
	text-wrap: balance;
}

.o-about-team__role {
	margin: 0;
	margin-block-start: var(--o-space-3xs);
	color: var(--o-text-muted);
	font-size: var(--o-fs-sm);
	font-weight: var(--o-fw-regular);
	line-height: var(--o-lh-tight);
}

@media (max-width: 899px) {
	.o-about-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.o-about-team__grid {
		grid-template-columns: minmax(0, 1fr);
		border-radius: var(--o-radius-lg);
	}

	/*
	 * The flare is a 1440px composition. Below `sm` the tab becomes a plain
	 * full-width cap so the shoulders can never hang off the viewport.
	 */
	.o-about-team__tab {
		inline-size: 100%;
		justify-content: center;
		min-block-size: 0;
		padding-block: var(--o-space-sm);
		border-radius: var(--o-radius-lg) var(--o-radius-lg) 0 0;
	}

	.o-about-team__tab-shoulder {
		display: none;
	}
}