/* ==================================================================
   FINAL CTA — "Premium Split" redesign (2026-07)
   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.
   ================================================================== */

/* The base `.vk-cta` rule (wickets-home.css) sets padding-block up to a
   96px cap — nearly double the page's shared `.vk-section` cap, which
   reads as a jarring extra gap right before/after the final CTA.
   Override to a more modest premium bump (own class, one extra selector
   beats `.vk-cta` alone at equal specificity — no !important needed).
   Horizontal padding (var(--vk-pad)) is unchanged. Reduced further in the
   page-wide "less breathing room" pass to stay proportionate with the
   shared .vk-section cap (40px). */
.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, 1.05fr) minmax(0, 0.85fr);
  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; }
.vk-cta__content .vk-cta__buttons { justify-content: flex-start; margin-top: 32px; }

/* ---------- visual: framed portrait with gold edge-glow + trust chip ---------- */
.vk-cta__visual {
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.vk-cta__frame {
  position: relative;
  width: min(100%, 300px);
  border-radius: 26px;
  padding: 10px;
  background: linear-gradient(160deg, rgba(232, 162, 0, .55) 0%, rgba(200, 134, 11, .18) 45%, rgba(255, 255, 255, .65) 100%);
  box-shadow: 0 30px 70px -22px rgba(138, 90, 10, .45), 0 0 0 1px rgba(200, 134, 11, .22);
}
.vk-cta__frame::before {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -1;
  border-radius: 34px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(232, 162, 0, .38), transparent 70%);
  filter: blur(22px);
}
.vk-cta__img {
  display: block;
  width: 100%;
  height: clamp(280px, 34vw, 420px);
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.vk-cta__chip {
  position: absolute;
  left: -18px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #FFFFFF;
  border-radius: 999px;
  box-shadow: 0 14px 30px -10px rgba(30, 27, 20, .28), 0 0 0 1px rgba(200, 134, 11, .18);
  font-family: var(--vk-font-en);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vk-gold-3);
  letter-spacing: .02em;
  white-space: nowrap;
}
.vk-cta__chip svg { width: 15px; height: 15px; color: var(--vk-gold); flex: none; }

/* ---------- 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__content .vk-cta__buttons { justify-content: center; }
  .vk-cta__visual { order: -1; margin-bottom: 10px; }
  /* was capped at 230px — left a lot of bare gutter either side of the
     portrait on phones even though the column had the width to spare.
     Site-wide mobile pass: images should read as full-width, not a small
     floating badge. */
  .vk-cta__frame { width: min(100%, 360px); }
  .vk-cta__img { height: clamp(220px, 66vw, 340px); }
  .vk-cta__chip { left: 50%; transform: translateX(-50%); bottom: -14px; }
}

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