/* Анімовані банери слайдера на головній (крок 478; розмітку малює App\Support\AnimatedBanner).
   Увесь банер — одне посилання; кнопка — <g class="ml-cta"> усередині SVG. Наведення: кнопка підіймається
   й світлішає, стрілка зсувається; натискання чи дотик — кнопка «притискається». Шрифт — Rubik сайту. */
.ml-hero{display:block;position:relative;color:inherit;text-decoration:none;border-radius:12px;overflow:hidden;-webkit-tap-highlight-color:transparent;isolation:isolate}
.ml-hero svg{display:block;width:100%;height:auto}
.ml-hero .ml-mobile{display:none}
.ml-hero:focus-visible{outline:4px solid #ed790f;outline-offset:6px}

.ml-cta{transform-box:fill-box;transform-origin:center;transition:transform .16s ease,filter .2s ease}
.ml-arrow{transition:transform .2s ease}
.ml-hero:active .ml-cta{transform:translateY(4px) scale(.985);filter:brightness(.9)}
@media (hover:hover){
    .ml-hero:hover .ml-cta{filter:brightness(1.12) drop-shadow(0 9px 12px #0002);transform:translateY(-3px)}
    .ml-hero:hover .ml-arrow{transform:translateX(7px)}
    .ml-hero:active .ml-cta{transform:translateY(4px) scale(.985);filter:brightness(.9)}
}

/* Телефон — окрема композиція 4:3; поріг той самий, що в фото-банерів (<source media="(max-width:599px)">). */
@media (max-width:599px){.ml-hero .ml-desktop{display:none}.ml-hero .ml-mobile{display:block}}
@media (prefers-reduced-motion:reduce){.ml-cta,.ml-arrow{transition:none!important}}

/* У слайдері: слайд не розпирає стрічку, рамка фокуса — усередині заокругленої стрічки. */
.banners__slide{min-width:0}
.banners__slide .ml-hero{min-width:0;width:100%}
.banners__slide .ml-hero:focus-visible{outline-offset:-4px}