/**
 * Quick links block styles (block-scoped; enqueued only when the block is present).
 * BEM only, prefixed with the block slug. Do not touch the theme's global style.css.
 *
 * Mobile-first, and sized by CONTAINER queries rather than viewport ones: with
 * meta boxes present WordPress renders a non-iframed editor, where a media query
 * sees the browser window while the canvas is only ~640px wide.
 *
 * Breakpoints keep the theme's steps: 782px (the WordPress split, the cluster
 * goes two-up) and 1025px (the lead card beside the cluster).
 *
 * Some selectors below repeat the block root — `.sws-quick-links .sws-…` — which
 * is deliberate, not a slip. css/content.css normalises core-block content at
 * `:is(.site-main, .editor-styles-wrapper) :is(h2, h3, p, ul)` (0-1-1), which
 * outranks a single block class: without the repeat a card title would render at
 * the core heading size and the card list would pick up a list indent. Drop it if
 * content.css ever stops reaching inside sws-theme sections.
 */

.sws-quick-links {
	--sws-quick-links-max: 77.5rem; /* 1240px */
	--sws-quick-links-surface: #0d1020;
	--sws-quick-links-border: rgba(120, 70, 255, 0.2);
	--sws-quick-links-border-hover: rgba(139, 92, 255, 0.55);
	--sws-quick-links-text-dim: #8b8b9a;
	--sws-quick-links-link: var(--wp--preset--color--link, #9b6bff);
	--sws-quick-links-link-alt: #3e9bff;
	--sws-quick-links-heading-gradient: linear-gradient(90deg, #c4b6ff 0%, #8b5cff 40%, var(--wp--preset--color--accent-cyan, #00d4ff) 100%);
	--sws-quick-links-featured-bg: radial-gradient(120% 120% at 70% 20%, rgba(106, 0, 255, 0.25), #0d1020 60%);
	--sws-quick-links-icon-gradient: linear-gradient(135deg, var(--wp--preset--color--accent-purple, #6a00ff), var(--wp--preset--color--accent-cyan, #00d4ff));
	--sws-quick-links-card-shadow: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.4);
	--sws-quick-links-card-shadow-hover: 0 1.125rem 3.125rem rgba(0, 0, 0, 0.5), 0 0 2.5rem rgba(106, 0, 255, 0.25);

	position: relative;
	container-type: inline-size;
	container-name: sws-quick-links;

	/*
	 * No responsive declaration belongs on this element: it is the query
	 * container, and a container query cannot style its own container. Every
	 * breakpoint override below targets a descendant.
	 */
}

.sws-quick-links__inner {
	max-width: var(--sws-quick-links-max);
	margin: 0 auto;
	padding: clamp(2rem, 6cqw, 5rem) clamp(1.25rem, 6cqw, 6rem) clamp(2rem, 4cqw, 3.75rem);
}

/* Header
--------------------------------------------- */

.sws-quick-links__header {
	max-width: 41.25rem; /* 660px */
	margin: 0 auto clamp(1.75rem, 4cqw, 2.75rem);
	text-align: center;
}

.sws-quick-links .sws-quick-links__eyebrow {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 1.25rem;
	padding: 0.4375rem 0.875rem;
	border: 1px solid rgba(120, 70, 255, 0.3);
	border-radius: 999px;
	background-color: rgba(120, 70, 255, 0.12);
	color: #c4b6ff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sws-quick-links__eyebrow-icon {
	display: flex;
	flex: none;
	align-items: center;
}

.sws-quick-links .sws-quick-links__heading {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 4.6cqw, 2.75rem); /* up to 44px */
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.021em;
	text-wrap: balance;
}

.sws-quick-links__heading-accent {
	background: var(--sws-quick-links-heading-gradient);
}

/*
 * Gradient text only where it can actually be clipped: without the guard an
 * engine without background-clip would paint transparent text on a gradient box.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {

	.sws-quick-links__heading-accent {
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.sws-quick-links .sws-quick-links__text {
	max-width: 35rem; /* 560px */
	margin: 0 auto;
	color: var(--sws-quick-links-text-dim);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Grid
--------------------------------------------- */

/*
 * display: grid and the gap live here rather than inside a query, so the single
 * column below 1025px keeps its rhythm; only the tracks change per breakpoint.
 */
.sws-quick-links__grid {
	display: grid;
	gap: 1rem;
}

.sws-quick-links .sws-quick-links__items {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	line-height: inherit;
	list-style: none;
}

/* Cards, shared
--------------------------------------------- */

.sws-quick-links__featured,
.sws-quick-links__item {
	position: relative;
	border: 1px solid var(--sws-quick-links-border);
	background-color: var(--sws-quick-links-surface);
	box-shadow: var(--sws-quick-links-card-shadow);
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sws-quick-links__featured:hover,
.sws-quick-links__featured:focus-within,
.sws-quick-links__item:hover,
.sws-quick-links__item:focus-within {
	transform: translateY(-0.25rem);
	border-color: var(--sws-quick-links-border-hover);
	box-shadow: var(--sws-quick-links-card-shadow-hover);
}

.sws-quick-links__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3rem; /* 48px */
	height: 3rem;
	border-radius: 0.875rem;
	background: var(--sws-quick-links-icon-gradient);
	box-shadow: 0 0.5rem 1.25rem rgba(106, 0, 255, 0.35);
	color: #fff;
}

.sws-quick-links__icon--lg {
	width: 4.125rem; /* 66px */
	height: 4.125rem;
	border-radius: 1.25rem;
}

/*
 * The circled arrow. It sits on a border rather than a fill so it reads as an
 * affordance, not as a second icon competing with the card's own.
 */
.sws-quick-links__dot {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.125rem; /* 34px */
	height: 2.125rem;
	border: 1px solid var(--sws-quick-links-border);
	border-radius: 50%;
	color: inherit;
	transition: transform 0.15s ease, border-color 0.2s ease;
}

.sws-quick-links__arrow {
	flex: none;
}

/* Lead card
--------------------------------------------- */

.sws-quick-links__featured {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	border-radius: 1.5rem; /* 24px */
	background-image: var(--sws-quick-links-featured-bg);
}

.sws-quick-links__media--featured {
	position: absolute;
	z-index: 0;
	top: -0.625rem;
	right: -2.5rem;
	width: 75%;
	max-width: 26.25rem; /* 420px */
	opacity: 0.9;
	pointer-events: none;
}

/*
 * Descendant selector: the optimiser may wrap the tag in <picture>.
 *
 * The artwork carries its own alpha (see brand/README.md). The design's
 * mix-blend-mode composite is deliberately NOT reproduced: `container-type` on
 * the root computes to `contain: layout style inline-size`, which makes the
 * element a stacking context and isolates the blending group, so `screen` would
 * fall back to an opaque dark rectangle.
 */
.sws-quick-links__media--featured img {
	display: block;
	width: 100%;
	height: auto;
}

.sws-quick-links__featured-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(1.5rem, 3cqw, 2.125rem); /* 34px */
}

.sws-quick-links__featured-body .sws-quick-links__icon {
	margin-bottom: 1.5rem;
}

.sws-quick-links .sws-quick-links__badge {
	display: inline-flex;
	gap: 0.4375rem;
	align-items: center;
	align-self: flex-start;
	margin: 0 0 0.875rem;
	padding: 0.375rem 0.75rem;
	border: 1px solid rgba(120, 70, 255, 0.3);
	border-radius: 999px;
	background-color: rgba(120, 70, 255, 0.12);
	color: #c4b6ff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

.sws-quick-links__badge-icon {
	flex: none;
}

.sws-quick-links .sws-quick-links__featured-title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.375rem, 2.8cqw, 1.875rem); /* up to 30px */
	font-weight: 800;
	line-height: 1.15;
}

.sws-quick-links .sws-quick-links__featured-text {
	max-width: 26rem;
	margin: 0 0 1.5rem;
	color: var(--sws-quick-links-text-dim);
	font-size: 0.875rem;
	line-height: 1.6;
}

.sws-quick-links .sws-quick-links__featured-actions {
	/*
	 * auto absorbs the free space the stretched grid item creates, pinning the
	 * link to the bottom of the tallest card in the row. It needs the card to
	 * stay align-self: stretch, so never set align-items on .sws-quick-links__grid.
	 */
	margin: auto 0 0;
}

/*
 * The whole row is the link, with the circled arrow pushed to the far edge of
 * the card as in the design. Keeping it inside the anchor rather than beside it
 * makes the arrow part of the hit area instead of a decoration next to it.
 */
.sws-quick-links__featured-link {
	display: flex;
	gap: 0.875rem;
	align-items: center;
	justify-content: space-between;
	color: var(--sws-quick-links-link);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.sws-quick-links__featured-link:hover,
.sws-quick-links__featured-link:focus-visible {
	color: var(--sws-quick-links-link);
}

.sws-quick-links__featured-link .sws-quick-links__dot {
	width: 3.25rem; /* 52px */
	height: 3.25rem;
	border-color: rgba(139, 92, 255, 0.35);
}

.sws-quick-links__featured-link:hover .sws-quick-links__dot,
.sws-quick-links__featured-link:focus-visible .sws-quick-links__dot {
	transform: translateX(0.1875rem);
	border-color: var(--sws-quick-links-border-hover);
}

/* Cluster cards
--------------------------------------------- */

.sws-quick-links__item {
	/*
	 * flex so the body stretches to the card in both axes: a percentage height
	 * would have to resolve against a grid row that is itself content-sized.
	 */
	display: flex;
	border-radius: 1.25rem; /* 20px */
}

/*
 * The whole card is the link target when a URL is set, so the body — not the
 * li — carries the padding and the layout.
 *
 * A grid rather than a column of flex rows: the icon and the arrow share the
 * first row while the copy spans both columns underneath, which is one
 * declaration here and would be a wrapper element in flex.
 */
.sws-quick-links__item-body {
	display: grid;
	flex: 1;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr;
	gap: 1rem;
	padding: 1.625rem; /* 26px */
	color: inherit;
	text-decoration: none;
}

.sws-quick-links__item-body .sws-quick-links__icon,
.sws-quick-links__item-body .sws-quick-links__dot {
	align-self: start;
}

.sws-quick-links__item-body .sws-quick-links__dot {
	grid-column: 3;
	grid-row: 1;
}

.sws-quick-links__item-content {
	display: flex;
	flex-direction: column;
	grid-column: 1 / -1;
}

.sws-quick-links .sws-quick-links__item-title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem; /* 17px */
	font-weight: 700;
	line-height: 1.3;
}

.sws-quick-links .sws-quick-links__item-text {
	margin: 0 0 1rem;
	color: var(--sws-quick-links-text-dim);
	font-size: 0.8125rem;
	line-height: 1.55;

	/* The grid tracks are minmax(0, …): a long word has to wrap, not overflow. */
	overflow-wrap: anywhere;
}

.sws-quick-links .sws-quick-links__item-label {
	display: flex;
	gap: 0.375rem;
	align-items: center;
	margin: auto 0 0;
	color: var(--sws-quick-links-link-alt);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
}

.sws-quick-links__item-body:hover .sws-quick-links__dot,
.sws-quick-links__item-body:focus-visible .sws-quick-links__dot {
	transform: translateX(0.1875rem);
	border-color: var(--sws-quick-links-border-hover);
}

/* Reduced motion
--------------------------------------------- */

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

	.sws-quick-links__featured,
	.sws-quick-links__item,
	.sws-quick-links__dot {
		transition: none;
	}

	.sws-quick-links__featured:hover,
	.sws-quick-links__featured:focus-within,
	.sws-quick-links__item:hover,
	.sws-quick-links__item:focus-within,
	.sws-quick-links__featured-link:hover .sws-quick-links__dot,
	.sws-quick-links__featured-link:focus-visible .sws-quick-links__dot,
	.sws-quick-links__item-body:hover .sws-quick-links__dot,
	.sws-quick-links__item-body:focus-visible .sws-quick-links__dot {
		transform: none;
	}
}

