/* pkg-b: switcher for section#vip. Loaded after theme-silas3.css. Scoped to #vip only. */
#vip.packages{
  --pk-pad:clamp(1.125rem,3.4vw,2.5rem);
  padding-block:2.5rem 1.25rem;
  background:var(--white);
}
#vip .packages__head{
  gap:.5rem;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:0;
}
#vip .packages__head h2{margin:.35rem 0 0}
#vip .packages__head .lead{font-size:1.0625rem;line-height:1.35;max-width:34ch;margin:0}

/* ---- the switcher (phone first) ---- */
#vip .packages__grid{display:block;position:relative}
#vip .pkg-card{
  position:relative;display:flex;flex-direction:column;justify-content:flex-start;
  gap:0;padding:0;overflow:hidden;margin:0 0 16px;
  background:var(--paper);color:var(--ink);
  border:0;border-radius:20px;
  box-shadow:0 1px 0 rgba(31,31,31,.06),0 14px 30px -18px rgba(31,31,31,.35);
}
#vip .pkg-card:hover{box-shadow:0 1px 0 rgba(31,31,31,.06),0 14px 30px -18px rgba(31,31,31,.35)}
#vip .pkg-card--featured{
  background:var(--graphite);color:var(--on-dark);
  box-shadow:0 0 0 1.5px var(--gold),0 18px 38px -18px rgba(31,31,31,.6);
}

/* photo band, set per card from the existing img/ files (decorative, so CSS only) */
#vip .pkg-card::before{
  content:"";display:block;position:static;flex:none;
  width:100%;aspect-ratio:16/9;
  background:#a4a4a4 center/cover no-repeat;
}
#vip .pkg-card--featured::before{
  display:block;position:static;top:auto;right:auto;
  width:100%;height:auto;border-radius:0;pointer-events:auto;
  background-color:#a4a4a4;background-size:cover;background-repeat:no-repeat;
}
#vip .pkg-card:nth-child(1)::before{
  background-image:url(/img/interior-open-living-800.webp);
  background-image:image-set(url(/img/interior-open-living-800.avif) type("image/avif"),url(/img/interior-open-living-800.webp) type("image/webp"));
  background-position:50% 62%;
}
#vip .pkg-card:nth-child(2)::before{
  background-image:url(/img/exterior-lakeside-800.webp);
  background-image:image-set(url(/img/exterior-lakeside-800.avif) type("image/avif"),url(/img/exterior-lakeside-800.webp) type("image/webp"));
  background-position:50% 52%;
}
#vip .pkg-card:nth-child(3)::before{
  background-image:url(/img/drone-cedres-lake-800.webp);
  background-image:image-set(url(/img/drone-cedres-lake-800.avif) type("image/avif"),url(/img/drone-cedres-lake-800.webp) type("image/webp"));
  background-position:50% 46%;
}

/* top block: badge floats on the photo, name + price under it */
#vip .pkg-card__top{
  position:static;display:block;
  padding:14px 20px 0;border:0;
}
#vip .pkg-card__meta{position:static;display:block;min-height:0;margin:0}
#vip .pkg-card__num{display:none}
#vip .pkg-card__badge{
  position:absolute;top:12px;left:12px;z-index:2;
  min-height:30px;padding:.3rem .8rem;
  background:#fff;color:var(--mint-ink);
  font-size:.75rem;letter-spacing:.07em;font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
#vip .pkg-card--featured .pkg-card__badge{background:var(--mint);color:var(--mint-ink)}
#vip .pkg-card__name{
  margin:0;font-size:1.5rem;line-height:1.1;letter-spacing:-.01em;
  color:var(--ink-soft);
}
#vip .pkg-card--featured .pkg-card__name{color:var(--on-dark-soft)}
#vip .pkg-card__price-row{margin:2px 0 0}
#vip .pkg-card__price{
  font-size:3rem;line-height:1.05;letter-spacing:-.02em;
}
#vip .pkg-card:nth-child(3) .pkg-card__price{font-size:2.75rem}

#vip .pkg-card__features{
  display:grid;gap:7px;margin:0;padding:14px 20px 0;flex:none;
}
#vip .pkg-card__feature{font-size:.96875rem;line-height:1.35;font-weight:500;gap:10px;align-items:center}
#vip .pkg-card__check{margin-top:0;width:18px;height:18px}
#vip .pkg-card__foot{padding:16px 20px 20px;margin-top:auto}
#vip .pkg-card__btn{
  margin:0;width:100%;min-height:52px;font-size:1.0625rem;
}
#vip .pkg-card__btn--outline{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
#vip .pkg-card__btn--outline:hover{background:var(--ink);color:#fff}
#vip .pkg-card__btn--featured{background:var(--mint);color:var(--mint-ink)}
#vip .pkg-card__btn:after{content:none!important;display:none!important}

/* segmented control (injected by pkg-b.js; hidden on desktop) */
#vip .pkg-tabs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  padding:4px;margin:0 0 14px;
  background:var(--paper);border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line);
}
#vip .pkg-tabs button{
  appearance:none;border:0;cursor:pointer;font:inherit;
  min-height:48px;padding:0 .5rem;border-radius:999px;
  background:transparent;color:var(--ink);
  font-size:1rem;font-weight:600;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  transition:background-color .2s ease,color .2s ease;
}
#vip .pkg-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
#vip .pkg-tabs button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#vip .pkg-tabs .pkg-tabs__star{font-size:.8125rem;color:var(--gold-ink)}
#vip .pkg-tabs button[aria-selected="true"] .pkg-tabs__star{color:var(--gold)}
#vip[data-pkg="switch"] .pkg-card:not(.is-on){display:none}
#vip[data-pkg="switch"] .pkg-card.is-on{animation:pkgIn .28s ease both}
@keyframes pkgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  #vip .pkg-tabs button{transition:none}
  #vip[data-pkg="switch"] .pkg-card.is-on{animation:none}
}

/* ---- desktop: three cards side by side, no deck ---- */
@media (min-width:860px){
  #vip.packages{padding-block:clamp(4rem,3rem + 3vw,6rem)}
  #vip .packages__head{margin-bottom:2rem;padding-bottom:0}
  #vip .packages__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  #vip .pkg-card{margin:0}
  #vip[data-pkg="switch"] .pkg-card:not(.is-on){display:flex}
  #vip[data-pkg="switch"] .pkg-card.is-on{animation:none}
  #vip .pkg-card::before{aspect-ratio:16/9}
  #vip .pkg-card--featured{transform:translateY(-8px)}
  #vip .pkg-card__top{padding:22px 28px 0}
  #vip .pkg-card__name{font-size:1.75rem}
  #vip .pkg-card__price{font-size:3.5rem}
  #vip .pkg-card:nth-child(3) .pkg-card__price{font-size:3.25rem}
  #vip .pkg-card__features{padding:18px 28px 0;gap:9px}
  #vip .pkg-card__foot{padding:22px 28px 28px}
  #vip .pkg-card__badge{top:16px;left:16px}
  #vip .pkg-tabs{display:none}
}
@media (min-width:860px) and (prefers-reduced-motion:no-preference){
  #vip .pkg-card{transition:box-shadow .2s ease}
}