/*
 * Komponent: Shortcode
 * -------------------------------------------
 */

.ka-component-shortcode {
    margin: 1rem 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Placeholder dla pustego shortcode'u */
.ka-component-shortcode.ka-shortcode-empty {
    padding: 2rem;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background: var(--ka-shortcode-empty-bg, var(--bs-light, var(--wp--preset--color--background, #f8f9fa)));
    border: 2px dashed var(--ka-shortcode-empty-border, var(--bs-border-color, #dee2e6));
    border-radius: var(--ka-shortcode-empty-radius, var(--bs-border-radius, 0.375rem));
    text-align: center;
}

.ka-component-shortcode .ka-shortcode-placeholder {
    margin: 0;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-shortcode-placeholder-color, var(--bs-secondary, var(--wp--preset--color--secondary, #6c757d)));
    font-style: italic;
    font-size: inherit;
}

/* Responsywność */
@media (max-width: 768px) {
    .ka-component-shortcode {
        margin: 0.75rem 0;
    }
    
    .ka-component-shortcode.ka-shortcode-empty {
        padding: 1.5rem;
    }
    
    .ka-component-shortcode .ka-shortcode-placeholder {
        font-size: 1em;
    }
}

/* Maksymalna szerokość dla lepszej czytelności */
.ka-component-shortcode {
    max-width: 100%;
}

/* Obsługa różnych typów kontenerów */
.ka-component-shortcode[data-container="section"] {
    display: block;
}

.ka-component-shortcode[data-container="span"] {
    display: inline;
}

.ka-component-shortcode[data-container="article"] {
    display: block;
}