/**
 * Hero block styles (block-scoped; enqueued only when the block is present).
 *
 * Composition follows variant 01 of the Edumim hero banner: a warm full-bleed
 * section, a text column on the left and an arch-masked portrait on the right
 * that runs into the bottom edge of the section.
 *
 * Header contract: when this block is the first block of the page the header
 * switches to its transparent state (body.sws-header-over-hero) and is laid
 * over this section, so the top padding here has to clear it — 72px on mobile,
 * 92px from 782px up. See css/header.css.
 *
 * Breakpoints are container queries, not media queries: the editor canvas is
 * narrower than the window, and a media query would style the block for a width
 * it does not actually have.
 */

.sws-hero {
	/*
	 * The layout draws the Abstract Bg outlines in a lightened Yellow, #FFD5AF.
	 * It has no palette token on purpose: 01-design-tokens.md lists this family
	 * as derivatives rather than colours of their own. Written out instead of
	 * faked with an opacity on --accent, which lands visibly more golden, and
	 * kept here rather than in the files so the masks stay reusable.
	 */
	--sws-hero-decor: #ffd5af;

	container: sws-hero / inline-size;
	position: relative; /* Containing block for the decor layer. */
	overflow: hidden;   /* The figures bleed past the container on purpose. */
	background-color: var(--wp--preset--color--shade-warm);
	color: var(--wp--preset--color--dark);
}

.sws-hero__inner {
	position: relative; /* Containing block for the decorative disc below. */
	z-index: 1;         /* Above the decor layer. */
	display: grid;
	gap: var(--wp--preset--spacing--60);
	max-width: var(--wp--custom--container);
	margin-inline: auto;

	/* 6rem clears the 4.5rem mobile header; the portrait meets the bottom edge. */
	padding-block: 6rem 0;
	padding-inline: var(--wp--custom--gutter);
}

/* Without a portrait nothing reaches the bottom edge, so restore the padding. */
.sws-hero--no-media .sws-hero__inner {
	padding-bottom: var(--wp--preset--spacing--70);
}

.sws-hero__content {
	position: relative;
	z-index: 1;
}

/* Background figures
--------------------------------------------- */

/*
 * Abstract Bg of composition 01 — five thin outline figures over the full-bleed
 * section. Offsets are the layout's own coordinates turned into percentages of
 * its 1920x1000 section, so they keep their places as the section grows.
 *
 * Hidden below the desktop breakpoint: the figures are placed for the wide
 * layout and two of them sit exactly where the single column puts the heading.
 * The layer is dropped whole rather than rearranged.
 */
.sws-hero__decor {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 0; /* Below the content, above the section fill. */
	pointer-events: none;
}

.sws-hero__shape {
	position: absolute;
}

/*
 * Composition 01 draws its figures as one-colour outlines, so they are painted
 * through a mask and one colourless file serves every palette colour. Scoped to
 * the modifier: composition 03 uses multi-colour files as ordinary background
 * images, and a fill underneath would show through their transparent parts.
 */
.sws-hero--arch .sws-hero__shape {
	background-color: var(--sws-hero-decor);
}

/* Shape 6 — the four-pointed sparkle, level with the first line of the heading. */
.sws-hero__shape--sparkle {
	left: 11.15%;
	top: 32.6%;
	width: 2.6875rem; /* 43px */
	aspect-ratio: 1;
	-webkit-mask: url("../../assets/decor/sparkle.svg") no-repeat center / contain;
	mask: url("../../assets/decor/sparkle.svg") no-repeat center / contain;
}

/* Shape 3 — the atom, above the portrait and left of the arch. */
.sws-hero__shape--atom {
	left: 48.7%;
	top: 21.3%;
	width: 4.6875rem; /* 75px */
	aspect-ratio: 75 / 67;
	-webkit-mask: url("../../assets/decor/atom.svg") no-repeat center / contain;
	mask: url("../../assets/decor/atom.svg") no-repeat center / contain;
}

/*
 * Shape 2 — the lightbulb. Anchored to the right edge like the layout has it:
 * with a left offset its fixed rem width runs off a narrow container and clips.
 */
.sws-hero__shape--bulb {
	right: 6.77%;
	top: 32.2%;
	width: 6.625rem; /* 106px */
	aspect-ratio: 106 / 115;
	-webkit-mask: url("../../assets/decor/bulb.svg") no-repeat center / contain;
	mask: url("../../assets/decor/bulb.svg") no-repeat center / contain;
}

/* Shape 4 — the small ring, right of the lead paragraph. */
.sws-hero__shape--ring {
	left: 50.31%;
	top: 63.9%;
	width: 1.375rem; /* 22px */
	aspect-ratio: 1;
	-webkit-mask: url("../../assets/decor/ring.svg") no-repeat center / contain;
	mask: url("../../assets/decor/ring.svg") no-repeat center / contain;
}

/* Shape 5 — the double-loop swirl in the bottom-left corner. */
.sws-hero__shape--swirl {
	left: 4.58%;
	top: 82.9%;
	width: 6.9375rem; /* 111px */
	aspect-ratio: 111 / 87;
	-webkit-mask: url("../../assets/decor/swirl.svg") no-repeat center / contain;
	mask: url("../../assets/decor/swirl.svg") no-repeat center / contain;
}

