/*------------------------------------*\
    #ENRICHMENT PROGRAM TEMPLATE
    Styles for page-enrichment-program.php only.

    Consolidated from style.css (.hero / .program-*) and wpsl-store.css
    (.sdp-* / .enrichment-*), renamed with an `ep-` prefix so no other
    template shares these selectors. Base + override class pairs were
    merged into single classes:
      program-box enrichment-box                          -> ep-program-box
      sdp-page-container enrichment-video-container       -> ep-video-container
      sdp-video enrichment-video                          -> ep-video
      sdp-enrichment-programs enrichment-subpage-programs -> ep-enrichment-programs
      sdp-enrichment-grid enrichment-grid                 -> ep-enrichment-grid
      sdp-enrichment-card enrichment-card                 -> ep-enrichment-card
      enrichment-subpage-meta                             -> ep-enrichment-meta
\*------------------------------------*/

:root {
	--ep-primary: #264e60;
	--ep-accent: #fb471f;
	--ep-bg-light: #fcf2ed;
	--ep-text-primary: #000;
	--ep-text-secondary: #606060;
	--ep-border-light: #606060;
	--ep-white: #fff;
	--ep-spacing-xs: 8px;
	--ep-spacing-sm: 16px;
	--ep-spacing-md: 24px;
	--ep-spacing-lg: 50px;
	--ep-spacing-xl: 75px;
	--ep-font-primary: "Magazine Grotesque", "Helvetica", sans-serif;
	--ep-font-secondary: "Georgia Pro", "Times New Roman", Times, serif;
	--ep-font-accent: "Golden Hopes", var(--ep-font-secondary);
	--ep-transition-default: 0.3s ease;
}

/* HERO */
.ep-hero {
	width: 100%;
	background-position: center;
	background-size: cover;
	margin-top: 120px;
}

@media screen and (max-width: 1024px) {
	.ep-hero {
		margin-top: 109px;
	}
}

@media screen and (max-width: 767px) {
	.ep-hero {
		box-shadow: none;
		margin-top: 87px;
	}
}

.ep-hero-image-mobile {
	display: none;
	margin: 0 auto;
}

.ep-hero-image-desktop {
	display: block;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.ep-hero-image-mobile {
		display: block;
	}

	.ep-hero-image-desktop {
		display: none;
	}
}

/* PROGRAM HERO */
.ep-program-hero-section {
	display: flex;
	align-items: stretch; /* Ensures children are the same height */
	max-width: 1020px;
	margin: -80px auto 0;
	padding-bottom: 20px;
}

.ep-program-image {
	align-items: center;
}

.ep-program-image,
.ep-program-text {
	flex: 1;
	display: flex;
	background-color: #7eddde;
}

.ep-program-text {
	background-color: #fcf1ed;
	color: #000000;
	flex-direction: column;
	justify-content: center;
	padding-top: 22px;
	padding-bottom: 22px;
}

.ep-program-image img {
	width: 100%;
	height: auto;
}

.ep-program-headline {
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: #264e60;
	padding: 0px 25px;
	margin: 0;
	letter-spacing: 15%;
}

.ep-program-text p {
	font-size: 16px;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	padding: 0px 25px;
}

.ep-program-text ul {
	font-size: 16px;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	padding: 0px 25px;
	text-align: left;
	list-style: circle;
}

.ep-program-text hr {
	width: 50%;
	margin: 0 auto;
	border: 0;
	height: 1px;
	background-color: #000;
}

.ep-program-text-cta {
	display: inline-block;
	text-decoration: none;
	background-color: #fb471e;
	color: #000000;
	padding: 12px 20px;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	font-weight: bold;
	letter-spacing: 0.2em;
	width: auto;
	max-width: 100%;
	text-transform: uppercase;
	text-align: center;
	margin: 0 auto;
}

.ep-program-text-cta:hover {
	color: #ffffff;
}

@media (max-width: 992px) {
	.ep-program-hero-section {
		flex-direction: column;
		padding-bottom: 0px;
		max-width: 63%;
	}

	.ep-program-text {
		padding: 36px 20px 20px 0;
	}

	.ep-program-image img {
		width: 100%;
		height: auto;
	}
}

@media (max-width: 768px) {
	.ep-program-hero-section {
		flex-direction: column;
		padding-bottom: 0px;
		max-width: 80%;
	}
}

/* PROGRAM SECTIONS */
.ep-program-section-wrapper {
	background-color: #fcf1ed;
}

.ep-program-section-wrapper-blue {
	background-color: #164e60;
	color: #ffffff;
}

.ep-program-section-wrapper-lightblue {
	background-color: #7eddde;
	color: #000000;
}

.ep-program-section-wrapper-white {
	background-color: #ffffff;
	color: #000000;
}

