.evolution-awards-certifications,
.evolution-certification-logos,
.evolution-education-partners,
.evolution-department-tabs,
.evolution-mission-vision,
.evolution-our-history {
	padding: 3rem 0;
}
/* Legacy's founder-bio section (markup class "history-section white-gray-bg")
   carries a white/light-gray split background behind the image+text row -
   confirmed via legacy's own style.css, which overrides the generic
   .white-gray-bg (50%/50%) with a section-specific 30%/30% cut for
   .history-section specifically. The opaque image column fully covers the
   white portion regardless of exact cutoff position, so the visible effect
   is just the gray showing through the column gutter and around the text. */
.evolution-our-history {
	background: linear-gradient(90deg, #FFFFFF 30%, #F3F3F3 30%);
}
/* Theme.json's global block-gap fires as `:root :where(.is-layout-flow) > *
   { margin-block-start: ... }` (confirmed in the live global-styles-inline-css
   output) - the leading `:root` pseudo-class gives that rule the SAME
   (0,1,0) specificity as a plain `.evolution-our-history` override, so it
   was winning purely on source order (a first attempt at this fix using
   just the class had no visible effect). The element+class combinator here
   raises specificity to (0,1,1), guaranteeing this wins regardless of load
   order. That margin sat outside this section's own background, showing as
   a plain white strip above the gray fill; legacy has no such gap (its
   .history-section butts directly against the banner, relying on its own
   padding for spacing, same as here). */
section.evolution-our-history {
	margin-block-start: 0;
}

/*
 * Grid/container utilities. Same gap, same fix, and same rationale as
 * forms-blocks.css (see the comment there): the legacy theme relies on
 * Bootstrap's grid globally, this rebuild does not, and this file's six
 * block types used .container/.row/.col-* markup with zero CSS anywhere to
 * back it - confirmed live on the pages using these blocks (Recognition,
 * Our Departments, Our Vision and Mission, Our Inspirational Founder, Our
 * Education Partners, Our Partners): real markup, browser-default/
 * left-edge layout. Computed as standard 12-column percentages
 * (3/12=25%, 4/12=33.3333%, 6/12=50%, 8/12=66.6667%), not invented values;
 * .container uses the same 1140px/15px values already established
 * elsewhere; breakpoints (576px/768px/992px) match Bootstrap's own
 * defaults, which the legacy theme's shipped bootstrap.min.css also used.
 */
/* CORRECTED (confirmed live against legacy's real Bootstrap 5.0.2
   bootstrap.min.css): gutter is --bs-gutter-x: .75rem (12px), not 15px, and
   .container's real max-width is responsive - 540/720/960/1140/1320px at
   576/768/992/1200/1400px - not a flat 1140px. Same root cause and fix as
   home-blocks.css's .container rule; see that file's comment for the full
   trace (confirmed via a direct user screenshot comparison at ~1900px
   width). */
.evolution-awards-certifications .container,
.evolution-certification-logos .container,
.evolution-education-partners .container,
.evolution-department-tabs .container,
.evolution-mission-vision .container,
.evolution-our-history .container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 1140px;
	padding-left: 12px;
	padding-right: 12px;
	width: 100%;
}
@media (min-width: 1400px) {
	.evolution-awards-certifications .container,
	.evolution-certification-logos .container,
	.evolution-education-partners .container,
	.evolution-department-tabs .container,
	.evolution-mission-vision .container,
	.evolution-our-history .container {
		max-width: 1320px;
	}
}
.evolution-awards-certifications .row,
.evolution-certification-logos .row,
.evolution-education-partners .row,
.evolution-department-tabs .row,
.evolution-mission-vision .row,
.evolution-our-history .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.evolution-awards-certifications [class*="col-"],
.evolution-certification-logos [class*="col-"],
.evolution-education-partners [class*="col-"],
.evolution-department-tabs [class*="col-"],
.evolution-mission-vision [class*="col-"],
.evolution-our-history [class*="col-"] {
	padding: 0 15px;
	box-sizing: border-box;
	width: 100%;
}
.evolution-awards-certifications .col-md-4 {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}
/* certification-logos' `col-6 col-sm-4 col-md-3` combo: authored
   desktop-first like the rest of this file, so col-md-3 carries the
   desktop 25% and is overridden down at each smaller breakpoint to match
   what col-sm-4/col-6 would give. */
.evolution-certification-logos .col-md-3 {
	flex: 0 0 25%;
	max-width: 25%;
}
/* education-partners' `col-md-3 col-6` combo: same desktop-first pattern,
   col-md-3 overridden down to the col-6 mobile size below 768px. */
