/*
 * FG About — the "من نحن" page sections (Story, Numbers, Journey, Values, Leadership).
 *
 * Loaded only on the About page (is_page('about'), enqueued in inc/cpt-listings.php),
 * after fg-home.css so it reuses the shared primitives (.fg-section, .fg-eyebrow,
 * .fg-section__title/__lead, .fg-btn). Built entirely on the canonical --fg-* tokens.
 *
 * North Star: "The Field Report" — restrained, evidence-led, engineered precision.
 * Design law honoured: Rare-Gold (gold ~stamp only), Gold-Never-Body (teal/ink carry
 * body text on light; gold only large/icon/border/fill), Earned-Shadow (flat at rest),
 * RTL-first logical properties, ease-out-expo, reduced-motion safe.
 *
 * Section background rhythm: Story (white) · Numbers (deep teal) · Journey (mist) ·
 * Values (white) · Leadership (mist) — then the site-wide consultation block.
 */

/* ============================================================
   1. Story — narrative + Mission/Vision
   ============================================================ */
.fg-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}
.fg-story__body {
	margin-block-start: 1.25rem;
	color: var(--fg-color-text);
	font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.08rem);
	line-height: 1.8;
	max-width: 60ch;
}
.fg-story__body p { margin-block: 0 1rem; }
.fg-story__body p:last-child { margin-block-end: 0; }

.fg-story__seal {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 1.6rem;
	font-family: var(--fg-font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--fg-color-accent);
	text-decoration: none;
	transition: color var(--fg-dur-fast) var(--fg-ease);
}
.fg-story__seal-mark {
	inline-size: 14px;
	block-size: 14px;
	border-radius: 50%;
	background: var(--fg-color-primary);
	box-shadow: 0 0 0 4px rgba(217, 160, 67, 0.18);
	flex: none;
}
.fg-story__seal-arrow { font-size: 1rem; line-height: 1; }
.fg-story__seal:hover,
.fg-story__seal:focus-visible { color: var(--fg-color-primary); }
.fg-story__seal:hover .fg-story__seal-arrow,
.fg-story__seal:focus-visible .fg-story__seal-arrow { transform: translateX(-4px); }

/* Mission / Vision twin cards */
.fg-story__mv {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-block-start: 2.25rem;
}
.fg-mv-card {
	position: relative;
	padding: 1.4rem 1.4rem 1.5rem;
	background: var(--fg-color-bg);
	border: 1px solid var(--fg-color-border);
	border-radius: var(--fg-radius-lg);
}
.fg-mv-card__tick {
	display: block;
	inline-size: 34px;
	block-size: 3px;
	border-radius: 2px;
	background: var(--fg-color-primary);
	margin-block-end: 0.9rem;
}
.fg-mv-card__title {
	margin: 0 0 0.45rem;
	font-family: var(--fg-font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--fg-color-accent);
}
.fg-mv-card__text {
	margin: 0;
	color: var(--fg-color-text);
	font-size: 0.96rem;
	line-height: 1.7;
}