.ep-program-section {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 0;
}

.ep-program-section-content {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: 1020px;
	margin: auto;
}

.ep-program-section-image {
	flex: 1 1 50%;
	max-width: 50%;
	height: auto;
	margin-top: 20px;
}

.ep-program-section-image-zero {
	max-height: 400px;
	width: auto;
}

.ep-program-section-text {
	flex: 1 1 50%;
	max-width: 50%;
	padding: 0 20px;
	text-align: left;
}

.ep-program-section-text h2 {
	font-size: 22px;
	font-weight: normal;
	margin-bottom: 10px;
	font-family: "Georgia Pro Condensed Light", "Helvetica", sans-serif;
	letter-spacing: 1px;
}

.ep-program-section-text h2 span {
	font-size: 40px;
	font-family: "Golden Hopes", "Helvetica", sans-serif;
	font-weight: normal;
	text-transform: lowercase;
	padding-left: 3px;
	display: inline-block;
	position: relative;
	top: 8px;
}

.ep-program-section-text h3 {
	font-size: 18px;
	font-weight: normal;
	font-family: "Georgia Pro Condensed Light", "Helvetica", sans-serif;
	letter-spacing: 1px;
	padding: 15px 0px 0px;
	text-transform: uppercase;
}

.ep-program-section-text p,
.ep-program-section-text ul {
	font-size: 16px;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	font-weight: normal;
	margin: 20px 0;
}

.ep-program-section-text ul {
	padding: 0 10px;
}

.ep-program-section-text a,
.ep-program-section-text a:visited {
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
}

@media (max-width: 992px) {
	.ep-program-section-image,
	.ep-program-section-text {
		flex-basis: 100%;
		max-width: 90%;
		padding: 0 20px;
	}

	.ep-program-section-image {
		order: 1; /* Image goes below text on smaller screens */
	}

	.ep-program-section-text {
		order: 2;
		padding: 20px;
		text-align: left;
	}

	.ep-program-section-text ul {
		text-align: left;
	}

	.enrichment-faq-section {
		padding: 20px 20px;
	}
}

@media (max-width: 768px) {
	.ep-program-section {
		width: auto;
		padding: 20px 0;
	}
}

/* PROGRAM BOXES */
.ep-program-boxes-intro {
	max-width: 1020px;
	margin: 0 auto;
	padding: 40px 20px 0;
}

.ep-program-boxes-intro h2 {
	font-size: 22px;
	font-weight: normal;
	letter-spacing: 1px;
	font-family: "Georgia Pro Condensed Light", "Times New Roman", Times, serif;
	text-align: center;
}

.ep-program-boxes-intro h2 span {
	font-size: 40px;
	font-family: "Golden Hopes", "Helvetica", sans-serif;
	font-weight: normal;
	text-transform: lowercase;
	padding-left: 3px;
	display: inline-block;
	position: relative;
	top: 8px;
}

.ep-program-boxes-intro p {
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 1px;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	text-align: center;
}

.ep-program-boxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: start;
	padding: 20px 20px 50px;
	max-width: 1068px;
	margin: 0 auto;
}

.ep-program-box {
	flex: 1;
	margin: 0 10px;
	padding: 20px;
	background-color: #fcf2ed;
	box-sizing: border-box;
	height: auto;
	min-height: stretch;
}

.ep-program-box h3 {
	margin-top: 0;
	color: #000000;
	font-size: 18px;
	font-weight: normal;
	font-family: "Georgia Pro Condensed Light", "Times New Roman", Times, serif;
	text-align: center;
	border-bottom: 1px solid #000000;
	padding: 0 0 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.ep-program-box p,
.ep-program-box ul {
	color: #000000;
	font-size: 14px;
	font-weight: normal;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
}

@media (max-width: 767px) {
	.ep-program-box {
		flex: 0 0 100%;
		max-width: 90%;
		margin: 10px 0;
	}
}

/* VIDEO */
.ep-video-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 40px;
}

.ep-video-inner {
	max-width: 1068px;
	width: 100%;
	padding: var(--ep-spacing-md);
}

.ep-video {
	margin: 0 auto;
	max-width: 900px;
	width: 100%;
}

.ep-video-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 aspect ratio */
	border-radius: 16px;
	overflow: hidden;
	background: #000;
}

.ep-video-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ENRICHMENT PROGRAM CARDS */
.ep-enrichment-headline {
	font-family: var(--ep-font-primary);
	font-size: 18px;
	font-weight: 700;
	line-height: 112%;
	color: var(--ep-text-primary);
	text-align: center;
	margin-top: 75px;
	margin-bottom: var(--ep-spacing-md);
}

.ep-enrichment-programs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ep-spacing-md);
	margin: 0 auto;
	max-width: 100%;
	padding-bottom: 75px;
}

