/**
 * Stiluri frontend pentru bara ticker, grid-ul de logo-uri și bannere.
 *
 * NOU în v2.0.2: valorile numerice de aici (mărime font, înălțime, număr pe
 * rând, object-fit) sunt doar FALLBACK — dacă administratorul a completat
 * "Setările de afișare" din ecranul de admin, un bloc <style> generat dinamic
 * (vezi genereaza_css_dinamic() în class-jmd-parteneri-frontend.php) e adăugat
 * imediat după acest fișier, pe aceeași cascadă CSS, și suprascrie exact
 * aceleași selectoare. Structura (flex, wrap, poziționare) rămâne definită
 * aici; doar valorile personalizabile sunt suprascrise dinamic.
 *
 * NOU în v2.0.3: width/height/object-fit pe imagini au !important. Motiv:
 * majoritatea temelor WP și Elementor includ o regulă globală de tipul
 * `img { height: auto; max-width: 100%; }` pentru imagini responsive — fără
 * !important, acea regulă poate câștiga cascada și strica uniformizarea
 * dimensiunilor (imaginile revin la proporțiile lor originale, diferite de
 * la un fișier la altul, în loc să umple uniform cutia alocată).
 */

.jmd-ticker-wrap {
	overflow: hidden;
	white-space: nowrap;
	padding: 6px 0;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
}

.jmd-ticker-track {
	display: inline-flex;
	will-change: transform;
}

/* Valori implicite (font/mărime/greutate/spațiere) — suprascrise dinamic
   din Setările de stil ale bării, dacă administratorul le-a personalizat. */
.jmd-ticker-track span {
	font-family: 'Onest', sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	color: #5F5F67;
	margin-right: 60px;
	flex-shrink: 0;
}

/* Link-urile din ticker păstrează exact stilul textului simplu — fără subliniere,
   fără schimbare de culoare — ca să nu altereze vizual design-ul original. */
.jmd-ticker-track span a {
	color: inherit;
	text-decoration: none;
}

.jmd-ticker-track span a:hover {
	color: inherit;
	text-decoration: none;
}

/**
 * === Logo-uri parteneri generali — DOUĂ blocuri DOM separate ===
 *
 * 1. .jmd-logo-grid  → grid static, vizibil pe desktop/tabletă, ASCUNS pe mobil.
 * 2. .jmd-logo-loop-wrap → buclă orizontală infinită, ASCUNSĂ pe desktop/tabletă,
 *    vizibilă doar pe mobil (≤600px).
 *
 * Comutarea e strict prin CSS (display:none / display:block în @media) —
 * JS din frontend.js nu atinge NICIODATĂ .jmd-logo-grid, deci e structural
 * imposibil ca bucla mobilă să adauge vreodată elemente vizibile pe
 * desktop/tabletă, indiferent de resize, preview Elementor etc.
 */

.jmd-logo-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: 100%;
	padding: 16px 0;
}

.jmd-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Valoare implicită: 8 pe rând. Suprascrisă dinamic din admin. */
	flex: 0 0 calc((100% - 7 * 24px) / 8) !important;
	max-width: calc((100% - 7 * 24px) / 8) !important;
	height: 60px !important;
	overflow: hidden;
}

.jmd-logo-item img.jmd-logo-img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block;
	filter: grayscale(100%);
	opacity: 0.8;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

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

/* Pe mobil, grid-ul static dispare complet — rămâne doar bucla de mai jos. */
@media (max-width: 600px) {
	.jmd-logo-grid {
		display: none !important;
	}
}

/**
 * Wrapper-ul buclei mobile — ascuns implicit (afișat DOAR ≤600px), cu
 * overflow:hidden (taie conținutul care depășește lățimea, intenționat —
 * așa funcționează orice buclă orizontală infinită) și fade pe margini,
 * identic mecanismului de la bara de text (.jmd-ticker-wrap).
 */
.jmd-logo-loop-wrap {
	display: none;
	overflow: hidden;
	width: 100%;
	padding: 8px 0;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 8%,
		black 92%,
		transparent 100%
	);
}

@media (max-width: 600px) {
	.jmd-logo-loop-wrap {
		display: block !important;
	}
}

/**
 * Track-ul buclei — un singur rând orizontal (exact ca bara de text), lățime
 * "max-content" (crește cât are nevoie, wrapper-ul de mai sus îl taie vizual).
 * Valorile de aici (60px înălțime, 24px gap) sunt fallback — suprascrise
 * dinamic din css_bucla_logo_mobil() dacă admin a personalizat înălțimea din
 * Setările de afișare ale logo-urilor.
 */
.jmd-logo-loop-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	gap: 24px;
}

.jmd-logo-loop-item {
	flex: 0 0 120px;
	width: 120px;
	height: 60px;
	overflow: hidden;
}

.jmd-logo-loop-item img.jmd-logo-img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block;
	filter: grayscale(100%);
	opacity: 0.8;
}

/**
 * Bannere Parteneri Generali și Parteneri Simpli — fiecare secțiune are
 * clase proprii (jmd-banner-generali-* / jmd-banner-simpli-*), ca să poată
 * avea setări de afișare complet independente una de alta.
 */
.jmd-banner-generali-stack,
.jmd-banner-simpli-stack {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}

.jmd-banner-generali-item,
.jmd-banner-simpli-item {
	/* Valoare implicită: 1 pe rând (full-width), 120px înălțime.
	   Suprascrisă dinamic din admin. */
	flex: 0 0 100% !important;
	max-width: 100% !important;
	height: 120px !important;
	overflow: hidden;
}

.jmd-banner-generali-item a,
.jmd-banner-simpli-item a {
	display: block;
	width: 100%;
	height: 100%;
}

.jmd-banner-generali-item img.jmd-banner-img,
.jmd-banner-simpli-item img.jmd-banner-img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block;
}