/* ==========================================================================
   karty-przewijane.css — poziomo przewijany rząd kart ze strzałkami.

   Komponent w trzech miejscach makiety:
     • strona główna, „Trwałość zakorzeniona w technologii" (#feats)
     • strona główna, „Kompleksowe wsparcie budowy" (#support)
     • Technologia, kafelki o drewnie konstrukcyjnym (#woodFeats)
   Sterowanie: js/karty-przewijane.js (rząd oznaczamy atrybutem
   data-przewijanie z selektorem karty).
   ========================================================================== */

.feats-scroller{position:relative;margin-top:56px}
.feats{display:flex;flex-wrap:nowrap;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.feats::-webkit-scrollbar{display:none}
.feat{flex:0 0 288px;scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px 34px;background:#fff;display:flex;flex-direction:column;min-height:260px;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.feat:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(22,66,69,.09);border-color:transparent}
.feat-icon{width:56px;height:56px;border-radius:14px;background:rgba(22,66,69,.06);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--wood);flex:none;transition:background .25s,color .25s}
.feat-icon svg{width:30px;height:30px}
.feat:hover .feat-icon{background:var(--wood);color:#fff}
.feat h3{font-size:1.2rem;font-weight:600;margin-bottom:11px}
.feat p{font-size:.95rem;color:var(--muted);flex:1}
.feats-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--green);font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4;box-shadow:0 6px 18px rgba(22,66,69,.12);transition:background .2s,transform .2s}
.feats-nav:hover{background:var(--green);color:#fff;transform:translateY(-50%) scale(1.06)}
.feats-prev{left:-14px}
.feats-next{right:-14px}
.support-prev{left:-14px}
.support-next{right:-14px}
@media(max-width:560px){.feats-nav{width:38px;height:38px;font-size:1.25rem}}
@media(max-width:560px){.feat{flex:0 0 80%}}
/* Wygaszenie na bokach — sygnał, że rząd da się przewijać dalej. */
.feats-scroller::before,.feats-scroller::after{content:"";position:absolute;top:0;bottom:12px;width:56px;z-index:3;pointer-events:none;transition:opacity .25s}
.feats-scroller::before{left:0;background:linear-gradient(to right,#fff,rgba(255,255,255,0))}
.feats-scroller::after{right:0;background:linear-gradient(to left,#fff,rgba(255,255,255,0))}
.feats-scroller.at-start::before{opacity:0}
.feats-scroller.at-end::after{opacity:0}