/**
 * [blg_partners] shortcode — Partners page tiers.
 * Logo grid for the logo tiers (Platinum/Gold/Silver); 2-column name list for
 * the name-only tiers (Bronze/Rainbow/Equality).
 */

/* ── Logo grid ──────────────────────────────────────────────────────────────── */
.kd-partner-grid {
	list-style: none;
	margin: 0 auto 2rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2rem 3rem;
}

.kd-partner-grid__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	/* No chip background — logos sit directly on the section bg. Client to supply
	   clean, consistent logo assets. min-w/h keeps cells aligned in the wrapped grid. */
	min-width: 11rem;
	min-height: 7rem;
	padding: var(--blg-space-md);
}

.kd-partner-grid__item a {
	display: inline-flex;
}

.kd-partner-grid__logo {
	width: auto;
	height: auto;
	object-fit: contain;
	max-width: var(--blg-partner-logo-w, 190px);
	max-height: var(--blg-partner-logo-h, 120px);
}

.kd-partner-grid--large {
	--blg-partner-logo-w: 240px;
	--blg-partner-logo-h: 150px;
}
.kd-partner-grid--medium {
	--blg-partner-logo-w: 190px;
	--blg-partner-logo-h: 120px;
}
.kd-partner-grid--small {
	--blg-partner-logo-w: 150px;
	--blg-partner-logo-h: 95px;
}

/* Logo-tier partner that has no logo set yet — show its name so it isn't lost. */
.kd-partner-grid__item--noimg {
	font-family: var(--blg-font-heading, sans-serif);
	font-weight: 600;
	color: var(--blg-color-primary);
}

/* ── Name list (2 columns) ──────────────────────────────────────────────────── */
.kd-partner-names {
	list-style: none;
	margin: 0 auto 2rem;
	padding: 0;
	max-width: 760px;
	columns: var(--blg-partner-cols, 2);
	column-gap: 3rem;
}

.kd-partner-names__item {
	break-inside: avoid;
	padding: 0.4rem 0;
	text-align: center;
	font-size: 1.0625rem; /* 17px */
}

.kd-partner-names__item a {
	color: inherit;
	text-decoration: none;
}

.kd-partner-names__item a:hover,
.kd-partner-names__item a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.kd-partner-names {
		columns: 1;
	}
}

/* ── Carousel variant — [blg_partners layout="carousel"] ─────────────────────
   Reuses the .kd-carousel JS mechanics + base styles (card-carousel.css /
   assets/js/card-carousel.js), driven in PAGED mode: slides are sized so a
   whole number fill one viewport — 4 desktop / 2 tablet / 1 mobile — and the JS
   pages by one viewport, generating one dot per page. Arrows keep the base
   filled-purple-circle style (Figma node 258:2600); base CSS hides them ≤768px
   so mobile is touch-swipe only. Only the logo-slide sizing lives here.        */

.kd-carousel--logos .kd-carousel__track {
	align-items: stretch;
}

/* Logo slide — exactly 4 per viewport on desktop. The track gap is 1.25rem, so
   4 slides + 3 gaps = 100%; flex-basis drops to 2-up / 1-up below. */
.kd-carousel__logo {
	flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px; /* never collapses before logos load */
	/* No chip background — logos sit directly on the section bg. Client to supply
	   clean, consistent logo assets. Pairs with the 1.25rem track gap between slides. */
	padding: var(--blg-space-md);
	scroll-snap-align: start;
}

.kd-carousel__logo a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.kd-carousel__logo img {
	width: 100%;
	max-width: 260px;
	max-height: 120px;
	height: auto;
	object-fit: contain;
	display: block;
	margin-inline: auto;
}

/* Tablet — 2 logos per viewport. */
@media (max-width: 1024px) {
	.kd-carousel__logo {
		flex-basis: calc((100% - 1.25rem) / 2);
	}
}

/* Mobile — 1 logo per viewport; touch-swipe (base CSS hides arrows ≤768px). */
@media (max-width: 600px) {
	.kd-carousel__logo {
		flex-basis: 100%;
	}

	.kd-carousel__logo img {
		max-width: 220px;
	}
}