/* Text
--------------------------------------------- */

.sws-hero__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

/*
 * Not the display token (82px): that size is built for the template's 33
 * character placeholder. Real headings on this site run about 60 characters
 * and need to stay at three lines, while still outranking the 44px section h2.
 */
.sws-hero__title {
	margin: 0;
	font-size: clamp(2rem, 4cqw, 3.25rem);
	font-weight: 700;
	line-height: 1.25;
}

/*
 * Hand-drawn brush stroke under the accent word, the way the layout draws it —
 * a rough marker line with ragged edges and lifted ends, not a ruled rule.
 *
 * Inlined as an SVG data URI so the block keeps its four files and the mark
 * costs no extra request on the LCP screen. The colour is written out rather
 * than taken from the palette because a data URI cannot read a CSS custom
 * property: #5EB9B3 is the Secondary token and this is the only place in the
 * block that repeats a palette value.
 *
 * preserveAspectRatio="none" lets the stroke stretch to whatever the accent
 * phrase measures; the viewBox is cropped to the ink so the painted height
 * equals the background height. box-decoration-break keeps a stroke under
 * every line when the phrase wraps.
 */
.sws-hero__accent {
	padding-bottom: 0.125rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0.3 372 4.7' preserveAspectRatio='none'%3E%3Cpath fill='%235EB9B3' d='M0,3.16C1,3,4.1,2.46,6.2,2.18C8.3,1.9,10.3,1.57,12.4,1.46C14.5,1.36,16.5,1.56,18.6,1.53C20.7,1.5,22.7,1.35,24.8,1.26C26.9,1.17,28.9,1.02,31,0.99C33.1,0.96,35.1,1.07,37.2,1.1C39.3,1.14,41.3,1.21,43.4,1.23C45.5,1.24,47.5,1.21,49.6,1.21C51.7,1.21,53.7,1.2,55.8,1.23C57.9,1.26,59.9,1.44,62,1.4C64.1,1.36,66.1,1.05,68.2,0.99C70.3,0.92,72.3,0.98,74.4,1.02C76.5,1.05,78.5,1.19,80.6,1.2C82.7,1.21,84.7,1.14,86.8,1.09C88.9,1.05,90.9,0.99,93,0.93C95.1,0.88,97.1,0.77,99.2,0.77C101.3,0.78,103.3,0.9,105.4,0.94C107.5,0.98,109.5,0.96,111.6,1.02C113.7,1.08,115.7,1.25,117.8,1.28C119.9,1.3,121.9,1.23,124,1.17C126.1,1.12,128.1,1,130.2,0.95C132.3,0.9,134.3,0.88,136.4,0.89C138.5,0.89,140.5,0.95,142.6,1C144.7,1.06,146.7,1.24,148.8,1.22C150.9,1.2,152.9,0.95,155,0.89C157.1,0.83,159.1,0.88,161.2,0.88C163.3,0.87,165.3,0.87,167.4,0.85C169.5,0.84,171.5,0.79,173.6,0.78C175.7,0.76,177.7,0.76,179.8,0.78C181.9,0.8,183.9,0.88,186,0.88C188.1,0.87,190.1,0.82,192.2,0.76C194.3,0.7,196.3,0.5,198.4,0.53C200.5,0.57,202.5,0.91,204.6,0.98C206.7,1.04,208.7,0.94,210.8,0.92C212.9,0.89,214.9,0.81,217,0.83C219.1,0.86,221.1,1.04,223.2,1.08C225.3,1.12,227.3,1.11,229.4,1.06C231.5,1.02,233.5,0.86,235.6,0.83C237.7,0.81,239.7,0.87,241.8,0.93C243.9,0.99,245.9,1.21,248,1.19C250.1,1.16,252.1,0.82,254.2,0.79C256.3,0.77,258.3,0.94,260.4,1.01C262.5,1.07,264.5,1.21,266.6,1.18C268.7,1.16,270.7,0.9,272.8,0.85C274.9,0.81,276.9,0.85,279,0.9C281.1,0.95,283.1,1.12,285.2,1.15C287.3,1.18,289.3,1.12,291.4,1.06C293.5,1,295.5,0.79,297.6,0.81C299.7,0.83,301.7,1.14,303.8,1.19C305.9,1.25,307.9,1.16,310,1.15C312.1,1.15,314.1,1.14,316.2,1.17C318.3,1.2,320.3,1.37,322.4,1.36C324.5,1.35,326.5,1.17,328.6,1.11C330.7,1.04,332.7,0.95,334.8,0.94C336.9,0.93,338.9,0.96,341,1.04C343.1,1.12,345.1,1.38,347.2,1.45C349.3,1.51,351.3,1.37,353.4,1.41C355.5,1.44,357.5,1.54,359.6,1.64C361.7,1.75,363.7,1.84,365.8,2.04C367.9,2.24,371,2.71,372,2.85L372,2.83C371,2.98,367.9,3.54,365.8,3.73C363.7,3.92,361.7,3.88,359.6,3.97C357.5,4.05,355.5,4.18,353.4,4.23C351.3,4.27,349.3,4.19,347.2,4.23C345.1,4.26,343.1,4.39,341,4.45C338.9,4.5,336.9,4.57,334.8,4.58C332.7,4.58,330.7,4.53,328.6,4.46C326.5,4.39,324.5,4.18,322.4,4.14C320.3,4.1,318.3,4.21,316.2,4.22C314.1,4.22,312.1,4.15,310,4.17C307.9,4.19,305.9,4.3,303.8,4.35C301.7,4.41,299.7,4.55,297.6,4.5C295.5,4.45,293.5,4.09,291.4,4.07C289.3,4.05,287.3,4.35,285.2,4.39C283.1,4.42,281.1,4.31,279,4.28C276.9,4.24,274.9,4.19,272.8,4.19C270.7,4.2,268.7,4.35,266.6,4.32C264.5,4.29,262.5,4.04,260.4,4.02C258.3,4,256.3,4.18,254.2,4.21C252.1,4.25,250.1,4.24,248,4.22C245.9,4.2,243.9,4.08,241.8,4.07C239.7,4.06,237.7,4.14,235.6,4.15C233.5,4.16,231.5,4.15,229.4,4.13C227.3,4.1,225.3,3.98,223.2,3.99C221.1,4,219.1,4.17,217,4.18C214.9,4.2,212.9,4.09,210.8,4.08C208.7,4.07,206.7,4.06,204.6,4.13C202.5,4.19,200.5,4.46,198.4,4.47C196.3,4.48,194.3,4.21,192.2,4.18C190.1,4.15,188.1,4.3,186,4.29C183.9,4.29,181.9,4.19,179.8,4.16C177.7,4.13,175.7,4.09,173.6,4.12C171.5,4.16,169.5,4.38,167.4,4.38C165.3,4.38,163.3,4.21,161.2,4.14C159.1,4.08,157.1,4.04,155,4.01C152.9,3.97,150.9,3.92,148.8,3.93C146.7,3.95,144.7,4.06,142.6,4.1C140.5,4.14,138.5,4.15,136.4,4.18C134.3,4.2,132.3,4.27,130.2,4.23C128.1,4.18,126.1,3.98,124,3.92C121.9,3.86,119.9,3.81,117.8,3.87C115.7,3.92,113.7,4.2,111.6,4.27C109.5,4.34,107.5,4.24,105.4,4.28C103.3,4.31,101.3,4.5,99.2,4.5C97.1,4.51,95.1,4.36,93,4.31C90.9,4.25,88.9,4.16,86.8,4.18C84.7,4.19,82.7,4.39,80.6,4.41C78.5,4.43,76.5,4.33,74.4,4.31C72.3,4.29,70.3,4.27,68.2,4.28C66.1,4.28,64.1,4.33,62,4.33C59.9,4.33,57.9,4.25,55.8,4.25C53.7,4.25,51.7,4.27,49.6,4.33C47.5,4.38,45.5,4.57,43.4,4.58C41.3,4.6,39.3,4.38,37.2,4.4C35.1,4.43,33.1,4.67,31,4.73C28.9,4.78,26.9,4.79,24.8,4.72C22.7,4.64,20.7,4.36,18.6,4.29C16.5,4.23,14.5,4.42,12.4,4.32C10.3,4.22,8.3,3.91,6.2,3.7C4.1,3.48,1,3.14,0,3.02Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% 0.08em;
	box-decoration-break: clone;
}

