/* ====== Camel Vertical Slider (clean build) ====== */
.camel-carousel-container.camelvs {
  /* Buttons (desktop defaults) */
  --btn-left: 9.75rem;
  --btn-size: 2.75rem;
  --btn-v-gap: 1.25rem;

  /* Layout */
  --slide-h: clamp(560px, 72vh, 860px);
  --peek: clamp(48px, 10vh, 140px); /* used by JS to show tiny image peeks */
  --pad-x-min: 1rem; /* mobile button padding */

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #110053;
  margin-top: 3rem;
}

.camel-slider {
  position: relative;
  height: var(--slide-h); /* viewport shows exactly one full slide (peeks via JS offsets) */
  overflow: hidden;
}

/* ====== Slide Cards ====== */
.racing-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: var(--slide-h);
  padding: 5rem 0 0 0;

  display: flex;
  align-items: stretch;
  font-family: "Oswald", Sans-serif;

  /* centered horizontally, vertically placed by JS */
  transform: translate(-50%, 100%);
  opacity: .35;             /* neighbors dimmed */
  pointer-events: none;
  transition: transform .9s ease, opacity .35s ease, filter .35s ease, scale .35s ease;
  scale: .96;               /* neighbors slightly smaller */
  will-change: transform;
}

.racing-card.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0); /* centered vertically */
  z-index: 2;
  scale: 1;
}

/* soften only the image in neighbors */
.racing-card:not(.active) .camel-image { opacity: .75; filter: saturate(.9); }

/* ====== Slide Content ====== */
.camel-section {
  flex: 1;
  display: flex;
  align-items: stretch;
}

.camel-image {
  width: 100%;
  height: 100%;
  object-fit: scale-down; /* use contain if you prefer full camel */
}

.info-section {
  flex: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 4rem;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* desktop: two columns */
  gap: 1rem;
}

.info-item { display: flex; flex-direction: column; }

.info-label {
  font-size: 14px;
  color: #a0a0a0;
  text-transform: capitalize;
  letter-spacing: 1px;
}

.info-value {
  font-size: 14px;
  color: #fff;
  line-height: 1.3;
}

.carousel-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-top: 30px;
  gap: 1rem;
}

.personality-item { justify-self: start; }

.carousel-counter {
  color: #a0a0a0;
  font-size: 14px;
  white-space: nowrap;
  font-weight: bold;
}

.current-slide { color: #fff; }

.same-col { display: flex; flex-direction: column; gap: 30px; }

/* ====== Vertical Nav Buttons ====== */
.camelvs .cvs-btn {
  position: absolute;
  left: var(--btn-left);
  transform: translateX(-50%);
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 999px;
  border: 0;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  cursor: pointer;
  z-index: 10; /* ensure above slide shadows */
  display: grid;
  place-items: center;
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease, background .18s ease;
  opacity: .9;
  pointer-events: auto;
  touch-action: manipulation; /* better tap response */
}
.camelvs .cvs-btn:hover { transform: translateX(-50%) translateY(-1px) scale(1.02); filter: brightness(1.02); }
.camelvs .cvs-btn:active { transform: translateX(-50%) scale(0.98); }
.camelvs .cvs-btn:disabled { opacity: .35; cursor: default; }
.camelvs .cvs-btn--prev { top: var(--btn-v-gap); }
.camelvs .cvs-btn--next { bottom: var(--btn-v-gap); }
.camelvs .cvs-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* ====== Breakpoints ====== */

/* Tablets */
@media (max-width: 900px) {
  .camel-carousel-container.camelvs {
    --slide-h: clamp(560px, 80vh, 880px);
    --peek: clamp(24px, 7vh, 64px);
    --btn-left: 5.5rem;
    --btn-size: 2.5rem;
  }

  .racing-card { padding: 4rem 1.25rem 0 1.25rem; flex-direction: column; }
  .info-label, .info-value { font-size: 13px; }

  .info-grid { grid-template-columns: 1fr; } /* tablet: stack details */
}

/* Phones */
@media (max-width: 600px) {
  .camel-carousel-container.camelvs {
    --slide-h: clamp(700px, 96vh, 1280px);
    --peek: clamp(20px, 7.5vh, 56px);
    --btn-left: 3.75rem;
    --btn-size: 2.25rem;
  }

  .racing-card {
    padding: 3rem 1rem 3rem 1rem;
    scale: 1; /* avoid over-shrinking on small screens */
  }

  .camel-image { object-position: center bottom; }

  .info-grid {
    grid-template-columns: 1fr 1fr; /* phones: back to two columns */
    gap: 0.875rem;
  }

  .info-section { margin-bottom: 2rem; }
  .camelvs .cvs-btn svg { width: 16px; height: 16px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .camel-carousel-container.camelvs {
    --btn-size: 2rem;
    --peek: clamp(16px, 8vh, 48px);
  }
}

/* Mobile button placement and rotation (like EVS), adapted to .camelvs */
@media (max-width: 700px) {
  .camel-carousel-container.camelvs {
    --safe-top: 12px;
    --safe-bottom: calc(var(--btn-size) + (var(--btn-v-gap) * 2));
    --btn-v-gap: 0.25rem; /* slightly tuck buttons closer */
  }

  /* reset shared button positioning for mobile */
  .camelvs .cvs-btn {
    bottom: var(--btn-v-gap);
    transform: none;        /* remove translateX(-50%) */
    left: auto; right: auto;
	  transform-origin: center center;
  }
.camelvs .cvs-btn:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.02);
  }

  /* Active: scale only, stays in place */
  .camelvs .cvs-btn:active {
    transform: scale(0.98);
  }
  /* place prev on bottom-left, next on bottom-right */
  .camelvs .cvs-btn--prev { top: auto; left: var(--pad-x-min); }
  .camelvs .cvs-btn--next { top: auto; right: var(--pad-x-min); }

  /* rotate up/down icons to left/right for bottom placement */
  .camelvs .cvs-btn--prev svg { transform: rotate(-90deg); }
  .camelvs .cvs-btn--next svg { transform: rotate(-90deg); }
}