/* =========================================================================
   form-placeholder.css — wspólny kafelek-CTA dla shortcode-ów formularzy
   on-line (rev. g etap 3+4, 04.05.2026). Używany przez:

     - `lib/nexforms.php` (plugin NEXForms, shortcode `[NEXForms id="X"]`)
     - `lib/vfb.php`      (plugin Visual Form Builder Pro, shortcode `[vfb id=X]`)

   Tymczasowe rozwiązanie: zamiast natywnego renderu formularza (oba pluginy
   są JS-heavy z dziesiątkami CSS/JS w runtime), pokazujemy elegancki kafelek
   z linkiem do tej samej strony BEZ `?ns=1` — tam WP renderuje pełen formularz.

   Klasy używają BEM-owej konwencji `.form-placeholder`. Aliasy `.nexform-placeholder`
   na czas migracji NIE są potrzebne — adapter `lib/nexforms.php` aktualnie
   generuje `.form-placeholder`.
   ========================================================================= */

.form-placeholder {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    margin-block: var(--s-6);
    padding: var(--s-5) var(--s-5);
    background: var(--green-50);
    border: 1px solid var(--green-100, var(--border));
    border-left: 4px solid var(--accent-warm-600, var(--green-700));
    border-radius: var(--r-card);
    color: var(--text);
}

.form-placeholder__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--accent-warm-600, var(--green-700));
}

.form-placeholder__icon .icon {
    width: 28px;
    height: 28px;
}

.form-placeholder__body {
    flex: 1;
    min-width: 0;
}

.form-placeholder__title {
    margin: 0 0 var(--s-2);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--green-800);
    line-height: 1.4;
}

.form-placeholder__kicker {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2px;
}

.form-placeholder__hint {
    margin: 0 0 var(--s-3);
    font-size: .9375rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.form-placeholder__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--accent-warm-600, var(--green-700));
    color: #fff;
    border-radius: 999px;
    font-weight: 500;
    font-size: .9375rem;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}

.form-placeholder__cta:hover,
.form-placeholder__cta:focus-visible {
    background: var(--green-800);
    transform: translateX(2px);
    color: #fff;
}

.form-placeholder__cta:focus-visible {
    outline: 2px solid var(--accent-gold-500, var(--green-700));
    outline-offset: 2px;
}

.form-placeholder__cta .icon {
    flex-shrink: 0;
}

.form-placeholder__note {
    display: block;
    margin-top: var(--s-3);
    font-size: .8125rem;
    color: var(--text-muted);
    font-style: italic;
}

/* === Responsive === */
@media (max-width: 600px) {
    .form-placeholder {
        flex-direction: column;
        gap: var(--s-3);
        padding: var(--s-4);
    }
    .form-placeholder__icon {
        width: 44px;
        height: 44px;
    }
    .form-placeholder__icon .icon {
        width: 22px;
        height: 22px;
    }
    .form-placeholder__cta {
        width: 100%;
        justify-content: center;
    }
}