/* Homepage Popular services: one-row slider + expand-in-place. v20261010a
   Applies only when JS adds .is-slider, so no-JS visitors keep the normal grid. */
.pop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pop-slider { position: relative; }
.pop-slider.is-slider .pop-track:not(.is-expanded) {
  display: flex; gap: 1.1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: 6px;
  padding: 8px 6px 16px; margin: -8px -6px -6px;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(13,148,136,.35) transparent;
}
.pop-slider.is-slider .pop-track:not(.is-expanded) > .card {
  flex: 0 0 clamp(240px, calc((100% - 3.3rem) / 4), 320px);
  scroll-snap-align: start; min-height: auto;
}
/* Keep slider cards a tidy, even height: clamp long descriptions (full text on detail page / View all). */
.pop-slider.is-slider .pop-track:not(.is-expanded) > .card > p:nth-of-type(n+2) {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pop-slider .pop-track:focus-visible { outline: 2px solid var(--accent, #0d9488); outline-offset: 4px; border-radius: 12px; }
.pop-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  border: 2px solid #fff; background: var(--accent, #0d9488); color: #fff;
  box-shadow: 0 6px 18px rgba(11, 42, 74, .28), 0 0 0 1px rgba(13, 148, 136, .25);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.pop-arrow svg { width: 22px; height: 22px; }
.pop-arrow:hover:not(:disabled) { background: var(--primary, #0b2a4a); box-shadow: 0 8px 22px rgba(11, 42, 74, .38); }
.pop-arrow:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.pop-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }
.pop-arrow[hidden] { display: none; }
.pop-prev { left: -22px; }
.pop-next { right: -22px; }
.pop-hint { display: none; margin: .35rem 0 0; font-size: .8rem; color: var(--muted, #64748b); text-align: right; }
.pop-hint[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .pop-slider.is-slider .pop-track { scroll-behavior: smooth; }
}
/* Touch devices / small screens: smaller arrows inside the edges + swipe hint */
@media (hover: none), (pointer: coarse), (max-width: 720px) {
  .pop-arrow { width: 38px; height: 38px; }
  .pop-arrow svg { width: 18px; height: 18px; }
  .pop-prev { left: 2px; }
  .pop-next { right: 2px; }
  .pop-hint { display: block; }
  .pop-slider.is-slider .pop-track:not(.is-expanded) > .card { flex-basis: 78%; }
}
@media (max-width: 1100px) and (min-width: 721px) {
  .pop-prev { left: -8px; }
  .pop-next { right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pop-arrow { transition: none; }
}