/* =========================================================================
   DEVELOPING LEADERS (605) — hero + program/testimonial + 2026 leadership +
   succession/gallery. Owner: Ivy. Reuses shared .page-hero + .clipped-corner.
   Built to data/qa_baseline/developing-leaders/*.
   ========================================================================= */

/* Taller hero than the shared default (group photo). */
.dl-hero.wp-block-cover { min-height: 36vw; }

/* Section h4 headings (~45px). */
.dl-program h4,
.dl-leadership h4 {
	font-family: 'Inter', Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(1.9rem, 1.1rem + 2.2vw, 2.8125rem);
	line-height: 1.15;
	margin-bottom: 1.4vw;
}

/* --- S2 Program + Testimonial (white) ----------------------------------- */
.dl-program {
	background: #fff;
	padding: clamp(60px, 6vw, 100px) 3vw clamp(60px, 6vw, 100px);
}
.dl-program .wp-block-columns { gap: 4vw; align-items: flex-start; }
.dl-program h4 { color: var(--creda-secondary); }
.dl-program p,
.dl-program li { color: var(--creda-body); font-size: 1rem; line-height: 1.7; }
.dl-program p { margin-bottom: 1.2vw; }
.dl-program .wp-block-list { margin: 0 0 1.2vw; padding-left: 1.3em; list-style: disc; }
.dl-program .wp-block-list li { list-style: disc; margin-bottom: .5vw; }

/* Testimonial box — dark teal, white quote, pale-teal author. */
.dl-testimonial {
	background: var(--creda-primary);
	padding: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px);
}
/* Scoped under .dl-testimonial so it out-specifies `.dl-program p` (0,1,1), which was
   overriding the quote/author to #666/16px (the testimonial sits inside .dl-program). */
.dl-testimonial .dl-testimonial__quote {
	color: #fff;
	font-size: clamp(1.05rem, .8rem + .8vw, 1.5625rem); /* ~25px */
	line-height: 1.5;
	margin-bottom: 2vw;
}
.dl-testimonial .dl-testimonial__author {
	color: var(--creda-pale-teal);
	font-weight: 700;
	font-size: clamp(1.2rem, .9rem + 1vw, 1.8125rem); /* ~29px */
	margin: 0;
}

/* Join buttons — match live: teal, 3px radius, Inter 25px/500, padding 7.5px 55px,
   with a right-arrow that reveals on hover (Divi et_pb_button behaviour). */
.dl-join-btn { margin-top: 2vw; }
.dl-join-btn .wp-block-button__link {
	background: var(--creda-secondary);
	color: #fff;
	border-radius: 3px;
	font-family: 'Inter', Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 1.5625rem;   /* 25px (live) */
	padding: 7.5px 55px;
}
.dl-join-btn .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	vertical-align: middle;
	margin-left: .5em;
	font-weight: 400;
	transition: transform .2s ease;
}
.dl-join-btn .wp-block-button__link:hover::after { transform: translateX(4px); }

/* --- S3 2026 Leadership (dark teal, clipped corner) --------------------- */
.dl-leadership {
	background: var(--creda-primary);
	color: #fff;
	padding: clamp(60px, 6vw, 100px) 3vw clamp(80px, 8vw, 140px);
}
.dl-leadership .wp-block-columns { gap: 5vw; }
.dl-leadership h4 { color: var(--creda-pale-teal); }
.dl-leadership p { color: #fff; font-size: 1.02rem; line-height: 1.7; margin-bottom: .7vw; }
.dl-leadership strong { color: #fff; font-weight: 700; }
.dl-leadership__media .wp-block-image { margin: 0 0 1.2vw; }
.dl-leadership__note em { color: var(--creda-pale-teal); font-size: .9rem; line-height: 1.6; }
.dl-leadership__note { margin: 0; }

/* --- S4 Succession + Gallery (white) ------------------------------------ */
.dl-succession {
	background: #fff;
	padding: clamp(50px, 5vw, 90px) 3vw clamp(60px, 6vw, 110px);
}
.dl-succession .wp-block-columns { gap: 4vw; }
.dl-succession p { color: var(--creda-body); font-size: 1rem; line-height: 1.7; margin-bottom: 1.2vw; }
/* (both Join buttons share the live 7.5px 55px padding — no smaller override here) */

/* Gallery — 3-col cropped 1:1 with a teal zoom + tint on hover (RECON: zoom #039CA2). */
.dl-gallery.wp-block-gallery { gap: 0; }
.dl-gallery .wp-block-image {
	margin: 0;
	position: relative;
	overflow: hidden;
}
.dl-gallery .wp-block-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
/* Teal overlay fades in (matches Divi's gallery zoom hover). */
.dl-gallery .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(3, 156, 162, .38); /* #039ca2 */
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.dl-gallery .wp-block-image:hover img { transform: scale(1.06); }
.dl-gallery .wp-block-image:hover::after { opacity: 1; }

/* --- Responsive --------------------------------------------------------- */
@media screen and (max-width: 980px) {
	.dl-hero.wp-block-cover { min-height: 55vw; }
	.dl-program, .dl-succession { padding: 10vw 5vw; }
	.dl-leadership { padding: 10vw 5vw 16vw; }
	.dl-program .wp-block-columns,
	.dl-leadership .wp-block-columns,
	.dl-succession .wp-block-columns { flex-wrap: wrap; gap: 8vw; }
	.dl-program .wp-block-column,
	.dl-leadership .wp-block-column,
	.dl-succession .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
	.dl-program h4, .dl-leadership h4 { font-size: 5.4vw; }
	.dl-program p, .dl-program li,
	.dl-leadership p, .dl-succession p { font-size: 2.6vw; }
	.dl-testimonial .dl-testimonial__quote { font-size: 3vw; }
	.dl-testimonial__author { font-size: 3.6vw; }
	.dl-join-btn { justify-content: flex-start; }
	.dl-join-btn .wp-block-button__link,
	.dl-succession .dl-join-btn .wp-block-button__link { font-size: 2.6vw; padding: 2vw 4vw; }
	.dl-leadership__note em { font-size: 2.2vw; }
}
@media screen and (max-width: 767px) {
	.dl-hero.wp-block-cover { min-height: 80vw; }
	.dl-program, .dl-succession { padding: 14vw 6vw; }
	.dl-leadership { padding: 14vw 6vw 22vw; }
	.dl-program h4, .dl-leadership h4 { font-size: 8vw; }
	.dl-program p, .dl-program li,
	.dl-leadership p, .dl-succession p { font-size: 4.4vw; }
	.dl-testimonial .dl-testimonial__quote { font-size: 5vw; }
	.dl-testimonial__author { font-size: 6vw; }
	.dl-join-btn .wp-block-button__link,
	.dl-succession .dl-join-btn .wp-block-button__link { font-size: 4vw; padding: 3.5vw 6vw; }
	.dl-leadership__note em { font-size: 3.6vw; }
}