/**
 * The page sections, in the order they appear on a course landing page.
 *
 * Each rule set here supplements a pattern built from core blocks; the patterns
 * carry the layout, these carry the details core can't express.
 */

/* Hero ------------------------------------------------------------------ */

/**
 * Image left, copy right, on the site's tinted background. The image bleeds to
 * the viewport edge on the left while the copy stays inside the content width,
 * which is why the hero opts out of the theme's root padding.
 */
.eco-rbc-hero {
	background-color: var(--wp--preset--color--surface);
}

.eco-rbc-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
}

.eco-rbc-hero__media {
	margin: 0;
	/* Fill the grid cell whatever the photograph's aspect ratio. */
	min-height: 100%;
}

.eco-rbc-hero__media picture,
.eco-rbc-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.eco-rbc-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	padding: calc(var(--wp--preset--spacing--70) / 2) clamp(1.5rem, 5vw, 4rem);
}

.eco-rbc-hero__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600; /* SemiBold: heaviest Libre Franklin face loaded */
}

.eco-rbc-hero__title {
	margin: 0;
}

.eco-rbc-hero__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small); /* QA 1.9 */
}

/* QA: a hero paragraph that is nothing but bold text ("Knowledge worth
   knowing." on Guelph) is a subheading, so it takes the medium size like the
   eyebrow above it. Direct-child <strong> only, so the Terms line (a link
   wrapping <strong>) is not caught. */
.eco-rbc-hero__body:has(> strong:only-child) {
	font-size: var(--wp--preset--font-size--medium);
}

/* On a phone the photograph stacks above the copy and takes a fixed band so
   it doesn't push the call to action below the fold. */
@media (max-width: 899px) {
	.eco-rbc-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.eco-rbc-hero__media {
		max-height: 42vh;
	}

	.eco-rbc-hero__content {
		padding-block: var(--wp--preset--spacing--60);
	}
}

/* Three-pillar benefits -------------------------------------------------- */

.eco-rbc-pillars {
	background-color: var(--wp--preset--color--base);
}

/**
 * Both of these are declared as WordPress's "flow" layout in the block markup
 * (core has no dedicated CSS-grid layout type), so core's own global styles
 * still add margin-block-start to every non-first child, on the assumption
 * that a flow container's children stack vertically:
 *
 *   :root :where(.is-layout-flow) > * { margin-block-start: ...; }
 *
 * That is invisible for genuinely stacked content, but here the columns run
 * side by side, so it silently pushed pillar 2 and 3 down relative to
 * pillar 1 (which alone gets the paired :first-child reset), and separately
 * added extra space between each pillar's own icon/title/body on top of the
 * gap below. Spacing in both containers is fully handled by `gap`, so core's
 * margin is switched off rather than fought with more specific overrides.
 */
.eco-rbc-pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.eco-rbc-pillars__grid > * {
	margin-block-start: 0;
}

/* QA 1.15: icon and title centred, body text left-aligned (per the updated
   mockup). The blocks carry core's .has-text-align-center class from the
   pattern, so the body is overridden here rather than edited out of every
   site's content. */
.eco-rbc-pillar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--20);
	text-align: left;
}

.eco-rbc-pillar__title,
.eco-rbc-pillar__title.has-text-align-center {
	text-align: center;
}

.eco-rbc-pillar__body.has-text-align-center {
	text-align: left;
}

.eco-rbc-pillar > * {
	margin-block-start: 0;
}

/**
 * Fixed at 80px tall so all three icons line up on one baseline regardless of
 * their own drawn proportions — a wider icon (the laurel wreath) and a
 * perfectly round one (the stopwatch) both render at the same height, only
 * their width differs. Width is intentionally not fixed, for the same reason.
 */
.eco-rbc-pillar__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	margin: 0 0 var(--wp--preset--spacing--10);
}

.eco-rbc-pillar__icon img {
	display: block;
	width: auto;
	height: 80px;
	max-width: 100%;
	object-fit: contain;
}

.eco-rbc-pillar__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium); /* QA 1.11 */
	font-weight: 400; /* QA 1.14 */
}

.eco-rbc-pillar__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small); /* QA: body text at x-small */
}

@media (max-width: 781px) {
	.eco-rbc-pillars__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 32rem;
		margin-inline: auto;
	}
}

/* Split sections: certificate, Skills for Jobs, Ontario Online Learning --- */

