/*
 * Services grid block.
 *
 * The section frame follows docs/figma-template/blocks/courses.md variant C —
 * grey fill, heading on the left, tab bar on the right, four line-art figures
 * plus three dots — and so does the card: white, cover 370x248 flush with the top
 * corners, badge over the cover at 24, 32px inner padding, title 20/Bold.
 *
 * It is the same frame case-studies-grid is built on, and the decor is the same
 * four files. They are copied into this block's own decor/ rather than shared:
 * a block folder stays self-contained, the way feature-grid and process-steps do.
 *
 * Seven departures from the layout, all deliberate — the first six are listed in
 * render.php with their reasons; the seventh is this one:
 *
 *   The badge is Dark on Secondary, not White on Secondary. The layout's pairing
 *   lands at 2.32:1 on 18px text sitting over a photograph, which is the worst
 *   place on the card to make the reader work. The mint identity survives in the
 *   fill. Same call, same reason as the course badge of case-studies-grid.
 *
 * And one consequence of departure 3: with the metric icons gone, the row lost
 * the device that separated its items, so each feature became a light chip. The
 * alternative — bare words with only a gap between them — reads as one phrase
 * once the words are Ukrainian and longer than "4h 30m".
 *
 * 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-services-grid {
	container: sws-services-grid / inline-size;

	/* Containing block for the decorative layer 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-services-grid,
.sws-services-grid *,
.sws-services-grid *::before,
.sws-services-grid *::after {
	box-sizing: border-box;
}

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

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

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

.sws-services-grid--bg-shade {
	background-color: var(--wp--preset--color--shade, #f8f8f8);
}

.sws-services-grid--bg-white {
	background-color: var(--wp--preset--color--white, #fff);
}

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

/*
 * The Abstract Bg layer of the Courses section — a palette, a squiggle, a bar
 * chart, a ruler and three dots. Colours stay inside the files: the template
 * tints the same doodle differently per section, and these are the tints of this
 * one.
 *
 * The positions are deliberately not the layout's. In Figma the figures sit 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 of the section —
 * or pushed past the edge.
 */
.sws-services-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-services-grid__shape {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.sws-services-grid__shape--palette {
	top: 1.5rem;
	right: -1.5%;
	width: 4rem;
	aspect-ratio: 95 / 99;
	background-image: url("decor/palette.svg");
}

.sws-services-grid__shape--swirl {
	top: 26%;
	left: 1.5%;
	width: 1.125rem;
	aspect-ratio: 29 / 54;
	background-image: url("decor/swirl.svg");
}

.sws-services-grid__shape--chart {
	bottom: 1.25rem;
	left: 2%;
	width: 4.25rem;
	aspect-ratio: 101 / 84;
	background-image: url("decor/chart.svg");
}

.sws-services-grid__shape--ruler {
	right: 3%;
	bottom: 1.25rem;
	width: 3.5rem;
	aspect-ratio: 1;
	background-image: url("decor/ruler.svg");
}

/* Geometry stays in CSS: a circle is not worth a file. */
.sws-services-grid__shape--dot-a,
.sws-services-grid__shape--dot-b,
.sws-services-grid__shape--dot-c {
	border-radius: 50%;
	aspect-ratio: 1;
}

.sws-services-grid__shape--dot-a {
	top: 20%;
	right: 8%;
	width: 1rem;
	background-color: #ff8265;
}

.sws-services-grid__shape--dot-b {
	top: 56%;
	left: 7%;
	width: 1rem;
	background-color: #aab8f1;
}

.sws-services-grid__shape--dot-c {
	bottom: 6%;
	left: 62%;
	width: 0.5rem;
	background-color: #bc71fe;
}

/* The three that need a side band wait for the wide layout. */
.sws-services-grid__shape--swirl,
.sws-services-grid__shape--dot-b,
.sws-services-grid__shape--dot-c {
	display: none;
}

.sws-services-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 and tabs
--------------------------------------------- */

.sws-services-grid__top {
	margin-bottom: var(--wp--preset--spacing--60, 3.5rem);
}

.sws-services-grid__head {
	/* A 44px heading across the full 1170 reads as a banner, not as a heading. */
	max-width: 42rem;
}

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

/*
 * The bar stays hidden until view.js announces that filtering works, so a page
 * without JavaScript shows every course and no control that does nothing.
 */
.sws-services-grid__filters {
	display: none;
	margin-top: 2rem;
}

.sws-services-grid.is-filterable .sws-services-grid__filters {
	display: block;
}

.sws-services-grid__filter-set {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sws-services-grid__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
}

/*
 * The radio itself is off-screen but still focusable and still the thing the
 * keyboard operates: arrow keys move through the group natively, which is what
 * an ARIA tablist would have to reimplement.
 */
.sws-services-grid__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sws-services-grid__tab {
	display: inline-block;
	padding-bottom: 0.25rem;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	transition: color var(--wp--custom--transition, 200ms ease), border-color var(--wp--custom--transition, 200ms ease);
}

.sws-services-grid__tab:hover {
	color: var(--wp--preset--color--primary, #ef5743);
}

.sws-services-grid__radio:checked + .sws-services-grid__tab {
	border-bottom-color: var(--wp--preset--color--primary, #ef5743);
	color: var(--wp--preset--color--primary, #ef5743);
}

/* The ring has to be drawn on the label: the input it belongs to is off-screen. */
.sws-services-grid__radio:focus-visible + .sws-services-grid__tab {
	outline: 2px solid var(--wp--preset--color--dark, #232d36);
	outline-offset: 4px;
}

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

.sws-services-grid__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.875rem);
	align-items: stretch;
	margin: 0;
	padding: 0;

	/* A catalogue, not a bulleted list. */
	list-style: none;
}

.sws-services-grid__item {
	display: flex;
	margin: 0;
}

/*
 * The hidden attribute alone loses to the display rule above, so the filter
 * needs this: without it a filtered-out card stays on screen.
 */
.sws-services-grid__item[hidden] {
	display: none;
}

.sws-services-grid__card {
	display: flex;
	flex: 1;
	flex-direction: column;
	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));
	transition: box-shadow var(--wp--custom--transition, 200ms ease);

	/* The cover is flush with the top corners and would square them off. */
	overflow: hidden;
}

@media (hover: hover) {

	/*
	 * The layout floods the hovered card with Theme Color on its title only; the
	 * card itself just lifts. Deepening the shadow is that lift.
	 */
	.sws-services-grid__card:hover {
		box-shadow: var(--wp--custom--shadow--raised, 0 12px 40px rgba(35, 45, 54, 0.14));
	}
}

.sws-services-grid__media {
	position: relative;

	/* 370x248 of the layout — the same ratio as the registered sws-card size. */
	aspect-ratio: 370 / 248;
}

/* Descendant selector: the optimizer may wrap the tag in <picture>. */
.sws-services-grid__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sws-services-grid__badge {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	max-width: calc(100% - 3rem);
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: var(--wp--custom--radius, 8px);
	background-color: var(--wp--preset--color--secondary, #5eb9b3);
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 600;
	line-height: 1.5;
}

/* No cover to sit on: the badge becomes an ordinary label at the top of the card. */
.sws-services-grid__badge--plain {
	position: static;
	align-self: flex-start;
	max-width: 100%;
}

.sws-services-grid__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: 2rem;
}

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

.sws-services-grid__card-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--transition, 200ms ease);
}

