/*
 * Komponent: Baner
 * -------------------------------------------
 */

.ka-component-banner {
    position: relative;
    padding: 60px 20px;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--ka-banner-text-color, var(--bs-white, #fff));
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    display: flex;
    justify-content: center; /* Domyślne wyrównanie w poziomie */
    align-items: center; /* Domyślne wyrównanie w pionie */
}

/* Oddzielna nakładka, aby nie wpływała na obraz tła */
.ka-component-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.ka-component-banner .banner-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.ka-component-banner h2 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0 0 10px 0;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--banner-text-color, var(--ka-banner-text-color, var(--bs-white, #ffffff))) !important;
}

.ka-component-banner p {
    font-size: inherit;
    margin: 0 0 20px 0;
    opacity: 0.9;
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    color: var(--banner-text-color, var(--ka-banner-text-color, var(--bs-white, #ffffff))) !important;
}

.ka-component-banner .button {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background-color: var(--ka-banner-button-bg, var(--bs-white, #fff));
    color: var(--ka-banner-button-color, var(--bs-body-color, var(--wp--preset--color--foreground, #333)));
    padding: 12px 25px;
    text-decoration: none;
    border-radius: var(--ka-banner-button-radius, var(--bs-border-radius, 0.375rem));
    font-weight: inherit;
    transition: inherit;
}

.ka-component-banner .button:hover {
    /* ✅ POPRAWKA: Użyj wartości z motywu jako fallback */
    background-color: var(--ka-banner-button-bg-hover, var(--bs-light, #eee));
    transform: translateY(-2px);
}

/* Modyfikatory wyrównania w poziomie */
.ka-component-banner.ka-banner-align--left { justify-content: flex-start; }
.ka-component-banner.ka-banner-align--center { justify-content: center; }
.ka-component-banner.ka-banner-align--right { justify-content: flex-end; }

/* Modyfikatory wyrównania w pionie */
.ka-component-banner.ka-banner-valign--top { align-items: flex-start; }
.ka-component-banner.ka-banner-valign--middle { align-items: center; }
.ka-component-banner.ka-banner-valign--bottom { align-items: flex-end; }

.ka-banner-align--left .banner-content { text-align: left; }
.ka-banner-align--center .banner-content { text-align: center; }
.ka-banner-align--right .banner-content { text-align: right; }


/* Modyfikator szerokości */
.ka-banner-width--contained {
    max-width: 1200px; /* Domyślna szerokość kontenera, można dostosować */
    margin-left: auto;
    margin-right: auto;
}

/* Modyfikatory wysokości banera */
.ka-banner-height--small { min-height: 300px; }
.ka-banner-height--medium { min-height: 500px; }
.ka-banner-height--large { min-height: 700px; }
.ka-banner-height--full { min-height: 100vh; }