/*
 * Home page only — loaded on the front page (see functions.php), after main.css.
 * Every rule is also prefixed with the front page's body class (.home).
 */

/* Very small phones (<=400px): the 2-column "Why Parents Choose Edify" grid could not shrink below
   2 x 163px, making the section 327px wide on a 320px screen (sideways scroll). One feature per row. (2026-10-23) */
@media (max-width: 400px) {
	.home .features__inner { grid-template-columns: minmax(0, 1fr); }
	.home .features__grid { grid-template-columns: minmax(0, 1fr); }
	.home .features__list,
	.home .features__photo { min-width: 0; }
}

/* "Why Parents Choose Edify" photo (portrait image, 2026-10-24): on desktop it fills the
   box beside the feature list instead of setting the section height; the crop keeps the
   students' faces and the robots in frame at every width. */
.home .features__photo img { object-position: center 45%; }
@media (min-width: 1025px) {
	.home .features__photo { position: relative; }
	.home .features__photo img { position: absolute; inset: 0; min-height: 0; }
}

/* Hero 3C words: gradient text built from each word's existing colour,
   like the Find a School "for Your Child" highlight (2026-10-26). */
.home .hero__copy h1 .text-green,
.home .hero__copy h1 .text-blue,
.home .hero__copy h1 .text-indigo {
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: 0.08em;
}
.home .hero__copy h1 .text-green { background-image: linear-gradient(100deg, #17a34a 0%, #10b981 50%, #0891b2 100%); }
.home .hero__copy h1 .text-blue { background-image: linear-gradient(100deg, #0049b0 0%, #2563eb 45%, #0ea5e9 100%); }
.home .hero__copy h1 .text-indigo { background-image: linear-gradient(100deg, #342d91 0%, #7c3aed 55%, #c026d3 100%); }
/* "For Life." script line: same orange-to-pink as the Find a School highlight.
   Side padding keeps the Yellowtail swashes inside the clipped background. */
.home .hero__copy h1 .text-orange {
	background-image: linear-gradient(100deg, #fd7a1f 0%, #f0566b 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding: 0 0.14em 0.06em;
	margin: 0 -0.14em;
}

/* Future Pathways cards: soft shadow tinted with each card's own colour,
   light top-to-bottom gradient and a stronger lift on hover (2026-10-26). */
.home .pathway-card { --pc: 37, 99, 235; --pc-bg: #dbeafe; }
.home .pathway-card--red { --pc: 225, 29, 72; --pc-bg: #fde2e4; }
.home .pathway-card--blue { --pc: 37, 99, 235; --pc-bg: #dbeafe; }
.home .pathway-card--purple { --pc: 124, 58, 237; --pc-bg: #ede9fe; }
.home .pathway-card--teal { --pc: 13, 148, 136; --pc-bg: #d7f3ee; }
.home .pathway-card--orange { --pc: 234, 124, 27; --pc-bg: #fde6d2; }
.home .pathway-card--gray { --pc: 75, 85, 99; --pc-bg: #e5e7eb; }
.home .pathway-card--pink { --pc: 219, 39, 119; --pc-bg: #fbe1ef; }
.home .pathway-card--violet { --pc: 124, 58, 237; --pc-bg: #ede4fb; }
.home .pathway-card--skyblue { --pc: 2, 132, 199; --pc-bg: #e0f2fe; }
.home .pathway-card {
	background: linear-gradient(180deg, #fff 0%, var(--pc-bg) 55%);
	border: 1px solid rgba(var(--pc), 0.2);
	box-shadow: 0 2px 4px rgba(16, 31, 77, 0.06), 0 12px 26px -8px rgba(var(--pc), 0.45);
}
.home .pathway-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 14px -4px rgba(var(--pc), 0.35);
}
.home .pathway-card:hover {
	transform: translateY(-6px);
	border-color: rgba(var(--pc), 0.35);
	box-shadow: 0 2px 4px rgba(16, 31, 77, 0.06), 0 22px 38px -10px rgba(var(--pc), 0.55);
}
@media (max-width: 640px) {
	.home .pathway-card__icon { width: 52px; height: 52px; }
}

/* Why Parents Choose Edify: shadow around the whole panel, tinted with the
   section's own indigo (icons / eyebrow colour) (2026-10-26). */
.home .features__inner {
	border: 1px solid rgba(79, 91, 234, 0.12);
	box-shadow: 0 2px 6px rgba(16, 31, 77, 0.05), 0 22px 48px -14px rgba(79, 91, 234, 0.32);
}

/* Why Parents Choose Edify — polish (2026-10-26): soft corner glow, icons in white circles with a hover lift, framed photo. Items stay
   box-free (user preference: shadow on the whole panel only). */
.home .features__inner {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(420px 260px at 0% 0%, rgba(124, 58, 237, 0.08), transparent 70%),
		radial-gradient(360px 240px at 72% 100%, rgba(242, 112, 27, 0.06), transparent 70%),
		linear-gradient(135deg, #f5f3fb 0%, #f8f9fb 55%, #f2f4fa 100%);
}
.home .feature__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(79, 91, 234, 0.1);
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.home .feature__icon img { width: 36px; height: 36px; }
.home .feature { grid-template-columns: 48px 1fr; column-gap: 8px; padding-left: 8px; padding-right: 8px; }
.home .feature__icon svg { width: 30px; height: 30px; }
.home .feature strong { transition: color 0.2s ease; }
.home .feature:hover { transform: none; box-shadow: none; }
.home .feature:hover .feature__icon { transform: translateY(-3px) scale(1.06); }
.home .feature:hover strong { color: #4f5bea; }
.home .features__photo img {
	border: 4px solid #fff;
	box-shadow: 0 16px 34px -12px rgba(79, 91, 234, 0.38);
}

/* Awards & Recognitions panel: same shadow, border and soft glow as the
   Why Parents Choose Edify panel above (2026-10-26). */
.home .awards > .container {
	border: 1px solid rgba(79, 91, 234, 0.12);
	background:
		radial-gradient(420px 260px at 0% 0%, rgba(124, 58, 237, 0.07), transparent 70%),
		radial-gradient(360px 240px at 100% 100%, rgba(242, 112, 27, 0.05), transparent 70%),
		linear-gradient(135deg, #f5f3fb 0%, #f8f9fb 55%, #f2f4fa 100%);
	box-shadow: 0 2px 6px rgba(16, 31, 77, 0.05), 0 22px 48px -14px rgba(79, 91, 234, 0.32);
}

/* Our Curriculum — The Power of 3C: content in a panel with the same shadow,
   border and soft glow as the Why Parents / Awards panels (2026-10-26). */
.home .curriculum { background: #fff; }
.home .curriculum__inner {
	border: 1px solid rgba(79, 91, 234, 0.12);
	border-radius: 20px;
	padding: 36px 40px;
	background:
		radial-gradient(460px 300px at 0% 0%, rgba(124, 58, 237, 0.07), transparent 70%),
		radial-gradient(400px 260px at 100% 100%, rgba(242, 112, 27, 0.05), transparent 70%),
		linear-gradient(135deg, #f5f3fb 0%, #f8f9fb 55%, #f2f4fa 100%);
	box-shadow: 0 2px 6px rgba(16, 31, 77, 0.05), 0 22px 48px -14px rgba(79, 91, 234, 0.32);
}
@media (max-width: 1240px) {
	.home .curriculum__inner { border-radius: 0; border-left: none; border-right: none; }
}
@media (max-width: 720px) {
	.home .curriculum__inner { padding: 26px 18px; }
}

/* Explore Endless Future Pathways: same panel shadow and border as the other
   homepage panels, on a plain white background (2026-10-26). */
.home .pathways > .container {
	background: #fff;
	border: 1px solid rgba(79, 91, 234, 0.12);
	border-radius: 20px;
	padding: 32px 40px 36px;
	box-shadow: 0 2px 6px rgba(16, 31, 77, 0.05), 0 22px 48px -14px rgba(79, 91, 234, 0.32);
}
@media (max-width: 1240px) {
	.home .pathways > .container { border-radius: 0; border-left: none; border-right: none; }
}
@media (max-width: 720px) {
	.home .pathways > .container { padding: 26px 18px; }
}

/* Consistent spacing between homepage sections: every gap between panels is
   the same 40px (28px on phones) instead of 56–136px (2026-10-26). */
.home .curriculum,
.home .pathways,
.home .features,
.home .awards,
.home .map-banner,
.home .testimonials { padding-top: 0; padding-bottom: 40px; }
.home .curriculum { padding-top: 40px; }
@media (max-width: 720px) {
	.home .curriculum,
	.home .pathways,
	.home .features,
	.home .awards,
	.home .map-banner,
	.home .testimonials { padding-bottom: 28px; }
	.home .curriculum { padding-top: 28px; }
}

/* Why Parents icons: bigger and consistent (all icon images re-trimmed to the
   same framing, *-v2.png), and no hover effect on the icons (2026-10-26). */
.home .feature { grid-template-columns: 56px 1fr; column-gap: 8px; padding-left: 4px; padding-right: 4px; }
.home .feature__icon { width: 56px; height: 56px; }
.home .feature__icon img { width: 42px; height: 42px; }
.home .feature__icon svg { width: 40px; height: 40px; }
.home .feature:hover .feature__icon { transform: none; color: var(--navy); }

/* Why Parents items: same small gap between title and description in every
   item — icon spans both rows, rows packed at the top (2026-10-26). */
.home .feature { align-content: start; align-items: start; row-gap: 4px; }
.home .feature__icon { grid-row: 1 / span 2; align-self: start; }
.home .feature strong { align-self: end; margin-top: 4px; }

/* Why Parents grid: 4 x 2 instead of 5 + 3 so both rows are full and every
   item has the same size; dividers re-drawn for 4 columns (2026-10-26). */
@media (min-width: 1025px) {
	.home .features__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.home .feature:nth-child(n) { border-right: 1px solid #e3e5f1; border-bottom: none; padding-top: 18px; padding-bottom: 18px; }
	.home .feature:nth-child(4n) { border-right: none; }
	.home .feature:nth-child(-n+4) { border-bottom: 1px solid #e3e5f1; }
	.home .feature small { min-height: 2.9em; }
}
/* Icon above the text so every title fits on one line and all 8 items have
   the same height (title 1 line, description 2 lines). */
@media (min-width: 1025px) {
	.home .feature { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding-left: 18px; padding-right: 18px; }
	.home .feature__icon { grid-column: 1; grid-row: 1; margin-bottom: 6px; }
	.home .feature strong { grid-column: 1; grid-row: 2; margin-top: 0; white-space: nowrap; }
	.home .feature small { grid-column: 1; grid-row: 3; min-height: 2.9em; }
}

/* Why Parents items: no grid lines between items — clean spacing instead
   (user: borders not looking good) (2026-10-26). */
@media (min-width: 1025px) {
	.home .features__grid { column-gap: 28px; row-gap: 26px; }
	.home .feature:nth-child(n) { border: none; padding: 0; }
}

/* Hero buttons + "Watch Campus Life" play button, to match the homepage
   design: soft-shadow white secondary button, large white play circle with a
   halo and a solid triangle (2026-10-26). */
.home .hero__actions { align-items: center; }
.home .hero__actions .btn--outline {
	background: #fff;
	border-color: transparent;
	box-shadow: 0 8px 22px -6px rgba(16, 31, 77, 0.22);
}
.home .hero__actions .btn--outline:hover { box-shadow: 0 14px 28px -8px rgba(16, 31, 77, 0.3); }
.home .hero__play { gap: 12px; margin-left: 6px; }
.home .hero__play-icon {
	position: relative;
	width: 56px;
	height: 56px;
	color: var(--navy);
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.35), 0 10px 24px rgba(13, 27, 76, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home .hero__play-icon svg { width: 22px; height: 22px; margin-left: 3px; }
.home .hero__play:hover .hero__play-icon {
	transform: scale(1.06);
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 12px 28px rgba(13, 27, 76, 0.4);
}
.home .hero__play-label { font-size: 14px; font-weight: 700; line-height: 1.35; text-shadow: 0 1px 6px rgba(13, 27, 76, 0.6); }
.home .hero__play-label small { font-size: 12px; font-weight: 500; opacity: 0.9; }
@media (max-width: 1024px) {
	.home .hero__play-icon { width: 48px; height: 48px; box-shadow: 0 0 0 6px rgba(16, 31, 77, 0.08), 0 8px 18px rgba(13, 27, 76, 0.2); }
	.home .hero__play-label { text-shadow: none; }
}

/* Awards & Recognitions (2026-10-27): each award as a white card with ringed badge. */
.home .awards__track { gap: 12px; padding: 10px 4px 16px; align-items: stretch; }
.home .award {
	width: 124px;
	padding: 18px 10px 16px;
	background: #fff;
	border: 1px solid rgba(79, 91, 234, 0.12);
	border-radius: 16px;
	box-shadow: 0 10px 24px -12px rgba(16, 31, 77, 0.28);
	justify-content: center;
	text-align: center;
	gap: 14px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--navy);
	line-height: 1.3;
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.home .award:not(.award--photo)::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 64px;
	background: linear-gradient(180deg, rgba(79, 91, 234, 0.08), transparent);
}
.home .award:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -14px rgba(79, 91, 234, 0.45); }
.home .award__badge {
	width: 64px;
	height: 64px;
	position: relative;
	box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(79, 91, 234, 0.14), 0 10px 20px -6px rgba(16, 31, 77, 0.45);
}
.home .award__badge svg { width: 30px; height: 30px; }
.home .award--photo { width: auto; padding: 8px; }
.home .award--photo img { height: 100%; min-height: 150px; width: 284px; object-fit: cover; border-radius: 12px; }
@media (max-width: 720px) {
	.home .award { width: 132px; padding: 18px 10px 14px; }
	.home .award__badge { width: 54px; height: 54px; }
	.home .award--photo img { width: 260px; min-height: 150px; }
}

/* Voices That Inspire (2026-10-27): same panel as the other homepage sections. */
.home .testimonials > .container {
	border: 1px solid rgba(79, 91, 234, 0.12);
	border-radius: 20px;
	padding: 30px 32px 28px;
	background:
		radial-gradient(420px 260px at 100% 0%, rgba(242, 112, 27, 0.06), transparent 70%),
		radial-gradient(420px 260px at 0% 100%, rgba(124, 58, 237, 0.07), transparent 70%),
		linear-gradient(135deg, #f5f3fb 0%, #f8f9fb 55%, #f2f4fa 100%);
	box-shadow: 0 2px 6px rgba(16, 31, 77, 0.05), 0 22px 48px -14px rgba(79, 91, 234, 0.32);
}
.home .testimonials h2 { font-size: var(--fs-xl); }
.home .testimonials h2::before {
	content: "TESTIMONIALS";
	display: block;
	font-size: 13px;
	letter-spacing: .08em;
	font-weight: 700;
	color: var(--purple);
	margin-bottom: 8px;
}
.home .testimonial {
	border: 1px solid rgba(79, 91, 234, 0.10);
	border-radius: 16px;
	box-shadow: 0 10px 24px -12px rgba(16, 31, 77, 0.28);
	transition: transform .25s ease, box-shadow .25s ease;
}
.home .testimonial:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -14px rgba(79, 91, 234, 0.45); }
.home .testimonial__play {
	background: linear-gradient(180deg, transparent 40%, rgba(13, 27, 76, 0.35));
	font-size: 0;
}
.home .testimonial__play::before {
	content: "";
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%23101f4d'/%3E%3C/svg%3E") center/20px no-repeat;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35), 0 6px 14px rgba(13, 27, 76, 0.35);
}
.home .testimonial__kicker { color: #f0566b; text-transform: uppercase; letter-spacing: .04em; }
.home .testimonial__source { color: var(--navy); font-weight: 700; }
.home .testimonial__quote { font-style: italic; color: #4a5272; }
.home .testimonials__more { margin: 20px auto 0; padding: 11px 24px; border-radius: 999px; }
@media (max-width: 1240px) {
	.home .testimonials > .container { border-radius: 0; border-left: none; border-right: none; }
}
@media (max-width: 720px) {
	.home .testimonials > .container { padding: 26px 18px; }
}

/* Hero "Choose the Right Path" form (2026-10-28): light see-through glass card so the
   campus photo shows faintly behind it; fields stay near-solid white for readability.
   Desktop only — at <=1024px the form sits below the photo on white. */
@media (min-width: 1025px) {
	.home .hero__form-card {
		background: linear-gradient(160deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.58) 100%);
		-webkit-backdrop-filter: blur(3px) saturate(1.3);
		backdrop-filter: blur(3px) saturate(1.3);
		border: 1px solid rgba(255, 255, 255, 0.75);
		border-radius: 20px;
		box-shadow: 0 24px 50px -12px rgba(13, 27, 76, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}
	.home .hero__form-card .hero__field.hero__field--search {
		background: rgba(255, 255, 255, 0.9);
		border-color: rgba(79, 91, 234, 0.16);
		box-shadow: 0 2px 8px rgba(13, 27, 76, 0.08);
	}
	.home .hero__form-card .hero__form-close { background: rgba(255, 255, 255, 0.8); }
	.home .hero__form-card > p { color: #2b3358; }
}

/* "For Life." script line in weight 800 (Yellowtail has only 400, so the browser emboldens it) */
.home .hero__copy h1 .text-orange { font-weight: 800; }

/* Hero tidy-up (2026-10-28): form 20% narrower so the girl's hand shows, a little more
   room from the quick sidebar and lined up with the photo; "Watch Campus Life" on a
   frosted pill so it reads on the bright photo. Desktop only. */
@media (min-width: 1025px) {
	.home .hero__form-card { width: 256px; padding: 18px; right: 92px; top: 58px; }
	.home .hero__form-card h3 { font-size: 17px; }
	.home .hero__play {
		padding: 6px 18px 6px 6px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.55);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		border: 1px solid rgba(255, 255, 255, 0.7);
		box-shadow: 0 10px 24px -12px rgba(13, 27, 76, 0.35);
	}
	.home .hero__play-label { color: var(--navy); text-shadow: none; }
	.home .hero__play-label small { color: #4a5578; }
}

/* Hero buttons (2026-10-28): "Explore Our Schools" gets a navy outline so it stands out on
   the light left side of the photo; "Watch Campus Life" pill is the same 50px height as
   the two buttons beside it. Desktop only. */
@media (min-width: 1025px) {
	.home .hero__actions .btn--outline {
		border: 1.5px solid #0b1437;
		box-shadow: 0 10px 24px -10px rgba(16, 31, 77, 0.35);
	}
	.home .hero__actions .btn--outline:hover { background: #0b1437; color: #fff; }
	.home .hero__play { height: 50px; padding: 0 20px 0 6px; gap: 10px; box-sizing: border-box; }
	.home .hero__play-icon { width: 38px; height: 38px; box-shadow: 0 6px 14px rgba(13, 27, 76, 0.3); }
	.home .hero__play-icon svg { width: 16px; height: 16px; margin-left: 2px; }
	.home .hero__play:hover .hero__play-icon { box-shadow: 0 8px 18px rgba(13, 27, 76, 0.35); }
	.home .hero__play-label { font-size: 14px; line-height: 1.25; }
	.home .hero__play-label small { font-size: 11.5px; }
}

/* Why Parents: 10 items (Individual Attention + Leadership Programs added 2026-10-28)
   as 5 x 2 so both rows stay full. */
@media (min-width: 1025px) {
	.home .features__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; }
	.home .feature strong { white-space: normal; }
}
/* small laptops: titles can wrap to 2 lines — reserve 2 lines so every description in a row starts level */
@media (min-width: 1025px) and (max-width: 1279px) {
	.home .feature strong { min-height: 2.7em; display: flex; align-items: flex-end; }
}

/* Hero spacing (2026-10-29): the one-line description made the hero shorter, so the
   enquiry form ran into the blue stats strip. Keep enough height for the whole form
   (rem, so it scales with the larger root font on wide screens), centre the copy, and
   give the buttons more room below the description. */
@media (min-width: 1025px) {
	.home .hero__inner { min-height: 36.5rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
	.home .hero__actions { margin-top: 1.75rem; }
}
@media (max-width: 1024px) {
	.home .hero__actions { margin-top: 22px; }
}

/* Hero A+ (2026-10-29, client picked option A with more breathing room): copy and form
   share one centre line, 60px above the form and ~60px to the stats strip (rem, scales
   on wide screens), roomier copy and form spacing, form nudged towards the quick
   sidebar so it clears the girl in the photo. Overrides the 2026-10-29 spacing block above. */
@media (min-width: 1025px) {
	.home .hero__inner { min-height: 38.75rem; padding-top: 3.75rem; padding-bottom: 5.625rem; }
	.home .hero__copy .eyebrow { margin-bottom: 18px; }
	.home .hero__copy h1 { margin-bottom: 22px; }
	.home .hero__desc { font-size: 1.1rem; font-weight: 500; color: #3a4368; margin-top: 0; }
	.home .hero__actions { margin-top: 2rem; gap: 16px; }
	.home .hero__form-card { top: 3.75rem; right: 84px; width: 256px; padding: 22px 20px 18px; }
	.home .hero__form-card .badge { margin-bottom: 10px; }
	.home .hero__form-card h3 { margin: 0 0 4px; }
	.home .hero__form-card > p { margin: 0 0 16px; }
	.home .hero__form-card .hero__field { margin-bottom: 10px; padding-top: 2px; padding-bottom: 2px; }
	.home .hero__form-card .js-hero-step-next { margin-top: 6px; }
	.home .hero__form-card .hero__form-note { margin: 10px 0 0; }
}

/* Hero background (2026-10-29, client picked BG 1): soft brand-colour glows on the
   white text side (lavender bottom-left, orange under the buttons, sky top-left) layered
   over the original white-to-clear scrim, so the photo itself is untouched. Desktop only. */
@media (min-width: 1025px) {
	.home .hero__scrim { background:
		radial-gradient(ellipse 34% 62% at 4% 100%, rgba(124, 58, 237, 0.20), rgba(124, 58, 237, 0) 72%),
		radial-gradient(ellipse 22% 42% at 30% 96%, rgba(253, 122, 31, 0.16), rgba(253, 122, 31, 0) 72%),
		radial-gradient(ellipse 30% 50% at 0% 0%, rgba(14, 165, 233, 0.13), rgba(14, 165, 233, 0) 72%),
		linear-gradient(90deg, #fff 0%, #fff calc(34% - 5px), rgba(255, 255, 255, 0.5) calc(40% - 5px), rgba(255, 255, 255, 0) calc(46% - 5px)); }
}