/*
 * "for our clients" block on the home page (figma node 5799:26783)
 * carousel + arrows are shared: css/up-carousel.css
 */
.ucl{background:#fff;padding:100px 0;position:relative}
/* title 48/60, 20px to the line, the line is 2px and GREEN here - numbers from the mockup */
.ucl .ucl-title{margin:0;line-height:60px;padding-bottom:22px;color:#212121}
.ucl .ucl-title span:after{bottom:-22px;background:#83B00B}

.ucl-car{margin-top:70px}
/* the row stands on the left border of the site content and goes under the right edge of the screen.
   --ucl-pad is that border, set by js from the real .container (its width changes on breakpoints) */
/* selectors here are two classes deep on purpose: shared css/up-carousel.css can be linked by another block
   later on the page, and with equal weight its rules would win over these */
.ucl .ucl-track{gap:20px;align-items:stretch;padding:0 var(--ucl-pad,20px)}
.ucl-car .ucar-view{scroll-padding:0 var(--ucl-pad,20px)}

/* a card. 256 is the height from the mockup, real texts are longer: cards grow and stay equal (stretch) */
.ucl-card{width:370px;min-height:256px;box-sizing:border-box;padding:30px;border-radius:10px;background:#F8F8F8;color:#212121;display:flex;flex-direction:column;align-items:flex-end;gap:20px;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:background .2s ease}
.ucl-ico{width:100%;height:30px;display:flex;align-items:center}
.ucl-ico svg,.ucl-ico img{width:30px;height:30px;display:block}
.ucl-text{width:100%;flex:1 0 auto;display:flex;flex-direction:column;gap:5px;word-break:break-word}
.ucl-name{font-size:24px;line-height:1.2;font-weight:700}
.ucl-note{font-size:16px;line-height:1.7;font-weight:400;opacity:.7}
.ucl-more{flex:0 0 40px;width:40px;height:40px;border-radius:100px;background:#83B00B;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}
.ucl-more svg{display:block;width:24px;height:24px}
@media (hover:hover){
	.ucl-card:hover .ucl-more{background:#EC7529}
}
.ucl-card:focus-visible{outline:2px solid #EC7529;outline-offset:2px}
.ucl-car .ucar-view{padding:4px 0;margin:-4px 0}   /* room for that focus ring, the view clips by y */

/* arrows: on the right border of the content, centered by the cards - same line as arrows of brands */
.ucl-nav-layer{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;pointer-events:none;z-index:3}
.ucl .ucl-nav{position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:auto}

/* cards come in one by one when the block is scrolled into view. js adds .is-anim first,
   so without js (or with reduced motion) cards are simply visible */
.ucl.is-anim .ucl-card{opacity:0;transform:translateY(14px)}
.ucl.is-anim .ucl-card.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease,background .2s ease}

@media (max-width:991px){
	.ucl{padding:70px 0}
	.ucl-car{margin-top:50px}
	/* .container is as wide as the screen here: keep 10px from the screen edge, like arrows of brands */
	.ucl .ucl-nav{right:10px}
}
@media (max-width:768px){
	.ucl{padding:50px 0}
	.ucl .ucl-title{line-height:1.25;padding-bottom:17px}
	.ucl .ucl-title span:after{bottom:-17px}
	.ucl-car{margin-top:30px}
	.ucl .ucl-track{gap:10px}
	/* a card is narrower than the screen: the edge of the next one is seen as a hint to swipe */
	.ucl-card{width:min(290px,78vw);min-height:220px;padding:22px;gap:16px}
	.ucl-name{font-size:20px}
	.ucl-note{font-size:14px;line-height:1.6}
	.ucl .ucl-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
	.ucl.is-anim .ucl-card{opacity:1;transform:none}
	.ucl-more,.ucl-card{transition:none}
}