/* ==========================================================================
   about.css -- ConnectedEarth About section (About, Our Mission, Authors), #23.
   Loaded by template-about.php only. Tokens from the Blocksy palette (hex = fallback).
   Hero: fixed 260px band (spec v3.13 5.1a, About-section rule). Grid matches the
   industry pages: 1180px container, 24px padding, 5fr / 4fr / 3fr, 16px gap.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700;800&family=Lato:wght@300;400;700&display=swap');

.page-template-template-about #primary.content-area,
.page-template-template-about #main.site-main,
.page-template-template-about .entry-content,
.page-template-template-about .ct-entry-content {
	max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important;
	box-shadow: none !important; border: none !important; background: transparent !important;
}

.ce-about {
	--amber:       var(--theme-palette-color-1, #FFB300);
	--amber-hover: var(--theme-palette-color-2, #E0A200);
	--navy:        var(--theme-palette-color-3, #252B52);
	--dark:        var(--theme-palette-color-5, #1A1A2E);
	--gray:        var(--theme-palette-color-6, #8B8FA8);
	--white:       var(--theme-palette-color-7, #FFFFFF);
	--light:       var(--theme-palette-color-8, #E8ECEF);
	--ce-border:      #E2E4EB;
	--ce-border-dark: #363B63;
	--ce-alt-band:    #D5EEF5;
	--ce-amber-muted: #663D00;
	font-family: 'Lato', sans-serif;
}
.ce-about * { box-sizing: border-box; }
.ce-ab-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ===== HERO: fixed 260px ===== */
.ce-ab-hero { background: var(--dark); height: 260px; padding: 40px 0; overflow: hidden; }
.ce-ab-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); column-gap: 16px; height: 100%; align-items: center; }
.ce-ab-hero-text { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
.ce-ab-hero-kicker { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--amber); margin: 0 0 12px; }
.ce-ab-hero-title { font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.05; text-transform: uppercase; color: var(--white); margin: 0 0 16px; }
.ce-ab-hero-lead { font-family: 'Lato', sans-serif; font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--gray); margin: 0; max-width: 60ch; max-height: 4.8em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.ce-ab-stats { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 10px; padding-left: 24px; border-left: 1px solid var(--ce-border-dark); }
.ce-ab-stat { display: flex; flex-direction: column; gap: 2px; }
.ce-ab-stat-num { font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 26px; line-height: 1; color: var(--amber); }
.ce-ab-stat-label { font-size: 13px; line-height: 1.4; color: var(--light); }

/* ===== BODY ===== */
.ce-ab-body { background: var(--light); padding: 44px 0 56px; }
.ce-ab-body > .ce-ab-inner { display: flex; flex-direction: column; gap: 36px; }
.ce-ab-body p, .ce-ab-body h2, .ce-ab-body h3 { margin: 0; }
.ce-ab-prose { display: flex; flex-direction: column; gap: 18px; }
.ce-ab-prose p, .ce-ab-text { font-size: 17px; line-height: 1.7; color: var(--dark); }
.ce-ab-statement { display: flex; flex-direction: column; gap: 24px; padding: 8px 0; }
.ce-ab-body .ce-ab-statement p { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.3; color: var(--navy); }
.ce-ab-statement strong { font-weight: 800; }
.ce-ab-section { display: flex; flex-direction: column; gap: 16px; }
.ce-ab-h2 { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.2; color: var(--navy); }
.ce-ab-h2--lead { font-weight: 800; font-size: 30px; }
.ce-ab-h3 { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 19px; color: var(--navy); }
.ce-ab-strong { font-weight: 700; color: var(--navy); }
.ce-ab-label, .ce-about .ce-ab-body p.ce-ab-label { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--ce-amber-muted); }

