/**
 * ICpEP-Qatar About Us page — visual design for the Elementor Container/
 * widget content built by wp-content/migrations/build-about-page.php.
 *
 * The migration deliberately saves each element with only its minimal
 * content settings (title/editor/icon_list), not Elementor's own
 * background/padding/layout settings — every visual decision here targets
 * each element's deterministic `.elementor-element-{id}` class instead
 * (ids assigned in the migration script: about-s1..about-s5 and
 * about-activity for the section containers, about-s{n}-in /
 * about-activity-in for their bounded inner containers, and a stable
 * semantic id per widget — about-s1-title, about-s1-list, and so on —
 * rather than a sequential counter. Every widget pins its own id
 * explicitly for exactly this reason: a sequential scheme means adding
 * or removing so much as one paragraph anywhere in the file reshuffles
 * every id after it, silently detaching this stylesheet's rules from
 * the elements they used to style). Same low-risk, full-control
 * approach as the rest of this theme — reusing css/components.css's
 * tokens.
 *
 * Enqueued only for the About Us page (see inc/scripts.php).
 *
 * Every selector is prefixed `#content` (the page template's <main
 * id="content"> wrapper) as load-order insurance against Elementor's own
 * generated CSS, which enqueues after this file and ties several of these
 * rules on class-only specificity otherwise — see css/home.css's header
 * comment for the full explanation of why an id prefix is needed here.
 */

/* ==========================================================
   Section bands — full-bleed backgrounds, bounded inner content
   ========================================================== */

#content .elementor-element-about-s1,
#content .elementor-element-about-s3,
#content .elementor-element-about-s5 {
	background-color: #ffffff;
}

#content .elementor-element-about-s2,
#content .elementor-element-about-s4,
#content .elementor-element-about-activity {
	background-color: var( --icpep-mist );
}

/*
 * Elementor Containers wrap their actual children in an inner
 * `.e-con-inner` div — that's where `display` (and therefore flex/grid
 * layout) is genuinely applied via a CSS custom property
 * (`.e-con>.e-con-inner{display:var(--display)}` in Elementor's own
 * frontend.min.css), not on the `.elementor-element-{id}` wrapper itself.
 * Every flex/grid layout rule in this file targets `> .e-con-inner` for
 * exactly this reason.
 */
#content .elementor-element-about-s1-in,
#content .elementor-element-about-s2-in,
#content .elementor-element-about-s3-in,
#content .elementor-element-about-s4-in,
#content .elementor-element-about-s5-in,
#content .elementor-element-about-activity-in {
	max-width: var( --icpep-section-max-width, 1280px );
	margin-inline: auto;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
	padding-block: clamp( 60px, 8vw, 100px );
}

#content .elementor-element-about-s1-in > .e-con-inner,
#content .elementor-element-about-s2-in > .e-con-inner,
#content .elementor-element-about-s3-in > .e-con-inner,
#content .elementor-element-about-s4-in > .e-con-inner,
#content .elementor-element-about-s5-in > .e-con-inner,
#content .elementor-element-about-activity-in > .e-con-inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

#content .elementor-element-about-s1-in,
#content .elementor-element-about-s2-in,
#content .elementor-element-about-s3-in,
#content .elementor-element-about-s4-in,
#content .elementor-element-about-s5-in,
#content .elementor-element-about-activity-in {
	max-width: 760px;
}

/* ==========================================================
   Headings
   ========================================================== */

#content .elementor-element-about-s1-title .elementor-heading-title,
#content .elementor-element-about-s2-title .elementor-heading-title,
#content .elementor-element-about-s3-title .elementor-heading-title,
#content .elementor-element-about-s4-title .elementor-heading-title,
#content .elementor-element-about-s5-title .elementor-heading-title,
#content .elementor-element-about-activity-title .elementor-heading-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: clamp( 1.5rem, 1.2rem + 1.5vw, 2rem );
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var( --e-global-color-primary, #0b132b );
}

