/* Base design tokens for the Experiences slider */
:root {
  --ex-color-primary: #7f9336;
  --ex-color-primary-strong: #6c7e3a;
  --ex-color-primary-soft: #8aa145;
  --ex-color-accent: #b08c4a;
  --ex-color-surface: #ffffff;
  --ex-color-surface-muted: #f8fafc;
  --ex-color-border: #f3e7cc;
  --ex-color-text-base: #5f6471;
  --ex-color-text-strong: #4b4f58;
  --ex-color-text-soft: #64748b;
  --ex-color-nav-icon: #4b5563;
  --ex-color-nav-bg: rgba(255, 255, 255, 0.92);
  --ex-color-focus-ring: rgba(127, 147, 54, 0.35);
  --ex-slider-track-gap: 0px;
  --ex-slider-per-view: 1;
  --ex-slider-title-hover: var(--ex-color-primary, #f1b631);
  --ex-slider-media-title-bg: rgba(12, 18, 28, 0.65);
  --ex-shadow-card: 0 16px 34px rgba(176, 140, 74, 0.12);
  --ex-shadow-card-strong: 0 24px 46px rgba(176, 140, 74, 0.17);
  --ex-shadow-button: 0 12px 28px rgba(176, 140, 74, 0.25);
  --ex-shadow-nav: 0 10px 24px rgba(148, 121, 71, 0.18);
  --ex-shadow-nav-strong: 0 14px 28px rgba(148, 121, 71, 0.22);
  --ex-shadow-dot: 0 6px 12px rgba(138, 161, 69, 0.35);
  --ex-color-dot-base: rgba(200, 175, 123, 0.28);
  --ex-size-xs: 12px;
  --ex-size-sm: 13px;
  --ex-size-base: 15px;
  --ex-size-md: 20px;
  --ex-size-lg: 22px;
  --ex-size-xl: 24px;
  --ex-radius-lg: 24px;
  --ex-radius-md: 20px;
  --ex-space-2xs: 6px;
  --ex-space-xs: 8px;
  --ex-space-sm: 12px;
  --ex-space-md: 16px;
  --ex-space-lg: 24px;
  --ex-space-xl: 32px;
}

.ex-slider {
  position: relative;
  overflow: hidden;
  background: transparent;
  border-style: none;
  box-sizing: border-box !important;
}

.ex-slider__track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
  column-gap: var(--ex-slider-track-gap, 0px);
  gap: var(--ex-slider-track-gap, 0px);
  max-width: 100%;
}

