/* ==================================================================
   FINAL CTA — "Premium Split" redesign (2026-07, v2 "Winner's Table")
   Scoped to `.vk-cta--premium` / `.vk-cta__inner--split` /
   `.vk-cta__content` / `.vk-cta__visual` — new modifier classes added
   only to the CTA widget's own markup (vp0016), so this file cannot
   touch the base `.vk-cta` rules other pages may reuse in future.
   Loads last in the vk cascade (after platform-pills.css) so it wins
   at equal specificity without needing !important.

   v2 (2026-07): swapped the tall stock portrait for a wide casino-table
   photo (couple, chips, champagne, cigar smoke) — a much stronger visual
   match for a final "close the deal" CTA than the old cropped portrait.
   The frame goes landscape to fit it natively (no more forcing a 2:3 crop
   onto a photo that reads best wide), gains a second floating trust card
   (reuses hero-v6.css's `hv6-float` keyframe — already loaded earlier in
   the cascade, so no new keyframe needed), and the copy side gains a
   3-item assurance strip so the panel doesn't lean on the image alone to
   carry "why trust us" weight.
   ================================================================== */

.vk-cta--premium { padding: clamp(34px, 4vw, 50px) var(--vk-pad); text-align: left; }

.vk-cta__inner--split {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  text-align: left;
}

.vk-cta__content { position: relative; z-index: 1; }
.vk-cta__content .vk-eyebrow,
.vk-cta__content .vk-h1,
.vk-cta__content .vk-lead { text-align: left; }
.vk-cta__content .vk-lead { max-width: 54ch; }

/* ---------- trust strip: three quick assurances under the lead ---------- */
.vk-cta__assure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.vk-cta__assure li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vk-font-bn);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vk-text-mid);
}
.vk-cta__assure svg { flex: none; width: 17px; height: 17px; color: var(--vk-gold-3); }

.vk-cta__content .vk-cta__buttons { justify-content: flex-start; margin-top: 28px; }

/* ---------- visual: wide cinematic frame + floating trust cards ---------- */
.vk-cta__visual {
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.vk-cta__frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 26px;
  padding: 10px;
  background: linear-gradient(160deg, rgba(232, 162, 0, .6) 0%, rgba(200, 134, 11, .2) 45%, rgba(255, 255, 255, .65) 100%);
  box-shadow: 0 34px 80px -24px rgba(23, 21, 15, .55), 0 0 0 1px rgba(200, 134, 11, .22);
}
.vk-cta__frame::before {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 34px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(232, 162, 0, .34), transparent 70%);
  filter: blur(24px);
}
.vk-cta__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: 50% 24%;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
/* bottom vignette — guarantees the corner chip always sits on a dark patch
   of the photo regardless of what the source image shows at that edge */
.vk-cta__frame::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  height: 44%;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 8, 5, .55) 100%);
  pointer-events: none;
}

/* floating trust cards — same white-glass-card language as hero-v6.css's
   .hv6-card (gold icon chip + bold number + small label), scoped under a
   new prefix since they're positioned differently here */
.vk-cta__card {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(26, 24, 19, .08);
  box-shadow: 0 16px 38px -10px rgba(23, 21, 15, .32), 0 1px 0 rgba(255, 255, 255, .8) inset;
  white-space: nowrap;
  animation: hv6-float 6s ease-in-out infinite;
}
.vk-cta__card-ic {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #FFCF3D 0%, #F7B900 55%, #E6AD00 100%);
  color: #1A1813;
  box-shadow: 0 6px 14px rgba(200, 134, 11, .35);
}
.vk-cta__card-ic svg { width: 15px; height: 15px; display: block; }
.vk-cta__card-num { display: block; font-family: var(--vk-font-en); font-size: 14px; font-weight: 800; color: #17150F; line-height: 1.3; }
.vk-cta__card-lbl { display: block; font-family: var(--vk-font-bn); font-size: 10.5px; font-weight: 600; color: #6B6353; }

.vk-cta__card--chip    { left: -14px; bottom: 22px; animation-delay: .2s; }
.vk-cta__card--support { right: -14px; top: 22px; animation-delay: .8s; }

/* ---------- background refinement — warmer, slightly stronger glow ---------- */
.vk-cta--premium .vk-cta__bg::before {
  background:
    radial-gradient(55% 60% at 78% 20%, rgba(232, 162, 0, .26) 0%, transparent 62%),
    radial-gradient(45% 55% at 15% 85%, rgba(200, 134, 11, .20) 0%, transparent 62%),
    radial-gradient(35% 45% at 50% 50%, rgba(255, 199, 44, .12) 0%, transparent 65%);
  filter: blur(46px);
}

/* ---------- responsive: stack, image above copy ---------- */
@media (max-width: 860px) {
  .vk-cta__inner--split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .vk-cta__content .vk-eyebrow,
  .vk-cta__content .vk-h1,
  .vk-cta__content .vk-lead { text-align: center; }
  .vk-cta__content .vk-lead { margin-left: auto; margin-right: auto; }
  .vk-cta__assure { justify-content: center; }
  .vk-cta__content .vk-cta__buttons { justify-content: center; }
  .vk-cta__visual { order: -1; margin-bottom: 10px; }
  .vk-cta__frame { max-width: 420px; }
  .vk-cta__card--chip { left: 50%; transform: translateX(-50%); bottom: -14px; }
  /* two floating cards + a centered narrow frame gets cramped fast —
     keep only the bottom one once the layout stacks */
  .vk-cta__card--support { display: none; }
}

@media (max-width: 480px) {
  .vk-cta__card--chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vk-cta__card { animation: none; }
}