/* Teach at Elimu Sasa School: page-scoped styles.
   Loaded only on /teach. Builds on the site's design system (Additional CSS:
   .esa-wrap, .esa-card, .esa-btn, .esa-pill, .esa-ticks, .esa-step, .esa-img)
   and the Elementor kit tokens: ink #1B1642, brand #2E2380, deep #14103A,
   ember #F15A24, Archivo headings, Manrope body. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.esa-teach [id] { scroll-margin-top: 96px; }

/* Text blocks from the editor: no stray paragraph margins */
.esa-teach .esa-tc-flush p:last-child { margin-bottom: 0; }

/* ---------- Eyebrow ---------- */
.esa-teach .esa-tc-eyebrow p {
	margin: 0; font-family: Archivo, sans-serif; font-size: 12px; font-weight: 700;
	letter-spacing: 0.14em; text-transform: uppercase; color: #F15A24;
}
.esa-teach .esa-tc-eyebrow.is-light p { color: #FFB08A; }

/* ---------- Hero ---------- */
.esa-teach .esa-tc-hero-sub .elementor-heading-title { font-family: Archivo, sans-serif; }
.esa-teach .esa-tc-hero-photo img {
	width: 100%; display: block; border-radius: 20px;
	aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 35%;
	box-shadow: 0 30px 60px rgba(9, 6, 30, 0.35);
}
.esa-teach .esa-tc-hero-photo { position: relative; }
.esa-teach .esa-tc-hero-photo::before {
	content: ""; position: absolute; inset: auto -14px -14px auto; width: 46%; height: 46%;
	border-radius: 20px; background: #F15A24; opacity: 0.9; z-index: 0;
}
.esa-teach .esa-tc-hero-photo .elementor-widget-container,
.esa-teach .esa-tc-hero-photo img { position: relative; z-index: 1; }

/* ---------- Learn by doing list ---------- */
.esa-teach .esa-tc-learnlist ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #E7E4F2; }
.esa-teach .esa-tc-learnlist li {
	display: flex; gap: 16px; align-items: baseline; padding: 15px 0;
	border-bottom: 1px solid #E7E4F2; color: #55507E; font-size: 16.5px; line-height: 1.5;
}
.esa-teach .esa-tc-learnlist li::before {
	content: ""; flex: 0 0 8px; height: 8px; border-radius: 2px; background: #F15A24;
	transform: translateY(-2px) rotate(45deg);
}
.esa-teach .esa-tc-learnlist strong { color: #1B1642; font-weight: 800; }

.esa-teach .esa-tc-callout p {
	margin: 0; padding: 18px 22px; border-left: 5px solid #F15A24; border-radius: 0 12px 12px 0;
	background: #FFEDE4; font-family: Archivo, sans-serif; font-weight: 700; font-size: 19px;
	line-height: 1.4; color: #1B1642;
}

/* Editorial collage: one tall image, two stacked */
.esa-teach .esa-tc-collage { display: grid !important; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.esa-teach .esa-tc-collage > .elementor-element { width: 100% !important; margin: 0 !important; }
.esa-teach .esa-tc-collage > .elementor-element:first-child { grid-row: 1 / span 2; }
.esa-teach .esa-tc-collage img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 16px; }
.esa-teach .esa-tc-collage > .elementor-element:first-child img { min-height: 440px; }
.esa-teach .esa-tc-collage > .elementor-element:not(:first-child) img { height: 212px; }
.esa-teach .esa-tc-collage .elementor-widget-container,
.esa-teach .esa-tc-collage figure { height: 100%; margin: 0; }
.esa-teach .esa-tc-collage.is-two { grid-template-rows: 1fr; }
.esa-teach .esa-tc-collage.is-two > .elementor-element:first-child { grid-row: auto; }
.esa-teach .esa-tc-collage.is-two img { height: 420px !important; min-height: 0 !important; }
.esa-teach .esa-tc-collage.is-one { grid-template-columns: 1fr; grid-template-rows: auto; }
.esa-teach .esa-tc-collage.is-one img { height: auto; aspect-ratio: 4 / 3.6; min-height: 0 !important; }

/* ---------- Icons ---------- */
.esa-teach .esa-tc-icon p { margin: 0; line-height: 0; }
.esa-teach .esa-tc-icon svg {
	width: 52px; height: 52px; padding: 13px; box-sizing: border-box; border-radius: 12px;
	background: #FFEDE4; color: #F15A24; fill: none; stroke: currentColor; stroke-width: 1.8;
	stroke-linecap: round; stroke-linejoin: round;
}
.esa-teach .esa-tc-icon.is-dark svg { background: rgba(241, 90, 36, 0.16); color: #FFB08A; }

/* ---------- Cards ---------- */
.esa-teach .esa-tc-cardlink p { margin: 0; }
.esa-teach .esa-tc-cardlink a {
	display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px;
	color: #C7420F; text-decoration: none;
}
.esa-teach .esa-tc-cardlink a::after { content: "→"; transition: transform 180ms ease; }
.esa-teach .esa-tc-cardlink a:hover { color: #F15A24; }
.esa-teach .esa-tc-cardlink a:hover::after { transform: translateX(3px); }
.esa-teach .esa-tc-grow { flex-grow: 1; }

/* Chips for areas of expertise and "what you bring" */
.esa-teach .esa-tc-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.esa-teach .esa-tc-chips li {
	padding: 6px 12px; border-radius: 999px; background: #F7F6FC; border: 1px solid #E7E4F2;
	font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #1B1642;
}
.esa-teach .esa-tc-chips.is-dark li { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #FFFFFF; }

/* ---------- Benefits list ---------- */
.esa-teach .esa-tc-benefit { display: flex; gap: 18px; align-items: flex-start; }
.esa-teach .esa-tc-photo img {
	width: 100%; display: block; border-radius: 20px; object-fit: cover;
	aspect-ratio: 4 / 4.4; object-position: 50% 40%;
}

/* ---------- Great instructor ---------- */
.esa-teach .esa-tc-num p { margin: 0; }
.esa-teach .esa-tc-num span {
	font-family: Archivo, sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.08em; color: #F15A24;
}

/* ---------- Signature section ---------- */
.esa-teach .esa-tc-signature { position: relative; overflow: hidden; }
.esa-teach .esa-tc-signature::before {
	content: ""; position: absolute; width: 720px; height: 720px; right: -260px; top: -320px;
	border-radius: 50%; background: radial-gradient(closest-side, rgba(241, 90, 36, 0.22), rgba(241, 90, 36, 0));
	pointer-events: none;
}
.esa-teach .esa-tc-quote-muted p {
	margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: clamp(20px, 2.4vw, 26px);
	color: #8C87B0; text-decoration: line-through; text-decoration-color: rgba(241, 90, 36, 0.7); text-decoration-thickness: 2px;
}
.esa-teach .esa-tc-quote-strong p {
	margin: 0; font-family: Archivo, sans-serif; font-weight: 800; font-size: clamp(26px, 3.6vw, 44px);
	line-height: 1.15; letter-spacing: -0.02em; color: #FFFFFF;
}
.esa-teach .esa-tc-quote-strong em { font-style: normal; color: #F15A24; }
.esa-teach .esa-tc-dolist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.esa-teach .esa-tc-dolist li {
	padding: 12px 20px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.06); font-family: Archivo, sans-serif; font-weight: 700;
	font-size: clamp(15px, 1.6vw, 19px); color: #FFFFFF; line-height: 1.2;
	transition: border-color 200ms ease, background-color 200ms ease;
}
.esa-teach .esa-tc-dolist li:hover { border-color: #F15A24; background: rgba(241, 90, 36, 0.14); }
.esa-teach .esa-tc-dolist li::first-letter { color: #FFB08A; }

/* ---------- Regulatory note ---------- */
.esa-teach .esa-tc-note { border-left: 5px solid #F15A24 !important; }

/* ---------- How it works ---------- */
.esa-teach .esa-tc-steps { counter-reset: none; }
.esa-teach .esa-tc-stepcard { position: relative; }
@media (min-width: 1025px) {
	.esa-teach .esa-tc-stepcard:not(:last-child)::after {
		content: ""; position: absolute; top: 45px; right: -18px; width: 16px; height: 2px; background: #FFB08A;
	}
}

/* ---------- Final CTA ---------- */
.esa-teach .esa-tc-ctaline p { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 19px; color: #FFB08A; }

/* ---------- Mobile ---------- */
@media (max-width: 1024px) {
	.esa-teach .esa-tc-hero-photo::before { display: none; }
	.esa-teach .esa-tc-hero-photo img { aspect-ratio: 16 / 11; object-position: 50% 30%; }
	.esa-teach .esa-tc-photo img { aspect-ratio: 16 / 11; }
}
@media (max-width: 767px) {
	.esa-teach .esa-tc-collage { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 10px; }
	.esa-teach .esa-tc-collage > .elementor-element:first-child { grid-column: 1 / span 2; grid-row: auto; }
	.esa-teach .esa-tc-collage > .elementor-element:first-child img { min-height: 0; height: 260px; }
	.esa-teach .esa-tc-collage > .elementor-element:not(:first-child) img { height: 150px; }
	.esa-teach .esa-tc-collage.is-two img { height: 220px !important; }
	.esa-teach .esa-tc-learnlist li { font-size: 15.5px; }
	.esa-teach .esa-tc-callout p { font-size: 17px; }
	.esa-teach .esa-tc-dolist ul { justify-content: flex-start; }
}