/* Card sizing and navigation are shared across the six service destinations. */
/* Keep cards at 75% of their previous height, leaving room for slider controls. */
.service-page .service-destination-slider {
  --destination-visible: 4;
  --destination-gap: 20px;
  display: flex;
  gap: var(--destination-gap);
  min-width: 0;
  margin-inline: 0;
  padding: 6px 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
}

.service-page .service-destination-slider::-webkit-scrollbar { display: none; }

.service-page .service-destination-slider > [data-destination-card] {
  flex: 0 0 calc((100% - (var(--destination-visible) - 1) * var(--destination-gap)) / var(--destination-visible));
  width: auto;
  min-width: 0;
  height: clamp(255px, 28.5vw, 390px);
  aspect-ratio: auto;
  scroll-snap-align: start;
}

.service-page.edu-page .service-destination-slider {
  width: min(calc(100% - 48px), 1408px);
  margin-inline: auto;
}

.service-page .service-destination-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  color: #fff;
}

.service-page .service-destination-nav[hidden] { display: none; }

.service-page .service-destination-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, opacity .2s;
}

.service-page .service-destination-arrow svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.service-page .service-destination-arrow:hover:not(:disabled) {
  border-color: #d79a37;
  background: rgba(215, 154, 55, .18);
}

.service-page .service-destination-arrow:disabled { opacity: .35; cursor: default; }

.holiday-packages-page .service-destination-nav { color: #071b31; }
.holiday-packages-page .service-destination-arrow { border-color: rgba(7, 27, 49, .6); }

.service-page .service-destination-dots { display: flex; align-items: center; gap: 2px; }

.service-page .service-destination-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.service-page .service-destination-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 20px;
  background: #d79a37;
  transition: width .2s, background .2s;
}

.service-page .service-destination-dot.is-active::before { width: 24px; background: #fff; }
.holiday-packages-page .service-destination-dot.is-active::before { background: #071b31; }

.service-page .service-destination-nav button:focus-visible,
.service-page .service-destination-slider:focus-visible { outline: 2px solid #d79a37; outline-offset: 3px; }

.service-destination-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 1921px) {
  .service-page.edu-page .service-destination-slider { width: var(--service-wide-container-width); }
}

@media (max-width: 1024px) {
  .service-page .service-destination-slider { --destination-visible: 2; --destination-gap: 16px; }
}

@media (max-width: 760px) {
  .service-page .service-destination-slider { --destination-visible: 1; --destination-gap: 16px; }
  .service-page .service-destination-slider > [data-destination-card] { height: min(101.25vw, 395.25px); }
  .service-page.edu-page .service-destination-slider { width: calc(100% - 32px); }
  .service-page .service-destination-nav { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-page .service-destination-nav button,
  .service-page .service-destination-dot::before { transition: none; }
}