/* Portrait figure with a gold datum caption */
.fg-story__figure {
	position: relative;
	margin: 0;
	border-radius: var(--fg-radius-lg);
	overflow: hidden;
	border: 1px solid var(--fg-color-border);
}
.fg-story__figure img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 565 / 728;
	object-fit: cover;
}
.fg-story__datum {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 1.4rem 1.25rem 1rem;
	color: #fff;
	font-family: var(--fg-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.5;
	background: linear-gradient(to top, rgba(6, 42, 51, 0.92), rgba(6, 42, 51, 0));
}
.fg-story__datum::before {
	content: "";
	display: block;
	inline-size: 48px;
	block-size: 3px;
	border-radius: 2px;
	background: var(--fg-color-primary);
	margin-block-end: 0.6rem;
}

/* ============================================================
   2. Numbers — track record on the deep-teal basement
   ============================================================ */
.fg-stats {
	background:
		radial-gradient(130% 90% at 85% 0%, rgba(13, 61, 71, 0.55), transparent 58%),
		linear-gradient(180deg, #073a47 0%, var(--fg-color-footer-bg, #062a33) 60%);
}
.fg-stats__head { margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.fg-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	background: rgba(255, 255, 255, 0.12); /* hairline separators show through the gap */
	border-block: 1px solid rgba(255, 255, 255, 0.12);
}
.fg-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem) clamp(1rem, 0.7rem + 1vw, 1.6rem);
	background: var(--fg-color-footer-bg);
}
.fg-stat__num {
	font-family: var(--fg-font-heading);
	font-weight: 800;
	font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
	line-height: 1;
	color: var(--fg-color-primary);
	font-feature-settings: "tnum" 1;
}
.fg-stat__rule {
	inline-size: 30px;
	block-size: 2px;
	border-radius: 2px;
	background: rgba(217, 160, 67, 0.55);
}
.fg-stat__label {
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-family: var(--fg-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.45;
}

/* ============================================================
   3. Journey — surveyed datum line with milestone nodes
   ============================================================ */
.fg-timeline { background: var(--fg-color-bg-alt); }
.fg-timeline__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 1.25rem;
	position: relative;
	padding-block-start: 2.75rem;
}
.fg-timeline__track::before {
	content: "";
	position: absolute;
	inset-inline: 6px;
	inset-block-start: 6px;
	block-size: 2px;
	background: rgba(11, 85, 101, 0.28);
}
.fg-tl-node { position: relative; padding-block-start: 1.5rem; }
.fg-tl-node__dot {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 13px;
	block-size: 13px;
	border-radius: 50%;
	background: var(--fg-color-primary);
	box-shadow: 0 0 0 4px var(--fg-color-bg-alt);
}
.fg-tl-node__year {
	display: block;
	font-family: var(--fg-font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	color: var(--fg-color-accent);
}
.fg-tl-node__title {
	margin: 0.35rem 0 0.4rem;
	font-family: var(--fg-font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--fg-color-text);
}
.fg-tl-node__text {
	margin: 0;
	color: var(--fg-color-muted);
	font-size: 0.92rem;
	line-height: 1.65;
}

/* ============================================================
   4. Values — numbered principle cards
   ============================================================ */
.fg-values__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* 6 values → balanced 3×2 on desktop (avoids a 4+2 orphan row) */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.85rem, 0.6rem + 0.8vw, 1.35rem);
}
@media (max-width: 860px) {
	.fg-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
	.fg-values__grid { grid-template-columns: 1fr; }
}
.fg-value {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.5rem 1.65rem;
	background: var(--fg-color-bg);
	border: 1px solid var(--fg-color-border);
	border-radius: var(--fg-radius-lg);
	transition: transform var(--fg-dur-fast) var(--fg-ease),
		box-shadow var(--fg-dur-fast) var(--fg-ease),
		border-color var(--fg-dur-fast) var(--fg-ease);
}
.fg-value:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(6, 42, 51, 0.12);
	border-color: rgba(11, 85, 101, 0.35);
}
.fg-value__idx {
	font-family: var(--fg-font-heading);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--fg-color-accent);
	font-feature-settings: "tnum" 1;
}
.fg-value__idx::after {
	content: "";
	display: block;
	inline-size: 28px;
	block-size: 3px;
	border-radius: 2px;
	background: var(--fg-color-primary);
	margin-block-start: 0.85rem;
}
.fg-value__title {
	margin: 1rem 0 0.5rem;
	font-family: var(--fg-font-heading);
	font-weight: 700;
	font-size: 1.12rem;
	color: var(--fg-color-text);
}
.fg-value__text {
	margin: 0;
	color: var(--fg-color-muted);
	font-size: 0.95rem;
	line-height: 1.7;
}

/* ============================================================
   5. Leadership — portrait cards (grayscale → colour on hover/focus)
   ============================================================ */