@media screen and (max-width: 991px) {
	.ep-enrichment-meta {
		padding: 20px 40px;
	}
}

.ep-enrichment-grid {
	flex: 0 1 350px;
	display: flex;
	justify-content: center;
}

.ep-enrichment-card {
	width: 100%;
	max-height: 100%;
	background: var(--ep-white);
	border: 0.5px solid var(--ep-border-light);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--ep-transition-default);
	text-decoration: none;
}

.ep-enrichment-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ep-desktop-only {
	display: inline;
}

.ep-mobile-only {
	display: none;
}

@media screen and (min-width: 992px) {
	.ep-enrichment-programs.ep-has-six-cards {
		display: grid;
		grid-template-columns: repeat(3, 306px);
		gap: var(--ep-spacing-md);
		justify-content: center;
		max-width: calc(306px * 3 + 24px * 2);
	}

	.ep-enrichment-programs.ep-has-six-cards .ep-enrichment-grid {
		display: block;
		max-width: 236px;
	}

	.ep-enrichment-programs.ep-has-six-cards .ep-enrichment-card {
		height: 100%;
		width: 306px;
	}
}

.ep-enrichment-image-container {
	position: relative;
	width: 100%;
	height: 117px;
	overflow: hidden;
}

.ep-enrichment-image-desktop,
.ep-enrichment-image-mobile {
	width: 100%;
	height: 100%;
	object-fit: cover;
	flex-shrink: 0;
}

.ep-enrichment-image-desktop {
	display: block;
}

.ep-enrichment-image-mobile {
	display: none;
}

.ep-enrichment-card-inner {
	padding: var(--ep-spacing-sm);
}

.ep-enrichment-title {
	margin: 0 !important;
}

.ep-enrichment-title a {
	font-family: var(--ep-font-primary);
	margin: 0 0 4px 0;
	font-size: 18px;
	line-height: 112%;
	font-weight: 700;
	color: var(--ep-primary);
	text-decoration: underline;
}

.ep-enrichment-age {
	margin: 0 0 8px 0;
	font-family: var(--ep-font-primary);
	font-size: 16px;
	line-height: 150%;
	font-weight: 400;
	color: var(--ep-primary);
}

.ep-enrichment-copy {
	font-family: var(--ep-font-primary);
	margin: 0;
	font-size: 16px;
	line-height: 150%;
	font-weight: 400;
	color: var(--ep-text-primary);
}

/* RESPONSIVE - Tablet/Mobile (enrichment cards become an accordion) */
@media (max-width: 991px) {
	.ep-video-inner {
		display: flex;
		flex-direction: column;
		max-width: 705px;
	}

	.ep-enrichment-headline {
		margin-top: var(--ep-spacing-md);
		text-align: left;
	}

	.ep-enrichment-programs {
		display: block;
		margin: 0;
		max-width: 100%;
	}

	.ep-enrichment-grid {
		display: flex;
		align-items: flex-start;
		position: relative;
		padding: var(--ep-spacing-sm) 0;
		border-bottom: 1px solid var(--ep-border-light);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		user-select: none;
		transition: background-color 0.2s ease;
	}

	.ep-enrichment-grid:active {
		background-color: rgba(0, 0, 0, 0.02);
	}

	.ep-enrichment-card {
		display: contents;
		box-shadow: none;
	}

	.ep-desktop-only {
		display: none;
	}

	.ep-mobile-only {
		display: inline;
		font-family: var(--ep-font-primary);
		margin: 0 0 4px 0;
		font-size: 18px;
		line-height: 112%;
		font-weight: 700;
		color: var(--ep-text-primary);
	}

	.ep-enrichment-explore-btn {
		display: block;
		margin-top: 12px;
		max-width: min-content;
		color: var(--ep-primary);
		border-radius: 4px;
		font-family: var(--ep-font-primary);
		font-size: 16px;
		font-weight: 400;
		text-decoration: underline;
	}

	.ep-enrichment-explore-btn.ep-mobile-only {
		display: block;
	}

	.ep-enrichment-card:hover {
		box-shadow: none;
	}

	.ep-enrichment-image-container {
		width: 58px;
		height: 58px;
		margin-right: 16px;
		flex-shrink: 0;
	}

	.ep-enrichment-image-desktop {
		display: none;
	}

	.ep-enrichment-image-mobile {
		display: block;
		width: 58px;
		height: 58px;
		object-fit: cover;
		border-radius: 4px;
	}

	.ep-enrichment-card-inner {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0;
	}

	.ep-enrichment-title {
		margin: 0;
		max-width: 200px;
	}

	.ep-enrichment-title a {
		text-decoration: none;
		color: var(--ep-text-primary);
	}

	.ep-enrichment-age {
		margin: 4px 0 0;
		color: var(--ep-primary);
		text-box: trim-both cap alphabetic;
	}

	.ep-enrichment-copy {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		margin: 0;
		padding-top: var(--ep-spacing-md);
		transition:
			max-height 0.4s ease,
			opacity 0.3s ease 0.1s;
	}

	.ep-enrichment-grid.is-open .ep-enrichment-copy {
		max-height: 300px;
		opacity: 1;
		margin: 0;
	}

	.ep-enrichment-grid::after {
		font-family: Inter, sans-serif;
		content: "+";
		position: absolute;
		right: 0;
		top: 16px;
		transform: none;
		font-size: 31px;
		font-weight: 700;
		line-height: 1;
		color: var(--ep-primary);
	}

	.ep-enrichment-grid.is-open::after {
		content: "–";
	}
}

