/* ============================================================
   NearU - Final CTA Banner Section
   Tokens from theme-tokens.css; section shell from components.css
   ============================================================ */

/* ---------- Banner ---------- */
.nearu-cta-banner {
    background: var(--brand-gradient);
    border-radius: var(--radius-panel);
    padding: 30px 36px;
    box-shadow: 0 18px 40px rgba(181, 0, 86, .18);
}

/* ---------- Left: illustration + copy ---------- */
.nearu-cta-left {
    display: flex;
    align-items: center;
    gap: 22px;
}
.nearu-cta-illus {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
}
.nearu-cta-illus img { width: 100%; height: auto; display: block; }
.nearu-cta-illus-fallback { display: none; font-size: 52px; line-height: 1; }
.nearu-cta-illus.is-empty .nearu-cta-illus-fallback { display: block; }

.nearu-cta-title {
    color: #fff;
    font-weight: var(--fw-bold);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.25;
    margin: 0 0 6px;
}
.nearu-cta-text {
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    max-width: 420px;
}

/* ---------- Right: buttons (white pill on gradient) ---------- */
.nearu-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}
.nearu-cta-btn {
    background: #fff;
    color: var(--nearu-primary);
    border: 1px solid #fff;
    border-radius: var(--radius-pill);
    font-weight: var(--fw-bold);
    font-size: 14px;
    padding: 11px 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.nearu-cta-btn i { font-size: 16px; }
.nearu-cta-btn:hover {
    background: rgba(255, 255, 255, .92);
    color: var(--nearu-primary);
    transform: translateY(-1px);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991.98px) {
    .nearu-cta-banner { padding: 28px 26px; }
    .nearu-cta-actions { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
    .nearu-cta-banner { padding: 24px 18px; }
    .nearu-cta-left { flex-direction: column; text-align: center; gap: 14px; }
    .nearu-cta-text { max-width: 100%; }
    .nearu-cta-actions { flex-direction: column; }
    .nearu-cta-btn { justify-content: center; width: 100%; }
}