/*
 * Rich text + media block.
 *
 * The About Us section of docs/figma-template/blocks/about-us.md, composition C:
 * a diagonal collage of two 370x270 frames on one side, and on the other a 470
 * column with an eyebrow, a 44px heading with a brush stroke and a paragraph.
 * Each frame carries a tinted plate offset 16-32px behind it, and the section
 * sits under an Abstract Bg layer of ten figures.
 *
 * Four deliberate departures from the layout, all load-bearing:
 *
 * 1. The three floating cards of the composition are not built. The two call
 *    control panels say "this is a video call" and our frames are not one; the
 *    Trained Teachers card is removed by §10 of the teardown itself on a single
 *    tutor's site; and We Have 50+ Winning Awards is an invented number, while
 *    an honest fact here would repeat the hero's micro-facts.
 * 2. The text column is a wysiwyg of several paragraphs, not the layout's two
 *    placeholder lines, so the two columns are centred against each other
 *    rather than pinned to a shared top edge.
 * 3. Without frames the block is one centred 770 column. The layout has no such
 *    state, but a section whose media has not been produced yet must still read
 *    as finished — the same graceful state the hero has without a portrait.
 * 4. The dot grid and the arrow live in the empty band the collage leaves beside
 *    its upper frame. In the layout that band holds a floating card and the
 *    figures sit around it; with the card gone the band is free, and it is the
 *    only place in the section wide enough for them.
 *
 * 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-rich-text-media {
	container: sws-rich-text-media / inline-size;

	/*
	 * The container and its left edge, restated as lengths the decor layer can
	 * do arithmetic with. The shapes that belong beside the collage have to
	 * follow the content column, not the viewport: a percentage of the
	 * full-bleed section drifts across the frames as the window changes, which
	 * is exactly the trap references/decor.md warns about. Both are used only
	 * by --dots and --arrow.
	 */
	--sws-rtm-container: min(var(--wp--custom--container, 1170px), calc(100% - var(--wp--custom--gutter, 1rem) * 2));
	--sws-rtm-edge: calc((100% - var(--sws-rtm-container)) / 2);

	/* Containing block for the decorative shapes below. */
	position: relative;

	/* The corner figures reach past the section on purpose. */
	overflow: hidden;
}

/* The theme ships no global reset, so keep the box model local to the block. */
.sws-rich-text-media,
.sws-rich-text-media *,
.sws-rich-text-media *::before,
.sws-rich-text-media *::after {
	box-sizing: border-box;
}

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