.ex-slider__slide {
  flex: 0 0 calc((100% - (var(--ex-slider-track-gap, 0px) * (var(--ex-slider-per-view, 1) - 1))) / var(--ex-slider-per-view, 1));
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--ex-slider-card-bg, var(--ex-color-surface, #ffffff));
  border: var(--ex-slider-card-border-width, 1px) solid var(--ex-slider-card-border-color, var(--ex-color-border, #f3e7cc));
  border-radius: var(--ex-slider-card-radius, var(--ex-radius-lg, 24px));
  overflow: hidden;
  box-shadow: var(--ex-slider-card-shadow, var(--ex-shadow-card, 0 16px 34px rgba(176, 140, 74, 0.12)));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  outline: none;
}

.ex-slider__media {
  display: block;
  position: relative;
  border-radius: var(--ex-slider-card-radius, var(--ex-radius-lg, 24px)) var(--ex-slider-card-radius, var(--ex-radius-lg, 24px)) 0 0;
  aspect-ratio: 3 / 2;
  background: var(--ex-slider-media-bg, var(--ex-color-surface-muted, #f8fafc));
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.ex-slider__media img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
  will-change: transform;
}

.ex-slider__media:hover img,
.ex-slider__media:focus img {
  transform: scale(1.06);
}

.ex-slider__media:focus,
.ex-slider__title-link:focus,
.ex-slider__button:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--ex-slider-focus-ring, var(--ex-color-focus-ring, rgba(127, 147, 54, 0.35)));
}

.ex-slider__button:focus {
  box-shadow: var(--ex-shadow-button, 0 12px 28px rgba(176, 140, 74, 0.25)), 0 0 0 3px var(--ex-slider-focus-ring, var(--ex-color-focus-ring, rgba(127, 147, 54, 0.35)));
}

.ex-slider__slide:hover,
.ex-slider__slide:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--ex-slider-card-shadow-hover, var(--ex-shadow-card-strong, 0 24px 46px rgba(176, 140, 74, 0.17)));
  outline: 0;
}

.ex-slider__tag {
  position: absolute;
  inset: 16px auto auto 16px;
  background: var(--ex-slider-tag-bg, var(--ex-color-primary, #7f9336));
  color: var(--ex-slider-tag-text, var(--ex-color-surface, #ffffff));
  padding: var(--ex-slider-tag-padding-y, var(--ex-space-2xs, 6px)) var(--ex-slider-tag-padding-x, var(--ex-space-sm, 12px));
  border-radius: 999px;
  font-size: var(--ex-slider-tag-size, var(--ex-size-xs, 12px));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ex-slider__body {
  display: flex;
  flex-direction: column;
  gap: var(--ex-slider-card-gap, var(--ex-space-md, 16px));
  padding: var(--ex-slider-card-padding, var(--ex-space-lg, 24px));
}

.ex-slider__title {
  margin: 0;
  font-size: var(--ex-slider-title-size, var(--ex-size-lg, 22px));
  line-height: 1.2;
  font-weight: 700;
  color: var(--ex-slider-title, var(--ex-color-primary, #7f9336));
  letter-spacing: -0.01em;
}

.ex-slider__title-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s ease;
}

.ex-slider__title-link:hover,
.ex-slider__title-link:focus {
  color: var(--ex-slider-title-hover, var(--ex-slider-price, var(--ex-color-primary, #f1b631)));
}

.ex-slider__excerpt {
  margin: 0;
  color: var(--ex-slider-text, var(--ex-color-text-base, #5f6471));
  font-size: var(--ex-slider-text-size, var(--ex-size-base, 15px));
  line-height: 1.55;
}

.ex-slider__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: var(--ex-slider-meta-size, var(--ex-size-sm, 13px));
  color: var(--ex-slider-meta-text, var(--ex-color-text-strong, #4b4f58));
}

.ex-slider__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ex-slider__meta-label {
  font-weight: 500;
  color: var(--ex-slider-meta-label, var(--ex-color-primary-strong, #6c7e3a));
}

.ex-slider__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ex-slider-cta-gap, var(--ex-space-md, 16px));
}

.ex-slider__price {
  font-size: var(--ex-slider-price-size, var(--ex-size-md, 20px));
  font-weight: 600;
  color: var(--ex-slider-price, var(--ex-color-primary, #7f9336));
}

.ex-slider__button {
  appearance: none;
  border: none;
  border-radius: var(--ex-slider-button-radius, 999px);
  background: var(--ex-slider-button-bg, var(--ex-color-primary, #7f9336));
  color: var(--ex-slider-button-text, var(--ex-color-surface, #ffffff));
  font-weight: 700;
  font-size: var(--ex-slider-button-size, var(--ex-size-base, 15px));
  padding: var(--ex-slider-button-padding-y, 12px) var(--ex-slider-button-padding-x, 22px);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ex-slider-button-gap, var(--ex-space-xs, 8px));
}

.ex-slider__button:hover,
.ex-slider__button:focus {
  transform: translateY(-1px);
  box-shadow: var(--ex-slider-button-shadow, var(--ex-shadow-button, 0 12px 28px rgba(176, 140, 74, 0.25)));
  color: var(--ex-slider-button-text-hover, var(--ex-slider-button-text, #ffffff));
  background: var(--ex-slider-button-bg-hover, var(--ex-slider-button-bg, #f1b631));
}

.ex-slider__nav {
  position: absolute;
  top: calc(50% - 40px);
  transform: translateY(-50%);
  z-index: 2;
  background: var(--ex-slider-nav-bg, var(--ex-color-nav-bg, rgba(255, 255, 255, 0.92)));
  color: var(--ex-slider-nav-icon, var(--ex-color-nav-icon, #4b5563));
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--ex-slider-nav-shadow, var(--ex-shadow-nav, 0 10px 24px rgba(148, 121, 71, 0.18)));
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ex-slider__nav:hover,
.ex-slider__nav:focus {
  background: var(--ex-slider-nav-bg-hover, var(--ex-slider-nav-bg, var(--ex-color-surface, #ffffff)));
  color: var(--ex-slider-nav-icon-hover, var(--ex-slider-nav-icon, var(--ex-color-nav-icon, #4b5563)));
  transform: translateY(-50%) scale(1.05);
  box-shadow: var(--ex-slider-nav-shadow-hover, var(--ex-shadow-nav-strong, 0 14px 28px rgba(148, 121, 71, 0.22)));
}

.ex-slider__nav--prev {
  left: 18px;
}

.ex-slider__nav--next {
  right: 18px;
}

.ex-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--ex-slider-dots-gap, var(--ex-space-sm, 12px));
  padding: 20px 16px 28px;
}

.ex-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ex-slider-dot, var(--ex-color-dot-base, rgba(200, 175, 123, 0.28)));
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}

.ex-slider__dot[aria-current="true"],
.ex-slider__dot:hover,
.ex-slider__dot:focus {
  background: var(--ex-slider-dot-active, var(--ex-color-primary-soft, #8aa145));
  transform: scale(1.2);
  box-shadow: var(--ex-slider-dot-shadow, var(--ex-shadow-dot, 0 6px 12px rgba(138, 161, 69, 0.35)));
}

.ex-slider__empty {
  padding: 32px;
  text-align: center;
  color: var(--ex-slider-empty-text, var(--ex-color-text-soft, #64748b));
}

@media (max-width: 1024px) {
  .ex-slider__slide {
    border-radius: var(--ex-slider-card-radius-tablet, var(--ex-slider-card-radius, var(--ex-radius-lg, 24px)));
  }

  .ex-slider__body {
    gap: var(--ex-slider-card-gap-tablet, var(--ex-slider-card-gap, var(--ex-space-md, 16px)));
    padding: var(--ex-slider-card-padding-tablet, var(--ex-slider-card-padding, var(--ex-space-lg, 24px)));
  }

  .ex-slider__title {
    font-size: var(--ex-slider-title-size-tablet, var(--ex-slider-title-size, var(--ex-size-md, 20px)));
  }

  .ex-slider__excerpt {
    font-size: var(--ex-slider-text-size-tablet, var(--ex-slider-text-size, var(--ex-size-base, 15px)));
  }

  .ex-slider__meta {
    font-size: var(--ex-slider-meta-size-tablet, var(--ex-slider-meta-size, var(--ex-size-sm, 13px)));
  }

  .ex-slider__price {
    font-size: var(--ex-slider-price-size-tablet, var(--ex-slider-price-size, var(--ex-size-md, 20px)));
  }

  .ex-slider__button {
    font-size: var(--ex-slider-button-size-tablet, var(--ex-slider-button-size, var(--ex-size-base, 15px)));
    padding: var(--ex-slider-button-padding-y-tablet, var(--ex-slider-button-padding-y, 12px)) var(--ex-slider-button-padding-x-tablet, var(--ex-slider-button-padding-x, 22px));
    border-radius: var(--ex-slider-button-radius-tablet, var(--ex-slider-button-radius, 999px));
  }
}

@media (max-width: 680px) {
  .ex-slider__slide {
    border-radius: var(--ex-slider-card-radius-mobile, var(--ex-slider-card-radius-tablet, var(--ex-slider-card-radius, var(--ex-radius-md, 20px))));
  }

  .ex-slider__body {
    gap: var(--ex-slider-card-gap-mobile, var(--ex-slider-card-gap-tablet, var(--ex-slider-card-gap, var(--ex-space-md, 16px))));
    padding: var(--ex-slider-card-padding-mobile, var(--ex-slider-card-padding-tablet, var(--ex-slider-card-padding, var(--ex-space-lg, 24px))));
  }

  .ex-slider__title {
    font-size: var(--ex-slider-title-size-mobile, var(--ex-slider-title-size-tablet, var(--ex-slider-title-size, var(--ex-size-md, 20px))));
  }

  .ex-slider__excerpt {
    font-size: var(--ex-slider-text-size-mobile, var(--ex-slider-text-size-tablet, var(--ex-slider-text-size, var(--ex-size-base, 15px))));
  }

  .ex-slider__meta {
    font-size: var(--ex-slider-meta-size-mobile, var(--ex-slider-meta-size-tablet, var(--ex-slider-meta-size, var(--ex-size-sm, 13px))));
  }

  .ex-slider__price {
    font-size: var(--ex-slider-price-size-mobile, var(--ex-slider-price-size-tablet, var(--ex-slider-price-size, var(--ex-size-md, 20px))));
  }

  .ex-slider__button {
    font-size: var(--ex-slider-button-size-mobile, var(--ex-slider-button-size-tablet, var(--ex-slider-button-size, var(--ex-size-base, 15px))));
    padding: var(--ex-slider-button-padding-y-mobile, var(--ex-slider-button-padding-y-tablet, var(--ex-slider-button-padding-y, 12px))) var(--ex-slider-button-padding-x-mobile, var(--ex-slider-button-padding-x-tablet, var(--ex-slider-button-padding-x, 22px)));
    border-radius: var(--ex-slider-button-radius-mobile, var(--ex-slider-button-radius-tablet, var(--ex-slider-button-radius, 999px)));
  }

  .ex-slider__cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .ex-slider__button {
    width: 100%;
    justify-content: center;
  }

  .ex-slider__nav {
    display: none;
  }

  .ex-slider__dots {
    padding-top: 12px;
  }
}