/* ==========================================================================
   Page banners: two types site-wide (2026-10-24). Desktop only (>=901px);
   below that every banner keeps its existing stacked phone layout.

   1. Full-width banner (main pages): photo runs to the right edge of the
      screen and fades into a soft background on the left, text sits on the
      standard 1240px page width, 480px tall. Pages with wide banner artwork
      (Home, Our Curriculum, Why Edify, Parent Resources, Find a School,
      school pages) already work this way; Admissions, About Us and Contact
      Us are converted here with a fade until wide photos are supplied.
   2. Boxed banner (form / utility pages): soft full-width band, photo in a
      rounded box on the right.
   Loaded after the page CSS and typography.css; !important only where an
   older page rule or an inline style would otherwise win.
   ========================================================================== */

:root {
	--banner-bg: linear-gradient(160deg, #f9f8fd 0%, #fbfaff 45%, #f9f1fc 100%);
	--banner-band: #f6f7fb;
	--banner-h: 480px;
}

@media (min-width: 901px) {

	/* ---------- 1. Full-width banner: same height for the artwork banners ---------- */
	.curriculum-page-hero__inner,
	.why-page .why-hero__inner,
	.pr-hero__inner {
		min-height: var(--banner-h);
		box-sizing: border-box;
	}
	.curriculum-page-hero__inner,
	.pr-hero__inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* ---------- 1. Full-width banner: converted pages (fade) ---------- */
	.admissions-hero,
	.about-hero,
	.contact-hero {
		position: relative;
		overflow: hidden;
		background: var(--banner-bg) !important;
		padding: 0 !important;
	}
	.admissions-hero > .container,
	.about-hero > .container,
	.contact-hero > .container {
		position: static;
		display: flex !important;
		align-items: center;
		min-height: var(--banner-h);
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.admissions-hero__copy,
	.about-hero__copy,
	.contact-hero__copy {
		position: relative;
		z-index: 2;
		max-width: 540px;
	}

	/* The photo becomes the right-hand 62% of the banner and fades in from the left. */
	.about-hero__collage,
	.contact-hero__photo {
		position: absolute !important;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: 62%;
		height: auto !important;
		margin: 0 !important;
		border-radius: 0 !important;
		aspect-ratio: auto !important;
		z-index: 0;
		display: block !important;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
	}
	.about-hero__collage img,
	.contact-hero__photo img {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		border-radius: 0 !important;
		display: block;
	}
	/* Admissions: the supplied photo is a small (480x520) arch cut-out, so it is
	   shown at its natural proportions on the right, full banner height, with
	   its left and top edges softened into the background (Why Edify look),
	   instead of being stretched across the banner. */
	.admissions-hero__media {
		position: absolute !important;
		top: 0;
		bottom: 0;
		right: calc(max(24px, (100% - 1240px) / 2 + 24px) + 250px);
		left: auto;
		height: 100% !important;
		width: auto;
		aspect-ratio: 480 / 520;
		margin: 0 !important;
		z-index: 0;
	}
	.admissions-hero__copy { max-width: 500px; }
	@media (max-width: 1180px) {
		.admissions-hero__media { right: 0; }
		.admissions-hero__copy { max-width: 470px; }
	}
	.admissions-hero__media img,
	.admissions-hero__media .ph {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		object-position: center top;
		border-radius: 0 !important;
		display: block;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%);
		mask-composite: intersect;
	}
	/* About Us collage: narrower so it stays clear of the paragraph text. */
	.about-hero__collage { width: 54%; }
	.contact-hero__photo img { object-position: center center; }

	/* About Us without a single collage photo: show the first collage tile only. */
	.about-hero__collage:not(.about-hero__collage--photo) .about-hero__collage-item:not(.about-hero__collage-item--1) { display: none; }
	.about-hero__collage-item--1 { position: absolute; inset: 0; }

	/* Admissions quote card: beside the photo on wide screens (like the Why Edify
	   badge), over its bottom-right corner on narrower ones. */
	.admissions-hero__quote {
		right: -250px !important;
		top: 50% !important;
		bottom: auto;
		transform: translateY(-50%);
		z-index: 3;
	}
	@media (max-width: 1180px) {
		.admissions-hero__quote { right: 24px !important; top: auto !important; bottom: 36px; transform: none; }
	}
	.admissions-hero__3c { display: none !important; }

	/* ---------- 2. Boxed banner (form / utility pages) ---------- */
	.advisor-hero,
	.visit-hero,
	.leadgen-hero,
	.brochure-hero {
		background: var(--banner-band) !important;
		padding: 48px 0 !important;
		color: inherit;
	}
	.advisor-hero__inner,
	.visit-hero__inner,
	.leadgen-hero__grid,
	.brochure-hero__grid {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		gap: 48px !important;
		align-items: center;
		min-height: 320px;
	}
	.leadgen-hero__media { order: 0 !important; }
	.advisor-hero__photo,
	.visit-hero__photo,
	.leadgen-hero__media:not(.leadgen-hero__media--icon),
	.brochure-hero__media {
		position: relative;
		height: 320px;
		aspect-ratio: auto !important;
		border-radius: 16px !important;
		overflow: hidden;
		box-shadow: 0 16px 40px rgba(16, 31, 77, 0.12);
	}
	.advisor-hero__photo img,
	.visit-hero__photo img,
	.leadgen-hero__media:not(.leadgen-hero__media--icon) img,
	.brochure-hero__media img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		border-radius: 0 !important;
		box-shadow: none !important;
		display: block;
	}

	/* Brochure banner joins the light band: dark-background colours swapped. */
	.brochure-hero h1 { color: var(--navy) !important; }
	.brochure-hero__desc { color: var(--text-muted) !important; }
	.brochure-hero .eyebrow { color: var(--purple) !important; }

	/* Stories: same light band behind the page title. */
	.blog-index {
		background: linear-gradient(var(--banner-band), var(--banner-band)) top / 100% 220px no-repeat;
		padding-top: 48px !important;
	}
}

/* Orange highlight words in page banners: same orange-to-pink gradient text as
   the Find a School "for Your Child" heading (2026-10-26). */
.about-hero h1 .text-orange,
.why-hero h1 .text-orange,
.curriculum-page-hero h1 .text-orange,
.admissions-hero h1 .text-orange,
.admissions-hero__3c span,
.contact-hero h1 .text-orange,
.advisor-hero h1 .text-orange,
.visit-hero h1 .text-orange,
.brochure-hero h1 .text-orange,
.sp-hero__place {
	background-image: linear-gradient(100deg, #fd7a1f 0%, #f0566b 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #f2701b;
}