/*
 * Qualification grid block.
 *
 * The Team Member section of docs/figma-template/blocks/team-member.md in its
 * B edition: centred section heading, white cards with the image flush to the
 * top corners, caption left-aligned below it, 32px inner padding, 30px gutter.
 * The reuse map assigns this composition to the certificates section of the
 * About page — the scan takes the place of the portrait, the organisation, the
 * grade and the year take the place of the job title.
 *
 * Four deliberate departures from the layout, all load-bearing:
 *
 * 1. The image slot is 370x248, not the layout's 270x270 square. The upload is
 *    a document, and a square crop of an A4 page throws away most of it. The
 *    file is placed with object-fit: contain over a light mount, so a scan the
 *    client cropped differently is letterboxed rather than cut — a certificate
 *    with its grade cropped off stops being proof.
 * 2. The Explore Btn of the layout keeps its size, colour and its corner, but
 *    opens the document instead of unfolding social links. On a single tutor's
 *    site those links belong in the footer (blocks/team-member.md §10), and the
 *    one thing the visitor can want from a certificate card is a closer look.
 * 3. The hover state deepens the shadow and nothing else. feature-grid floods
 *    its tile with Theme Color on hover; a document card turning coral reads as
 *    a state change, not as a highlight.
 * 4. The card height is not the layout's fixed 385px. Real Ukrainian names of
 *    qualifications wrap, and the grid stretches every card in a row to the
 *    tallest one instead of clipping.
 *
 * 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-qualification-grid {
	container: sws-qualification-grid / inline-size;

	/*
	 * The decorative figures are placed against the container, not against the
	 * full-bleed section: in the layout they live in the 375px margins beside the
	 * 1170 container, and a percentage of the section would walk into the cards as
	 * soon as those margins disappear. Same pair of variables as rich-text-media.
	 */
	--sws-qual-container: min(var(--wp--custom--container, 1170px), calc(100% - var(--wp--custom--gutter, 1rem) * 2));
	--sws-qual-edge: calc((100% - var(--sws-qual-container)) / 2);

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

	/* The dot field and the drops reach past the section on purpose. */
	overflow: hidden;
}

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

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

/*
 * Grey is the default rather than white: the layout lays this section straight
 * on the page background, and the cards are white — on #F8F8F8 their edge is
 * readable without leaning on the shadow alone.
 */
.sws-qualification-grid--bg-shade {
	background-color: var(--wp--preset--color--shade, #f8f8f8);
}

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

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

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

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

/*
 * The Abstract Bg layer of the section (Figma 425:13719 on 04_About Us_1): a
 * ring with orbits top left, a field of Ø4 dots on the right and a scatter of
 * drops bottom right. The two files carry the warm tints of the layout inside
 * them; the dot field is a gradient, because 156 circles are geometry and
 * geometry is not carried in a file.
 */
.sws-qualification-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-qualification-grid__shape {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* The two beside the heading need the side bands, so they wait for the wide layout. */
.sws-qualification-grid__shape--atom,
.sws-qualification-grid__shape--dots {
	display: none;
}

/*
 * Moved in from the layout's left margin into the strip beside the centred
 * heading, which is the nearest band this layout actually has. Offset from the
 * section padding token, so whatever the viewport does to the padding the shape
 * follows and can never reach the heading.
 */
.sws-qualification-grid__shape--atom {
	top: calc(var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem)) + 0.5rem);
	left: 2.5%;
	width: 6.5rem;
	aspect-ratio: 104 / 103;
	background-image: url("decor/atom.svg");
}

/*
 * 87.5% along the container and 22.6% of it wide — the layout's own 1399 and 264
 * expressed against the container instead of against the 1920 canvas. It starts
 * behind the top right card and bleeds past the right edge, exactly as in Figma;
 * the cards are opaque, so only the part above them is ever seen.
 */
.sws-qualification-grid__shape--dots {
	top: calc(var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem)) - 1.5rem);
	left: calc(var(--sws-qual-edge) + var(--sws-qual-container) * 0.875);
	width: calc(var(--sws-qual-container) * 0.226);
	aspect-ratio: 264 / 244;

	/* Ø4 dots on a 20px pitch, #F9E3E3 — read off the Figma export, not guessed. */
	background-image: radial-gradient(#f9e3e3 1.8px, transparent 2.2px);
	background-position: 0 0;
	background-size: 1.25rem 1.25rem;
}

/* The bottom band of the section, where the layout also puts it. */
.sws-qualification-grid__shape--drops {
	right: 3%;
	bottom: 0.75rem;
	width: auto;
	height: min(5.0625rem, calc(var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem)) - 1.75rem));
	aspect-ratio: 97 / 81;
	background-image: url("decor/drops.svg");
}

.sws-qualification-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: the layout centres this heading in all six of its appearances, and
 * centring is also what frees the side strips the figures need.
 */
.sws-qualification-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-qualification-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-qualification-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-qualification-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-qualification-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-qualification-grid__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40, 1.875rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-qualification-grid__item {
	/* Column, so a row of cards stretches to the tallest instead of clipping. */
	display: flex;
	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));

	/* The image is flush with the card edge and has to take its top corners. */
	overflow: hidden;
}

/*
 * A card with no scan starts at its title against the body padding, so
 * --no-image needs no rule of its own. Filling a grid one scan at a time is
 * still worth avoiding: in a row of mixed cards the titles no longer line up.
 */

