/* =============================================================
   Social Proof — Logos Strip  (_logos-strip.css)

   Compact strip: eyebrow label + centred flex row of logos.
   Logos render in greyscale at reduced opacity; hover reveals
   full colour. Scoped to .vsk-logos-strip — loaded lazily via
   wp_enqueue_block_style() and into the editor via add_editor_style().
   ============================================================= */

/* ── Section wrapper ────────────────────────────────────────── */

.vsk-logos-strip {
	background-color: var(--raised);
	padding-block: var(--wp--preset--spacing--50, 2.5rem);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

/* ── Eyebrow label ───────────────────────────────────────────── */

.vsk-logos-strip__eyebrow {
	color: var(--fg-subtle);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-block-end: 1.75rem !important;
}

/* ── Logo row ────────────────────────────────────────────────── */
/*
   WP flex layout handles wrap and centering via block attrs;
   we just tighten the gap here.
*/

.vsk-logos-strip__row.wp-block-group {
	gap: 1rem 2.5rem !important;
}

/* ── Individual logo ─────────────────────────────────────────── */

.vsk-logos-strip__logo.wp-block-image {
	margin: 0 !important;
	flex-shrink: 0;
}

.vsk-logos-strip__logo.wp-block-image img {
	height: 2.5rem;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	display: block;
	filter: grayscale(100%) opacity(0.45);
	transition: filter 0.2s ease;
}

.vsk-logos-strip__logo.wp-block-image img:hover {
	filter: grayscale(0%) opacity(1);
}

/* ── Responsive ──────────────────────────────────────────────── */
/*
   Tighten the gap on small screens so the logos still fit in
   two or three rows without feeling cramped.
*/

@media (max-width: 479px) {
	.vsk-logos-strip__row.wp-block-group {
		gap: 1rem 1.5rem !important;
	}

	.vsk-logos-strip__logo.wp-block-image img {
		height: 2rem;
		max-width: 110px;
	}
}