/*
 * Dark rather than the body colour: on the warm section fill the body token
 * lands near 3.9:1, below the 4.5:1 the project guidelines require.
 */
.sws-hero__lead {
	max-width: 34rem;
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: var(--wp--preset--font-size--medium);
}

/* Actions
--------------------------------------------- */

.sws-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--60);
}

/*
 * Fill, radius, padding, type and focus states arrive from theme.json
 * styles.elements.button through .wp-element-button — only the secondary fill
 * is block-local, because the tokens describe a single button look.
 */
.sws-hero__button {
	display: inline-block;
	text-align: center;
}

.sws-hero__button--secondary {
	background-color: var(--wp--preset--color--dark);
}

.sws-hero__button--secondary:hover,
.sws-hero__button--secondary:focus {
	background-color: var(--wp--preset--color--primary);
}

/* Micro facts
--------------------------------------------- */

.sws-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	list-style: none;
}

.sws-hero__fact {
	position: relative;
}

/* Separator between facts; decorative, so it stays out of the accessible name. */
.sws-hero__fact + .sws-hero__fact::before {
	content: "\00B7";
	position: absolute;
	left: -0.8125rem;
	color: var(--wp--preset--color--primary);
}

/* Media
--------------------------------------------- */

/*
 * __figure is the grid item and the positioning context for the floating cards.
 * They have to live outside __media, whose overflow:hidden carries the arch mask
 * and would clip anything hanging off the edges.
 */
.sws-hero__figure {
	position: relative;
	z-index: 1;
	justify-self: center;
	width: 100%;
	max-width: 22rem;
}

