/*
 * Banda de logo-uri care curge de la dreapta la stanga, cu mai multe logo-uri pe
 * coloana. Fara JS si fara librarii: doar un @keyframes care muta banda cu -50%.
 *
 * Folosita pe Acasa (front-page.php) si pe paginile page-perpetuum.php
 * (/ce-facem/, /amenajari/), de aceea sta in fisier separat - homepage.css nu se
 * incarca pe paginile custom, iar pages-perpetuum.css nu se incarca pe Acasa.
 *
 * Markup-ul si umplerea echilibrata a coloanelor: perpetuum_logo_columns() din
 * functions.php. Bucla e fara salt fiindca se dubleaza lista de COLOANE, deci
 * cele doua copii sunt identice si -50% cade exact la capat de coloana.
 */

/* masca de fade pe margini, ca logo-urile sa nu apara/dispara brusc */
.logo-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-marquee__track {
	display: flex; align-items: stretch;
	gap: 16px; width: max-content;
	animation: logo-marquee 70s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
/* coloanele au 2 sau 3 logo-uri; cele scurte se centreaza pe verticala, ca
   locul liber sa para spatiere, nu o gaura */
.logo-marquee__col {
	flex: 0 0 auto;
	display: grid; grid-auto-rows: max-content; gap: 16px;
	align-content: center;
	width: 190px;
}
.logo-marquee__card {
	display: flex; align-items: center; justify-content: center;
	height: 96px; padding: 14px;
	background: #fff; border: 1px solid #e7e9ea; border-radius: 5px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.logo-marquee__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(24,25,27,.11);
	border-color: #d9dcdd;
}
.logo-marquee__card img {
	max-width: 100%; max-height: 52px;
	width: auto; height: auto;
	object-fit: contain;
}
.logo-marquee a:focus-visible { outline: 3px solid #6cbe45; outline-offset: 3px; }

@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 767px) {
	.logo-marquee__track { gap: 12px; }
	.logo-marquee__col { width: 150px; gap: 12px; }
	.logo-marquee__card { height: 82px; padding: 12px; }
	.logo-marquee__card img { max-height: 44px; }
}
/* fara animatie: banda devine o grila care se aranjeaza pe randuri */
@media (prefers-reduced-motion: reduce) {
	.logo-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: flex-start; }
}