/*
 * Shared rules for the kit sections (patterns/kit-*.php): the colour surfaces
 * an editor picks in the section's Styles panel, and the label, title and
 * intro every kit section uses. Type follows the site's own sections
 * (about-story, case-study-outcomes, capability-faq).
 *
 * Surfaces only set variables; each kit section reads them, so a new section
 * gets all five colourways for free.
 */
.sp-kit {
	--kit-bg: var(--wp--preset--color--white);
	--kit-fg: var(--wp--preset--color--foreground);
	--kit-text: color-mix(in srgb, var(--wp--preset--color--black) 60%, transparent);
	--kit-muted: color-mix(in srgb, var(--wp--preset--color--black) 60%, transparent);
	--kit-accent: var(--wp--preset--color--primary);
	--kit-card: var(--wp--preset--color--off-white);
	--kit-card-fg: var(--wp--preset--color--foreground);
	--kit-line: color-mix(in srgb, var(--wp--preset--color--black) 10%, transparent);
	--kit-pad: 64px;
	position: relative;
	overflow: hidden;
	background: var(--kit-bg);
	color: var(--kit-fg);
	padding-block: var(--kit-pad);
}
@media (min-width: 1024px) {
	.sp-kit { --kit-pad: 100px; }
}
.sp-kit.is-style-sp-offwhite {
	--kit-bg: var(--wp--preset--color--off-white);
	--kit-card: var(--wp--preset--color--white);
}
.sp-kit.is-style-sp-yellow {
	--kit-bg: var(--wp--preset--color--primary);
	--kit-fg: var(--wp--preset--color--black-light);
	--kit-text: color-mix(in srgb, var(--wp--preset--color--black) 75%, transparent);
	--kit-muted: color-mix(in srgb, var(--wp--preset--color--black) 60%, transparent);
	--kit-accent: var(--wp--preset--color--black-light);
	--kit-card: color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent);
	--kit-line: color-mix(in srgb, var(--wp--preset--color--black) 15%, transparent);
}
.sp-kit.is-style-sp-dark {
	--kit-bg: var(--wp--preset--color--black-light);
	--kit-fg: var(--wp--preset--color--white);
	--kit-text: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
	--kit-muted: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
	--kit-card: color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
	--kit-card-fg: var(--wp--preset--color--white);
	--kit-line: color-mix(in srgb, var(--wp--preset--color--white) 15%, transparent);
}
.sp-kit.is-style-sp-blue {
	--kit-bg: var(--wp--preset--color--secondary);
	--kit-fg: var(--wp--preset--color--white);
	--kit-text: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
	--kit-muted: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
	--kit-accent: var(--wp--preset--color--white);
	--kit-card: color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
	--kit-card-fg: var(--wp--preset--color--white);
	--kit-line: color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
}

/* Label, title, intro: the site's section heading. */
.sp-kit .sp-kit__label.sp-kit__label {
	margin-bottom: 20px;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--kit-muted);
}
.sp-kit .sp-kit__title {
	font-size: var(--wp--preset--font-size--heading-2);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--kit-fg);
	text-wrap: balance;
}
.sp-kit .sp-kit__title--display {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
}
.sp-kit .sp-kit__intro {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.625;
	color: var(--kit-text);
}
@media (min-width: 1024px) {
	.sp-kit .sp-kit__intro { font-size: 20px; }
}
.sp-kit .sp-kit__text {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.625;
	color: var(--kit-text);
}
.sp-kit .sp-kit__text a,
.sp-kit .sp-kit__intro a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sp-kit .sp-kit__text a:hover,
.sp-kit .sp-kit__intro a:hover {
	color: var(--kit-fg);
}
.sp-kit .sp-kit__head {
	display: grid;
	gap: 24px;
	margin-bottom: 48px;
}
@media (min-width: 1024px) {
	.sp-kit .sp-kit__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: end;
		gap: 64px;
		margin-bottom: 64px;
	}
	.sp-kit .sp-kit__head > :only-child { grid-column: 1 / -1; max-width: 900px; }
}
.sp-kit .sp-kit__head-text { display: flex; flex-direction: column; }

/* Buttons keep the site's look; on yellow the yellow button turns black. */
.sp-kit .sp-kit__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.sp-kit.is-style-sp-yellow .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--black-light);
	border-color: var(--wp--preset--color--black-light);
	color: var(--wp--preset--color--white);
}
.sp-kit.is-style-sp-yellow .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 4px 4px 0 0 var(--wp--preset--color--black-light);
}
/* The outline button is white by default; on light surfaces it is drawn in ink. */
.sp-kit:not(.is-style-sp-dark):not(.is-style-sp-blue) .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--kit-fg);
	border-color: var(--kit-fg);
}
.sp-kit:not(.is-style-sp-dark):not(.is-style-sp-blue) .wp-block-button.is-style-outline .wp-block-button__link:hover {
	box-shadow: 4px 4px 0 0 var(--kit-fg);
}

/* The slash mark the site uses for bullets (old ico_rect.svg). */
.sp-kit .sp-kit__slash {
	display: inline-block;
	width: 10px;
	height: 20px;
	background: var(--kit-accent);
	clip-path: polygon(44.82% 13.64%, 95.45% 13.64%, 50.63% 86.36%, 0% 86.36%);
}

/* Grids that follow the number of items: add or remove one and the row adapts. */
.sp-kit .sp-kit__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}
@media (min-width: 768px) {
	.sp-kit .sp-kit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.sp-kit .sp-kit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sp-kit .sp-kit__grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sp-kit .sp-kit__grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-kit .sp-kit__grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}

/* The same colours on a plain group outside the kit. */
.wp-block-group.is-style-sp-offwhite:not(.sp-kit) { background: var(--wp--preset--color--off-white); }
.wp-block-group.is-style-sp-yellow:not(.sp-kit) { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--black-light); }
.wp-block-group.is-style-sp-dark:not(.sp-kit) { background: var(--wp--preset--color--black-light); color: var(--wp--preset--color--white); }
.wp-block-group.is-style-sp-blue:not(.sp-kit) { background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--white); }

/* Name tags on the private Block library page (tools/library-page.sh). */
.sp-library-label {
	margin: 0;
	padding: 10px var(--sp-gutter);
	background: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sp-library-label:first-child { margin-top: var(--wp--custom--header--height, 72px); }
/* A shelf heading in the overview page, above its sections. */
.sp-library-label.sp-library-label--shelf {
	padding-block: 18px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
	font-weight: 600;
	text-transform: uppercase;
}
.sp-library-label:not(.sp-library-label--shelf) { letter-spacing: 0; text-transform: none; }

/* Frame drawn by assets/js/patterns/sp-show.js ("See it on the site"). */
.sp-show-frame {
	position: absolute;
	z-index: 9998;
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--primary), 0 0 0 9999px color-mix(in srgb, var(--wp--preset--color--black) 35%, transparent);
	pointer-events: none;
}
.sp-show-frame__tag {
	position: absolute;
	top: 0;
	left: 0;
	padding: 6px 12px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black-light);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}