.uv-carousel-section {
  font-family: var(--font-body);
  box-sizing: border-box;
  position: relative;
  container-type: inline-size;
  container-name: carousel;
}

.uv-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.uv-section-header-left {
  display: flex;
  flex-direction: column;
}

.uv-carousel-dot {
  color: #ff5a1f;
}


.uv-section-title {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 28px;
  color: #1a1a1a;
  text-transform: uppercase;
  margin: 0;
}

.uv-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid #1a1a1a;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #1a1a1a;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s, background 0.18s;
}
.uv-btn-pill:hover {
  background: rgba(26,26,26,0.06);
  color: #1a1a1a;
}

/* ── CAROUSEL ── */
.uv-carousel-wrap {
  overflow: hidden;
}

.uv-carousel-track {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.uv-carousel-track::-webkit-scrollbar { display: none; }

/* Extra: stop theme from adding margin-top to flex items */
.uv-carousel-track > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.uv-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  background: #F36844 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: #fff !important;
  font-size: 18px;
  line-height: 1;
  z-index: 10;
  transition: background 0.18s, transform 0.18s;
  padding: 0 !important;
  flex-shrink: 0;
}
.uv-carousel-nav svg { display: block !important; color: #1a1209 !important; fill: #1a1209 !important; }
.uv-carousel-sep {
  flex-shrink: 0;
  width: 26px;
  align-self: stretch;
  background: linear-gradient(
    to right,
    transparent 12px,
    rgba(26, 18, 9, 0.14) 12px,
    rgba(26, 18, 9, 0.14) 13px,
    transparent 13px
  );
}

.uv-carousel-nav.uv-prev { left: 0;  top: 50%; transform: translateY(-50%); }
.uv-carousel-nav.uv-next { right: 0; top: 50%; transform: translateY(-50%); }
@media (min-width: 701px) {
  .uv-carousel-nav.uv-prev { margin-left: -20px; }
  .uv-carousel-nav.uv-next { margin-right: -20px; }
  .uv-wizard .uv-carousel-nav.uv-prev { margin-left: 0; }
  .uv-wizard .uv-carousel-nav.uv-next { margin-right: 0; }
}
.uv-carousel-nav:hover   { background: #e04a10 !important; }
.uv-carousel-nav:active  { transform: translateY(-50%) scale(0.93) !important; }

/* ── CARD BASE ── */
.uv-route-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  height: 378px;
  width: calc((100% - 78px) / 4); /* 4 kartes × 26px gap = 78px */
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid rgba(222,216,197,.15);
  transition: border-color 0.2s, transform 0.2s;
  scroll-snap-align: start;
  text-decoration: none;
  display: block;
}
.uv-route-card:hover { border-color: #F36844; }

.uv-route-card-bg {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  display: block !important;
  filter: grayscale(0%);
  transition: filter 0.3s ease;
}
.uv-route-card:hover .uv-route-card-bg {
  filter: grayscale(100%);
}

/* Desktop: badge + segment + SVG hidden by default, revealed on hover */
@media (hover: hover) {
  .uv-route-mid-section {
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .uv-route-card:hover .uv-route-mid-section {
    opacity: 1;
  }
}

.uv-route-card-overlay-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}

.uv-route-card-overlay-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
}

.uv-route-card-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  z-index: 5;
  /* no justify-content: space-between — bottom section is position:absolute instead */
}

/* Route name + arrow pinned to card bottom, decoupled from flex layout. */
.uv-route-bottom-section {
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
}

.uv-route-meta-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.uv-route-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 100px;
  padding: 6px 12px;
  width: fit-content;
}
.uv-route-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #ff5a1f;
  flex-shrink: 0;
}
.uv-route-badge-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #ded8c5;
  text-transform: uppercase;
}

.uv-route-segment {
  font-family: var(--font-body);
  font-size: 11px;
  color: #ded8c5;
  margin-left: 4px;
  text-transform: uppercase;
}

.uv-route-mid-section {
  position: absolute;
  top: 50%;
  left: 16px;
  right: 16px;
  transform: translateY(-50%);
}

