/* ==========================================================
 * About page redesigned content sections. Scoped entirely under
 * .zz-about-* classes - does not touch any selector used elsewhere
 * in the theme (header, footer, other pages, homepage).
 * ========================================================== */

/* ---- Shared split layout ---- */
.zz-about-split-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--zz-space-xl);
	align-items: center;
}
.zz-about-split-grid.is-reverse .zz-about-media { order: 2; }
.zz-about-media { position: relative; }
.zz-about-media img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: var(--zz-radius-lg);
	display: block;
}
.zz-about-content h2 { margin-bottom: var(--zz-space-md); }
.zz-about-content p { margin-bottom: var(--zz-space-sm); }

/* ---- Section 1: Who We Are ---- */
.zz-about-who { padding: var(--zz-space-2xl) 0; }
.zz-about-who .zz-about-media { border-radius: var(--zz-radius-lg); overflow: hidden; }
.zz-about-media-overlay-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: rgba(11, 46, 99, 0.88);
	padding: var(--zz-space-md) var(--zz-space-sm);
}
.zz-about-media-overlay-bar .zz-overlay-item {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--zz-white);
	font-weight: 700;
	font-size: 0.85rem;
	text-align: left;
	line-height: 1.2;
	padding: 0 8px;
	border-left: 1px solid rgba(255,255,255,0.15);
}
.zz-about-media-overlay-bar .zz-overlay-item:first-child { border-left: 0; }
.zz-about-media-overlay-bar .zz-overlay-icon { color: var(--zz-gold); flex-shrink: 0; }

/* ---- Section 2: 4-column icon stat row ---- */
.zz-about-stat-row { background: var(--zz-light); padding: var(--zz-space-xl) 0; }
.zz-about-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--zz-space-lg);
}
.zz-about-stat-item { display: flex; align-items: flex-start; gap: 14px; }
.zz-about-stat-icon { color: var(--zz-dark-blue); flex-shrink: 0; }
.zz-about-stat-item h3 { font-size: 1rem; margin-bottom: 2px; color: var(--zz-dark-blue); }
.zz-about-stat-item p { margin: 0; font-size: 0.85rem; color: var(--zz-gray); }

/* ---- Section 3: What We Do (dark navy) ---- */
.zz-about-whatwedo { background: var(--zz-dark-blue); padding: var(--zz-space-2xl) 0; color: var(--zz-white); }
.zz-about-whatwedo .zz-eyebrow { color: var(--zz-gold); border-bottom-color: var(--zz-gold); }
.zz-about-whatwedo h2 { color: var(--zz-white); }
.zz-about-whatwedo p.zz-about-lead { color: rgba(255,255,255,0.75); }
.zz-about-check-list { margin: var(--zz-space-md) 0 0; }
.zz-about-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	color: rgba(255,255,255,0.9);
	font-size: 0.95rem;
}
.zz-about-check-list .zz-check-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--zz-gold);
	color: var(--zz-black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}
.zz-about-whatwedo .zz-about-media { border-radius: var(--zz-radius-lg); overflow: hidden; }
.zz-about-caption-box {
	position: absolute;
	right: var(--zz-space-md);
	bottom: var(--zz-space-md);
	background: rgba(11,17,34,0.85);
	color: var(--zz-white);
	padding: var(--zz-space-sm) var(--zz-space-md);
	max-width: 260px;
	border-left: 3px solid var(--zz-gold);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
}

/* ---- Section 4: Our Presence in Tanzania ---- */
.zz-about-presence { padding: var(--zz-space-2xl) 0; }
.zz-about-icon-bullets { margin-top: var(--zz-space-md); }
.zz-about-icon-bullets li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	color: var(--zz-charcoal);
	font-size: 0.95rem;
}
.zz-about-icon-bullets .zz-bullet-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--zz-light);
	color: var(--zz-dark-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.zz-about-presence .zz-about-media { border-radius: var(--zz-radius-lg); overflow: hidden; }
.zz-about-presence-pin {
	position: absolute;
	left: var(--zz-space-md);
	bottom: var(--zz-space-md);
	background: rgba(11,17,34,0.85);
	color: var(--zz-white);
	padding: 10px 14px;
	font-weight: 700;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--zz-radius);
}
.zz-about-presence-pin svg { color: var(--zz-gold); }
.zz-about-presence-caption {
	position: absolute;
	right: var(--zz-space-md);
	top: var(--zz-space-md);
	background: rgba(255,255,255,0.92);
	color: var(--zz-black);
	padding: 8px 12px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-left: 3px solid var(--zz-gold);
	max-width: 180px;
	line-height: 1.3;
}

/* ---- Section 5: 3-column info cards ---- */
.zz-about-info-row { background: var(--zz-light); padding: var(--zz-space-2xl) 0; }
.zz-about-info-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--zz-space-lg);
}
.zz-about-info-card {
	background: var(--zz-white);
	border-radius: var(--zz-radius-lg);
	padding: var(--zz-space-lg);
}
.zz-about-info-card .zz-about-stat-icon { color: var(--zz-dark-blue); margin-bottom: var(--zz-space-sm); }
.zz-about-info-card h3 { font-size: 1.1rem; margin-bottom: var(--zz-space-sm); }
.zz-about-info-card p { margin: 0; font-size: 0.9rem; color: var(--zz-gray); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.zz-about-stat-grid { grid-template-columns: repeat(2, 1fr); }
	.zz-about-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.zz-about-split-grid { grid-template-columns: 1fr; }
	.zz-about-split-grid.is-reverse .zz-about-media { order: 0; }
	.zz-about-media-overlay-bar { grid-template-columns: 1fr; gap: 8px; }
	.zz-about-media-overlay-bar .zz-overlay-item { border-left: 0; }
}
@media (max-width: 600px) {
	.zz-about-stat-grid { grid-template-columns: 1fr; }
	.zz-about-caption-box, .zz-about-presence-pin, .zz-about-presence-caption { position: static; margin-top: var(--zz-space-sm); max-width: 100%; }
}