.evolution-education-partners .col-md-3 {
	flex: 0 0 25%;
	max-width: 25%;
}
.evolution-department-tabs .col-lg-4 {
	flex: 0 0 23%;
	max-width: 23%;
}
.evolution-department-tabs .col-lg-8 {
	flex: 0 0 77%;
	max-width: 77%;
}
.evolution-mission-vision .col-md-6,
.evolution-our-history .col-md-6 {
	flex: 0 0 50%;
	max-width: 50%;
}
/* Widen the image column specifically (nth-child, not a distinguishing
   class - both columns share the plain .col-md-6 markup, image first then
   text) rather than the shared 50/50 rule above, which
   .evolution-mission-vision also relies on unchanged. Scoped to the same
   768px-up breakpoint as the rest of this file's desktop-first columns,
   matching the max-width:767px stacking rule below (these selectors are
   more specific than it, so without this scoping the columns would stay
   55%/45% instead of stacking to 100% on mobile). */
@media (min-width: 768px) {
	.evolution-our-history .row > .col-md-6:nth-child(1) {
		flex: 0 0 49%;
		max-width: 49%;
	}
	.evolution-our-history .row > .col-md-6:nth-child(2) {
		flex: 0 0 51%;
		max-width: 51%;
	}
}
.evolution-our-history .col-md-12 {
	flex: 0 0 100%;
	max-width: 100%;
}
/* mission-vision's "feature" cards use `col-md-4 col-lg-3` together - at
   full desktop width (>=992px) col-lg-3 (25%) wins over col-md-4; col-md-4's
   own 33.3333% only actually governs the narrower tablet range where lg no
   longer applies but md still does (768-991px) - see the two media queries
   below, not this unconditional rule. */