.uv-route-line-svg {
  width: 100%;
  height: 60px;
  display: block;
}

.uv-route-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* Double-class specificity (.uv-route-card .uv-route-name) overrides theme
   rules like .entry-content * { line-height: 1.7 } that clip the 2nd line. */
.uv-route-card .uv-route-name {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 28px;
  line-height: 1.2;    /* explicit — prevents theme from expanding to 1.5–1.7 */
  color: #ded8c5;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.uv-route-arrow {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ded8c5;
  font-size: 16px;
  transition: background 0.2s ease;
}
.uv-route-card:hover .uv-route-arrow {
  background: #F36844;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #1a1209;
}

/* ── CUSTOM "IZVEIDO PATS" CARD ── */
.uv-route-card.uv-custom {
  background: #1a1a1a;
  border: 2px dashed rgba(255, 255, 255, 0.25);
}
.uv-route-card.uv-custom:hover {
  border-color: #F36844;
  background: #2a1a10;
}
.uv-route-card.uv-custom .uv-route-card-content {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.uv-custom-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px dashed rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ded8c5;
}

.uv-custom-title {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 20px;
  color: #ded8c5;
  line-height: 1.2;
  text-transform: uppercase;
}

.uv-custom-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: #ded8c5;
  max-width: 180px;
  line-height: 1.5;
}

/* ── RESPONSIVE CARD COUNT (container queries) ── */
@container carousel (max-width: 1100px) {
  .uv-route-card { width: calc((100% - 52px) / 3); }
}
@container carousel (max-width: 900px) {
  .uv-route-card { width: calc((100% - 26px) / 2); }
}
@container carousel (max-width: 480px) {
  .uv-route-card { width: calc(100% - 40px); }
}

/* Nav pogas un title — viewport media queries */
@media (max-width: 700px) {
  .uv-carousel-nav { display: none; }
  .uv-section-title { font-size: 22px; }
  .uv-route-card,
  .uv-carousel-section .uv-route-card { height: 428px !important; min-height: 428px !important; }
  .uv-route-mid-section { opacity: 1 !important; }
  .uv-route-card-bg { filter: grayscale(100%) !important; }

  /* Custom card moves to position 2 on mobile: R1, [sep], Custom, [sep], R2, R3... */
  .uv-carousel-track .uv-route-card.uv-custom { order: 5; }
  .uv-carousel-track > :nth-child(2) { order: 4; }
  .uv-carousel-track > :nth-child(n+4) { order: 10; }

  /* All carousels: buttons below slides */
  .uv-carousel-section {
    padding-bottom: 60px;
  }
  .uv-carousel-nav.uv-prev,
  .uv-carousel-nav.uv-next {
    display: flex !important;
    top: auto !important;
    bottom: 8px !important;
    transform: none !important;
  }
  .uv-carousel-nav.uv-prev {
    left: 16px !important;
  }
  .uv-carousel-nav.uv-next {
    right: 16px !important;
  }
}

/* ── HIGH-SPECIFICITY OVERRIDES ──────────────────────────────────────────────
   WP themes often set .entry-content a { height: auto; display: block; } or
   apply line-height: 1.5-1.7 to all children. Using .uv-carousel-section as
   parent prefix (specificity 0,2,0 vs theme's typical 0,1,1) ensures these
   values win without needing !important.
   ─────────────────────────────────────────────────────────────────────────── */

.uv-carousel-section .uv-route-card {
  height: 378px;
  min-height: 378px;
  display: block;        /* override any theme flex/grid on <a> elements */
}

.uv-carousel-section .uv-route-card-content {
  height: 100%;
  box-sizing: border-box;
}

.uv-carousel-section .uv-route-bottom-section {
  position: absolute;
  bottom: 24px;          /* 24px from card bottom edge — text never touches edge */
  left: 16px;
  right: 16px;
}

.uv-carousel-section .uv-route-card .uv-route-name {
  font-size: 28px;
  line-height: 1;
  margin: 0;
  padding: 0;
}