/* =========================================================
   Wonderland — Carousel (images only) + Outside Caption Bar
   Fixes:
   - Caption overlaps carousel by 50px (half its 100px height)
   - Border radius preserved at all widths (viewport owns it)
   - Arrow size/stroke/offset tuned via variables
   ========================================================= */
:root{
  --wtc-brand:  #4c5c39;
  --wtc-white:  #ffffff;
  --wtc-radius: 2vw;

  --wtc-bar-h:   100px;
  --wtc-overlap: calc(var(--wtc-bar-h) / 2); /* 50px */

  /* Arrow tuning */
  --wtc-arrow-d:       clamp(40px, 3.6vw, 56px);
  --wtc-arrow-stroke:  3px;   /* chevron line thickness */
  --wtc-arrow-gap:     max(12px, 2vw); /* side offset */
}

/* Wrapper reserves space so the overlapping bar never collides below */
.wtc-carousel-wrap{
  position: relative;
  padding-bottom: var(--wtc-overlap);
}

/* ---------- Carousel (images only) ---------- */
.wtc-carousel{
  position: relative;
  width: 100%;
  height: 50vw;            /* aspect by width */
  max-height: 95vh;
  margin: 0 auto;
  outline: none;
  contain: layout paint;
}
.wtc-carousel__viewport{
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: var(--wtc-radius); /* keep rounded corners visible */
  background: transparent;
}
.wtc-carousel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  height: 100%;
  transition: transform .45s ease;
  will-change: transform;
}
.wtc-slide{ height: 100%; position: relative; }
.wtc-slide__media{
  height: 100%;
  width: 100%;
  border-radius: inherit;    /* follow viewport radius */
  overflow: hidden;
  background: #ddd;
}
.wtc-slide__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Arrows (pixel-focused) ---------- */
.wtc-carousel__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: var(--wtc-arrow-d);
  height: var(--wtc-arrow-d);
  border-radius: 50%;
  display: grid;
  place-items: center;

  background: var(--wtc-brand);
  color: var(--wtc-white);
  border: none;
  cursor: pointer;

  transition: transform .15s ease, opacity .15s ease;
}
.wtc-carousel__prev{ left: var(--wtc-arrow-gap); }
.wtc-carousel__next{ right: var(--wtc-arrow-gap); }

.wtc-carousel__nav:hover{ transform: translateY(-50%) scale(1.06); }
.wtc-carousel__nav:focus-visible{ outline: 2px solid #e8efd7; outline-offset: 2px; }
.wtc-carousel__nav:disabled{ opacity:.45; cursor: default; }

/* Crisp chevrons */
.wtc-chevron{
  width: 40%;
  height: 40%;
  border-top: var(--wtc-arrow-stroke) solid var(--wtc-white);
  border-right: var(--wtc-arrow-stroke) solid var(--wtc-white);
  transform: rotate(45deg);
  backface-visibility: hidden;
}
.wtc-chevron--left{ transform: rotate(-135deg); }
.wtc-chevron--right{ transform: rotate(45deg); }

/* ---------- Outside Caption Bar ---------- */
/* Position from the TOP of the wrapper so we can anchor to the carousel bottom:
   top: 100% is the bottom of the carousel; subtract overlap to push it 50px up. */
.wtc-caption{
  position: absolute;
  left: 50%;
  top: calc(100% - var(--wtc-overlap)); /* <-- puts 50px inside the carousel */
  transform: translateX(-50%) translateY(-50%);
  height: var(--wtc-bar-h);
  width: min(92%, 1200px);

  background: var(--wtc-brand);
  color: var(--wtc-white);
  border-radius: var(--wtc-radius);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(14px, 2.2vw, 32px);
  box-sizing: border-box;

  z-index: 3; /* above carousel */
  transition: opacity .22s ease;
}
.wtc-caption.is-fading-out{ opacity: 0; }
.wtc-caption.is-fading-in { opacity: 1; }

.wtc-caption__line{
  display: inline-block;
 /* white-space: nowrap; */
  max-width: 100%;
  /* overflow: hidden;
  text-overflow: ellipsis; */
  vertical-align: bottom;
   text-align: center;
}
.wtc-caption__text{
  display: inline-block;
  font-weight: 500;
  letter-spacing: .2px;
  font-size: clamp(16px, 1.9vw, 28px);
  line-height: 1;
  vertical-align: bottom;
   font-family:'new-spirit',serif;
}
.wtc-caption__link{
  display: inline-block;
  margin-left: clamp(10px, 1vw, 18px);
  color: #a0b635;
  font-weight: 600;
  font-size: clamp(14px, 1.7vw, 24px);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  line-height: 1;
  vertical-align: bottom;
}
.wtc-caption__link:hover,
.wtc-caption__link:focus{
  color: #fff;
  text-decoration: none;
}
@media (max-width: 690px){
   .wtc-caption__text{
      display: block;
      line-height:1.3;
   }
.wtc-caption__link{
  display: block;
  margin-left: 0;
   margin-top:9px;
}
}
/* ---------- Responsive ----------
@media (max-width: 900px){
  :root{ --wtc-bar-h: 84px; }
  .wtc-caption{ width: 94%; }
}
@media (max-width: 640px){
  :root{
    --wtc-bar-h: 0px;
    --wtc-overlap: 0px;
    --wtc-radius: 4vw;
  }
  .wtc-carousel-wrap{ padding-bottom: 0; }
  .wtc-caption{ display: none; }
  .wtc-carousel{ height: 62vw; }
}
@media (max-width: 380px){
  .wtc-carousel{ height: 68vw; }
} */