.evolution-mission-vision .col-lg-3 {
	flex: 0 0 25%;
	max-width: 25%;
}
@media (max-width: 991px) {
	.evolution-department-tabs .col-lg-4,
	.evolution-department-tabs .col-lg-8 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.evolution-mission-vision .col-lg-3 {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}
}
@media (max-width: 767px) {
	.evolution-awards-certifications .col-md-4,
	.evolution-mission-vision .col-md-6,
	.evolution-our-history .col-md-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.evolution-certification-logos .col-md-3,
	.evolution-education-partners .col-md-3 {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}
	.evolution-mission-vision .col-lg-3 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
@media (max-width: 575px) {
	.evolution-certification-logos .col-md-3,
	.evolution-education-partners .col-md-3 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* Gray panel + overlapping cards - ported from legacy style.css:8189-8216
   (.react_populars_topics.react_populars_topics_about combination this
   section actually uses on evolution.edu.au/recognition/). The panel's own
   generous padding-bottom (180px) plus the cards' container being pulled
   up into it via a negative top margin (-200px) is what makes the white
   cards visually overlap the bottom of the gray panel, matching the
   confirmed-live legacy behaviour. */
.evolution-awards-certifications .react__title__section-all {
	max-width: 1350px;
	margin: 0 auto;
	padding-top: 80px;
	padding-bottom: 180px;
	background: #F2F4F9;
	border-radius: 10px;
	text-align: center;
}
.evolution-awards-certifications .react__title__section-all .react__tittle {
	margin: 0 0 10px;
	color: #1E1E1E;
	font-size: 44px;
	font-weight: 700;
	line-height: 54px;
}
.evolution-awards-certifications .react__title__section-all h6 {
	margin: 0 0 12px;
	color: #333333;
	font-size: 20px;
	font-weight: 600;
}
.evolution-awards-certifications .container {
	margin-top: -120px;
}
/* Extra bottom padding on the section itself - the cards' -120px negative
   top margin shifts their whole box (and therefore whatever follows it in
   normal flow, i.e. the footer) up by that same amount, silently eating
   into the shared padding:3rem bottom spacing every block in this file
   gets by default. This restores real clearance before the footer without
   touching that shared rule (which other blocks still rely on as-is). */
.evolution-awards-certifications {
	padding-bottom: 480px;
}
.evolution-awards-certifications .item__inner {
	height: 100%;
	padding: 40px 35px 35px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 30px 60px rgba(15, 18, 22, 0.1);
	transition: all 0.5s ease 0s;
}
.evolution-awards-certifications .item__inner:hover {
	box-shadow: 0 30px 50px 0 rgba(0, 15, 56, 0.1), inset 0 3px 0 0 rgba(42, 109, 245, 0.004);
}
.evolution-awards-certifications .item__inner .icon img {
	width: 80px;
	height: 80px;
	padding: 8px;
	object-fit: contain;
	border: 3px solid #F2F4F9;
	border-radius: 50%;
}
.evolution-awards-certifications .item__inner .react-title {
	margin: 25px 0 14px;
	color: #1E1E1E;
	font-size: 20px;
	font-weight: 700;
}
.evolution-awards-certifications .item__inner .react-content p {
	margin: 0;
	color: #5B5F64;
	font-size: 16px;
	line-height: 24px;
}

.evolution-certification-logos .certification-grid img {
	max-width: 100%;
	height: auto;
}

.evolution-education-partners .education-partner-item {
	display: block;
	text-decoration: none;
	text-align: center;
}
.evolution-education-partners .education-partner-item img {
	max-width: 100%;
	height: auto;
}

/* Card + heading - ported from legacy style.css:8065-8123 (base
   .react_populars_topics .item__inner, no react_populars_topics2/_about
   modifier - confirmed live on evolution.edu.au/our-education-partners-2/,
   which unlike Recognition/Mission&Vision has no gray panel and no
   always-visible shadow: the purple top bar and shadow only appear on
   hover). Heading falls back to the theme's plain .react__title__section h2
   (style.css:312-320) since this page has no react__tittle override of its
   own. Icon height and title line-clamp are legacy's page-specific
   overrides at style.css:14008-14016. */
.evolution-education-partners .react__title__section {
	padding-bottom: 30px;
}
/* The markup's own .col-md-12.text-center never had a `.text-center`
   utility rule backing it in this file (this codebase hand-recreates
   Bootstrap utility classes per-block rather than shipping the whole
   utility set - see the .container/.row comment atop this file), so the
   heading rendered left-aligned instead of centered on both pages that use
   this block (/our-education-partners-2/ and /our-pathway-providers/) -
   confirmed live on the latter. */
.evolution-education-partners .react__title__section .text-center {
	text-align: center;
}
.evolution-education-partners .react__title__section h2 {
	margin: 0;
	font-size: 50px;
	font-weight: 700;
	line-height: 54px;
}
/* Our Pathway Providers page only (body class page-id-226): user asked for
   a slightly larger title specifically here, without changing the sibling
   Education Partners page that already reuses this same heading rule. */
.page-id-226 .evolution-education-partners .react__title__section h2 {
	font-size: 56px;
}
.evolution-education-partners .item__inner {
	position: relative;
	border: 2px solid rgba(15, 22, 41, 0.078);
	border-radius: 6px;
	padding: 40px 35px 35px;
	margin-bottom: 30px;
	text-align: center;
	transition: all 0.5s ease 0s;
}
.evolution-education-partners .item__inner:before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	top: -3px;
	border-radius: 6px 6px 0 0;
	height: 8px;
	width: 100%;
	z-index: 1;
	border-top: 4px solid #6B5CF6;
	transition: all 0.5s ease 0s;
	opacity: 0;
}
.evolution-education-partners .item__inner:hover {
	box-shadow: 0 30px 50px 0 rgba(0, 15, 56, 0.1), inset 0 3px 0 0 rgba(42, 109, 245, 0.004);
	border-color: #fff;
}
.evolution-education-partners .item__inner:hover:before {
	opacity: 1;
}
.evolution-education-partners .item__inner a {
	display: block;
	text-decoration: none;
}
.evolution-education-partners .item__inner .icon img {
	height: 120px;
	max-width: 100%;
	object-fit: contain;
}
.evolution-education-partners .item__inner .react-title {
	margin: 25px 0 0;
	color: #2D2D73;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Nav panel + buttons - ported from forms-blocks.css's pathway-selector
   component (.overview-section-six .overview-navigation .navigation-btn,
   used on /enrolment-application-portal/) rather than adopting those shared
   class names directly, per this project's convention. Same lavender
   panel, divider-separated labels, and pink active state with a diamond
   chevron peeking toward the content column - user asked for this page's
   tab selector to match that component's look exactly. height is left auto
   here (unlike the pathway selector's fixed 500px) since department tab
   panels vary a lot in content length, and there's no sibling image column
   to height-match against. */
.evolution-department-tabs .department-nav {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	background: #f1f0fe;
	border-radius: 20px;
	padding: 30px;
}
.evolution-department-tabs .department-nav-btn {
	display: block;
	position: relative;
	width: 100%;
	text-align: left;
	padding: 0 0 20px;
	margin: 0 0 20px;
	background: transparent;
	border: none;
	border-bottom: 1px solid #d8d8d6;
	color: #2D2D73;
	font-size: 22px;
	font-weight: 600;
	cursor: pointer;
}
.evolution-department-tabs .department-nav-btn:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}
.evolution-department-tabs .department-nav-btn::before {
	position: absolute;
	top: 0;
	right: -50px;
	display: none;
	width: 35px;
	height: 35px;
	background: #f1f0fe;
	transform: rotate(45deg);
	content: "";
}
.evolution-department-tabs .department-nav-btn.active {
	background: transparent;
	color: #D62B7B;
}
.evolution-department-tabs .department-nav-btn.active::before {
	display: block;
}
@media (max-width: 1400px) {
	.evolution-department-tabs .department-nav-btn {
		font-size: 18px;
	}
	.evolution-department-tabs .department-nav-btn::before {
		width: 25px;
		height: 25px;
		right: -50px;
	}
}
@media (max-width: 991px) {
	.evolution-department-tabs .department-nav-btn::before {
		display: none !important;
	}
}
.evolution-department-tabs .department-content.hide {
	display: none;
}
.evolution-department-tabs .department-content img {
	max-width: 100%;
	height: auto;
	margin-bottom: 1rem;
}

/* Vision/Mission cards - ported from legacy's real, confirmed-live rules
   (style.css:8128-8216, the react_populars_topics2/react_populars_topics_about
   combination legacy actually uses for this exact section, scoped here to
   .evolution-mission-vision instead of adopting those shared class names
   directly, matching this project's existing convention of scoping ported
   rules to each block's own wrapper). */
.evolution-mission-vision .item__inner {
	position: relative;
	height: 100%;
	padding: 40px 35px 35px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 30px 60px rgba(15, 18, 22, 0.1);
	transition: all 0.5s ease 0s;
}
.evolution-mission-vision .item__inner:hover {
	box-shadow: 0 30px 50px 0 rgba(0, 15, 56, 0.1), inset 0 3px 0 0 rgba(42, 109, 245, 0.004);
}
.evolution-mission-vision .item__inner .icon img {
	width: 80px;
	height: 80px;
	padding: 8px;
	object-fit: contain;
	border: 3px solid #F2F4F9;
	border-radius: 50%;
}
.evolution-mission-vision .item__inner .react-title {
	margin: 25px 0 14px;
	color: #1E1E1E;
	font-size: 20px;
	font-weight: 700;
}
.evolution-mission-vision .item__inner .react-content p {
	margin: 0;
	color: #5B5F64;
	font-size: 16px;
	line-height: 24px;
}

/* STRIVE list - ported from legacy style.css:8324-8340,14005 (.strive-full-form
   / .image-box-wrapper / .image-box-img / .image-box-title) plus the
   decorative dot graphic (style.css:1893-1903, .multi-dots-sqaure::before -
   asset already present locally at assets/images/combined-shape.svg). */
/* padding-top, not margin-top - margin here would sit adjacent to the cards
   row above and risks collapsing (the same class of bug already hit
   several times elsewhere in this project); padding never collapses, so
   it's guaranteed to actually show. */
.evolution-mission-vision .strive-full-form {
	position: relative;
	padding-top: 100px;
}
.evolution-mission-vision .multi-dots-sqaure::before {
	position: absolute;
	top: 120px;
	right: 10%;
	width: 180px;
	height: 180px;
	background: url("../images/combined-shape.svg") no-repeat right top;
	content: "";
}
/* align-items:center - each title+description sits alongside a fixed
   100x100 square; without this, the flex row's default (stretch) leaves
   the text block's own top-aligned content at an inconsistent height
   depending on how many lines its description wraps to, instead of
   uniformly centred against the square next to it. */
.evolution-mission-vision .image-box-wrapper {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 30px;
}
.evolution-mission-vision .image-box-img {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	margin: 0;
	background: #6B5CF6;
	color: #fff;
	font-size: 40px;
	font-weight: 700;
}
.evolution-mission-vision .image-box-content {
	margin-top: 20px;
}
.evolution-mission-vision .image-box-title {
	margin: 0 0 2px;
	color: #333333;
	font-size: 35px;
	font-weight: 600;
}
.evolution-mission-vision .image-box-description {
	color: #5B5F64;
	font-size: 16px;
	line-height: 24px;
}
.evolution-mission-vision .image-box-description p {
	margin: 0;
}

.evolution-our-history img {
	max-width: 100%;
	height: auto;
}
/* The stored content itself was rewritten (2026-09-08, verified byte-exact
   against WordPress's own block-attribute serializer, see conversation
   history) to use real <p> tags matching legacy's actual markup
   (evolution.edu.au/our-history/), replacing an earlier white-space:pre-line
   CSS-only workaround - that workaround rendered blank-line gaps at the
   page's line-height (huge once the sitewide 1.7 line-height/18px body fix
   landed) rather than a real, fixed paragraph margin. This p rule ports
   legacy's own confirmed global `p { margin: 0 0 15px }` (style.css:176),
   scoped here since this theme doesn't carry that rule globally. */
.evolution-our-history .our-history-brief p {
	margin: 0 0 6px;
}
.evolution-our-history .our-history-brief ul {
	margin: 0;
}
/* The final paragraph starts with a legacy-matching "&nbsp;<br />" prefix
   (confirmed live on evolution.edu.au/our-history/ - not a stray artifact),
   which renders as its own blank-ish line before the actual sentence -
   that leading line, not the list's own margin (already zeroed above), is
   what was still reading as extra gap below the list. */
.evolution-our-history .our-history-brief ul + p {
	margin-top: -20px;
}