.sws-hero__media {
	width: 100%;

	/* Ratio on the wrapper reserves the space whatever the tag turns out to be. */
	aspect-ratio: 2 / 3;

	/* Arch: the top is rounded across the full width, the bottom stays square. */
	border-radius: 50% 50% 0 0 / 32% 32% 0 0;
	overflow: hidden;
}

/*
 * Descendant selector on purpose: the image optimizer may wrap the tag in
 * <picture>, which would break a child combinator.
 */
.sws-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/* Floating cards
--------------------------------------------- */

/*
 * Block 1 and Block 2 of the layout. Both are positioned against the portrait,
 * in the proportions the layout gives them: the plate hangs 58px off the left of
 * a 565px photo and starts 284px down its 856px height, the badge overhangs the
 * right edge by 43px at 387px down. Percentages keep that as the photo scales.
 *
 * Shown from 62rem up rather than at the 782px column switch: between the two
 * the media column is under 460px and a 147px plate covers a third of the face.
 */
.sws-hero__card,
.sws-hero__badge {
	display: none;
}

/*
 * box-sizing is set explicitly on both cards: the theme has no global
 * border-box rule, so width would otherwise mean the content box and the
 * padding and border would push the plate past the size the layout gives it.
 * For the same reason the paddings and the plate are absolute, not percentages
 * — a percentage padding resolves against __figure, not against the card.
 */
.sws-hero__card {
	box-sizing: border-box;
	position: absolute;

	/*
	 * The layout hangs the plate 58px (10.27%) off the photo, but there the right
	 * side is a 666px band that starts 90px after the text column ends. Our grid
	 * gives both columns 570px, so that overhang reaches back into the heading —
	 * Ukrainian headings run to four lines and the last one fills its column.
	 * 4.5% keeps the plate over the photo and always clear of the text.
	 */
	left: -4.5%;
	top: 33.2%;
	z-index: 2;
	flex-direction: column;
	align-items: center;
	width: clamp(6.5rem, 10.2cqi, 9.1875rem); /* caps at the layout's 147px */
	padding: clamp(0.875rem, 1.66cqi, 1.5rem);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--card);
	text-align: center;
}

.sws-hero__card-icon {
	display: grid;
	place-items: center;
	width: 3.5rem; /* 56px plate */
	max-width: 100%;
	aspect-ratio: 1;
	margin-bottom: 0.75rem;
	border-radius: 0.875rem;
	background-color: var(--wp--preset--color--shade-mint);
}

.sws-hero__card-icon::before {
	content: "";
	width: 1.5rem; /* 24px glyph */
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--secondary);
	-webkit-mask: url("../../assets/decor/users.svg") no-repeat center / contain;
	mask: url("../../assets/decor/users.svg") no-repeat center / contain;
}

.sws-hero__card-value {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.5;
}

.sws-hero__card-label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--body);
}

/*
 * The layout puts a blurred disc under a translucent one. Reproduced as a frosted
 * circle, but at 0.82 rather than the layout's much lower alpha: there the badge
 * sits on a flat grey placeholder, here it sits on a photograph, and the caption
 * has to stay legible whatever is behind it.
 */
.sws-hero__badge {
	box-sizing: border-box; /* so the white ring sits inside the layout's Ø170 */
	position: absolute;
	right: -7.61%;
	top: 45.2%;
	z-index: 2;
	place-items: center;
	width: clamp(7.5rem, 11.8cqi, 10.625rem); /* caps at the layout's 170px */
	aspect-ratio: 1;
	border: 0.25rem solid var(--wp--preset--color--white);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(0.5rem);
	backdrop-filter: blur(0.5rem);
	box-shadow: var(--wp--custom--shadow--card);
}

/*
 * Font size is in the viewBox's user units, so the caption scales with the badge
 * instead of needing its own clamp.
 */
.sws-hero__badge-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: var(--wp--preset--color--dark);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.sws-hero__badge-icon {
	display: grid;
	place-items: center;
	width: 45.7%; /* 74px disc inside the 162px the ring leaves */
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
}

.sws-hero__badge-icon::before {
	content: "";
	width: 32.4%; /* 24x26 shield in the 74px disc */
	aspect-ratio: 24 / 26;
	background-color: var(--wp--preset--color--secondary);
	-webkit-mask: url("../../assets/decor/shield-check.svg") no-repeat center / contain;
	mask: url("../../assets/decor/shield-check.svg") no-repeat center / contain;
}

/* Desktop
--------------------------------------------- */

@container sws-hero (min-width: 782px) {

	.sws-hero__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: end;
		gap: var(--wp--preset--spacing--40);

		/* 8.5rem clears the 5.75rem transparent header with room to breathe. */
		padding-top: 8.5rem;
	}

	.sws-hero--no-media .sws-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.sws-hero__content {
		padding-bottom: var(--wp--preset--spacing--70);
	}

	.sws-hero__decor {
		display: block;
	}

	.sws-hero__figure {
		justify-self: end;
		max-width: 35.3125rem; /* 565px, the portrait width in the layout. */
	}

	/*
	 * Soft disc behind the portrait (a Ø536 ellipse in the layout). Drawn in CSS
	 * because the template's decorative assets are licensed for preview only.
	 */
	.sws-hero__inner::after {
		content: "";
		position: absolute;
		right: 2%;
		bottom: 8%;
		z-index: 0;
		width: min(33.5rem, 45%);
		aspect-ratio: 1;
		border-radius: 50%;
		background-color: var(--wp--preset--color--white);
		opacity: 0.5;
	}

	.sws-hero--no-media .sws-hero__inner::after {
		content: none;
	}
}

