/* Riquadro di invito crema (CtaPanel.jsx, come nel prototipo «Immobili»): mezzitoni rossi in alto a destra. */
@layer components {
  .cta-panel {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(28px, 4vw, 56px);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--surface-cream);

    /* Mezzitoni rossi in alto a destra, sfumati (come nel prototipo «Immobili») */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--halftone-red);
      background-size: var(--halftone-size);
      opacity: .3;
      mask-image: radial-gradient(circle at 100% 0%, black 0%, transparent 45%); /* maschera: conta solo l'opacità */
      pointer-events: none;
    }
  }

  .cta-panel__text,
  .cta-panel__button { position: relative; z-index: 1; }

  .cta-panel__text { max-width: 620px; }

  .cta-panel__title {
    margin: 0 0 8px;
    color: var(--text-brand);
    font-family: var(--font-display);
    font-size: var(--fs-h2-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-heading);
    letter-spacing: -0.02em;
  }

  .cta-panel__lead {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-body);
  }

  /* Cerchio giallo con freccia viola, come nel prototipo */
  .cta-panel__button { --btn-knob-bg: var(--action-accent); --btn-knob-fg: var(--text-brand); }
}