/* 70 Logo wall + carousel controls. Figma Section/Logo wall 212:1087 / 212:1439, Carousel controls 219:382.
   Sets of 8 logos. No JS: set 1 shows, controls are never rendered. With JS (kd-home.js): crossfade
   between sets, dots + pause/play toggle are injected. */
.kd-home .kd-home-logos__inner {
	display: flex;
	flex-direction: column;
	gap: var(--kdh-s-32);
}
.kd-home .kd-home-logos__title { margin: 0; font-size: var(--kdh-fs-h2); line-height: var(--kdh-lh-h2); letter-spacing: var(--kdh-ls-h2); }

.kd-home .kd-home-logos__carousel {
	/* tile inner box (tile minus padding): used to turn the per-logo percentages into caps */
	--kd-tile-h: 88px;
	--kd-tile-ch: 64px;
	--kd-tile-gap: var(--kdh-s-16);
	display: flex;
	flex-direction: column;
	gap: var(--kdh-s-32);
}
.kd-home .kd-home-logos__sets { display: grid; }
.kd-home .kd-home-logos__set {
	list-style: none;
	margin: 0;
	padding: 0;
	/* flex, not grid, so a short last set centres its last row */
	--kd-cols: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--kd-tile-gap);
}
.kd-home .kd-home-logos__set[hidden] { display: none; }
.kd-home .kd-home-logos__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--kd-tile-h);
	margin: 0;
	padding: 12px 16px;
	background: var(--kdh-white);
	border: 1px solid var(--kdh-border);
	border-radius: var(--kdh-r-sm);
	list-style: none;
	box-sizing: border-box;
	flex: 0 0 calc((100% - (var(--kd-cols) - 1) * var(--kd-tile-gap)) / var(--kd-cols));
	min-width: 0;
}
.kd-home .kd-home-logos__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: calc(var(--lw, 90) * 1%);
	max-height: calc(var(--lh, 80) * var(--kd-tile-ch) / 100);
	object-fit: contain;
}
/* <picture> tiles (art-directed logo, e.g. CWEIA's emblem on phones): keep the img a flex item of the tile */
.kd-home .kd-home-logos__tile > picture { display: contents; }
@media (max-width: 767.98px) {
	.kd-home .kd-home-logos__logo {
		max-width: calc(var(--lw-sm, var(--lw, 90)) * 1%);
		max-height: calc(var(--lh-sm, var(--lh, 80)) * var(--kd-tile-ch) / 100);
	}
}

/* Enhanced (JS): all sets stack in one grid cell and crossfade */
.kd-home .kd-home-logos__carousel.is-enhanced .kd-home-logos__set {
	display: flex;
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility 0s linear .6s;
}
.kd-home .kd-home-logos__carousel.is-enhanced .kd-home-logos__set.is-current {
	opacity: 1;
	visibility: visible;
	transition: opacity .6s ease, visibility 0s;
}

/* Controls (injected by JS) */
.kd-home .kd-home-logos__controls {
	display: flex;
	align-items: center;
	gap: var(--kdh-s-16);
}
.kd-home .kd-home-logos__dots { display: flex; align-items: center; gap: 0; }
.kd-home .kd-home-logos__dot {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	margin: 0;
	padding: 0 4px;
	background: transparent;
	border: 0;
	border-radius: var(--kdh-r-pill);
	cursor: pointer;
	box-shadow: none;
}
.kd-home .kd-home-logos__dot::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: var(--kdh-r-pill);
	background: var(--kdh-stone);
	transition: width .2s ease, background-color .2s ease;
}
.kd-home .kd-home-logos__dot[aria-current="true"]::before { width: 24px; background: var(--kdh-navy); }
.kd-home .kd-home-logos__dot:hover::before { background: var(--kdh-navy); }
.kd-home .kd-home-logos__toggle {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: var(--kdh-white);
	color: var(--kdh-navy);
	border: 1px solid var(--kdh-stone);
	border-radius: var(--kdh-r-pill);
	cursor: pointer;
	box-shadow: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.kd-home .kd-home-logos__toggle:hover { background: var(--kdh-cloud); border-color: var(--kdh-navy); }
.kd-home .kd-home-logos__toggle svg {
	display: block;
	width: 24px;
	height: 24px;
	max-width: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.kd-home .kd-home-logos__toggle .kd-icon-play { display: none; }
.kd-home .kd-home-logos__toggle.is-paused .kd-icon-play { display: block; }
.kd-home .kd-home-logos__toggle.is-paused .kd-icon-pause { display: none; }
.kd-home .kd-home-logos__dot:focus,
.kd-home .kd-home-logos__toggle:focus { outline: none; }
.kd-home .kd-home-logos__dot:focus-visible,
.kd-home .kd-home-logos__toggle:focus-visible { outline: none; box-shadow: var(--kdh-focus-light); }

@media (min-width: 768px) {
	.kd-home .kd-home-logos__set { --kd-cols: 4; }
}
@media (min-width: 1024px) {
	.kd-home .kd-home-logos__inner { gap: var(--kdh-s-64); }
	.kd-home .kd-home-logos__carousel {
		--kd-tile-h: 112px;
		--kd-tile-ch: 80px;
		--kd-tile-gap: var(--kdh-s-24);
		gap: var(--kdh-s-64);
	}
	.kd-home .kd-home-logos__tile { padding: 16px 24px; }
}