/* Grids and cards */
.ce-ab-grid { display: grid; gap: 16px; }
.ce-ab-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ce-ab-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ce-ab-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ce-ab-card { background: var(--white); border: 1px solid var(--ce-border); border-top: 3px solid var(--amber); border-radius: 0 0 10px 10px; padding: 24px; box-shadow: 0 3px 14px rgba(37, 43, 82, 0.08); display: flex; flex-direction: column; gap: 10px; }
.ce-ab-card--signal { background: var(--ce-alt-band); }
.ce-ab-card h3 { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 19px; color: var(--navy); }
.ce-ab-card p { font-size: 15px; line-height: 1.6; color: var(--dark); }
.ce-ab-grow { flex-grow: 1; }
.ce-about a.ce-ab-link { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--ce-amber-muted); }
.ce-about a.ce-ab-link:hover { color: var(--navy); }
.ce-about a.ce-ab-link--lg { font-size: 13px; align-self: flex-start; }
.ce-ab-wide { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; }
.ce-ab-wide-head { display: flex; flex-direction: column; gap: 6px; }

/* People (About) */
.ce-ab-person { flex-direction: row; gap: 20px; align-items: flex-start; }
.ce-ab-person-body { display: flex; flex-direction: column; gap: 6px; }
.ce-ab-mono { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 22px; color: var(--amber); }
.ce-ab-mono--lg { width: 160px; height: 160px; font-size: 52px; }

/* Our Mission */
.ce-ab-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 32px; align-items: stretch; }
.ce-ab-split-text { display: flex; flex-direction: column; gap: 18px; }
.ce-ab-split .ce-ab-h2 { margin-top: 12px; }
.ce-ab-slogan { border-radius: 10px; background: var(--navy); padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ce-ab-body .ce-ab-slogan p { font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.15; text-transform: uppercase; color: var(--white); }
.ce-ab-body .ce-ab-slogan p + p { color: var(--amber); }
.ce-ab-num { font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 22px; color: var(--ce-amber-muted); }
.ce-ab-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; }
.ce-ab-made { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ce-border); display: flex; flex-direction: column; gap: 4px; }
.ce-ab-card--signal .ce-ab-made { border-top-color: #B9DCE6; }
.ce-ab-card .ce-ab-made p { font-size: 14px; line-height: 1.55; }
.ce-ab-card--row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; padding: 32px; align-items: start; }
.ce-ab-card--row p { font-size: 17px; line-height: 1.7; }

/* Authors */
.ce-ab-author { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 36px; padding: 36px; align-items: start; }
.ce-ab-author-body { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.ce-ab-author-name { display: flex; flex-direction: column; gap: 6px; }
.ce-ab-card.ce-ab-author h2 { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.15; color: var(--navy); }
.ce-ab-card.ce-ab-author p { font-size: 17px; line-height: 1.7; }
.ce-ab-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ce-about a.ce-ab-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 6px; border: 1px solid var(--navy); background: var(--navy); color: var(--white); text-decoration: none; font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.ce-about a.ce-ab-btn:hover { background: var(--dark); border-color: var(--dark); color: var(--white); }
.ce-about a.ce-ab-btn--outline { background: transparent; color: var(--navy); }
.ce-about a.ce-ab-btn--outline:hover { background: var(--navy); color: var(--white); }
.ce-about a.ce-ab-btn--amber { background: var(--amber); border-color: var(--amber); color: var(--dark); }
.ce-about a.ce-ab-btn--amber:hover { background: var(--amber-hover); border-color: var(--amber-hover); color: var(--dark); }
.ce-ab-cta { background: var(--navy); border-radius: 10px; padding: 36px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.ce-ab-cta-body { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.ce-ab-cta h2 { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--white); }
.ce-ab-cta p { font-size: 17px; line-height: 1.7; color: var(--light); }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
	.ce-ab-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.ce-ab-hero { height: auto; }
	.ce-ab-hero-grid { display: block; height: auto; }
	.ce-ab-hero-title { font-size: 34px; }
	.ce-ab-hero-lead { max-height: none; display: block; -webkit-line-clamp: unset; line-clamp: none; }
	.ce-ab-stats { flex-direction: row; flex-wrap: wrap; gap: 16px 28px; padding-left: 0; border-left: 0; margin-top: 20px; }
	.ce-ab-grid--2, .ce-ab-grid--3, .ce-ab-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.ce-ab-wide, .ce-ab-split, .ce-ab-row, .ce-ab-card--row, .ce-ab-author, .ce-ab-cta { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}