.sws-qualification-grid__media {
	display: block;
	position: relative;

	/* 370x248 — the ratio of the registered sws-card size, and of the brief. */
	aspect-ratio: 370 / 248;

	/* A mount under the letterbox bands of a scan cropped to another ratio. */
	background-color: var(--wp--preset--color--shade, #f8f8f8);
	overflow: hidden;
}

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

	/* contain, not cover: a certificate cut in half stops being proof. */
	object-fit: contain;
}

/*
 * The Explore Btn of the layout, at its own coordinates: 48x48 flush with the
 * bottom right corner of the image, Secondary fill, white glyph. It is decorative
 * markup — the link around it carries the accessible name.
 */
.sws-qualification-grid__zoom {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 3rem;
	height: 3rem;
	background-color: var(--wp--preset--color--secondary, #5eb9b3);
	transition: background-color var(--wp--custom--transition, 200ms ease);
}

.sws-qualification-grid__zoom::before,
.sws-qualification-grid__zoom::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--wp--preset--color--white, #fff);
	transform: translate(-50%, -50%);
}

.sws-qualification-grid__zoom::before {
	width: 1.125rem;
	height: 2px;
}

.sws-qualification-grid__zoom::after {
	width: 2px;
	height: 1.125rem;
}

.sws-qualification-grid__media--zoom:focus-visible {
	outline: 2px solid var(--wp--preset--color--dark, #232d36);
	outline-offset: -2px;
}

.sws-qualification-grid__body {
	/* 32px is the layout's own inner padding for this card. */
	padding: 2rem;
}

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

/*
 * Organisation, grade and year on one line. The separator is drawn by CSS, so a
 * card that carries only one of the three prints only that one, with no leading
 * dot and no empty span in the markup.
 */
.sws-qualification-grid__meta {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
}

.sws-qualification-grid__meta > span + span::before {
	content: "·";
	margin-inline: 0.5em;
}

/* The one fact on the card that is the proof, so it carries the text colour. */
.sws-qualification-grid__grade {
	color: var(--wp--preset--color--dark, #232d36);
	font-weight: 600;
}

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

/* Lightbox (markup built by view.js)
--------------------------------------------- */

.sws-qualification-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-qualification-grid__lightbox::backdrop {
	background-color: rgba(35, 45, 54, 0.8);
}

.sws-qualification-grid__lightbox-inner {
	position: relative;
}

.sws-qualification-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-qualification-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-qualification-grid__lightbox-close:hover {
	background-color: var(--wp--preset--color--dark, #232d36);
}

.sws-qualification-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-qualification-grid__lightbox-close::before,
.sws-qualification-grid__lightbox-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 2px;
	background-color: var(--wp--preset--color--white, #fff);
}

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

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

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

/*
 * (hover: hover) for the same reason as everywhere else in this theme: on a
 * touch screen :hover sticks after a tap. Nothing here changes a colour a
 * finger could pin — the card only lifts — but the transition would still run
 * on tap without the guard.
 */
@media (hover: hover) {

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

	.sws-qualification-grid__item:hover,
	.sws-qualification-grid__item:focus-within {
		box-shadow: var(--wp--custom--shadow--raised, 0 12px 40px rgba(35, 45, 54, 0.14));
	}

	.sws-qualification-grid__media--zoom:hover .sws-qualification-grid__zoom {
		background-color: var(--wp--preset--color--primary, #ef5743);
	}
}

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

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

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

	/* The bottom band is deep enough now for the drops. */
	.sws-qualification-grid__decor {
		display: block;
	}

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

/* Odd count in the two-column band
--------------------------------------------- */

@container sws-qualification-grid (min-width: 560px) and (max-width: 999.98px) {

	/*
	 * An odd count leaves the last card alone on its row, hanging off the left
	 * edge — the same defect --count-5 solves with a six-track grid one band up.
	 * The card straddles both tracks, keeps a single column's width and centres.
	 * Range-bounded on purpose: past 1000px a third card completes its own row,
	 * and --count-5 has its own rule there that this higher-specificity one
	 * would otherwise outrank.
	 */
	.sws-qualification-grid--count-3 .sws-qualification-grid__item:last-child,
	.sws-qualification-grid--count-5 .sws-qualification-grid__item:last-child {
		grid-column: 1 / -1;
		width: calc(50% - var(--wp--preset--spacing--40, 1.875rem) / 2);
		margin-inline: auto;
	}
}

/* Side bands
--------------------------------------------- */

@container sws-qualification-grid (min-width: 62rem) {

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

@container sws-qualification-grid (min-width: 64rem) {

	/* The dot field needs a wider strip than the ring: it is 264px across. */
	.sws-qualification-grid__shape--dots {
		display: block;
	}
}

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

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

	/*
	 * Two cards keep the 370px of the theme's card grid and centre as a pair
	 * rather than stretching into two 570px slabs: a certificate card that wide
	 * is mostly empty mount.
	 */
	.sws-qualification-grid--count-2 .sws-qualification-grid__list {
		max-width: 48.125rem;
		margin-inline: auto;
	}

	/* Three at 370 and six as two such rows — 3 x 370 + 2 x 30 is the container. */
	.sws-qualification-grid--count-3 .sws-qualification-grid__list,
	.sws-qualification-grid--count-6 .sws-qualification-grid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Four at 270 in one row — the layout's own grid. */
	.sws-qualification-grid--count-4 .sws-qualification-grid__list {
		grid-template-columns: repeat(4, 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-qualification-grid--count-5 .sws-qualification-grid__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

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

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

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

	/* The state stays, the animation goes. */
	.sws-qualification-grid__item,
	.sws-qualification-grid__zoom,
	.sws-qualification-grid__lightbox-close {
		transition: none;
	}
}