/*
 * Feature grid block.
 *
 * The Features section of docs/figma-template/blocks/features.md, one to one:
 * warm fill, centred section heading, white cards with a Ø72 mint circle, a
 * 24px title and an 18px paragraph, three to a row with a 30px gutter.
 *
 * Four deliberate departures from the layout, all load-bearing:
 *
 * 1. The card height is not the layout's fixed 317px. Real Ukrainian copy is
 *    longer than the placeholder, and a fixed height would clip it; the grid
 *    stretches every card in a row to the tallest one instead.
 * 2. The hover fill is White on Theme Color, which is 3.43:1 — one of the five
 *    contrast failures this project accepted with the Edumim palette
 *    (docs/figma-template/01-design-tokens.md §7). It is wrapped in
 *    (hover: hover) so a tap can never pin that state on a touch screen.
 * 3. There is an optional figure under the grid, and the layout has no image in
 *    this section at all (docs/figma-template/blocks/features.md §8). It exists
 *    because block 4 of docs/site-spec/pages/01-home.md asks for one, and it is
 *    an addition, not a replacement: with the field empty the section renders
 *    exactly as the layout draws it.
 * 4. There is an optional button under the grid, and the Features section has
 *    none either. It is borrowed from the Categories section, which puts its
 *    View All button centred 56px below the tiles — the composition this block
 *    needs when it stands in for exam-components. Empty field, no markup.
 *
 * 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-feature-grid {
	container: sws-feature-grid / inline-size;

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

	/* The disc and the edge doodles reach past the section on purpose. */
	overflow: hidden;
}

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

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

/*
 * The disc tint is a shade of the section fill and has no palette token: the
 * layout paints it #FFEEEB over the warm fill, the other three are the same
 * relationship applied to the remaining fills.
 */
.sws-feature-grid--bg-shade-warm {
	--sws-feature-disc: #ffeeeb;

	background-color: var(--wp--preset--color--shade-warm, #f8efee);
}

.sws-feature-grid--bg-shade-mint {
	--sws-feature-disc: #dcf6f4;

	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
}

.sws-feature-grid--bg-shade {
	--sws-feature-disc: #f1f1f1;

	background-color: var(--wp--preset--color--shade, #f8f8f8);
}

.sws-feature-grid--bg-white {
	--sws-feature-disc: #fbf4f3;

	background-color: var(--wp--preset--color--white, #fff);
}

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

/*
 * The Abstract Bg layer of the section — a Ø697 disc bleeding off the top right
 * corner plus five line-art doodles, taken from the template into decor/.
 *
 * The positions are deliberately not the layout's. In Figma the doodles 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 or bottom padding, or the strip
 * beside the centred heading — or pushed past the edge, which is what the disc
 * does in the layout anyway.
 *
 * The five files carry the warm tints of the Features section inside them. On a
 * mint or grey fill they read as warm smudges; accepted, because warm is this
 * block's default and the layout's own fill.
 */
.sws-feature-grid__decor {
	/* Shown only once there is room; below that the shapes land under the cards. */
	display: none;
	position: absolute;
	inset: 0;

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

.sws-feature-grid__shape {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * Ø697 of the layout's 1920 canvas, overshooting the right edge by 137. The
 * vertical offset is a transform, not `top`: a percentage in `top` resolves
 * against the height of the section, which grows with every extra row of cards,
 * so the disc would walk off the top edge on six. A percentage in `transform`
 * resolves against the element's own square box and holds the layout's -164px
 * at any section height.
 */
.sws-feature-grid__shape--disc {
	top: 0;
	right: -7.1%;
	width: 36.3%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--sws-feature-disc, #ffeeeb);
	transform: translateY(-23.5%);
}

/*
 * The band the shapes live in is the section's own padding, so they are offset
 * and sized from the same token: whatever the viewport does to the padding, the
 * shape follows and can never reach the content.
 */
.sws-feature-grid__shape--ring {
	top: 1.5rem;
	left: 2.5%;
	width: 1.25rem;
	aspect-ratio: 1;
	background-image: url("decor/ring.svg");
}

.sws-feature-grid__shape--sparkle {
	top: 1.25rem;
	right: 6%;
	width: 2rem;
	aspect-ratio: 1;
	background-image: url("decor/sparkle.svg");
}

/* The three below need the side bands, so they wait for the wide layout. */
.sws-feature-grid__shape--strokes,
.sws-feature-grid__shape--globe,
.sws-feature-grid__shape--magnifier {
	display: none;
}

/* Beside the centred heading, anchored to the padding rather than to a
   percentage of the height, which drifts with the number of cards. */
.sws-feature-grid__shape--strokes {
	top: calc(var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem)) + 0.5rem);
	left: 4%;
	width: 4.125rem;
	aspect-ratio: 66 / 65;
	background-image: url("decor/strokes.svg");
}

.sws-feature-grid__shape--globe {
	bottom: 0.75rem;
	left: -1.5%;
	width: auto;
	height: min(6.1875rem, calc(var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem)) - 1.75rem));
	aspect-ratio: 104 / 143;
	background-image: url("decor/globe.svg");
}

.sws-feature-grid__shape--magnifier {
	right: 3%;
	bottom: 0.75rem;
	width: auto;
	height: min(3.6875rem, calc(var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem)) - 1.75rem));
	aspect-ratio: 1;
	background-image: url("decor/magnifier.svg");
}