.sws-services-grid__card-link:hover,
.sws-services-grid__card-link:focus-visible {
	color: var(--wp--preset--color--primary, #ef5743);
}

.sws-services-grid__text {
	margin: 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.6;
}

.sws-services-grid__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;

	/* A row of facts, not a bulleted list. */
	list-style: none;
}

.sws-services-grid__meta-item {
	padding: 0.125rem 0.625rem;
	border-radius: var(--wp--custom--radius-pill, 999px);
	background-color: var(--wp--preset--color--shade, #f8f8f8);
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Pushed to the bottom so the link lines up across a row of cards. */
.sws-services-grid__action {
	margin: auto 0 0;
	padding-top: 0.25rem;
}

.sws-services-grid__more {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	color: var(--wp--preset--color--primary, #ef5743);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
}

.sws-services-grid__more:hover,
.sws-services-grid__more:focus-visible {
	text-decoration: underline;
}

/* The arrow is affordance, not content — it carries no accessible name. */
.sws-services-grid__more::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--wp--custom--transition, 200ms ease);
}

@media (hover: hover) {

	.sws-services-grid__more:hover::after {
		transform: translateX(0.25rem);
	}
}

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

	.sws-services-grid__more::after {
		transition: none;
	}
}

/* Status line, button and empty state
--------------------------------------------- */

.sws-services-grid__status {
	margin: 1.5rem 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
}

/* The layout's "View All Courses": centred, 56px below the grid. */
.sws-services-grid__cta {
	margin: var(--wp--preset--spacing--60, 3.5rem) 0 0;
	text-align: center;
}

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

/* Wide layouts
--------------------------------------------- */

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

	.sws-services-grid__decor {
		display: block;
	}

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

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

	/* The layout's header row: heading left, tabs right, both on the baseline. */
	.sws-services-grid__top {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem 2.5rem;
		align-items: flex-end;
		justify-content: space-between;
	}

	.sws-services-grid__head {
		flex: 1 1 22rem;
	}

	.sws-services-grid.is-filterable .sws-services-grid__filters {
		margin-top: 0;
	}

	.sws-services-grid__tabs {
		justify-content: flex-end;
	}
}

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

	.sws-services-grid__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sws-services-grid__shape--swirl,
	.sws-services-grid__shape--dot-b,
	.sws-services-grid__shape--dot-c {
		display: block;
	}
}