/**
 * BRO Electrical — shared partner/trade-logo carousel.
 * Used on the Builders & Developers page and the About page (see
 * bro_electrical_child_render_partner_logos() in functions.php, which
 * renders the shared markup both pages load this stylesheet for).
 *
 * A continuous CSS-animated marquee, not the paginated case-study
 * carousel (carousel.js) -- no JS at all is needed here: the loop,
 * the hover-pause and the reduced-motion fallback are all pure CSS.
 * The logo list is rendered twice by PHP so translateX(-50%) is
 * exactly one full, seamless cycle.
 *
 * Card sizing is deliberately modest (not a giant hero panel) so the
 * lowest-resolution supplied logo (Newton Extensions, 189x72) is
 * naturally shown at or below its native size rather than upscaled --
 * object-fit: contain guarantees no distortion regardless, but keeping
 * the box modest avoids any logo needing to be enlarged to fill it.
 */

.bro-partner-logos {
	overflow: hidden;
	/* Soft edge fade so logos entering/leaving the loop don't hard-cut
	   at the container edge. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.bro-partner-logos__track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: clamp(1rem, 3vw, 1.75rem);
	animation: bro-partner-logos-scroll 34s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
	.bro-partner-logos:hover .bro-partner-logos__track {
		animation-play-state: paused;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bro-partner-logos__track {
		animation: none;
	}
}

@keyframes bro-partner-logos-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.bro-partner-logos__card {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 110px;
	padding: 1.5rem;
	background: var(--bro-white);
	border: 1px solid var(--bro-border-on-light);
	border-radius: var(--bro-radius-sm);
	transition: border-color var(--bro-transition-base), box-shadow var(--bro-transition-base);
}

/* width/height:100% + object-fit:contain (rather than width/height:auto
   clamped by max-width/max-height) -- both produce the identical visible
   result when they work, but the auto/auto + dual percentage-max
   combination on a flex-item <img> is a documented cross-browser-fragile
   pattern (particularly WebKit/mobile Safari), and can fail differently
   per image depending on its own aspect ratio -- exactly the "some
   logos render, some don't" symptom seen on mobile. Filling the box
   with width/height:100% first and letting object-fit do the actual
   fit-without-cropping is the more robust, universally well-supported
   route to the same visual result. */
.bro-partner-logos__card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bro-partner-logos__card:focus-visible {
	outline: 2px solid var(--bro-orange);
	outline-offset: 3px;
	border-radius: var(--bro-radius-sm);
}

@media (hover: hover) and (pointer: fine) {
	.bro-partner-logos__card:hover {
		border-color: var(--bro-orange);
		box-shadow: 0 4px 16px -8px rgba(20, 23, 26, 0.25);
	}
}

@media (max-width: 640px) {
	.bro-partner-logos__card {
		width: 148px;
		height: 92px;
		padding: 1.1rem;
	}
}