/* ==================================
   06. SERVICES SLIDER
================================== */
.section-head { margin-bottom: 30px; text-align: center; }
.services-slider {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 max(16px, calc((100vw - 1180px) / 2)) 10px; scrollbar-width: none;
}
.services-slider::-webkit-scrollbar { display: none; }
.service-slide {
  min-width: min(85vw, 380px); scroll-snap-align: start; background: var(--white);
  border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.service-slide:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-media { position: relative; }
.service-media img { width: 100%; height: 230px; object-fit: cover; }
.service-badge {
  position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, 0.94);
  color: var(--brown); padding: 7px 12px; border-radius: 999px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase;
}
.service-body { padding: 24px; }
.service-body h3 { font-family: var(--ff-display); text-transform: uppercase; font-size: 1.25rem; color: var(--brown); margin-bottom: 10px; }
.service-body p { color: var(--muted); line-height: 1.65; margin-bottom: 16px; min-height: 78px; }
.service-link { display: inline-flex; align-items: center; gap: 7px; color: var(--orange); font-weight: 700; }
.service-link ion-icon { transition: var(--transition-fast); }
.service-link:hover ion-icon { transform: translateX(4px); }

.slider-controls { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.slider-btn {
  width: 48px; height: 48px; border-radius: 50%; background: var(--white); color: var(--brown);
  border: 1px solid rgba(61, 35, 20, 0.08); display: grid; place-items: center; font-size: 1.2rem;
  box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.slider-btn:hover { background: var(--orange); color: var(--white); }