/* =====================================================================
   Ad Landing Page — Variant 4 ("You don't need an HR suite to manage
   time off" — focused-leave-management). Loaded *after* the shared
   ad-landing-page.css; only the pieces unique to V4 live here: the
   dashboard + request-card hero collage and the "Leave types" depth
   mock. Everything else is inherited from the shared stylesheet.
   Scoped to .vt-ad-lp--v4 so it never affects the other variants.
   ===================================================================== */

/* ============================ HERO COLLAGE ========================== */
/* Dashboard anchors the back; the leave-request notification card
   floats front-right over it. Both transparent PNGs. */
.vt-ad-lp--v4 .alp-hero-grid--v4 { grid-template-columns: 0.78fr 1.22fr; gap: 48px; }
.vt-ad-lp--v4 .alp-collage-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 80%; /* reserves the collage height (children are absolute) */
}
.vt-ad-lp--v4 .alp-collage-dash {
  position: absolute; top: 0; left: 0; width: 100%; height: auto;
  filter: drop-shadow(0 24px 50px rgba(40, 24, 83, 0.16));
}
.vt-ad-lp--v4 .alp-collage-req {
  position: absolute; bottom: 0; right: 0; width: 54%; height: auto; z-index: 2;
  filter: drop-shadow(0 26px 50px rgba(40, 24, 83, 0.24));
}

/* ===================== 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 V4 script). */
.vt-ad-lp--v4 .bm-type-row {
  transition: background .45s var(--vt-ease), border-color .45s var(--vt-ease);
}
.vt-ad-lp--v4 .bm-type-row.is-hi {
  background: var(--vt-violet-100);
  border-color: var(--vt-violet-200);
}
.vt-ad-lp--v4 .bm-type-name { flex: 1; }
.vt-ad-lp--v4 .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) {
  .vt-ad-lp--v4 .alp-hero-grid--v4 { grid-template-columns: 1fr; gap: 40px; }
  .vt-ad-lp--v4 .alp-collage-wrap { max-width: 520px; margin: 0 auto; }
}