/**
 * Footer Logos — frontend styles.
 * The layout is driven entirely by CSS custom properties set inline by the
 * shortcode, so themes and page builders can override anything cleanly.
 */

.chfl-footer-logos {
	--chfl-desktop: 5;
	--chfl-tablet: 3;
	--chfl-mobile: 1;
	--chfl-col-gap: 40px;
	--chfl-row-gap: 30px;
	--chfl-logo-gap: 24px;
	--chfl-max-h: 55px;
	--chfl-logo-align: flex-start;
	--chfl-valign: center;
	--chfl-title-align: left;

	box-sizing: border-box;
	width: 100%;
}

.chfl-footer-logos *,
.chfl-footer-logos *::before,
.chfl-footer-logos *::after {
	box-sizing: border-box;
}

.chfl-grid {
	display: grid;
	grid-template-columns: repeat(var(--chfl-desktop), minmax(0, 1fr));
	column-gap: var(--chfl-col-gap);
	row-gap: var(--chfl-row-gap);
	align-items: start;
}

.chfl-col {
	min-width: 0;
}

.chfl-col-title {
	margin: 0 0 16px;
	padding: 0;
	font-size: 0.95em;
	font-weight: 400;
	line-height: 1.3;
	color: #6b7280;
	text-align: var(--chfl-title-align);
}

.chfl-logos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chfl-logo-gap);
	justify-content: var(--chfl-logo-align);
	align-items: var(--chfl-valign);
}

.chfl-logo {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}

.chfl-logo-img {
	display: block;
	width: auto;
	height: auto;
	max-height: var(--chfl-max-h);
	max-width: 100%;
	object-fit: contain;
}

.chfl-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	transition: opacity 0.2s ease;
}

.chfl-logo-link:hover,
.chfl-logo-link:focus {
	opacity: 0.75;
}

/* Optional grayscale treatment. */
.chfl-grayscale .chfl-logo-img {
	filter: grayscale(100%);
	opacity: 0.85;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.chfl-grayscale .chfl-logo:hover .chfl-logo-img {
	filter: grayscale(0);
	opacity: 1;
}

/* ---------------- Tablet ---------------- */
@media (max-width: 1024px) {
	.chfl-grid {
		grid-template-columns: repeat(var(--chfl-tablet), minmax(0, 1fr));
	}

	.chfl-responsive-spacing .chfl-grid {
		column-gap: calc(var(--chfl-col-gap) * 0.7);
		row-gap: calc(var(--chfl-row-gap) * 0.8);
	}
}

/* ---------------- Mobile ---------------- */
@media (max-width: 600px) {
	.chfl-grid {
		grid-template-columns: repeat(var(--chfl-mobile), minmax(0, 1fr));
	}

	.chfl-responsive-spacing .chfl-grid {
		column-gap: calc(var(--chfl-col-gap) * 0.5);
		row-gap: calc(var(--chfl-row-gap) * 1.1);
	}

	.chfl-responsive-spacing .chfl-logos {
		gap: calc(var(--chfl-logo-gap) * 0.7);
	}

	.chfl-mobile-center .chfl-col-title {
		text-align: center;
	}

	.chfl-mobile-center .chfl-logos {
		justify-content: center;
	}
}