/* Wide desktop
--------------------------------------------- */

/*
 * The floating cards need a portrait wide enough to hang off without covering
 * it. Below this the two columns are under 460px each and the plate alone eats
 * a third of the frame, so they stay hidden and the micro-facts carry the same
 * information in the text column.
 */
@container sws-hero (min-width: 62rem) {

	.sws-hero__card {
		display: flex;
	}

	.sws-hero__badge {
		display: grid;
	}
}

/* Circle variant — composition 03
--------------------------------------------- */

/*
 * The first screen of a course page. Same content model as the arch, different
 * frame: a mint section carrying ordinary section padding, and a round portrait
 * that stops short of the bottom edge.
 *
 * The header contract differs too. This variant is NOT laid under the
 * transparent header — in the layout it starts below an ordinary one — so
 * sws_theme_body_classes() withholds body.sws-header-over-hero here and the top
 * padding has nothing to clear. See inc/template-functions.php.
 *
 * Declared last and scoped to the modifier throughout, so everything above
 * stays the arch and no rule needs !important.
 */

.sws-hero--circle {
	background-color: var(--wp--preset--color--shade-mint);
}

.sws-hero--circle .sws-hero__inner {
	padding-block: var(--wp--preset--spacing--70);
}

/* Background figures — composition 03
--------------------------------------------- */

/*
 * The layer stays on at every width here, because what it carries first is the
 * section's gradient: the layout lays two Ø274 circles over the flat mint fill
 * and blurs them at σ=300 — Yellow at the top left, cyan right of centre. A blur
 * that wide flattens the discs into two soft washes, and the maths is simple
 * enough to reproduce: a σ=300 Gaussian over a Ø274 disc peaks near 10% alpha
 * and has faded out by 900px, which four stops match closely. Gradients rather
 * than blurred elements because filter: blur(300px) on the first screen is
 * expensive to paint for something this faint.
 *
 * Declared on __decor rather than on the section root so cqi resolves against
 * the section: container units used on the container itself look past it, at an
 * ancestor container or the viewport. The floor keeps the washes readable when
 * the section is narrow — 47cqi of a phone is a spot, not a wash.
 *
 * The two colours are the layout's own and have no palette token: they are lit
 * ink at a tenth of a percent of coverage, not surface colours. The fill under
 * them is shade-mint (#E9FBFA) rather than the layout's #ECF8F7 — three points
 * apart, and the token is what the rest of the site uses for a mint section.
 */
.sws-hero--circle .sws-hero__decor {
	/*
	 * Outer edge of the content container. The three figures that live in the
	 * side margins are placed outward from it rather than at a share of the
	 * section: the layout has 375px of margin to put them in, this site has
	 * whatever the viewport leaves over, and a percentage copied across lands
	 * on the heading somewhere around 1400px.
	 */
	--sws-hero-edge: calc(50% + var(--wp--custom--container) / 2);

	display: block;
	background-image:
		radial-gradient(circle max(46.9cqi, 20rem) at 9.7% 18.2%,
			rgba(255, 221, 101, 0.1) 0%,
			rgba(255, 221, 101, 0.06) 33%,
			rgba(255, 221, 101, 0.02) 60%,
			rgba(255, 221, 101, 0) 100%),
		radial-gradient(circle max(46.9cqi, 20rem) at 69.8% 54.4%,
			rgba(84, 255, 234, 0.1) 0%,
			rgba(84, 255, 234, 0.06) 33%,
			rgba(84, 255, 234, 0.02) 60%,
			rgba(84, 255, 234, 0) 100%);
}

/*
 * The figures themselves keep their colours inside the files: the layout paints
 * each one differently and they are finished tints, not a palette token at some
 * opacity. Hidden by default and switched on per figure below, because they are
 * placed for the two-column layout.
 */
