/*
 * BWS Designer Showcase — frontend styles.
 *
 * Colour policy: inherit from the active theme. Links use the theme's link
 * styles (no hardcoded blue), text uses currentColor, surfaces use the theme's
 * background/foreground tokens via WordPress core CSS variables (with very
 * light fallbacks so cards still look sensible if the theme exposes nothing).
 */

.kdc-bws-dzr-showcase {
	--cols: 3;
	/* Theme-driven palette with safe fallbacks. */
	--kdc-bws-dzr-surface: var( --wp--preset--color--background, transparent );
	--kdc-bws-dzr-surface-alt: var( --wp--preset--color--tertiary, rgba( 0, 0, 0, .03 ) );
	--kdc-bws-dzr-border: currentColor;
	--kdc-bws-dzr-muted: currentColor;
	margin: 0;
	padding: 0;
	color: inherit;
	box-sizing: border-box;
}

.kdc-bws-dzr-showcase *,
.kdc-bws-dzr-showcase *::before,
.kdc-bws-dzr-showcase *::after {
	box-sizing: border-box;
}

.kdc-bws-dzr-showcase--w-wide {
	margin-left: calc( 50% - 50vw + 32px );
	margin-right: calc( 50% - 50vw + 32px );
	max-width: none;
}

.kdc-bws-dzr-showcase--w-full {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	max-width: none;
}

/* Grid */
.kdc-bws-dzr-showcase__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( var( --cols, 3 ), minmax( 0, 1fr ) );
	gap: 24px;
}

@media ( max-width: 980px ) {
	.kdc-bws-dzr-showcase__grid {
		grid-template-columns: repeat( min( var( --cols, 3 ), 2 ), minmax( 0, 1fr ) );
	}
}

@media ( max-width: 600px ) {
	.kdc-bws-dzr-showcase__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* Card — borders/surfaces are theme-derived; no hardcoded slate. */
.kdc-bws-dzr-showcase__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	background: var( --kdc-bws-dzr-surface );
	border: 1px solid;
	border-color: rgba( 0, 0, 0, .1 );
	border-radius: 12px;
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.kdc-bws-dzr-showcase__card:hover {
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .08 );
	border-color: rgba( 0, 0, 0, .25 );
}

/* Logo — neutral container, image fills it. */
.kdc-bws-dzr-showcase__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	background: var( --kdc-bws-dzr-surface-alt );
	border: 3px solid var( --kdc-bws-dzr-surface, #fff );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, .1 );
	text-decoration: none;
	color: inherit;
}

.kdc-bws-dzr-showcase__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Brand name — inherits theme link colour & hover. */
.kdc-bws-dzr-showcase__name {
	display: block;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.3;
	/* color & hover come from theme link styles via cascade. */
}

/* When the name isn't a link, fall back to body text colour. */
span.kdc-bws-dzr-showcase__name {
	color: inherit;
}

/* Description — theme body text colour, slightly muted via opacity. */
.kdc-bws-dzr-showcase__desc {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.55;
	color: inherit;
	opacity: 0.8;
	text-align: center;
}

.kdc-bws-dzr-showcase__desc--full {
	text-align: left;
}

.kdc-bws-dzr-showcase__desc--full p {
	margin: 0 0 0.6em;
}

.kdc-bws-dzr-showcase__desc--full p:last-child {
	margin-bottom: 0;
}

/* Product strip — image tiles inherit hover from theme links. */
.kdc-bws-dzr-showcase__products {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-top: auto;
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 6px;
}

.kdc-bws-dzr-showcase__product a {
	display: block;
	width: 100%;
	/* Matches the site's WooCommerce product image ratio (2:3 portrait). */
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: var( --kdc-bws-dzr-surface-alt );
	border: 1px solid;
	border-color: rgba( 0, 0, 0, .08 );
	transition: border-color .18s ease, transform .18s ease;
}

.kdc-bws-dzr-showcase__product a:hover {
	border-color: rgba( 0, 0, 0, .25 );
	transform: translateY( -1px );
}

.kdc-bws-dzr-showcase__product img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Empty / status */
.kdc-bws-dzr-showcase__empty {
	margin: 24px 0 0;
	text-align: center;
	color: inherit;
	opacity: 0.7;
	font-size: 0.95em;
}

.kdc-bws-dzr-showcase__sentinel {
	height: 1px;
	margin-top: 16px;
}

.kdc-bws-dzr-showcase__status {
	min-height: 24px;
	margin-top: 12px;
	text-align: center;
	font-size: 0.9em;
	color: inherit;
	opacity: 0.7;
}

.kdc-bws-dzr-showcase__status.is-loading::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	vertical-align: middle;
	opacity: 0.6;
	animation: kdc-bws-dzr-showcase-spin .8s linear infinite;
}

@keyframes kdc-bws-dzr-showcase-spin {
	to { transform: rotate( 360deg ); }
}