/*
 * Case studies 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 the card follows docs/figma-template/blocks/blogs.md
 * variant A/B: white card, image 370x248 flush with the top corners, badge over
 * the text, 32px inner padding.
 *
 * Two departures from the template, both deliberate:
 *
 * 1. The card is taller than the layout's 490px and its height is not fixed.
 *    `testimonial` has no public URL, so a case has no "read more" page to open:
 *    the whole case — goal, work, proof, quote — lives in the card, and clamping
 *    it would hide the part that makes the case worth reading.
 * 2. The course badge is Dark on the mint tint, not White on Secondary. The
 *    layout's pairing lands at 2.32:1, and this is the one label on the card
 *    that carries a link. The teal identity survives in the fill.
 *
 * 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-case-studies-grid {
	container: sws-case-studies-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-case-studies-grid,
.sws-case-studies-grid *,
.sws-case-studies-grid *::before,
.sws-case-studies-grid *::after {
	box-sizing: border-box;
}

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

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

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

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

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

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

/*
 * The Abstract Bg layer of the Courses section, exported from the template into
 * decor/ — 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-case-studies-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-case-studies-grid__shape {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

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

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

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

.sws-case-studies-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-case-studies-grid__shape--dot-a,
.sws-case-studies-grid__shape--dot-b,
.sws-case-studies-grid__shape--dot-c {
	border-radius: 50%;
	aspect-ratio: 1;
}

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

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

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

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

.sws-case-studies-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-case-studies-grid__top {
	margin-bottom: var(--wp--preset--spacing--60, 3.5rem);
}

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

.sws-case-studies-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-case-studies-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-case-studies-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-case-studies-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 case and no control that does nothing.
 */
.sws-case-studies-grid__filters {
	display: none;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 2rem;
}

.sws-case-studies-grid.is-filterable .sws-case-studies-grid__filters {
	display: flex;
}

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

.sws-case-studies-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-case-studies-grid__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sws-case-studies-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-case-studies-grid__tab:hover {
	color: var(--wp--preset--color--primary, #ef5743);
}

.sws-case-studies-grid__radio:checked + .sws-case-studies-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-case-studies-grid__radio:focus-visible + .sws-case-studies-grid__tab {
	outline: 2px solid var(--wp--preset--color--dark, #232d36);
	outline-offset: 4px;
}

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

.sws-case-studies-grid__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.875rem);
	align-items: start;
}

.sws-case-studies-grid__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	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 image is flush with the top corners and would square them off. */
	overflow: hidden;
}

/*
 * 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-case-studies-grid__card[hidden] {
	display: none;
}

.sws-case-studies-grid__media {
	/* 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-case-studies-grid__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.sws-case-studies-grid__badge {
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: var(--wp--custom--radius, 8px);
	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 600;
	line-height: 1.5;
}

.sws-case-studies-grid__badge a {
	color: inherit;
	text-decoration: none;
}

.sws-case-studies-grid__badge a:hover,
.sws-case-studies-grid__badge a:focus-visible {
	text-decoration: underline;
}

.sws-case-studies-grid__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;

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

.sws-case-studies-grid__meta-item {
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
}

.sws-case-studies-grid__meta-item--score {
	color: var(--wp--preset--color--dark, #232d36);
	font-weight: 600;
}

.sws-case-studies-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.4;
}

.sws-case-studies-grid__facts {
	margin: 0;
}

.sws-case-studies-grid__fact-term {
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 600;
	line-height: 1.5;
}

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

.sws-case-studies-grid__fact-value:last-child {
	margin-bottom: 0;
}

.sws-case-studies-grid__evidence {
	width: 100%;
	margin: 0;
}

.sws-case-studies-grid__evidence img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius, 8px);
	border: 1px solid var(--wp--preset--color--shade, #f8f8f8);
}

/*
 * The whole scan is the control: a document this dense has no obvious hit area,
 * and a link around it is what the visitor already expects to be able to tap.
 */
.sws-case-studies-grid__evidence-link {
	position: relative;
	display: block;
	cursor: zoom-in;
}

.sws-case-studies-grid__evidence-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--dark, #232d36);
	outline-offset: 4px;
}

/* Without a marker the scan reads as a flat illustration, not as something to open. */
.sws-case-studies-grid__evidence-zoom {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: rgba(35, 45, 54, 0.85);
}

.sws-case-studies-grid__evidence-zoom::before {
	content: "";
	position: absolute;
	inset: 0.5rem;
	background-color: var(--wp--preset--color--white, #fff);
	-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'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%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'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) {

	.sws-case-studies-grid__evidence-link:hover .sws-case-studies-grid__evidence-zoom {
		background-color: var(--wp--preset--color--dark, #232d36);
	}
}

.sws-case-studies-grid__evidence-caption {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: 0.875rem;
	line-height: 1.5;
}

.sws-case-studies-grid__quote {
	margin: 0;
	padding-left: 1rem;
	border-left: 3px solid var(--wp--preset--color--secondary, #5eb9b3);
}

.sws-case-studies-grid__quote p {
	margin: 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.6;
}

/* Pushed to the bottom so the attribution lines up across a row of cards. */
.sws-case-studies-grid__author {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	padding-top: 0.5rem;
}

.sws-case-studies-grid__author-name {
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 600;
	line-height: 1.5;
}

.sws-case-studies-grid__author-role {
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
}

/* Lightbox
--------------------------------------------- */

/*
 * Built by view.js and appended to <body>, so it is deliberately outside the
 * container query context above — its size follows the viewport, not the block.
 */
.sws-case-studies-grid__lightbox {
	max-width: min(92vw, 60rem);
	max-height: 94vh;
	padding: 0;
	border: 0;
	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));
	overflow: hidden;
}

.sws-case-studies-grid__lightbox::backdrop {
	background-color: rgba(35, 45, 54, 0.8);
}

.sws-case-studies-grid__lightbox-inner {
	position: relative;
}

.sws-case-studies-grid__lightbox-image {
	display: block;

	/* A tall A4 scan has to fit the height as well, hence both caps. */
	max-width: 100%;
	max-height: 94vh;
	width: auto;
	height: auto;
}

.sws-case-studies-grid__lightbox-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(35, 45, 54, 0.85);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition, 200ms ease);
}

.sws-case-studies-grid__lightbox-close:hover {
	background-color: var(--wp--preset--color--dark, #232d36);
}

.sws-case-studies-grid__lightbox-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--white, #fff);
	outline-offset: 2px;
}

/* The button carries no text: its accessible name is the aria-label view.js sets. */
.sws-case-studies-grid__lightbox-close::before,
.sws-case-studies-grid__lightbox-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 2px;
	background-color: var(--wp--preset--color--white, #fff);
}

.sws-case-studies-grid__lightbox-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.sws-case-studies-grid__lightbox-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

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

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

.sws-case-studies-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-case-studies-grid (min-width: 560px) {

	.sws-case-studies-grid__decor {
		display: block;
	}

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

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

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

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

	.sws-case-studies-grid.is-filterable .sws-case-studies-grid__filters {
		align-items: flex-end;
		margin-top: 0;
	}

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

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

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

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