#content .elementor-element-about-tl-2025-title .elementor-heading-title,
#content .elementor-element-about-tl-2008-title .elementor-heading-title,
#content .elementor-element-about-tl-1992-title .elementor-heading-title,
#content .elementor-element-about-activity-nov-title .elementor-heading-title,
#content .elementor-element-about-activity-oct-title .elementor-heading-title,
#content .elementor-element-about-activity-sep-title .elementor-heading-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: clamp( 1.1rem, 1rem + 0.4vw, 1.3rem );
	color: var( --e-global-color-primary, #0b132b );
}

/* Timeline's nested "2025" facts — a lighter, smaller sub-list rather than
   another row of pillar-style chips. */
#content .elementor-element-about-tl-2025-list .elementor-icon-list-icon {
	width: 22px;
	height: 22px;
	margin-top: 0.3rem;
	background-color: transparent;
	box-shadow: none;
	font-size: 0.7rem;
}

#content .elementor-element-about-tl-2025-list .elementor-icon-list-text {
	font-size: var( --icpep-fs-sm );
}

/* ==========================================================
   History timeline
   ========================================================== */

#content .elementor-element-about-s5-tl {
	margin-top: 1rem;
	padding-left: 2rem;
	border-left: 2px solid var( --icpep-card-border );
}

#content .elementor-element-about-s5-tl > .e-con-inner {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

#content .elementor-element-about-tl-2025,
#content .elementor-element-about-tl-2008,
#content .elementor-element-about-tl-1992 {
	position: relative;
}

#content .elementor-element-about-tl-2025 > .e-con-inner,
#content .elementor-element-about-tl-2008 > .e-con-inner,
#content .elementor-element-about-tl-1992 > .e-con-inner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#content .elementor-element-about-tl-2025::before,
#content .elementor-element-about-tl-2008::before,
#content .elementor-element-about-tl-1992::before {
	content: '';
	position: absolute;
	left: -2.375rem;
	top: 0.4rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var( --e-global-color-secondary, #00a3e0 );
	box-shadow: 0 0 0 4px #ffffff;
}

/* ==========================================================
   Chapter activity timeline — relocated from the Events page
   (build-events-page.php's history, prior to that move). Same
   minimalist vertical-timeline recipe as the History timeline
   above: cyan (--e-global-color-secondary, #00a3e0) node markers on
   a light (--icpep-card-border, #e2e8f0) tracking line. The node
   ring shadow matches this section's own mist background rather
   than History's white, same as the Events page version did.
   ========================================================== */

#content .elementor-element-about-activity-tl {
	margin-top: 1rem;
	padding-left: 2rem;
	border-left: 2px solid var( --icpep-card-border );
}

#content .elementor-element-about-activity-tl > .e-con-inner {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

#content .elementor-element-about-activity-nov,
#content .elementor-element-about-activity-oct,
#content .elementor-element-about-activity-sep {
	position: relative;
}

#content .elementor-element-about-activity-nov > .e-con-inner,
#content .elementor-element-about-activity-oct > .e-con-inner,
#content .elementor-element-about-activity-sep > .e-con-inner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#content .elementor-element-about-activity-nov::before,
#content .elementor-element-about-activity-oct::before,
#content .elementor-element-about-activity-sep::before {
	content: '';
	position: absolute;
	left: -2.375rem;
	top: 0.4rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var( --e-global-color-secondary, #00a3e0 );
	box-shadow: 0 0 0 4px var( --icpep-mist );
}

@media ( max-width: 640px ) {
	#content .elementor-element-about-s5-tl,
	#content .elementor-element-about-activity-tl {
		padding-left: 1.5rem;
	}

	#content .elementor-element-about-tl-2025::before,
	#content .elementor-element-about-tl-2008::before,
	#content .elementor-element-about-tl-1992::before,
	#content .elementor-element-about-activity-nov::before,
	#content .elementor-element-about-activity-oct::before,
	#content .elementor-element-about-activity-sep::before {
		left: -1.875rem;
	}
}