/* Voyage Location Cards — slider style similar to Themes for the Soul */

/* 1) Wrapper enables container queries */
.locations-slider-wrapper {
  container-type: inline-size;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* Elementor motion effects sometimes set .elementor-invisible on the widget; keep this slider visible */
.elementor .elementor-invisible .locations-slider-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* 2) Defaults (custom props align with themes slider) */
.locations-container.locations-slider {
  --gap: 30px;
  --min-card: 220px;
  --max-card: 420px;
  --cols: 2.5; /* show subtle third-card peek like themes */

  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0;
  inline-size: 100%;
}
.locations-container.locations-slider::-webkit-scrollbar { display: none; }

/* 3) Card sizing and layout */
.location-item {
  inline-size: clamp(
    var(--min-card),
    calc( (100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) ),
    var(--max-card)
  );
  flex: 0 0 auto;
  min-inline-size: var(--min-card);
  scroll-snap-align: start;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 27px;
  transition: opacity .4s ease;
}
.location-item.is-dimmed { opacity: 0.45; transition: opacity .3s ease; }

/* 4) Last spacer for clean end snap (lets the last/third card align to start) */
.locations-container.locations-slider::after {
  content: "";
  flex: 0 0 calc(100% - clamp(
    var(--min-card),
    calc( (100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) ),
    var(--max-card)
  ));
}

/* 5a) Defensive: ensure content is visible even if a theme applies unexpected styles */
.elementor .locations-slider-wrapper .locations-container.locations-slider,
.locations-slider-wrapper .locations-container.locations-slider {
  visibility: visible !important;
}

.locations-container.locations-slider{
  overflow-y: hidden !important;
}

/* Ensure dimming can apply when JS tags items */
.locations-slider-wrapper .location-item.is-dimmed { opacity: 0.45 !important; }
/* Make partially hidden cards obviously interactive when they can scroll into view */
.locations-slider-wrapper .location-item.can-scroll-into-view { cursor: pointer; }
.locations-slider-wrapper .location-item.can-scroll-into-view:focus-visible { outline: 2px solid var(--heading-primary); outline-offset: 2px; }

/* 5) Media and text styles (16:9 image) */
.location-media img { inline-size: 100%; block-size: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.location-item-content-wrapper { inline-size: 100%; block-size: auto; position: relative; }
/* Use normal flow to avoid overlap issues under theme resets */
.location-item-content { position: relative; display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: 18px 0; }
.location-item-title-container { margin-top: 0; }
.location-item-title { color: var(--heading-primary); font: 400 20px/24px 'KoPub Batang', serif; }
.location-item-description { color: var(--body-primary); font: 300 16px/22.4px 'Work Sans', sans-serif; }
.location-item-discover-link a { text-decoration: none; }
.location-item-discover-link-inner { padding-block: 10px; border-bottom: 1px solid var(--heading-primary); display: inline-flex; align-items: center; gap: 10px; }
.location-item-discover-link-text { color: var(--heading-primary); font: 500 16px 'Work Sans', sans-serif; }

/* Progress bar (like themes) */
.locations-slider-wrapper .slider-controls { display: flex; justify-content: center; align-items: center; inline-size: 100%; margin-top: 60px; }
.locations-slider-wrapper .slider-controls .slider-progress { inline-size: 60%; margin-inline: auto; }
.locations-progress-track { width: 100%; height: 3px; background: #B6B6B6; position: relative; border-radius: 2px; }
.locations-progress-fill { height: 3px; background: #000; width: 0%; transition: width .3s ease; border-radius: 2px; }

/* 6) Container queries */
@container (min-width: 1440px) {
  .locations-container.locations-slider { --gap: 44px; --cols: 2.5; }
  .location-item { gap: 30px; }
}

@container (min-width: 1024px) and (max-width: 1439px) {
  .locations-container.locations-slider { --gap: 35px; --cols: 2.5; }
}

@container (min-width: 768px) and (max-width: 1023px) {
  .locations-container.locations-slider { --gap: 25px; --cols: 2; }
  .location-item-title { font-size: 18px; line-height: 22px; }
  .location-item-description { font-size: 15px; line-height: 21px; }
  .location-item-content { padding: 16px 0; }
}

@container (min-width: 600px) and (max-width: 767px) {
  .locations-container.locations-slider { --gap: 20px; --cols: 1.8; }
  .location-item { gap: 18px; }
  .location-item-title { font-size: 17px; line-height: 21px; }
  .location-item-description { font-size: 14px; line-height: 20px; }
  .location-item-content { gap: 15px; padding: 14px 0; }
}

@container (min-width: 480px) and (max-width: 599px) {
  .locations-container.locations-slider { --gap: 18px; --cols: 1.5; }
  .location-item { gap: 20px; }
  .location-item-title { font-size: 16px; line-height: 20px; }
  .location-item-description { font-size: 14px; line-height: 19px; }
  .location-item-content { gap: 16px; padding: 12px 0; }
  .location-item-discover-link-inner { padding-block: 8px; }
  .location-item-discover-link-text { font-size: 15px; }
}

@container (max-width: 479px) {
  .locations-container.locations-slider { --gap: 15px; --cols: 1.3; }
  .location-item { gap: 18px; }
  .location-item-title { font-size: 15px; line-height: 19px; }
  .location-item-description { font-size: 13px; line-height: 18px; }
  .location-item-content { gap: 14px; padding: 10px 0; }
  .location-item-title-container { gap: 6px; }
  .location-item-discover-link-inner { padding-block: 6px; gap: 8px; }
  .location-item-discover-link-text { font-size: 14px; }
}

/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
  .locations-container.locations-slider {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  .location-item-discover-link-inner { min-block-size: 44px; padding-block: 12px; }
}

/* HiDPI */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .location-media img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
}

/* 7) Fallback when container queries are not supported */
@supports not (container-type: inline-size) {
  .locations-container.locations-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    overflow-x: visible;
  }
  .locations-container.locations-slider::after { content: none; }
  .location-item {
    inline-size: auto;
    min-inline-size: 0;
    gap: 18px;
  }
}