.fg-team { background: var(--fg-color-bg-alt); }
.fg-team__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: clamp(0.85rem, 0.6rem + 0.8vw, 1.4rem);
}
.fg-leader {
	display: flex;
	flex-direction: column;
	background: var(--fg-color-bg);
	border: 1px solid var(--fg-color-border);
	border-radius: var(--fg-radius-lg);
	overflow: hidden;
	transition: transform var(--fg-dur-fast) var(--fg-ease),
		box-shadow var(--fg-dur-fast) var(--fg-ease),
		border-color var(--fg-dur-fast) var(--fg-ease);
}
.fg-leader:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(6, 42, 51, 0.12);
	border-color: rgba(11, 85, 101, 0.35);
}
.fg-leader__media {
	position: relative;
	aspect-ratio: 7 / 8;
	overflow: hidden;
	background: var(--fg-color-bg-alt);
}
.fg-leader__photo {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.02);
	transition: filter var(--fg-dur-normal) var(--fg-ease),
		transform var(--fg-dur-normal) var(--fg-ease);
}
.fg-leader:hover .fg-leader__photo,
.fg-leader:focus-within .fg-leader__photo {
	filter: grayscale(0);
	transform: scale(1.04);
}
/* Monogram fallback when no real headshot is set yet */
.fg-leader__media--mono {
	display: grid;
	place-items: center;
	background:
		radial-gradient(120% 120% at 30% 20%, rgba(11, 85, 101, 0.10), rgba(11, 85, 101, 0) 60%),
		var(--fg-color-bg-alt);
}
.fg-leader__mono {
	font-family: var(--fg-font-heading);
	font-weight: 800;
	font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
	line-height: 1;
	color: var(--fg-color-accent);
}
.fg-leader__seal {
	position: absolute;
	inset-block-start: 0.9rem;
	inset-inline-end: 0.9rem;
	inline-size: 12px;
	block-size: 12px;
	border-radius: 50%;
	background: var(--fg-color-primary);
	box-shadow: 0 0 0 4px rgba(217, 160, 67, 0.16);
}

.fg-leader__body { padding: 1.15rem 1.25rem 1.4rem; }
.fg-leader__name {
	margin: 0 0 0.2rem;
	font-family: var(--fg-font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--fg-color-text);
}
.fg-leader__role {
	margin: 0;
	font-family: var(--fg-font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--fg-color-accent);
}
.fg-leader__note {
	margin: 0.7rem 0 0;
	color: var(--fg-color-muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

/* ============================================================
   6. Responsive
   ============================================================ */
@media (max-width: 991px) {
	.fg-story__grid { grid-template-columns: 1fr; }
	.fg-story__figure { order: -1; max-inline-size: 30rem; }
	.fg-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.fg-story__mv { grid-template-columns: 1fr; }
	/* Journey flips to a vertical datum line on the reading-start edge */
	.fg-timeline__track {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 1.85rem;
		padding-block-start: 0;
		padding-inline-start: 1.75rem;
	}
	.fg-timeline__track::before {
		inset-inline: auto;
		inset-inline-start: 6px;
		inset-block: 4px 4px;
		inline-size: 2px;
		block-size: auto;
	}
	.fg-tl-node__dot {
		inset-block-start: 4px;
		inset-inline-start: -1.75rem;
	}
	/* dot sits beside the year on the vertical line — no extra top gap */
	.fg-tl-node { padding-block-start: 0; }
}
@media (max-width: 460px) {
	.fg-stats__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   7. Reduced motion — keep states, drop animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.fg-value,
	.fg-leader,
	.fg-leader__photo,
	.fg-story__seal,
	.fg-story__seal-arrow {
		transition: none;
	}
	.fg-value:hover,
	.fg-leader:hover { transform: none; }
	.fg-leader:hover .fg-leader__photo,
	.fg-leader:focus-within .fg-leader__photo { transform: none; }
}