/* =====================================================================
   Ad Landing Page — Variant 2 ("The complete leave system for the messy
   middle"). Loaded *after* the shared ad-landing-page.css; only the pieces
   unique to V2 live here: the 3-card hero collage and the "Leave types"
   depth mock. Everything else is inherited from the shared stylesheet.
   Scoped to .vt-ad-lp--v2 so it never affects Variant 1.
   ===================================================================== */

/* ============================ HERO COLLAGE ========================== */
/* Three transparent PNGs layered into a depth collage: the multi-location
   grid anchors the back, the policies card overlaps front-left, and the
   add-holiday card floats front-right. */
.vt-ad-lp--v2 .alp-collage-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 86%; /* reserves the collage height (children are absolute) */
}
.vt-ad-lp--v2 .alp-collage-loc {
  position: absolute; top: 0; right: 0; width: 80%; height: auto;
  filter: drop-shadow(0 24px 50px rgba(40, 24, 83, 0.16));
}
.vt-ad-lp--v2 .alp-collage-pol {
  position: absolute; bottom: 0; left: 0; width: 54%; height: auto; z-index: 2;
  filter: drop-shadow(0 26px 50px rgba(40, 24, 83, 0.22));
}
.vt-ad-lp--v2 .alp-collage-hol {
  position: absolute; bottom: 7%; right: 0; width: 40%; height: auto; z-index: 3;
  filter: drop-shadow(0 24px 44px rgba(40, 24, 83, 0.26));
}

/* ===================== BENEFIT MOCK 0 — DEPTH ======================= */
/* "Leave types" list: each row carries a rule pill, and one row at a time
   is gently highlighted (cycled by the V2 script). */
.vt-ad-lp--v2 .bm-type-row {
  transition: background .45s var(--vt-ease), border-color .45s var(--vt-ease);
}
.vt-ad-lp--v2 .bm-type-row.is-hi {
  background: var(--vt-violet-100);
  border-color: var(--vt-violet-200);
}
.vt-ad-lp--v2 .bm-type-name { flex: 1; }
.vt-ad-lp--v2 .bm-type-rule {
  font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: -0.1px;
  color: var(--vt-violet); background: var(--vt-violet-100);
  border-radius: 9999px; padding: 3px 10px; white-space: nowrap;
}

/* ============================= RESPONSIVE =========================== */
@media (max-width: 980px) {
  /* Give the stacked collage a touch more breathing room so the floating
     holiday card doesn't crowd the policies card on tablets. */
  .vt-ad-lp--v2 .alp-collage-wrap { max-width: 520px; margin: 0 auto; }
}