/**
 * All three are the same shape — a column of copy beside a single image — so
 * they share one layout and differ only in which side the image sits on and
 * what background they carry.
 */
.eco-rbc-split__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 5rem);
}

.eco-rbc-split__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.eco-rbc-split__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600; /* QA round 3: H2 in LibreFranklin-SemiBold (supersedes 1.14). */
}

.eco-rbc-split__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small); /* QA 1.9 */
}

.eco-rbc-split__media {
	margin: 0;
}

.eco-rbc-split__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Media first in the source order, copy second — used by the Ontario section. */
.eco-rbc-split--media-first .eco-rbc-split__media {
	order: -1;
}

.eco-rbc-tinted {
	background-color: var(--wp--preset--color--surface);
}

/* The Skills for Jobs logo is a fixed asset and shouldn't stretch. QA: kept
   to 220px (was 340px) so it sits in proportion with the other logos. */
.eco-rbc-split--logo .eco-rbc-split__media img {
	width: auto;
	max-width: min(100%, 220px);
	margin-inline: auto;
}

@media (max-width: 899px) {
	.eco-rbc-split__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	/* Stacked, the picture always leads. */
	.eco-rbc-split__media {
		order: -1;
	}
}

/* Success stories (Western only) ----------------------------------------- */

.eco-rbc-stories__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
	max-width: 46rem;
	margin-inline: auto;
}

.eco-rbc-story figure,
.eco-rbc-story .wp-block-embed {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.eco-rbc-story__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	line-height: 1.5;
}

.eco-rbc-story__attribution {
	margin-top: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

/* Collaboration strip ---------------------------------------------------- */

.eco-rbc-collaboration {
	background-color: var(--wp--preset--color--surface);
}

.eco-rbc-collaboration__heading {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600; /* SemiBold: heaviest Libre Franklin face loaded */
	text-align: center;
}

/* Footnotes -------------------------------------------------------------- */

.eco-rbc-footnotes {
	padding-block: calc(var(--wp--preset--spacing--50) / 2);
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	background-color: var(--eco-rbc-band, #e8e8e6);
}

.eco-rbc-footnotes ol {
	margin: 0;
	padding-left: 1.5rem;
}

.eco-rbc-footnotes li + li {
	margin-top: 0.75rem;
}

/**
 * A footnote that has just been jumped to. :target alone is easy to miss on a
 * dense grey band, so give it a visible marker as well as scroll position.
 */
.eco-rbc-footnotes li:target {
	padding-left: 0.5rem;
	border-left: 4px solid var(--wp--preset--color--accent);
	scroll-margin-top: 2rem;
}

/* Superscript references in body copy. */
.eco-rbc-footnote-ref {
	font-size: 0.75em;
	vertical-align: super;
	line-height: 0;
}

/* FAQ page ---------------------------------------------------------------- */

/**
 * "< Return to home page". The arrow is drawn in CSS, the same technique as
 * the accordion chevron and the footer's return-to-top arrow, so it inherits
 * the link colour and costs no image request.
 */
.eco-rbc-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: none;
}

.eco-rbc-back-link:hover {
	text-decoration: underline;
}

.eco-rbc-back-link-arrow {
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

/**
 * Category quick links: pill-shaped anchors jumping down to each category's
 * heading, not a JS show/hide filter — plain in-page navigation needs no
 * script, works with JS disabled, and gets the focus-on-jump behaviour
 * assets/js/navigation.js already gives every in-page link on this theme.
 */
.eco-rbc-faq__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
	list-style: none;
}

.eco-rbc-faq__categories a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 1.5rem;
	color: var(--eco-rbc-faq-pill, var(--wp--preset--color--accent));
	font-weight: 600; /* SemiBold: heaviest Libre Franklin face loaded */
	text-decoration: none;
	/* QA: RBC's pills — grey by default, white with a 1px outline in the pill
	   colour on hover. The transparent border keeps the size steady. */
	background-color: #e5e5e5;
	border: 1px solid transparent;
	border-radius: 999px;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.eco-rbc-faq__categories a:hover,
.eco-rbc-faq__categories a:focus-visible {
	color: var(--eco-rbc-faq-pill, var(--wp--preset--color--accent));
	background-color: #ffffff;
	border-color: var(--eco-rbc-faq-pill, var(--wp--preset--color--accent));
}

/* Give each category heading room above it so a jump doesn't tuck the
   heading right against the viewport edge. */
.eco-rbc-faq__category {
	scroll-margin-top: 1.5rem;
}