CTABLK

/* -- CTA (website · Events & Promotions) ----------------------------------

   Combines a focused message with a prominent action - centered, split, on a dark glow or over a picture. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-cta, .mk-cta *, .mk-cta ::before, .mk-cta ::after) { box-sizing: border-box; }

  .mk-cta { container: mk-cta / inline-size; width: 100%; }

  .mk-cta-inner {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.25rem;

    padding: 3.5rem 1.5rem;

    border-radius: var(--radius-xl);

    background: var(--muted);

    text-align: center;

  }

  .mk-cta-copy { display: grid; gap: 0.75rem; justify-items: inherit; max-width: 40rem; }

  .mk-cta-title { margin: 0; font-size: clamp(1.75rem, 4.5cqi, 2.75rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }

  .mk-cta-desc { margin: 0; color: var(--muted-foreground); font-size: 1.0625rem; text-wrap: pretty; }

  .mk-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

  .mk-cta-note { margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }

  .mk-cta-form { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; max-width: 26rem;

    & .input { flex: 1 1 12rem; }

  }

  .mk-cta[data-variant="dark"] .mk-cta-inner {

    background:

      radial-gradient(50% 80% at 15% 0%, color-mix(in oklch, var(--chart-1) 45%, transparent), transparent 70%),

      radial-gradient(45% 80% at 90% 100%, color-mix(in oklch, var(--chart-2) 40%, transparent), transparent 70%),

      var(--foreground);

    color: var(--background);

    & :is(.mk-cta-desc, .mk-cta-note) { color: color-mix(in oklch, var(--background) 72%, transparent); }

  }

  .mk-cta[data-variant="image"] .mk-cta-inner {

    padding-block: 5rem;

    background: transparent;

    color: #fff;

    &::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(oklch(0.15 0.02 260 / 0.55), oklch(0.15 0.02 260 / 0.75)); }

    & .mk-cta-desc { color: oklch(1 0 0 / 0.82); }

    & .btn[data-variant="outline"] { border-color: oklch(1 0 0 / 0.45); background: transparent; color: inherit; }

  }

  .mk-cta-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }

  @container mk-cta (min-width: 44rem) {

    .mk-cta[data-variant="split"] .mk-cta-inner { flex-direction: row; justify-content: space-between; gap: 2rem; padding: 2.5rem 3rem; text-align: start; }

    .mk-cta[data-variant="split"] .mk-cta-copy { justify-items: start; }

    .mk-cta[data-variant="split"] .mk-cta-actions { flex: none; }

  }

  /* -- Accessibility ------------------------------------------- */

  @media (forced-colors: active) {

    .mk-cta-inner { border: 1px solid CanvasText; }

  }

}