.sws-feature-grid__inner {
	/* Lifts the content above the decoration. */
	position: relative;
	z-index: 1;

	/* 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);
}

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

/*
 * Centred, unlike the other section blocks: the layout centres this one, and
 * centring is also what frees the side strips the doodles need.
 */
.sws-feature-grid__head {
	/* A 44px heading across the full 1170 reads as a banner, not as a heading. */
	max-width: 42rem;
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--60, 3.5rem);
	text-align: center;
}

.sws-feature-grid__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-feature-grid__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-feature-grid__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;
}

.sws-feature-grid__lead {
	margin: 1.5rem 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
}

/* Cards
--------------------------------------------- */

.sws-feature-grid__list {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.875rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-feature-grid__item {
	/* Column, so a row of cards stretches to the tallest instead of clipping. */
	display: flex;
	flex-direction: column;

	/* 32, not the 40 of the layout: the card is narrower than 370 until 1000px. */
	padding: 2rem;
	border-radius: var(--wp--custom--radius, 8px);
	background-color: var(--wp--preset--color--white, #fff);
	box-shadow: var(--wp--custom--shadow--card, 0 4px 24px rgba(35, 45, 54, 0.08));
}

/*
 * The gap between the circle and the title lives on the circle, which is what
 * makes --no-icon need no rule of its own: drop the icon and the gap goes with
 * it, leaving the title against the card padding.
 */
.sws-feature-grid__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: var(--wp--preset--spacing--50, 2rem);
	border-radius: 50%;
	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
	transition: background-color var(--wp--custom--transition, 200ms ease);
}

/* Descendant selector: the optimizer may wrap the tag in <picture>. */
.sws-feature-grid__icon img {
	display: block;
	width: 2rem;
	height: 2rem;
	object-fit: contain;
	transition: filter var(--wp--custom--transition, 200ms ease);
}

.sws-feature-grid__card-title {
	margin: 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
	font-weight: 700;
	line-height: 1.5;
}

.sws-feature-grid__text {
	margin: 1rem 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
}

/* Figure
--------------------------------------------- */

/*
 * Not in the layout: the Features section carries no image at all, and the
 * two-column compositions of the template that do (about-us, why-choose-us)
 * all left-align their heading. This section is centred — the head and the
 * footnote share one 42rem measure — so the figure joins that spine under the
 * grid instead of taking a column beside it. A media column here would turn
 * the block into why-choose-us, which the teardown is explicit is a different
 * block with a different job.
 */
.sws-feature-grid__figure {
	max-width: 42rem;
	margin: var(--wp--preset--spacing--60, 3.5rem) auto 0;
}

.sws-feature-grid__media {
	border-radius: var(--wp--custom--radius, 8px);

	/* Reads as paper margin under the letterbox bands of a portrait upload. */
	background-color: var(--wp--preset--color--white, #fff);
	box-shadow: var(--wp--custom--shadow--card, 0 4px 24px rgba(35, 45, 54, 0.08));

	/* The radius has to reach the image, which is a box of its own. */
	overflow: hidden;
}

/* Descendant selector: the optimizer may wrap the tag in <picture>. */
.sws-feature-grid__media img {
	display: block;
	width: 100%;
	height: auto;

	/*
	 * The upload is a scan, not a designed asset. A portrait page in a 672px
	 * column would be a 900px tower, and cropping is not an option: a worksheet
	 * cut in half stops being evidence. contain caps the height and letterboxes
	 * instead — visible to the editor, harmless to the page.
	 */
	max-height: 32rem;
	object-fit: contain;
}

.sws-feature-grid__caption {
	margin: var(--wp--preset--spacing--20, 1rem) 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
	text-align: center;
}

.sws-feature-grid__footnote {
	max-width: 42rem;
	margin: var(--wp--preset--spacing--50, 2rem) auto 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
	text-align: center;
}

/*
 * The caption and the footnote are the same 16px centred grey line, so the
 * 32px above would read as one two-line paragraph. Only when both are present.
 */
.sws-feature-grid__figure + .sws-feature-grid__footnote {
	margin-top: var(--wp--preset--spacing--60, 3.5rem);
}

/* Action
--------------------------------------------- */

/*
 * 56px is the gap the Categories section leaves between its grid and its View
 * All button, and the same step the heading already uses above the grid. One
 * rule, whatever stands above: the grid, the figure or the footnote.
 */
.sws-feature-grid__action {
	margin: var(--wp--preset--spacing--60, 3.5rem) 0 0;
	text-align: center;
}

/*
 * Fill, radius, padding, type and every state arrive from styles.elements.button
 * through wp-element-button. Nothing is restated here on purpose: theme.json
 * paints that class at the same specificity and prints after the block sheet,
 * so a single-class rule here would lose the tie anyway (see the note in
 * blocks/call-to-action/style.css). The layout's 60px button height falls out of
 * the token padding by itself: 27px line + 2 × 16px.
 */
.sws-feature-grid__button {
	display: inline-block;
	text-decoration: none;
}

/* Hover
--------------------------------------------- */

/*
 * The layout draws the middle card filled with Theme Color and its text white.
 * The teardown is explicit that this is the hover state of any card, not a
 * highlight welded to the second one (blocks/features.md §4).
 *
 * (hover: hover) is load-bearing, not decoration: on a touch screen :hover
 * sticks after a tap, and the card would stay coral. White on #EF5743 is
 * 3.43:1 — a failure this project accepted for a glance, not for a state a
 * finger can pin. There is no :focus-within twin either: unlike goal-cards,
 * nothing inside this card is focusable, and if a link is ever added here the
 * fill has to be reconsidered rather than the focus rule bolted on.
 */
@media (hover: hover) {

	.sws-feature-grid__item {
		transition:
			background-color var(--wp--custom--transition, 200ms ease),
			box-shadow var(--wp--custom--transition, 200ms ease);
	}

	.sws-feature-grid__card-title,
	.sws-feature-grid__text {
		transition: color var(--wp--custom--transition, 200ms ease);
	}

	.sws-feature-grid__item:hover {
		background-color: var(--wp--preset--color--primary, #ef5743);
		box-shadow: var(--wp--custom--shadow--raised, 0 12px 40px rgba(35, 45, 54, 0.14));
	}

	.sws-feature-grid__item:hover .sws-feature-grid__card-title,
	.sws-feature-grid__item:hover .sws-feature-grid__text {
		color: var(--wp--preset--color--white, #fff);
	}

	/* The layout swaps the mint puck for a translucent dark one. */
	.sws-feature-grid__item:hover .sws-feature-grid__icon {
		background-color: rgb(35 45 54 / 24%);
	}

	/*
	 * The glyph is an editor upload: its colour is baked into the file and its
	 * URL is unknown to CSS, so neither currentColor nor a mask can reach it.
	 * brightness(0) crushes every non-transparent pixel to black and invert(1)
	 * lifts them to white — the white glyph the layout draws — and it behaves
	 * the same for SVG and PNG because it is a render filter, not a fill. This
	 * is why the field demands a transparent background: an opaque plate would
	 * invert into a solid white square.
	 */
	.sws-feature-grid__item:hover .sws-feature-grid__icon img {
		filter: brightness(0) invert(1);
	}
}

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

@container sws-feature-grid (min-width: 560px) {

	.sws-feature-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The top and bottom bands are tall enough now for the first shapes. */
	.sws-feature-grid__decor {
		display: block;
	}

	/* A lone card has no row to share and should not sit in half the width. */
	.sws-feature-grid--count-1 .sws-feature-grid__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Bottom band
--------------------------------------------- */

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

	/* The bottom padding is finally deep enough to hold these clear of the cards. */
	.sws-feature-grid__shape--globe,
	.sws-feature-grid__shape--magnifier {
		display: block;
	}
}

/* Full row
--------------------------------------------- */

@container sws-feature-grid (min-width: 1000px) {

	/* The strip beside the centred heading exists now. */
	.sws-feature-grid__shape--strokes {
		display: block;
	}

	/* The card is at its 370px width, so the layout's 40px padding fits. */
	.sws-feature-grid__item {
		padding: 2.5rem;
	}

	/*
	 * Three and six make clean rows of three. Four is left alone on purpose and
	 * inherits the 2x2 above: in a 1170 container with a 30px gutter that is
	 * exactly 570 + 30 + 570, and 3+1 would hang the last card off the left.
	 */
	.sws-feature-grid--count-3 .sws-feature-grid__list,
	.sws-feature-grid--count-6 .sws-feature-grid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/*
	 * Five is the only count with no clean row. A six-track grid lets the
	 * trailing pair straddle the middle instead of hanging off the left edge.
	 */
	.sws-feature-grid--count-5 .sws-feature-grid__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.sws-feature-grid--count-5 .sws-feature-grid__item {
		grid-column: span 2;
	}

	.sws-feature-grid--count-5 .sws-feature-grid__item:nth-child(4) {
		grid-column: 2 / span 2;
	}
}

@media (prefers-reduced-motion: reduce) {

	/* The state stays, the animation goes. */
	.sws-feature-grid__item,
	.sws-feature-grid__icon,
	.sws-feature-grid__icon img,
	.sws-feature-grid__card-title,
	.sws-feature-grid__text {
		transition: none;
	}
}