/**
 * HTG Logo Bar — styles
 *
 * Single-row press/client/partner logo strip. Eyebrow on the left,
 * logos evenly spaced on the right. Optional uniform greyscale.
 */

.htg-logo-bar {
	width: 100%;
	padding-block: var(--sp-lg);
}

/* --- Background variants ---------------------------------------- */

.htg-logo-bar--bg-light-grey {
	background: var(--c-cream-lo);
	color: var(--c-ink);
	padding-inline: var(--container-pad-x);
}
.htg-logo-bar--bg-white {
	background: var(--c-white);
	color: var(--c-ink);
	padding-inline: var(--container-pad-x);
}
.htg-logo-bar--bg-dark-grey {
	background: var(--c-footer-bg);
	color: var(--c-white);
	padding-inline: var(--container-pad-x);
}
.htg-logo-bar--bg-navy {
	background: var(--c-navy);
	color: var(--c-white);
	padding-inline: var(--container-pad-x);
}

/* --- Inner constrained container -------------------------------- */

.htg-logo-bar__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
}

/* --- Eyebrow ---------------------------------------------------- */

.htg-logo-bar__eyebrow {
	flex-shrink: 0;
	max-width: 27ch;
	padding-right: var(--sp-lg);
	border-right: 1px solid var(--c-ink-10);
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--c-ink-70);
	text-wrap: balance;
}

/* On dark bg variants, eyebrow text + divider flip to white-ish */
.htg-logo-bar--bg-dark-grey .htg-logo-bar__eyebrow,
.htg-logo-bar--bg-navy .htg-logo-bar__eyebrow {
	color: rgba(255, 255, 255, 0.65);
	border-right-color: rgba(255, 255, 255, 0.15);
}

/* --- Logos row -------------------------------------------------- */

.htg-logo-bar__logos {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	/* 10px ≈ 25% of var(--sp-lg) — the previous value with space-between
	   was distributing too much room between logos. */
	gap: 10px;
}

.htg-logo-bar__logo {
	display: inline-flex;
	align-items: center;
	transition: opacity var(--dur-base) var(--ease-out),
		filter var(--dur-base) var(--ease-out);
}

.htg-logo-bar__img {
	max-height: var(--htg-logo-max-height, 35px);
	width: auto;
	height: auto;
	display: block;
}

/* Greyscale + dim by default; full color on hover/focus when greyscale toggle is on */
.htg-logo-bar--greyscale .htg-logo-bar__img {
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter var(--dur-base) var(--ease-out),
		opacity var(--dur-base) var(--ease-out);
}

.htg-logo-bar--greyscale a.htg-logo-bar__logo:hover .htg-logo-bar__img,
.htg-logo-bar--greyscale a.htg-logo-bar__logo:focus-visible .htg-logo-bar__img {
	filter: grayscale(0);
	opacity: 1;
}

/* On dark bg variants, invert the greyscale logos so they stay legible */
.htg-logo-bar--greyscale.htg-logo-bar--bg-dark-grey .htg-logo-bar__img,
.htg-logo-bar--greyscale.htg-logo-bar--bg-navy .htg-logo-bar__img {
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.7;
}

/* --- Responsive ------------------------------------------------- */

@media (max-width: 768px) {
	.htg-logo-bar__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-md);
	}
	.htg-logo-bar__eyebrow {
		max-width: none;
		padding-right: 0;
		border-right: 0;
	}
	.htg-logo-bar__logos {
		width: 100%;
		justify-content: flex-start;
		gap: var(--sp-md);
	}
}

/* --- Editor-specific tweaks ------------------------------------ */

.editor-styles-wrapper .htg-logo-bar {
	max-width: 100%;
}