/* TWEKO Clients Wall 1.2
   Динамічні значення приходять CSS-змінними в style-атрибуті секції:
   --row --gap --rows --col --accent --dur
   Медіазапити перевизначають їх на рівні .tweko-clients__wall / __grid:
   власна декларація елемента перебиває успадковану від секції. */

.tweko-clients{
    --row:62px;
    --gap:4px;
    --rows:3;
    --col:96px;
    --s:1;
    --accent:#0b6cb5;
    --dur:56s;
    padding:10px 0 44px;
    margin-bottom:40px;
    border-bottom:1px solid #e3e8ee;
    background:#fff;
}

/* --- Шапка --- */
.tweko-clients__head{max-width:660px;margin:0 auto 30px;text-align:center}
.tweko-clients__title{margin:0;font-size:27px;font-weight:700;line-height:1.25;color:#1c2833;letter-spacing:-.01em}
.tweko-clients__title:after{content:"";display:block;width:46px;height:3px;margin:16px auto 0;background:var(--accent);border-radius:2px}
.tweko-clients__lead{margin:18px 0 0;font-size:16px;line-height:1.6;color:#6b7885}

/* --- Вікно стрічки --- */
.tweko-clients__wall{
    position:relative;
    height:calc(var(--rows) * var(--row) + (var(--rows) - 1) * var(--gap));
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
}
.tweko-clients__wall--static{height:auto;-webkit-mask-image:none;mask-image:none}
.tweko-clients__track{animation:tweko-wall-scroll var(--dur) linear infinite}
.tweko-clients__wall--static .tweko-clients__track{animation:none}
.tweko-clients__wall--static .tweko-clients__half--clone{display:none}
.tweko-clients__wall:hover .tweko-clients__track,
.tweko-clients__wall:focus-within .tweko-clients__track{animation-play-state:paused}
@keyframes tweko-wall-scroll{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(0,-50%,0)}
}
/* Нижній паддінг половини дорівнює проміжку сітки — зсув на -50%
   лягає точно в стик, без ривка на циклі. */
.tweko-clients__half{padding-bottom:var(--gap)}

/* --- Сітка --- */
.tweko-clients__grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(var(--col),1fr));
    grid-auto-rows:var(--row);
    grid-auto-flow:row dense;
    gap:var(--gap);
    align-items:center;
    justify-items:center;
}
.tweko-clients__cell{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    overflow:hidden;
}
.tweko-clients__cell--wide{grid-column:span 2}
.tweko-clients__cell img{
    width:calc(var(--lw,72px) * var(--s));
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    mix-blend-mode:multiply;
}
.tweko-clients__cell a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.tweko-clients__cell a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* --- Ховер тільки там, де є справжній курсор --- */
@media (hover:hover){
    .tweko-clients__track{will-change:transform}
    .tweko-clients__cell img{transition:opacity .25s ease,filter .25s ease,transform .25s ease}
    .tweko-clients__wall:hover .tweko-clients__cell img{opacity:.28;filter:saturate(.35)}
    .tweko-clients__wall:hover .tweko-clients__cell:hover img,
    .tweko-clients__cell:focus-within img{opacity:1;filter:none;transform:scale(1.14)}
}

/* --- Тач: стрічка працює, але без ефектів наведення.
       Сітка лишається обмеженою по висоті, тому блок не розтягує сторінку. --- */
@media (hover:none){
    .tweko-clients__cell img{opacity:1;filter:none;transform:none}
}

/* --- Смуга з цифрами --- */
.tweko-clients__stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:44px;
    border-top:1px solid #dfe5ec;
    border-bottom:1px solid #dfe5ec;
}
.tweko-clients__stat{padding:30px 26px;text-align:center;border-left:1px solid #eef1f5}
.tweko-clients__stat:first-child{border-left:0}
.tweko-clients__num{
    display:block;
    font-size:44px;
    font-weight:700;
    line-height:1;
    color:var(--accent);
    letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;
}
.tweko-clients__num--sm{font-size:31px;letter-spacing:-.02em}
.tweko-clients__lbl{display:block;max-width:24ch;margin:12px auto 0;font-size:14px;line-height:1.45;color:#5d6b7a}
.tweko-clients__note{max-width:74ch;margin:26px auto 0;text-align:center;font-size:14.5px;line-height:1.6;color:#7b8894}

/* --- Планшет --- */
@media (max-width:991px){
    .tweko-clients__wall{--row:54px;--rows:3;--s:.86}
    .tweko-clients__grid{--col:84px}
    .tweko-clients__stat{padding:24px 16px}
    .tweko-clients__num{font-size:36px}
    .tweko-clients__num--sm{font-size:26px}
    .tweko-clients__lbl{font-size:13px}
}

/* --- Телефон --- */
@media (max-width:575px){
    .tweko-clients{padding:6px 0 32px;margin-bottom:28px}
    .tweko-clients__head{margin-bottom:22px}
    .tweko-clients__title{font-size:21px}
    .tweko-clients__lead{font-size:15px;margin-top:14px}
    .tweko-clients__wall{--row:46px;--gap:4px;--rows:3;--s:.78}
    .tweko-clients__grid{--col:64px}
    .tweko-clients__wall{
        -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
        mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
    }
    .tweko-clients__stats{grid-template-columns:1fr;margin-top:32px;border-bottom:0}
    .tweko-clients__stat{padding:20px 12px;border-left:0;border-bottom:1px solid #eef1f5}
    .tweko-clients__num{font-size:34px}
    .tweko-clients__num--sm{font-size:26px}
    .tweko-clients__lbl{max-width:28ch}
    .tweko-clients__note{margin-top:20px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
    .tweko-clients__wall{height:auto;-webkit-mask-image:none;mask-image:none}
    .tweko-clients__track{animation:none}
    .tweko-clients__half--clone{display:none}
    .tweko-clients__cell img{transition:opacity .25s ease,filter .25s ease}
    .tweko-clients__wall:hover .tweko-clients__cell:hover img{transform:none}
}