/* 782px and up
--------------------------------------------- */

@container sws-quick-links (min-width: 782px) {

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

	.sws-quick-links__item--wide {
		grid-column: 1 / -1;
	}

	/* A full-width card has room to lay the copy beside the icon. */
	.sws-quick-links__item--wide .sws-quick-links__item-body {
		grid-template-rows: auto;
		align-items: center;
		gap: 1.375rem;
	}

	.sws-quick-links__item--wide .sws-quick-links__item-body .sws-quick-links__icon,
	.sws-quick-links__item--wide .sws-quick-links__item-body .sws-quick-links__dot {
		align-self: center;
	}

	.sws-quick-links__item--wide .sws-quick-links__item-content {
		grid-column: 2;
		grid-row: 1;
	}

	.sws-quick-links__item--wide .sws-quick-links__item-text,
	.sws-quick-links__item--wide .sws-quick-links__item-label {
		margin-bottom: 0;
	}
}

/* 1025px and up
--------------------------------------------- */

@container sws-quick-links (min-width: 1025px) {

	/* Lead card beside the cluster, matching the design's even split. */
	.sws-quick-links__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Whichever half the editor left empty, the other one takes the full width. */
	.sws-quick-links__featured:only-child,
	.sws-quick-links__items:only-child {
		grid-column: 1 / -1;
	}
}