/* Container fades in once the start slide is set. */
.vc-pricing { transition: opacity .4s ease; }
.vc-pricing.vc-loading { opacity: 0; }

.vc-pricing .swiper { overflow: hidden; }

/* Keep the carousel from forcing its Beaver Builder flex-item ancestors (the
   Shortcode module + its box) to grow to the carousel's intrinsic width. Without
   this, a flex item's default min-width:auto refuses to shrink below the content,
   so on mobile the slider balloons to the browser's max element width and its
   content disappears. Letting the ancestors shrink lets .swiper's overflow:hidden
   clip. :has() scopes this to our slider only, so other BB modules are untouched. */
.fl-module-box:has(.vc-pricing),
.fl-module-html:has(.vc-pricing),
.vc-pricing,
.vc-pricing .swiper { min-width: 0; max-width: 100%; }
.fl-module-html:has(.vc-pricing),
.vc-pricing { overflow-x: hidden; }

/* Peek style C: active card opaque, the rest faded. Slide WIDTH is set by Swiper
   via slidesPerView (see vc-slider.js) — never with a CSS percentage, which spirals
   under slidesPerView:'auto' when the container width is indefinite (mobile). */
.vc-pricing .swiper-slide {
  height: auto;
  opacity: .32;
  transition: opacity .4s ease;
}
.vc-pricing .swiper-slide-active { opacity: 1; }

/* Card design (beige card, inset green price square, large serif name) — matches
   the original Beaver Builder box layout. Name uses the theme heading face (Gelica)
   at a size close to the section heading. */
.vc-card__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  background: #e8e4d8;
  border-radius: 14px;
  padding: 20px;            /* beige border showing around the inset price square */
  min-height: 172px;
  box-sizing: border-box;
}
.vc-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 14px;
}
.vc-card__name {
  font-family: Gelica, Georgia, "Times New Roman", serif;
  font-size: 48px;
  line-height: 1.0;
  color: #1c1c1c;
  margin: 0;
}
.vc-card__link {
  margin-top: 18px;
  font-size: 15px;
  color: #1c1c1c;
  text-decoration: none;
  border-bottom: 1px solid #1c1c1c;
  align-self: flex-start;
  padding-bottom: 2px;
}
.vc-card__price {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: stretch;      /* fill the padded inner height -> inset green square */
  min-width: 160px;
  padding: 0 22px;
  border-radius: 10px;
  background: #54b85a;
  font-family: Gelica, Georgia, serif;
  font-size: 34px;
  color: #10240f;
}

@media (max-width: 781px) {
  .vc-card__inner { min-height: 150px; padding: 16px; gap: 12px; }
  .vc-card__body { padding: 2px 6px; }
  /* Smaller so the longest single-word names (Christchurch, Wellington) fit on
     one line in the narrower card; multi-word names wrap at the space. */
  .vc-card__name { font-size: 26px; }
  .vc-card__price { min-width: 96px; padding: 0 14px; font-size: 26px; }
}