/**
 * Technology logo strip.
 *
 * Brand marks arrive at every aspect ratio — square icons, wide wordmarks — so
 * each logo is capped by height and left to take whatever width it needs. That
 * is what makes a row of mixed logos read as evenly weighted; sizing by width
 * would leave the square marks tiny next to the wordmarks.
 */

/*
 * A hairline above the band, rather than a tinted background: several of these
 * marks are PNGs with an opaque white square behind them, which would show as a
 * box on any colour other than the page.
 */
.dk-tech-strip {
	--dk-tech-logo-height: 30px;
	--dk-tech-logo-max-width: 120px;
	--dk-tech-gap: 2rem;

	padding-block: 2.5rem;
	border-top: 1px solid var(--dk-border);
}

/*
 * Sized to match the "Our Customers" and "Our Associations" headings beside it:
 * Montserrat 700 in ink at the h2 step, with a teal eyebrow above at the h3
 * step. Both stay overridable from the widget's typography controls.
 */
.dk-tech-strip__eyebrow {
	margin: 0 0 0.35rem;
	color: var(--dk-primary);
	font-family: var(--dk-font-heading);
	font-size: var(--dk-h3);
	font-weight: 400;
	line-height: 1.1;
	text-align: center;
}

.dk-tech-strip__title {
	margin: 0 0 2rem;
	color: var(--dk-ink);
	font-size: var(--dk-h2);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}

/*
 * Without Swiper — no Elementor, or the script blocked — the row still has to
 * be reachable, so the viewport scrolls sideways. Swiper sets overflow itself
 * once it takes over, so the two never fight.
 */
.dk-tech-strip__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.dk-tech-strip--carousel .dk-tech-strip__list {
	flex-wrap: nowrap;
}

/*
 * Each slide is only as wide as its mark plus half the gap on either side, so
 * the spacing between logos stays even whatever their shapes are.
 */
.dk-tech-strip--carousel .dk-tech-strip__item {
	width: auto;
	height: auto;
	padding-inline: calc(var(--dk-tech-gap) / 2);
	flex: 0 0 auto;
}

/* Matches the teal dots under the customers and associations carousels. */
.dk-tech-strip .swiper-pagination {
	position: static;
	margin-top: 1.5rem;
	--swiper-pagination-color: var(--dk-primary);
	--swiper-pagination-bullet-inactive-color: var(--dk-primary);
	--swiper-pagination-bullet-inactive-opacity: 0.35;
}

.dk-tech-strip__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	gap: 1.5rem var(--dk-tech-gap);
	align-items: center;
	justify-content: center;
	list-style: none;
}

.dk-tech-strip__item {
	display: inline-flex;
	min-height: var(--dk-tech-logo-height);
	align-items: center;
	justify-content: center;
}

/*
 * Qualified by the section rather than left as a lone class: on the front page
 * the band sits inside Elementor's wrapper, where `.elementor img` sets
 * height:auto and max-width:100% and would otherwise win on specificity,
 * blowing each mark up to its natural size.
 */
.dk-tech-strip .dk-tech-strip__logo {
	width: auto;
	max-width: var(--dk-tech-logo-max-width);
	height: var(--dk-tech-logo-height);
	object-fit: contain;
}

/*
 * Shown in place of a mark until a logo is uploaded for that technology, so a
 * gap in the set reads as a gap rather than a shorter strip.
 */
.dk-tech-strip__name {
	color: var(--dk-body);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.dk-tech-strip {
		--dk-tech-logo-height: 38px;
		--dk-tech-logo-max-width: 150px;
		--dk-tech-gap: 2.5rem;

		padding-block: 3rem;
	}

	.dk-tech-strip__list {
		row-gap: 2rem;
	}
}