/**
 * CV Compatibility Centre: what every screen of the plugin shares.
 *
 * The palette comes from the theme's own global colours (GeneratePress
 * --gray-*, --brand-*), with the design system's values as a fallback, so
 * the plugin follows the site if its colours ever change. Loaded first, as
 * a dependency of guide.css, finder.css and compatible-parts.css.
 */

:root {
	--cg-white: #fff;
	--cg-gray-50: var(--gray-50, #fafaf9);
	--cg-gray-100: var(--gray-100, #f5f5f4);
	--cg-gray-200: var(--gray-200, #e7e5e4);
	--cg-gray-300: var(--gray-300, #d7d3d0);
	--cg-gray-400: var(--gray-400, #a9a29d);
	--cg-gray-500: var(--gray-500, #79716b);
	--cg-gray-600: var(--gray-600, #57534e);
	--cg-gray-700: var(--gray-700, #44403c);
	--cg-gray-800: var(--gray-800, #292524);
	--cg-gray-950: var(--gray-950, #171412);
	--cg-brand: var(--brand-500, #e0302c);
	--cg-brand-600: var(--brand-600, #c6241f);
	--cg-brand-700: var(--brand-700, #a4201c);
	--cg-ease: cubic-bezier(.4, 0, .2, 1);
}

/* the small uppercase label ("In short", "Guides", "Compatible parts") */
.cg-label {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cg-gray-500);
}

/* read by screen readers, not shown */
.cg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── hub cards: logo sizes from the Figma (80 / 96 / 128) ──
   GenerateBlocks adds cg-logo cg-logo--{{cg_logo_size}} to the image.
   img.cg-logo[class] outranks the Media block's own single-class rule
   (width:auto, object-fit:cover), whatever order the CSS loads in. */
img.cg-logo[class] {
	display: block;
	width: var(--cg-logo-w, 96px);
	max-width: 100%;
	height: auto;
	max-height: 32px;
	object-fit: contain;
	object-position: left center;
}

img.cg-logo--small[class] {
	--cg-logo-w: 80px;
}

img.cg-logo--medium[class] {
	--cg-logo-w: 96px;
}

img.cg-logo--large[class] {
	--cg-logo-w: 128px;
}

/* logos scale together on tablets and phones, so their balance holds */
@media (max-width: 1024px) {
	img.cg-logo[class] {
		width: calc(var(--cg-logo-w, 96px) * .85);
	}
}