/* ═══════════════════════════════════════════════════════════════════════════
   EYFS PAGE — FULL-WIDTH MAESTRO CARD (what you get section)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Layout lives in components/maestro-card.css, shared with the single subject
   and mixed-age pages. All this page contributes is which colour it is. */
.ce-eyfs-maestro-card {
	--ce-maestro-accent: var(--ci-color-innovate);
	--ce-maestro-accent-hover: #3a6e87;
}


/* ═══════════════════════════════════════════════════════════════════════════
   EYFS PAGE — EQUAL-HEIGHT CARDS IN WHAT YOU GET SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.ce-eyfs-what-you-get {
	background: #fff;
	position: relative;
	overflow: clip;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
}

.ce-eyfs-what-you-get::before {
	content: '';
	position: absolute;
	width: 450px;
	height: 450px;
	background: #f9f9f9;
	border-radius: 2.75rem;
	transform: rotate(45deg);
	top: -80px;
	left: -90px;
	pointer-events: none;
	z-index: 0;
}

.ce-eyfs-what-you-get::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: #f9f9f9;
	border-radius: 2rem;
	transform: rotate(45deg);
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.ce-eyfs-what-you-get .site-container {
	position: relative;
	z-index: 1;
}

.ce-eyfs-what-you-get .ce-feature-list__item {
	padding: 1.25rem 1.5rem;
	min-height: auto !important;
}

.ce-eyfs-what-you-get .ce-feature-list__header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

/* Scoped to the grid, as the equivalent rules on the single subject and
   mixed-age pages already are. Unscoped it also matched the Maestro card's
   badge — harmless while .ce-eyfs-maestro-card's own 2.75rem sat later in
   this same file, but the moment that moved to the shared maestro-card.css
   the two became equal specificity in different files and this one won on
   source order, shrinking the padlock to 28px on EYFS alone. */
.ce-eyfs-what-you-get .ce-feature-list__grid .ce-feature-list__badge {
	font-size: 1.75rem;
	flex-shrink: 0;
}