/* ══ PopularServices.css — Карусель «Найпопулярніші послуги» (головна, список заявок).
   Правити тут; сторінка підключає чанк через site_css() у шаблоні. ══ */

.pop { margin-top:64px; }
.pop h2 { font-size:24px; line-height:36px; font-weight:500; color:#414141;
          margin-bottom:40px; }
.pop-wrap { position:relative;
            
            margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.pop-row { display:flex; gap:20px; overflow-x:auto;
           scrollbar-width:none; padding:10px 15px;
           scroll-snap-type:x mandatory; }
.pop-c { scroll-snap-align:center; }
.pop-row::-webkit-scrollbar { display:none; }
.pop-wrap::before, .pop-wrap::after { content:''; position:absolute; top:0; bottom:0; z-index:2;
  width:calc((100vw - 970px) / 2); pointer-events:none; }
.pop-wrap::before { left:0; background:linear-gradient(90deg, #fff 12%, rgba(255,255,255,0)); }
.pop-wrap::after { right:0; background:linear-gradient(270deg, #fff 12%, rgba(255,255,255,0)); }
.pop-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3;
           width:56px; height:56px; border:0; border-radius:50%; cursor:pointer;
           background:rgba(245,165,36,.82); display:grid; place-items:center;
           transition:background .18s; }
.pop-nav:hover { background:var(--star); }
.pop-nav svg { width:22px; height:22px; color:#2E3238; }
.pop-nav.prev { left:calc((100vw - 970px) / 2 - 92px); }
.pop-nav.next { right:calc((100vw - 970px) / 2 - 92px); }
.pop-c { position:relative; flex:0 0 auto; width:299px; height:150px;
         border-radius:0; overflow:hidden; text-decoration:none; }
.pop-c img { width:100%; height:100%; object-fit:cover; display:block;
             transition:transform .35s; }
.pop-c:hover img { transform:scale(1.04); }
.pop-c::after { content:''; position:absolute; inset:0;
                background:linear-gradient(180deg, rgba(0,0,0,.10) 0%,
                           rgba(0,0,0,.42) 50%, rgba(0,0,0,.20) 100%); }
.pop-c .cap { position:absolute; left:14px; right:14px; top:50%;
              transform:translateY(-50%); z-index:2; text-align:center; }
.pop-c .cap b { display:block; color:#fff; font-size:17px; font-weight:700;
                line-height:1.3; }
.pop-c .cap span { display:block; color:rgba(255,255,255,.88); font-size:14px;
                   margin-top:4px; }
@media (max-width:900px) {
  .pop { margin-top:38px; }
  .pop h2 { font-size:18px; line-height:26px; margin-bottom:35px; }
  .pop-wrap { margin-left:-16px; margin-right:-16px; }
  .pop-row { gap:10px; padding:0 16px; }
  .pop-c { width:calc(100vw - 64px); height:180px; }
  .pop-c .cap b { font-size:16px; }
  .pop-c .cap span { font-size:13px; }
  .pop-wrap::before, .pop-wrap::after { display:none; }
  .pop-nav { display:none; }
}