/* ═══════════════════════════════════════════════════════════════════════════
   SUBJECT CHALLENGES — the "what sets our X curriculum apart" section

   Six single-subject pages open with the same section: a badge and heading on
   one centred row, a subheading, then four cards two-up, each card a badge and
   title side by side above a paragraph.

     .ce-sci-challenges   science
     .ce-hist-challenges  history
     .ce-geo-challenges   geography
     .ce-ad-challenges    art & design
     .ce-dt-challenges    design & technology
     .ce-re-challenges    RE

   They were six copies of ~90 identical lines in six stylesheets — the same
   decorative diamonds at the same coordinates, the same type, the same grid.
   Diffed before this file existed, the six blocks were byte-for-byte the same
   apart from the class prefix and two stray comments in art & design.

   Six copies is also how the alignment bug below survived: it was fixed on
   science, and the other five kept it. Add .ce-subject-challenges to the
   section in the ACF renderer; each page keeps its own class on the section
   too, as a hook if one of them ever does need to differ.
   ═══════════════════════════════════════════════════════════════════════════ */

.ce-subject-challenges {
	background: #fff;
	padding: 5rem 0;
	position: relative;
	overflow: clip;
}

/* Large diamond — top-left, partially cropped off edge */
.ce-subject-challenges::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;
}

/* Small diamond — clearly separated below the large one */
.ce-subject-challenges::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-subject-challenges .site-container {
	position: relative;
	z-index: 1;
}

.ce-subject-challenges__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	margin-bottom: 0.75rem;
}

.ce-subject-challenges__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	margin: 0;
	line-height: 1.25;
}

.ce-subject-challenges__sub {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: #7a8a9a;
	text-align: center;
	margin: 0 auto 3rem;
	line-height: 1.7;
}

.ce-subject-challenges .ce-subject-challenges__grid {
	grid-template-columns: repeat(2, 1fr);
}

.ce-subject-challenges__card-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.ce-subject-challenges__card-header .ce-feature-list__title {
	margin: 0;
}

/* The subgrid that lines these paragraphs up now lives in feature-list.css and
   applies to every header-plus-paragraph card on the site — this section no
   longer opts in, it simply has the shape. What stays here is the gap.

   Kept for the record, because it is why that rule exists:

   A card's header row is as tall as its title, so where one title wraps and
   its neighbour's does not, the two paragraphs start 18px apart and the pair
   reads as misaligned rather than as two cards. Every page has at least one
   title long enough to do it — "Curriculum quality and sequencing" beside
   "Practical investigation built in" on science, "Chronology and narrative"
   beside "Disciplinary and substantive knowledge" on history.

   No media query, because the mechanism IS the condition. Measured across the
   range, the titles only disagree in one band:

     1400 / 1180 / 1024 / 900   both titles one line   — aligned already
     820  (iPad portrait)       two lines against one  — 91px against 73px
     768                        both two lines         — aligned already
     680 and below              one column             — no pair to align

   Subgrid does nothing at all where the titles match, and corrects the one
   width where they do not. A breakpoint would have had to name that band and
   would then be wrong the moment the copy changes — which matters more here
   than on one page, because six sets of headings can each wrap at a different
   width and none of them would be named.

   row-gap is restated on purpose: a subgrid inherits its parent's gutters, so
   without it the 1.25rem separating one card from the next would also open up
   between a header and its own paragraph. This is the one part the shared rule
   deliberately does not set, so each section keeps its own spacing. */
.ce-subject-challenges__grid .ce-feature-list__item {
	row-gap: 0.5rem;
	padding: 1.25rem 1.5rem;
	min-height: auto !important;
}

@media (max-width: 680px) {
	.ce-subject-challenges {
		padding: 3rem 0;
	}

	.ce-subject-challenges .ce-subject-challenges__grid {
		grid-template-columns: 1fr;
	}
}