@layer components {
	/* Portfolio / Team Member page components (Phase 22 -- client-numbered
	 * Phase 20). One shared template, three individuals (Nour Al-Omari,
	 * Waleed Jadayel, Waleed Marzouq), six pages total (EN + AR each).
	 * Same tonal-elevation rule as every other page: no box-shadow.
	 *
	 * HERO RULE. The source design's hero carries an eyebrow, H1, a job
	 * -title H2, two body paragraphs and a portrait photo -- five things
	 * where our Global Hero Rule (design-system.md §33) allows only H1 +
	 * one description paragraph. Following the exact precedent set by
	 * the About page's "Bridging the Gap" section (§30), only H1 + the
	 * first paragraph live inside `.tf-hero`; the eyebrow, job title,
	 * second paragraph and portrait move into `.tf-portfolio-profile`
	 * immediately below it -- a separate section, so nothing is deleted
	 * and the Hero Rule is not violated.
	 */

	/* --- Profile Overview (hero-adjacent: role + bio + portrait) -------- */
	.tf-portfolio-profile {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--tf-space-xl);
	}

	.tf-portfolio-profile__text {
		flex: 1 1 40%;
	}

	.tf-portfolio-profile__eyebrow {
		display: block;
		margin-block-end: var(--tf-space-s);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted);
	}

	[dir="rtl"] .tf-portfolio-profile__eyebrow {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-portfolio-profile__role {
		margin: 0 0 var(--tf-space-m);
		font-size: var(--tf-font-size-l);
		font-weight: 600;
		line-height: var(--tf-line-height-tight);
		color: var(--tf-text-muted);
	}

	.tf-portfolio-profile__bio {
		margin: 0;
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

	.tf-portfolio-profile__image {
		flex: 1 1 50%;
		aspect-ratio: 3 / 4;
		overflow: hidden;
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
		background-color: var(--tf-surface-alt);
	}

	/* Source order is text-then-image, so desktop naturally reads
	 * text-start/image-end (mirroring automatically under RTL via
	 * flexbox's own direction-aware `row` -- no [dir="rtl"] override
	 * needed). The design stacks the portrait ABOVE the text on mobile
	 * regardless of language direction, which `order` restores here: a
	 * layout choice about device width, not reading direction, so it is
	 * a plain max-width query rather than a logical property. */
	@media (max-width: 767px) {
		.tf-portfolio-profile__image {
			order: -1;
		}
	}

	.tf-portfolio-profile__image img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		filter: grayscale(20%);
		transition: filter 700ms ease;
	}

	.tf-portfolio-profile__image:hover img {
		filter: grayscale(0%);
	}

	/* --- Strategic Pillars ------------------------------------------------ */
	.tf-portfolio-pillars__heading {
		margin: 0 0 var(--tf-space-2xs);
	}

	.tf-portfolio-pillars__rule {
		inline-size: 6rem;
		block-size: 0.25rem;
		margin-block-end: var(--tf-space-l);
		background-color: var(--tf-accent);
	}

	.tf-portfolio-pillar {
		padding: var(--tf-space-l);
		background-color: var(--tf-surface-alt);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-m);
		transition: background-color 300ms ease, color 300ms ease;
	}

	.tf-portfolio-pillar__icon {
		display: block;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		margin-block-end: var(--tf-space-m);
		color: var(--tf-accent);
		transition: color 300ms ease;
	}

	.tf-portfolio-pillar__title {
		margin: 0 0 var(--tf-space-xs);
		font-size: var(--tf-font-size-l);
		font-weight: 600;
		line-height: var(--tf-line-height-tight);
		color: var(--tf-text);
		transition: color 300ms ease;
	}

	.tf-portfolio-pillar__desc {
		margin: 0;
		color: var(--tf-text-muted);
		transition: color 300ms ease;
	}

	.tf-portfolio-pillar:hover {
		background-color: var(--tf-accent);
	}

	.tf-portfolio-pillar:hover .tf-portfolio-pillar__icon,
	.tf-portfolio-pillar:hover .tf-portfolio-pillar__title {
		color: var(--tf-on-accent);
	}

	.tf-portfolio-pillar:hover .tf-portfolio-pillar__desc {
		color: var(--tf-text-muted-on-dark);
	}

	/* --- Professional Trajectory (timeline) --------------------------------
	 * Logical properties throughout: border-inline-start (not
	 * border-left) and inset-inline-start (not left) so the vertical
	 * rule and its dot markers mirror to the RTL side automatically,
	 * with zero direction-specific overrides.
	 */
	.tf-portfolio-timeline__item {
		position: relative;
		padding-inline-start: var(--tf-space-l);
		border-inline-start: 2px solid var(--tf-border-subtle);
	}

	.tf-portfolio-timeline__item:not(:last-child) {
		margin-block-end: var(--tf-space-xl);
	}

	.tf-portfolio-timeline__dot {
		position: absolute;
		inset-inline-start: calc(-0.5rem - 1px);
		inset-block-start: 0;
		inline-size: 1rem;
		block-size: 1rem;
		border-radius: var(--tf-radius-full);
		background-color: var(--tf-border-subtle);
	}

	.tf-portfolio-timeline__dot--accent {
		background-color: var(--tf-accent);
	}

	.tf-portfolio-timeline__eyebrow {
		display: block;
		margin-block-end: var(--tf-space-2xs);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted);
	}

	[dir="rtl"] .tf-portfolio-timeline__eyebrow {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-portfolio-timeline__title {
		margin: 0 0 var(--tf-space-xs);
		font-size: var(--tf-font-size-l);
		font-weight: 600;
		color: var(--tf-text);
	}

	.tf-portfolio-timeline__desc {
		margin: 0;
		color: var(--tf-text-muted);
	}

	/* --- "Force Metric" tiles ------------------------------------------ */
	.tf-portfolio-metric {
		padding: var(--tf-space-l);
		background-color: var(--tf-surface-muted);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-m);
	}

	.tf-portfolio-metric__value {
		margin: 0 0 var(--tf-space-2xs);
		font-size: var(--tf-font-size-2xl);
		font-weight: 700;
		line-height: var(--tf-line-height-tight);
		color: var(--tf-text);
	}

	.tf-portfolio-metric__label {
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted);
	}

	[dir="rtl"] .tf-portfolio-metric__label {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-portfolio-metric__note {
		margin: var(--tf-space-s) 0 0;
		padding-block-start: var(--tf-space-s);
		border-block-start: 1px solid var(--tf-border-subtle);
		color: var(--tf-text-muted);
	}

	/* --- CTA panel ---------------------------------------------------------
	 * Decorative circle via ::after, exactly mirroring .tf-hero::after's
	 * rationale -- sidesteps Elementor's widget-wrapper category of bugs
	 * entirely since pseudo-elements are never wrapped by Elementor.
	 * inset-inline-end + inset-block-start place it at the panel's own
	 * top-trailing corner; translate(50%, -50%) offsets it relative to
	 * that corner, not to reading direction, so -- unlike the
	 * translateX() arrow-nudge cases elsewhere on the site -- this needs
	 * no [dir="rtl"] override to mirror correctly.
	 *
	 * `overflow: hidden` here is set via Elementor's own container
	 * control in the build script, not this rule -- a layered
	 * `overflow: hidden` was defeated by Elementor's unlayered
	 * `overflow: visible` default on every `.e-con` (the same trap the
	 * Concept & Brand Innovation CTA panel hit in Phase 20), confirmed
	 * live via `getComputedStyle()`. Kept here anyway as a harmless,
	 * correct statement of intent for any non-Elementor context.
	 */
	.tf-portfolio-cta {
		position: relative;
		overflow: hidden;
		padding: var(--tf-space-2xl) var(--tf-space-l);
		background-color: var(--tf-accent);
		border-radius: var(--tf-radius-l);
		text-align: center;
		color: var(--tf-on-accent);
	}

	.tf-portfolio-cta::after {
		content: "";
		position: absolute;
		inset-inline-end: 0;
		inset-block-start: 0;
		z-index: 0;
		inline-size: 24rem;
		block-size: 24rem;
		background-color: var(--tf-on-accent);
		opacity: 0.05;
		border-radius: var(--tf-radius-full);
		filter: blur(64px);
		transform: translate(50%, -50%);
		pointer-events: none;
	}

	.tf-portfolio-cta__content {
		position: relative;
		z-index: 1;
	}

	.tf-portfolio-cta__title {
		margin: 0 0 var(--tf-space-m);
		color: var(--tf-on-accent);
	}

	.tf-portfolio-cta__desc {
		max-inline-size: 40rem;
		margin: 0 auto var(--tf-space-l);
		color: color-mix(in srgb, var(--tf-on-accent) 80%, transparent);
		line-height: var(--tf-line-height-base);
	}

	.tf-portfolio-cta__actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--tf-space-s);
	}

	/* --- About: narrative paragraphs (Phase 23 rebuild) -------------------
	 * Readable measure + generous line-height per the brief; max-inline-size
	 * caps the line length rather than the section width, so it reads
	 * correctly at any container width.
	 */
	.tf-portfolio-about {
		max-inline-size: 48rem;
	}

	.tf-portfolio-about p {
		margin: 0 0 var(--tf-space-m);
		font-size: var(--tf-font-size-m);
		line-height: 1.7;
		color: var(--tf-text-muted);
	}

	.tf-portfolio-about p:last-child {
		margin-block-end: 0;
	}

	/* --- Areas of Expertise: premium pill tags ----------------------------
	 * Flex-wrap rather than grid: pill widths vary with their own text, so
	 * a grid would leave uneven gaps; flex-wrap packs them naturally at
	 * every viewport width.
	 */
	.tf-portfolio-expertise__grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--tf-space-s);
	}

	.tf-portfolio-expertise-pill {
		padding: var(--tf-space-xs) var(--tf-space-m);
		background-color: var(--tf-surface-alt);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-full);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		color: var(--tf-text);
		transition: transform 250ms ease, box-shadow 250ms ease, background-color 250ms ease, border-color 250ms ease, color 250ms ease;
	}

	.tf-portfolio-expertise-pill:hover {
		transform: translateY(-3px);
		box-shadow: var(--tf-shadow-m);
		background-color: var(--tf-accent);
		border-color: var(--tf-accent);
		color: var(--tf-on-accent);
	}

	@media (prefers-reduced-motion: reduce) {
		.tf-portfolio-expertise-pill:hover {
			transform: none;
		}
	}

	/* --- Leadership & Impact: icon list ------------------------------------ */
	.tf-portfolio-impact-list {
		display: flex;
		flex-direction: column;
		gap: var(--tf-space-m);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.tf-portfolio-impact-item {
		display: flex;
		align-items: flex-start;
		gap: var(--tf-space-s);
		padding: var(--tf-space-m);
		background-color: var(--tf-surface-alt);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-m);
		transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
	}

	.tf-portfolio-impact-item:hover {
		transform: translateY(-3px);
		box-shadow: var(--tf-shadow-m);
		border-color: var(--tf-accent);
	}

	@media (prefers-reduced-motion: reduce) {
		.tf-portfolio-impact-item:hover {
			transform: none;
		}
	}

	.tf-portfolio-impact-item__icon {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		border-radius: var(--tf-radius-full);
		background-color: var(--tf-accent);
		color: var(--tf-on-accent);
	}

	.tf-portfolio-impact-item__text {
		margin: 0;
		padding-block-start: var(--tf-space-3xs);
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

	/* --- Global Experience & Training: dark stat blocks -------------------
	 * Phase 24 (Walid Marzouk page). Two accent-filled blocks rather than
	 * plain text, per the brief's "visually distinct way" requirement --
	 * also the page's only dark-card moment, giving it visual rhythm
	 * against the light pill/list sections around it.
	 */
	.tf-portfolio-global__grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--tf-space-l);
		margin-block-end: var(--tf-space-l);
		inline-size: 100%;
	}

	.tf-portfolio-global-block {
		flex: 1 1 260px;
		padding: var(--tf-space-l);
		background-color: var(--tf-accent);
		border-radius: var(--tf-radius-l);
	}

	.tf-portfolio-global-block__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 3rem;
		block-size: 3rem;
		margin-block-end: var(--tf-space-m);
		border-radius: var(--tf-radius-m);
		background-color: color-mix(in srgb, var(--tf-on-accent) 12%, transparent);
		color: var(--tf-on-accent);
	}

	.tf-portfolio-global-block__label {
		display: block;
		margin-block-end: var(--tf-space-2xs);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: color-mix(in srgb, var(--tf-on-accent) 70%, transparent);
	}

	[dir="rtl"] .tf-portfolio-global-block__label {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-portfolio-global-block__value {
		margin: 0;
		font-size: var(--tf-font-size-l);
		font-weight: 700;
		line-height: var(--tf-line-height-tight);
		color: var(--tf-on-accent);
	}

	.tf-portfolio-global__note {
		max-inline-size: 48rem;
		margin: 0;
		color: var(--tf-text-muted);
		line-height: 1.7;
	}
}