.sws-hero--circle .sws-hero__shape {
	display: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * Abstract Line — the fan of hairline waves filling the top right corner, behind
 * the portrait. The one figure that survives on a phone: it is a corner wash at
 * a couple of percent of contrast, so it cannot land on the heading the way the
 * discrete figures would.
 */
.sws-hero--circle .sws-hero__shape--waves {
	display: block;
	right: 0;
	top: 0;
	width: 45.83%; /* 880 of the layout's 1920 */
	aspect-ratio: 880 / 742;
	background-image: url("decor/waves.svg");
}

/*
 * Shape 2 — two coral hearts in the channel between the text and the portrait.
 * A little higher than the layout's 24.2%, because the channel is a wedge, not
 * a corridor: the portrait is round, and the higher the figure stands against
 * its upper left arc the more room it has. Our portrait is also centred in a
 * shorter section than the layout's, which puts its widest point higher.
 */
.sws-hero--circle .sws-hero__shape--hearts {
	left: 49.6%;
	top: 19%;
	width: 3.375rem; /* 54px */
	aspect-ratio: 54 / 71;
	background-image: url("decor/hearts.svg");
}

/* Shape 5 — the periwinkle bubbles, low and left of the portrait. */
.sws-hero--circle .sws-hero__shape--bubbles {
	left: 49.5%;
	bottom: 14.4%;
	width: 3.5625rem; /* 57px */
	aspect-ratio: 57 / 71;
	background-image: url("decor/bubbles.svg");
}

/* Shape 1 — the amber spiral, in the left margin level with the heading. */
.sws-hero--circle .sws-hero__shape--spiral {
	right: calc(var(--sws-hero-edge) + 1.5rem);
	top: 13.3%;
	width: 3.1875rem; /* 51px */
	aspect-ratio: 51 / 57;
	background-image: url("decor/spiral.svg");
}

/* Shape 3 — the mint strokes, in the right margin above the portrait. */
.sws-hero--circle .sws-hero__shape--strokes {
	left: calc(var(--sws-hero-edge) + 1.5rem);
	top: 14%;
	width: 4.75rem; /* 76px */
	aspect-ratio: 76 / 108;
	background-image: url("decor/strokes.svg");
}

/* Shape 4 — the coral dashes in the bottom left corner. */
.sws-hero--circle .sws-hero__shape--dashes {
	right: calc(var(--sws-hero-edge) + 1rem);
	bottom: 8.4%;
	width: 6.6875rem; /* 107px */
	aspect-ratio: 107 / 61;
	background-image: url("decor/dashes.svg");
}

/*
 * A square slot instead of 2:3, inside the ring the layout draws around it: a
 * 6px stroke in Secondary at Ø560 around the Ø530 portrait, with 9px of the
 * section showing between the two. The min() keeps the ring inside the gutter
 * on a 360px screen.
 */
.sws-hero--circle .sws-hero__figure {
	max-width: min(20rem, 100% - 2rem);
}

/*
 * A bordered pseudo-element rather than a pair of spread shadows, so that 9px
 * gap stays genuinely transparent. The section behind the portrait is not the
 * flat fill — the cyan wash peaks almost exactly here — and a gap painted in a
 * solid colour would read as a lighter halo around the photo.
 */
.sws-hero--circle .sws-hero__figure::before {
	content: "";
	position: absolute;
	inset: -2.83%; /* (560 − 530) / 2, as a share of the portrait */
	border: 0.375rem solid var(--wp--preset--color--secondary);
	border-radius: 50%;
}

.sws-hero--circle .sws-hero__media {
	aspect-ratio: 1;
	border-radius: 50%;
}

/* Square source, so the frame is centred rather than biased towards a face. */
.sws-hero--circle .sws-hero__media img {
	object-position: 50% 50%;
}

@container sws-hero (min-width: 782px) {

	/* Nothing bleeds off the section here, so the columns centre on each other. */
	.sws-hero--circle .sws-hero__inner {
		align-items: center;
		padding-top: var(--wp--preset--spacing--70);
	}

	.sws-hero--circle .sws-hero__content {
		padding-bottom: 0;
	}

	.sws-hero--circle .sws-hero__figure {
		max-width: 33.125rem; /* 530px, the portrait circle in the layout. */
	}

	/* The disc backs a portrait that runs off the section; the circle frames itself. */
	.sws-hero--circle .sws-hero__inner::after {
		content: none;
	}

}

/*
 * Both of these stand in the channel between the text column and the portrait.
 * Two columns are not enough for that channel to exist: up to here the portrait
 * fills its column edge to edge and the only gap is the 30px grid gutter, which
 * a 54px figure cannot stand in without landing on the ring. Measured, not
 * guessed — at 1185px the hearts still cross it.
 */
@container sws-hero (min-width: 1200px) {

	.sws-hero--circle .sws-hero__shape--hearts,
	.sws-hero--circle .sws-hero__shape--bubbles {
		display: block;
	}
}

/*
 * The remaining three are anchored outside the container, so they can never
 * reach the text — they simply slide off the section as it narrows. This is the
 * width at which the widest of them, the 107px dash cluster, is fully in view;
 * below it they would be showing as fragments cut by the section edge.
 */
@container sws-hero (min-width: 1440px) {

	.sws-hero--circle .sws-hero__shape--spiral,
	.sws-hero--circle .sws-hero__shape--strokes,
	.sws-hero--circle .sws-hero__shape--dashes {
		display: block;
	}
}

/*
 * No portrait, no channel. Both figures above stand in the gap between the text
 * column and the portrait, and that gap only exists while there is a portrait:
 * without one the single column runs the full 1170 and the heading passes right
 * under them. Measured on /about/ before its frame was produced — the heading
 * reached x=1084 with the hearts at x=707.
 *
 * The other three are anchored outside the container and the waves fill the top
 * right corner, so only these two have to go.
 */
.sws-hero--circle.sws-hero--no-media .sws-hero__shape--hearts,
.sws-hero--circle.sws-hero--no-media .sws-hero__shape--bubbles {
	display: none;
}

/* Compact variant — the interior page strip
--------------------------------------------- */

/*
 * The first screen of an interior page that carries a form or a text column
 * directly underneath. The layout has no such composition: artboard
 * 20_Contact_Us opens with "Header Banner", a 1920x369 warm strip holding a
 * centred title and a breadcrumb trail and nothing else
 * (docs/figma-template/blocks/header-banner.md), while the site spec asks that
 * screen for a heading, a lead paragraph and a small portrait
 * (docs/site-spec/pages/11-contacts.md).
 *
 * So this is that strip plus the spec's two additions: the same warm fill, the
 * same soft circles, the same doodles — but a text column instead of a centred
 * title, and a portrait a third the area of the one on a course page.
 *
 * Header contract matches the circle, not the arch: the section is never laid
 * under a transparent header, .site already reserves --sws-header-h, and the
 * padding here is plain section padding. See inc/template-functions.php.
 *
 * Declared last and scoped to the modifier throughout, so both compositions
 * above stay untouched and no rule needs !important.
 */

.sws-hero--compact {
	/*
	 * The layout's three Ø412 circles are the section fill a few percent deeper.
	 * Same value and same reasoning as blocks/breadcrumbs/style.css, which
	 * reproduces the very same frame of the very same section.
	 */
	--sws-hero-strip-circle: color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent);

	/*
	 * Two of the layout's three, the ones it clips at the top corners — drawn as
	 * gradients rather than elements because they carry no meaning and most of
	 * each disc is off the section anyway. Their centres sit 8px above the top
	 * edge in the layout, kept here as a length rather than a percentage: this
	 * section is not the layout's 369px tall and its height is not fixed.
	 *
	 * On the root rather than on __decor, unlike the circle's washes: __decor is
	 * hidden below the desktop breakpoint together with the figures inside it,
	 * and these two have to stay — a 5% tint cannot land on anything. That is
	 * what keeps the fill from going flat on a phone.
	 *
	 * The third circle belongs to the portrait and is drawn on __figure below.
	 * The fill itself stays the shade-warm of .sws-hero: this composition wants
	 * exactly the background the arch already has.
	 */
	background-image:
		radial-gradient(circle 12.875rem at 3.07% -0.5rem, var(--sws-hero-strip-circle) 0 calc(100% - 1px), transparent 100%),
		radial-gradient(circle 12.875rem at 100% -0.5rem, var(--sws-hero-strip-circle) 0 calc(100% - 1px), transparent 100%);
}

