/* (017, 11.10.2026) Лентите с лога — един вид за двата модула: „Лента с лога“ (xp-ls) и въртележката с лога в „Примери и казуси“
   (xp-carousel--logos). Образецът, одобрен от Сашо: без бяла кутия, логата сиви и цветни при посочване; на компютър и таблет — безкрайна
   лента, пълна от левия край още при зареждане, без избледняване отстрани (Сашо: „да излизат от самото начало, а не да се скриват в
   дясната част“); на телефон — едно голямо лого и следващото наднича вдясно, само се сменя на 2,5 s, плъзга се с пръст, точки отдолу.
   site.js прави обвивката .xp-logos и копието на логата за безкрайното движение; без JS остава лентата с плъзгане. */
.xp-logos { position: relative; overflow: hidden; }
/* отляво — кратко избледняване при текста; отдясно лентата стига до ръба на екрана (site.js дава отрицателния десен отстъп), за да не
   „изчезват“ логата насред лентата */
@media (min-width: 768px) { .xp-logos { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--wp--custom--logorun--fade)); mask-image: linear-gradient(90deg, transparent, #000 var(--wp--custom--logorun--fade)); } }
.xp-logos .xp-logos__track { display: flex; width: max-content; margin: 0; padding: var(--wp--custom--logorun--track-pad); overflow: visible; list-style: none; scroll-snap-type: none; animation: xp-logos-run var(--xp-logos-dur, 48s) linear infinite; }
.xp-logos .xp-logos__track > .xp-logos__item { display: grid; flex: 0 0 auto; place-items: center; box-sizing: border-box; width: var(--wp--custom--logorun--item-w); height: var(--wp--custom--logorun--item-h); margin: 0; padding: var(--wp--custom--logorun--item-pad); scroll-snap-align: none; }
.xp-logos .xp-logos__item :is(figure, .wp-block-image) { display: contents; margin: 0; }
.xp-logos .xp-logos__item img { display: block; width: auto; max-width: 100%; height: auto; max-height: var(--wp--custom--logorun--img-h); object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1); opacity: .82; transition: filter .35s, opacity .35s, transform .35s; }
.xp-logos .xp-logos__item:hover img { filter: none; opacity: 1; transform: scale(1.06); }
.xp-logos:is(:hover, :focus-within) .xp-logos__track { animation-play-state: paused; }
.xp-logos:focus-visible { outline: 2px solid var(--wp--preset--color--pink); outline-offset: 4px; }
@keyframes xp-logos-run { to { transform: translateX(-50%); } }
.xp-logos__dots { display: none; }
/* старите обвивки около лентата: без бялата кутия, стрелките и точките на въртележката */
.xp-ls .xp-ls__box:has(> .xp-logos) { width: 100%; padding: 0; background: none; }
.xp-ls__box:has(> .xp-logos) > .xp-ls__arrow { display: none; }
@media (max-width: 767px) {
	.xp-logos { margin-right: calc(-1 * var(--t-gr, 0px)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; scrollbar-width: none; }
	.xp-logos::-webkit-scrollbar { display: none; }
	.xp-logos .xp-logos__track { gap: var(--wp--custom--logorun--gap-phone); padding-right: var(--wp--custom--logorun--end-phone); animation: none; }
	.xp-logos .xp-logos__track > .xp-logos__item { width: var(--wp--custom--logorun--card-phone); height: var(--wp--custom--logorun--card-h-phone); padding: var(--wp--custom--logorun--card-pad-phone); grid-template: minmax(0, 1fr) / minmax(0, 1fr); scroll-snap-align: start; border-radius: 18px; background: rgb(255 255 255 / .55); box-shadow: 0 12px 30px rgb(0 0 0 / .06); }
	/* логото запълва подложката (Сашо, 11.10: подложките бяха твърде големи, логата — твърде малки) */
	.xp-logos .xp-logos__item img { width: 100%; height: 100%; max-height: none; mix-blend-mode: normal; filter: none; opacity: 1; }
	.xp-logos__dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
	.xp-logos__dots i { width: 7px; height: 7px; border-radius: 99px; background: rgb(0 0 0 / .18); transition: width .35s, background .35s; }
	.xp-logos__dots i.on { width: 22px; background: var(--wp--preset--color--pink); }
	/* над 12 лога — тънка линия на напредъка вместо точки */
	.xp-logos__dots.is-bar { position: relative; width: 96px; height: 4px; margin: 18px auto 0; border-radius: 4px; background: rgb(0 0 0 / .14); overflow: hidden; }
	.xp-logos__dots.is-bar i { position: absolute; inset: 0 auto 0 0; width: var(--xp-p, 0%); height: auto; border-radius: 4px; background: var(--wp--preset--color--pink); transition: width .35s; }
	.xp-ls .xp-ls__box:has(> .xp-logos) { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.xp-logos { overflow-x: auto; }
	.xp-logos .xp-logos__track { animation: none; }
}