/**
 * Partner logo row ("Unsere Partner") on the homepage.
 *
 * These rules were originally pasted as a <style> block into the ACF WYSIWYG
 * field, where the editor turned every line break into a literal <br /> — the
 * CSS parser then dropped everything after the first rule, so none of it ever
 * applied. Moved here so it actually works.
 *
 * Note the extra specificity on the image rules: _custom-content.scss has
 * `.section_content img[src$=".svg"] { max-width: 280px; margin-top: -4em }`,
 * an offset meant for a single decorative SVG. The partner logos are SVGs in
 * such a section, so without this they get pulled 4em out of place.
 */

.partner-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	margin: 2rem 0;
	padding-block: 2rem;
}

.partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
	text-decoration: none;
}

.partner-logo:hover img {
	opacity: 0.8;
}

.section_content .partner-logos img[src$=".svg"],
.partner-logos img {
	margin-top: 0;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.partner-desc {
	border-top: 2px solid #1e2e55;
	padding-top: 2rem;
}

.balance {
	text-wrap: balance;
}

/* small only — stack the logos rather than squeezing three across a phone */
@media screen and (max-width: 39.9375em) {

	.partner-logos {
		flex-direction: column;
		gap: 2.5rem;
	}

	/* Full-width items, so the images' percentage max-width below has a
	   definite containing block to resolve against — in a shrink-to-fit flex
	   item it goes cyclic and the logos collapse to zero. */
	.partner-logos .partner-logo {
		width: 100%;
	}

	.section_content .partner-logos img[src$=".svg"],
	.partner-logos img {
		max-width: 62%;
		max-height: 60px;
	}
}

/**
 * Fallback while the block still uses the old editor table. Harmless once the
 * markup is flex — these selectors simply stop matching.
 */
.partner-logos table {
	table-layout: fixed;
	max-width: 100%;
	margin-bottom: 0;
}

@media screen and (max-width: 39.9375em) {

	.partner-logos table,
	.partner-logos tbody,
	.partner-logos tr,
	.partner-logos td {
		display: block;
		width: 100% !important;
	}

	.partner-logos td {
		text-align: center;
		padding: 1.25rem 0;
	}
}