/*
 * [iciec_framework] — ICIEC sustainable development framework.
 *
 * Ported from iciec-development-framework.html. Values are the mockup's; the
 * changes are only what a WordPress page needs:
 *   - the page already has an <h1>, so headings shift down one level and are
 *     targeted by class instead of tag;
 *   - the section fills the page's container (like the other Impact sections)
 *     instead of the mockup's full-page width;
 *   - typography inherits the theme's font family; alignment and list margins
 *     are scoped to the diagram;
 *   - the diagram uses the theme's brand gold and warm tints;
 *   - physical left/right become logical so the Arabic page mirrors.
 */

.iciec-framework {
	--gold: #b88d36;
	--gold-dark: #785b21;
	--panel: #faf7f0;
	--foundation: #f1e6cf;
	--divider: rgba(184, 141, 54, .35);
	--ink: #090d0e;

	box-sizing: border-box;
	/* Same width as the page's other sections: fills the Bootstrap container
	   it is placed in, rather than the mockup's full-page width. */
	width: 100%;
	margin: clamp(24px, 4.3vw, 88px) 0 32px;
	/* The title is sized against the section, not the window (see below). */
	container-type: inline-size;
	color: var(--ink);
	font-family: inherit;
	font-weight: 400;
	line-height: 1.3;
	text-align: start;
	-webkit-font-smoothing: antialiased;
}

.iciec-framework *,
.iciec-framework *::before,
.iciec-framework *::after {
	box-sizing: border-box;
}

.iciec-framework .roof {
	position: relative;
	isolation: isolate;
	padding: 72px 12% 16px;
	padding: clamp(56px, 7cqi, 84px) 12% 16px;
	text-align: center;
}