.sws-rich-text-media--bg-white {
	background-color: var(--wp--preset--color--white, #fff);
}

.sws-rich-text-media--bg-shade {
	background-color: var(--wp--preset--color--shade, #f8f8f8);
}

.sws-rich-text-media--bg-shade-warm {
	background-color: var(--wp--preset--color--shade-warm, #f8efee);
}

.sws-rich-text-media--bg-shade-mint {
	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
}

/* Decoration
--------------------------------------------- */

/*
 * The Abstract Bg layer 425:11513 of the layout. Two figures are files, the
 * rest is geometry: four dots, a Ø70 disc and an 8x10 grid of Ø4 dots at a 20px
 * pitch. Every colour below is the exact fill of that frame, read off the SVG
 * export rather than guessed off the screenshot.
 *
 * The positions are deliberately not the layout's. In Figma the figures live in
 * the 375px margins beside the 1170 container, and those margins only exist on
 * a 1920 canvas; here the container hugs the viewport, so each shape is moved
 * into a band the content leaves empty — the top and bottom padding, or the
 * strip beside the upper frame — or pushed past the edge, which is what the
 * curl does in the layout anyway.
 */
.sws-rich-text-media__decor {
	/* Shown only once there is room; below that the shapes land under the text. */
	display: none;
	position: absolute;
	inset: 0;

	/* Above the section fill, below everything in __inner. */
	z-index: 0;
}

.sws-rich-text-media__shape {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Pink curl, hooked over the top right corner the way the layout hangs it. */
.sws-rich-text-media__shape--curl {
	top: -1.5rem;
	right: 2.5%;
	width: 5rem;
	aspect-ratio: 104 / 127;
	background-image: url("decor/curl.svg");
}

/*
 * Yellow arrow, pointing up and right at the upper frame. 10% of the container
 * puts it inside the band the collage leaves free: the upper frame starts at
 * 22% of the container (44% of a media column that is 50.6% of it), so
 * everything left of that is empty for the whole height of the first row.
 */
.sws-rich-text-media__shape--arrow {
	display: none;
	top: 32%;
	left: calc(var(--sws-rtm-edge) + var(--sws-rtm-container) * 0.1);
	width: 4.5rem;
	aspect-ratio: 104 / 106;
	background-image: url("decor/arrow.svg");
}

/*
 * 8 x 10 dots of Ø4 on a 20px pitch — 144x184 in the layout. Geometry, so it is
 * drawn rather than carried as a file; the gradient stop is at 2px because the
 * radius is 2, and the extra half pixel keeps the edge from aliasing away.
 */
.sws-rich-text-media__shape--dots {
	display: none;
	top: 2rem;
	left: calc(var(--sws-rtm-edge) + var(--sws-rtm-container) * 0.03);
	width: 9rem;
	height: 11.5rem;
	background-image: radial-gradient(#8cd1cd 1.8px, transparent 2.2px);
	background-position: 0 0;
	background-size: 1.25rem 1.25rem;
}

.sws-rich-text-media__shape--circle,
.sws-rich-text-media__shape--dot-coral,
.sws-rich-text-media__shape--dot-blue,
.sws-rich-text-media__shape--dot-mint,
.sws-rich-text-media__shape--dot-purple {
	border-radius: 50%;
}

.sws-rich-text-media__shape--circle {
	top: 2rem;
	left: 4%;
	width: 4.375rem;
	height: 4.375rem;
	background-color: #ffe6e2;
}

.sws-rich-text-media__shape--dot-coral {
	top: 3rem;
	left: 2.5%;
	width: 1rem;
	height: 1rem;
	background-color: #ff8265;
}

/*
 * The one shape whose offset is a percentage of a height that grows with the
 * copy. Harmless here: it lives in the side margin, which is empty top to
 * bottom, so drift moves it along an empty strip rather than onto anything.
 */
.sws-rich-text-media__shape--dot-blue {
	display: none;
	top: 30%;
	right: 1.5%;
	width: 1rem;
	height: 1rem;
	background-color: #aab8f1;
}

.sws-rich-text-media__shape--dot-mint {
	bottom: 3rem;
	left: 4%;
	width: 1.5rem;
	height: 1.5rem;
	background-color: #bce6df;
}

.sws-rich-text-media__shape--dot-purple {
	display: none;
	bottom: 2.5rem;
	right: 1.5%;
	width: 1.5rem;
	height: 1.5rem;
	background-color: #bc71fe;
}

/* Layout
--------------------------------------------- */

.sws-rich-text-media__inner {
	/* Lifts the content above the decoration. */
	position: relative;
	z-index: 1;

	display: grid;
	gap: var(--wp--preset--spacing--50, 2.5rem);

	/* 1170px of content plus the gutter, so the column matches the layout exactly. */
	max-width: calc(var(--wp--custom--container, 1170px) + var(--wp--custom--gutter, 1rem) * 2);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem));
	padding-inline: var(--wp--custom--gutter, 1rem);
}

/*
 * One column: the text measure of the theme, centred. Applies below the
 * two column breakpoint and, at any width, when there are no frames at all.
 */
.sws-rich-text-media__text {
	max-width: 48.125rem; /* 770px */
	margin-inline: auto;
}

/* Section heading (markup from sws_theme_section_heading)
--------------------------------------------- */

.sws-rich-text-media__head {
	margin-bottom: var(--wp--preset--spacing--30, 1.5rem);
}

.sws-rich-text-media__eyebrow {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--secondary, #5eb9b3);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 500;
	line-height: 1.5;
}

.sws-rich-text-media__title {
	margin: 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--huge, 2.75rem);
	font-weight: 700;
	line-height: 1.4;
}

/*
 * Hand-drawn stroke under the accent phrase. The file is shared by every block
 * that has a section heading, so the ragged path is defined once and cached
 * once; box-decoration-break keeps a stroke under every line when the phrase
 * wraps. See assets/brush.svg.
 */
.sws-rich-text-media__accent {
	padding-bottom: 0.125rem;
	background-image: url("../../assets/brush.svg");
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% 0.08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Body
--------------------------------------------- */

/*
 * The editor writes this field, so every tag wp_kses_post() lets through has to
 * survive it — not just the paragraphs this block was built for.
 */
.sws-rich-text-media__body {
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
}

.sws-rich-text-media__body > :first-child {
	margin-top: 0;
}

.sws-rich-text-media__body > :last-child {
	margin-bottom: 0;
}

.sws-rich-text-media__body p,
.sws-rich-text-media__body ul,
.sws-rich-text-media__body ol {
	margin: 0 0 var(--wp--preset--spacing--30, 1.5rem);
}

.sws-rich-text-media__body ul,
.sws-rich-text-media__body ol {
	padding-left: 1.25rem;
}

.sws-rich-text-media__body li + li {
	margin-top: 0.5rem;
}

.sws-rich-text-media__body strong,
.sws-rich-text-media__body b {
	color: var(--wp--preset--color--dark, #232d36);
	font-weight: 600;
}

.sws-rich-text-media__body a {
	color: var(--wp--preset--color--secondary, #5eb9b3);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sws-rich-text-media__body a:hover,
.sws-rich-text-media__body a:focus-visible {
	color: var(--wp--preset--color--theme, #ef5743);
}

/*
 * The button of composition A, one spacing step under the last paragraph. It is
 * flush with the left edge of the text column because that is where the layout
 * puts it and because a block-level <p> already does that — nothing to align.
 * The layout's own gap is measured from the two Mission/Vision items, which this
 * block does not carry, so the rhythm step is used instead of that number.
 *
 * Nothing about the button itself is declared here: styles.elements.button
 * paints .wp-element-button from theme.json at `:root :where(...)`, which is one
 * class, and that stylesheet is printed after this one — so any single-class
 * rule here would lose the tie and the button would come out unstyled.
 */
.sws-rich-text-media__action {
	margin: var(--wp--preset--spacing--50, 3rem) 0 0;
}

/* Collage
--------------------------------------------- */

.sws-rich-text-media__collage {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.875rem);

	/* Stacked frames follow the text measure until the columns split. */
	max-width: 48.125rem;
	margin-inline: auto;
	width: 100%;
}

/*
 * __frame carries the tinted plate, __media clips the image to the radius. Two
 * elements, because the plate has to stay outside the overflow the clipping
 * needs.
 */
.sws-rich-text-media__frame {
	position: relative;
}

/*
 * The plate is 354x254 against a 370x270 frame, so it is 16px smaller on each
 * axis and offset by 32 — that is the whole trick: it peeks out on two sides
 * and hides under the frame on the other two. Percentages, because the frame is
 * fluid; the inset order is top / right / bottom / left.
 *
 * The two tints are the layout's own (#FFE0DC and #D9F4F3) and have no palette
 * token: they are lighter than shade-warm and shade-mint by roughly the same
 * step the Features disc is lighter than its own fill.
 */
.sws-rich-text-media__frame::before {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: var(--wp--custom--radius, 0.5rem);

	/* Down and to the right, the way the layout offsets the upper plate. */
	inset: 11.85% -4.32% -5.93% 8.65%;
	background-color: #ffe0dc;
}

/* Up and to the left, mirroring the first — the pair reads as one diagonal. */
.sws-rich-text-media__frame--2::before {
	inset: -5.93% 8.65% 11.85% -4.32%;
	background-color: #d9f4f3;
}

.sws-rich-text-media__media {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: var(--wp--custom--radius, 0.5rem);

	/* 370 x 270 of the layout; the image fills it whatever its own ratio is. */
	aspect-ratio: 370 / 270;
}

/*
 * Bound to the wrapper, not to img as a direct child: ImageQueue rewrites the
 * tag into <picture>, and a child selector would stop matching.
 */
.sws-rich-text-media__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Decoration, once the bands are deep enough to hold it
--------------------------------------------- */

@container sws-rich-text-media (min-width: 48rem) {

	.sws-rich-text-media__decor {
		display: block;
	}
}

/* Two columns
--------------------------------------------- */

@container sws-rich-text-media (min-width: 62rem) {

	/*
	 * 592 : 470 with 108 between them, all three read off the 1170 container of
	 * the layout — its media side is 662 wide because it bleeds 70px past the
	 * container, which ours does not. The tracks are fr so the ratio survives
	 * every width above.
	 */
	.sws-rich-text-media--media-left .sws-rich-text-media__inner,
	.sws-rich-text-media--media-right .sws-rich-text-media__inner {
		align-items: center;
		column-gap: clamp(2rem, 9cqi, 6.75rem);
	}

	.sws-rich-text-media--media-left .sws-rich-text-media__inner {
		grid-template-columns: minmax(0, 592fr) minmax(0, 470fr);
	}

	.sws-rich-text-media--media-right .sws-rich-text-media__inner {
		grid-template-columns: minmax(0, 470fr) minmax(0, 592fr);
	}

	/* Explicit placement rather than order: the tracks are not interchangeable. */
	.sws-rich-text-media--media-left .sws-rich-text-media__collage,
	.sws-rich-text-media--media-right .sws-rich-text-media__text {
		grid-column: 1;
		grid-row: 1;
	}

	.sws-rich-text-media--media-left .sws-rich-text-media__text,
	.sws-rich-text-media--media-right .sws-rich-text-media__collage {
		grid-column: 2;
		grid-row: 1;
	}

	/* Each column is its own measure now, so the centring above is undone. */
	.sws-rich-text-media--media-left .sws-rich-text-media__text,
	.sws-rich-text-media--media-right .sws-rich-text-media__text,
	.sws-rich-text-media--media-left .sws-rich-text-media__collage,
	.sws-rich-text-media--media-right .sws-rich-text-media__collage {
		max-width: none;
		margin-inline: 0;
	}

	/*
	 * The diagonal, straight off the layout: a frame is 370 of the 662 media
	 * side (56%), the upper one is pushed to the far edge and the lower one
	 * sits at the near one, so they overlap by 12% and step down by a row of
	 * 49px. Percentages rather than grid tracks, because those two numbers are
	 * the composition and a track count only approximates them.
	 */
	.sws-rich-text-media--media-2 .sws-rich-text-media__collage {
		row-gap: clamp(1.5rem, 4cqi, 3.0625rem);
	}

	.sws-rich-text-media--media-2 .sws-rich-text-media__frame {
		width: 56%;
	}

	.sws-rich-text-media--media-2 .sws-rich-text-media__frame--1 {
		margin-inline-start: auto;
	}

	/*
	 * The band beside the upper frame exists only now, and only when there is a
	 * collage to leave it: without frames the text runs the full width and both
	 * figures would land on the heading.
	 */
	.sws-rich-text-media--media-2 .sws-rich-text-media__shape--arrow,
	.sws-rich-text-media--media-2 .sws-rich-text-media__shape--dots {
		display: block;
	}

	/* Mirrored with the collage, so they stay on the media side of the section. */
	.sws-rich-text-media--media-right .sws-rich-text-media__shape--arrow,
	.sws-rich-text-media--media-right .sws-rich-text-media__shape--dots {
		left: auto;
		transform: scaleX(-1);
	}

	.sws-rich-text-media--media-right .sws-rich-text-media__shape--dots {
		right: calc(var(--sws-rtm-edge) + var(--sws-rtm-container) * 0.03);
	}

	.sws-rich-text-media--media-right .sws-rich-text-media__shape--arrow {
		right: calc(var(--sws-rtm-edge) + var(--sws-rtm-container) * 0.1);
	}
}

/* Side margins wide enough for the figures that live in them
--------------------------------------------- */

/* 1230 content box + 2 x (24px dot + 48px of air on each side). */
@container sws-rich-text-media (min-width: 86rem) {

	.sws-rich-text-media__shape--dot-blue,
	.sws-rich-text-media__shape--dot-purple {
		display: block;
	}
}