.sws-hero--compact .sws-hero__inner {
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--70);
}

/*
 * The section heading size of the layout (44px) rather than the hero clamp: this
 * is a page header, and the 52px cap above was measured against a portrait three
 * times the size of this one.
 */
.sws-hero--compact .sws-hero__title {
	font-size: var(--wp--preset--font-size--huge);
}

.sws-hero--compact .sws-hero__lead {
	margin-top: var(--wp--preset--spacing--30);
}

/* Media
--------------------------------------------- */

/*
 * Small enough to read as a face beside the heading rather than as a second
 * subject: Ø140 on a phone, Ø352 from 782px up, against the circle's Ø530.
 *
 * The portrait stays visible on narrow screens instead of being hidden. The spec
 * allows dropping it there, but display:none would be the wrong way to grant
 * that: the tag stays in the document and the file is fetched anyway, so the
 * only thing hiding buys is an empty gap where a face could be. It becomes a
 * signature under the text instead, at a size render.php declares in sizes so
 * the browser takes the 300px candidate rather than the 768px one.
 */
.sws-hero--compact .sws-hero__figure {
	justify-self: center;
	max-width: 8.75rem; /* 140px */
}

/*
 * The third Ø412 circle of the layout, moved from behind the centred heading to
 * behind the portrait — the job the arch gives its own Ø536 disc. No mint ring
 * here: the circle variant draws one because its cyan wash peaks right under the
 * photo and a gap would read as a halo, but this fill is flat, and 6px of
 * Secondary on a page whose real action is the form below would outshout it.
 *
 * The photo sits inside the circle with one 30px grid gutter of tint on each
 * side — the same relationship the circle variant gives its ring, Ø560 around a
 * Ø530 photo. A percentage inset, so it scales with the portrait instead of
 * needing a value per breakpoint: (412 − 352) / 2 = 30, and 30 of 352 is 8.5%.
 *
 * z-index because an absolutely positioned pseudo-element paints above the
 * in-flow __media it is meant to sit behind. It cannot escape __figure, so it
 * can never fall behind the section fill.
 */
.sws-hero--compact .sws-hero__figure::before {
	content: "";
	position: absolute;
	inset: -8.5%;
	z-index: -1;
	border-radius: 50%;
	background-color: var(--sws-hero-strip-circle);
}

.sws-hero--compact .sws-hero__media {
	aspect-ratio: 1;
	border-radius: 50%;
}

/* Square source, so the frame is centred rather than biased towards a face. */
.sws-hero--compact .sws-hero__media img {
	object-position: 50% 50%;
}

/* Background figures — the Header Banner doodles
--------------------------------------------- */