.iciec-framework .roof::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gold);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.iciec-framework .framework-title {
	margin: 0;
	color: #fff;
	font-family: inherit;
	/* Sized from the section's width (cqi), not the window's (vw): the section
	   stops growing at the container width, and a window-based size kept
	   enlarging the title past the triangle's edges on wide screens, where the
	   white text vanished against the page. The plain value is the fallback for
	   browsers without container units. */
	font-size: 1.5rem;
	font-size: clamp(1.25rem, 2cqi, 1.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	text-wrap: balance;
	/* The widest line that still sits inside the triangle at this height;
	   a longer title (e.g. a translation) wraps onto balanced lines instead
	   of running past the slanted edges. */
	max-width: 60cqi;
	margin-inline: auto;
}

.iciec-framework .pillars {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.iciec-framework .pillar {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.iciec-framework .sdgs {
	margin: 0;
	padding: 20px 16%;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.iciec-framework .sdgs li {
	margin: 0;
	padding: 0;
}

.iciec-framework .sdg {
	display: block;
	width: clamp(64px, 4.3vw, 90px);
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

.iciec-framework .pillar-card {
	flex: 1;
	background: var(--panel);
	padding: 24px 22px 22px;
}

.iciec-framework .pillar-heading {
	text-align: center;
	margin-bottom: 20px;
}

.iciec-framework .pillar-icon {
	width: clamp(58px, 3.6vw, 76px);
	aspect-ratio: 1;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: var(--gold);
	display: flex;
	align-items: center;
	justify-content: center;
}

.iciec-framework .pillar-icon svg {
	display: block;
	width: 68%;
	height: 68%;
	fill: #fff;
}

.iciec-framework .pillar-title {
	margin: 0;
	color: var(--ink);
	font-family: inherit;
	/* Scale with the section's columns, which stop growing with the container. */
	font-size: 1.125rem;
	font-size: clamp(1.125rem, 1.6cqi, 1.25rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	text-wrap: balance;
}

.iciec-framework .outcome-group + .outcome-group {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--divider);
}

/* (0,3,0) so the Impact wrapper's inline `.sdg-title-content h4 { text-align:
   center }`, printed later in the page, cannot centre these. */
.iciec-framework .outcome-group .outcome-title {
	color: var(--gold-dark);
	margin: 0 0 10px;
	font-family: inherit;
	/* A small tracked label, so it reads as a category rather than competing
	   with the bullet text beneath it. */
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: start;
}

.iciec-framework .outcome-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iciec-framework .outcome-group li {
	position: relative;
	margin: 0 0 10px;
	padding: 0;
	padding-inline-start: 1.1em;
	color: #263034;
	font-size: 1rem;
	line-height: 1.5;
	overflow-wrap: break-word;
}

.iciec-framework .outcome-group li:last-child {
	margin-bottom: 0;
}

.iciec-framework .outcome-group li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: .525em;
	width: .45em;
	height: .45em;
	border-radius: 50%;
	background: var(--gold);
}

.iciec-framework .esg {
	border: 1px solid var(--gold);
	text-align: center;
	/* The frame spans the section; side padding limits the text width to 60ch
	   using the theme's font metrics. */
	padding: 18px max(28px, calc((100% - 60ch) / 2));
	margin: 32px 0 24px;
	color: var(--gold-dark);
	font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
	font-weight: 500;
	line-height: 1.55;
	text-wrap: balance;
}

.iciec-framework .foundation::before {
	content: '';
	display: block;
	height: clamp(24px, 2.3vw, 40px);
	margin-bottom: 14px;
	background: var(--gold);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.iciec-framework .foundation-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
}

.iciec-framework .foundation-list li {
	min-height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	/* Narrow side padding for the seven-across row, where the longest word
	   ("Infrastructure") needs every pixel of the tile. */
	padding: 16px 8px;
	background: var(--foundation);
	text-align: center;
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.35;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* The mockup's line breaks assume its wider tiles; in the page container they
   split phrases onto extra lines, so the tiles wrap by width instead. */
.iciec-framework .foundation-list li br {
	display: none;
}

.iciec-framework .closing-note {
	margin: 24px 0 0;
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.7;
	text-align: start;
}

[dir="rtl"] .iciec-framework .outcome-group .outcome-title,
[dir="rtl"] .iciec-framework .pillar-title {
	letter-spacing: normal;
	text-transform: none;
}

@media (max-width: 1199px) {
	.iciec-framework .pillars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.iciec-framework .roof {
		padding: 64px 13% 18px;
	}

	/* Below 1200px the roof has vertical sides under a short slope, so the
	   title can use the full width. */
	.iciec-framework .framework-title {
		font-size: 1.5rem;
		max-width: none;
	}

	.iciec-framework .roof::before {
		clip-path: polygon(50% 0, 100% 64px, 100% 100%, 0 100%, 0 64px);
	}

	.iciec-framework .sdgs {
		justify-content: center;
		gap: 64px;
		padding: 20px;
	}

	.iciec-framework .sdg {
		width: 80px;
	}

	.iciec-framework .pillar-card {
		padding: 28px 26px 26px;
	}

	.iciec-framework .outcome-group li {
		font-size: 1.0625rem;
	}

	/* Kept below the framework title so the hierarchy holds at this size. */
	.iciec-framework .pillar-title {
		font-size: 1.125rem;
	}

	.iciec-framework .foundation-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.iciec-framework .foundation-list li {
		padding: 16px 12px;
	}
}

@media (max-width: 599px) {
	.iciec-framework {
		margin: 24px 0;
	}

	.iciec-framework .roof {
		padding: 48px 18px 20px;
	}

	.iciec-framework .roof::before {
		clip-path: polygon(50% 0, 100% 32px, 100% 100%, 0 100%, 0 32px);
	}

	.iciec-framework .framework-title {
		font-size: 1.25rem;
		line-height: 1.2;
	}

	.iciec-framework .pillars {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.iciec-framework .pillar-card {
		padding: 24px 20px;
	}

	.iciec-framework .esg {
		padding: 16px 18px;
		margin-top: 24px;
		text-align: start;
		font-size: 1.0625rem;
	}

	.iciec-framework .foundation-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.iciec-framework .foundation-list li:last-child {
		grid-column: 1 / -1;
	}
}

/* Share content rows across adjacent cards so both outcome headings align,
   even when titles or translated bullet lists have different lengths. */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 600px) {
		.iciec-framework .pillar {
			display: grid;
			grid-row: span 4;
			grid-template-rows: subgrid;
			row-gap: 0;
		}

		.iciec-framework .pillar-card {
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 0;
		}
	}
}

@media print {
	@page {
		size: A3 landscape;
		margin: 10mm;
	}

	.iciec-framework {
		width: 100%;
		margin: 0;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	.iciec-framework .pillars {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px;
	}

	.iciec-framework .foundation-list {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	.iciec-framework .foundation-list li:last-child {
		grid-column: auto;
	}

	.iciec-framework .pillar {
		break-inside: avoid;
	}

	.iciec-framework .sdgs {
		padding: 12px;
		gap: 30px;
	}

	.iciec-framework .pillar-card {
		padding: 16px;
	}

	.iciec-framework .outcome-group li {
		font-size: 14pt;
	}
}