/* TESTIMONIAL
   Ported from wpsl-store.css (.sdp-testimonial-*), renamed with the
   `ep-` prefix. The shared .sdp-hero-cta / .sdp-testimonial-cta button
   base was merged into .ep-testimonial-cta. */
.ep-testimonial-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--ep-bg-light);
}

.ep-testimonial {
	padding: var(--ep-spacing-lg);
	border-radius: 8px;
	max-width: 1068px;
}

.ep-testimonial-inner {
	display: flex;
	align-items: center;
	gap: var(--ep-spacing-lg);
}

.ep-testimonial-quote-box {
	background-color: var(--ep-white);
	padding: var(--ep-spacing-md);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ep-primary);
	max-width: 450px;
	border-radius: 8px;
}

.ep-red-quote,
.ep-red-quote-bottom {
	font-family: var(--ep-font-primary);
	font-size: 46px;
	font-weight: 700;
	color: var(--ep-accent);
	margin: 0;
	text-box: trim-both cap alphabetic;
}

.ep-red-quote-bottom {
	rotate: 180deg;
}

.ep-testimonial-quote-text {
	font-family: var(--ep-font-primary);
	font-size: 16px;
	line-height: 150%;
	font-weight: 400;
	color: var(--ep-text-primary);
}

.ep-testimonial-quote-text p {
	margin: 0;
}

.ep-testimonial-signature-text {
	font-family: var(--ep-font-accent);
	font-size: 40px;
	line-height: 100%;
	font-weight: 400;
	color: var(--ep-primary);
	margin: 0;
}

.ep-testimonial-author-text {
	font-family: var(--ep-font-primary);
	font-size: 14px;
	line-height: 150%;
	font-weight: 400;
	color: var(--ep-text-secondary);
	margin: 0;
}

.ep-testimonial-headline {
	/* font-family: var(--ep-font-secondary); */
	font-size: 23.2px;
	line-height: 112%;
	font-weight: 300;
	text-transform: uppercase;
	margin-top: 0;
}

.ep-free {
	font-family: var(--ep-font-accent);
	font-size: 50px;
	text-transform: capitalize;
	line-height: 100%;
	font-weight: 400;
	color: var(--ep-text-primary);
	position: relative;
	top: 8px;
	padding: 0 4px;
}

.ep-testimonial-copy-text {
	font-family: var(--ep-font-primary);
	font-size: 16px;
	line-height: 150%;
	font-weight: 400;
	color: var(--ep-text-primary);
	margin-bottom: 0;
}

.ep-testimonial-cta-outer {
	margin-top: 15px;
}

.ep-testimonial-cta {
	text-decoration: none;
	display: flex;
	justify-content: center;
	max-width: 155px;
	width: 100%;
	background-color: var(--ep-primary);
	color: var(--ep-white);
	font-size: 16px;
	font-weight: 700;
	font-family: var(--ep-font-primary);
	padding: var(--ep-spacing-xs) var(--ep-spacing-sm);
	border-radius: 4px;
	transition: background-color var(--ep-transition-default);
}

.ep-testimonial-cta:hover {
	background-color: rgba(38, 78, 96, 0.9);
}

@media (max-width: 991px) {
	.ep-testimonial {
		padding: 32px;
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		width: 100vw;
		position: relative;
	}

	.ep-testimonial-inner {
		flex-direction: column;
		align-items: center;
		gap: var(--ep-spacing-md);
	}

	.ep-testimonial-quote-box {
		max-width: 100%;
		padding: var(--ep-spacing-sm);
	}

	.ep-testimonial-signature-text {
		font-size: 30px;
	}

	.ep-testimonial-headline {
		font-size: 18px;
	}

	.ep-free {
		font-size: 27px;
		position: relative;
		top: 4px;
	}

	.ep-testimonial-copy-text {
		font-size: 14px;
	}

	.ep-testimonial-cta {
		max-width: 100%;
		padding: 8px 16px;
	}
}