/*
 * Five of the layout's eight, in the layout's own colours, so they are ordinary
 * background images rather than masks. Book and bubble are dropped: both stand
 * mid-strip, where this composition puts the portrait. The brush stroke goes
 * with the breadcrumb trail it underlines, which this block does not draw.
 *
 * The positions are new, and they had to be. The layout scatters these over a
 * 1920x369 band around a centred title; here the text runs down the left of a
 * section roughly 620px tall at 1920 and 340px at 782, while the padding band
 * they would stand in shrinks from 136px to 62px at the same time. A percentage
 * that clears the heading on a wide screen lands on it on a narrow one.
 *
 * So four of the five live in the vertical padding bands, above and below the
 * content: anchored to the edge in rem and sized in cqi, every figure shrinks
 * faster than the band that holds it and can never grow into the text, while the
 * rem cap keeps it from being blown up on a 2560px screen where the band has
 * stopped growing. Their horizontal offsets stay percentages — at that height
 * there is nothing to collide with.
 */
.sws-hero--compact .sws-hero__shape {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Shape 1 — the double loop, top left, above the heading. */
.sws-hero--compact .sws-hero__shape--loop {
	left: 5%;
	top: 1.5rem;
	height: clamp(1.75rem, 3cqi, 3.6875rem); /* 59px in the layout */
	aspect-ratio: 76 / 59;
	background-image: url("decor/loop.svg");
}

/* Shape 7 — the amber curl, top right, above the portrait. */
.sws-hero--compact .sws-hero__shape--curl {
	right: 6%;
	top: 1.25rem;
	height: clamp(1.75rem, 3cqi, 4.1875rem); /* 67px */
	aspect-ratio: 70 / 67;
	background-image: url("decor/curl.svg");
}

/* Shape 4 — the coral smile, bottom left. */
.sws-hero--compact .sws-hero__shape--smile {
	left: 4%;
	bottom: 1.25rem;
	height: clamp(1.5rem, 2.6cqi, 3.4375rem); /* 55px, against 67 in the layout */
	aspect-ratio: 132 / 67;
	background-image: url("decor/smile.svg");
}

/* Shape 8 — the coral dot cluster, bottom right. */
.sws-hero--compact .sws-hero__shape--dots {
	right: 5%;
	bottom: 1rem;
	height: clamp(1.5rem, 3cqi, 3.625rem); /* 58px */
	aspect-ratio: 54 / 58;
	background-image: url("decor/dots.svg");
}

/*
 * Shape 3 — the small coral dot, and the one figure standing inside the section
 * rather than in a padding band: it fills the channel between the text column
 * and the tinted circle, so it waits for a width at which that channel exists.
 * Measured, not guessed — the channel runs from the end of the text column to
 * the outer edge of the tint: 577…816 at 1200px, 705…923 at 1440, 937…1155 at
 * 1920. 56% sits inside all three.
 */
.sws-hero--compact .sws-hero__shape--dot {
	display: none;
	left: 56%;
	top: 44%;
	width: 1.5625rem; /* 25px */
	aspect-ratio: 25 / 28;
	background-image: url("decor/dot.svg");
}

/* Desktop
--------------------------------------------- */

@container sws-hero (min-width: 782px) {

	/* Nothing bleeds off the section here, so the columns centre on each other. */
	.sws-hero--compact .sws-hero__inner {
		align-items: center;
		padding-top: var(--wp--preset--spacing--70);
	}

	.sws-hero--compact .sws-hero__content {
		padding-bottom: 0;
	}

	/*
	 * Ø352 — the layout's Ø412 circle less one 30px grid gutter of tint a side,
	 * and the same 22rem this block already caps its single-column portrait at.
	 * Two thirds of the circle variant's Ø530, which is the point: this is a page
	 * header, not a course landing.
	 *
	 * Fluid below the cap, because the grid above keeps its two equal columns: at
	 * 782px each is about 345px, and a fixed 352px photo there would leave the
	 * heading nothing. 28cqi reaches the cap around 1260px.
	 */
	/*
	 * justify-self restated: the base rule for this variant centres the portrait
	 * for the single-column layout, and being two classes it would otherwise beat
	 * the one-class `end` the desktop composition sets far above. Centred in its
	 * column the circle floats — it has to sit on the container edge like the
	 * other two compositions, which is also what opens the channel the dot below
	 * stands in.
	 */
	.sws-hero--compact .sws-hero__figure {
		justify-self: end;
		max-width: clamp(11rem, 28cqi, 22rem);
	}

	/* The disc backs a portrait that runs off the section; this one has its tint. */
	.sws-hero--compact .sws-hero__inner::after {
		content: none;
	}
}

/*
 * The channel between the text column and the portrait. Below this width the
 * photo has grown into its column and the only gap left is the grid gutter,
 * which even a 25px dot cannot stand in without touching the tinted circle.
 */
@container sws-hero (min-width: 1200px) {

	.sws-hero--compact .sws-hero__shape--dot {
		display: block;
	}

	/*
	 * Three classes, so it outranks the rule right above. Without a portrait
	 * there is no channel at all — the text column takes the full container and
	 * the dot would be standing on it.
	 */
	.sws-hero--compact.sws-hero--no-media .sws-hero__shape--dot {
		display: none;
	}
}