/* ==========================================
   Hero Baner (zdjęcie + nagłówek) - custom_hero_banner.
   Pełnoekranowa "geometria" (full-bleed, wysokość, paralaksa, animacja
   wejścia) jest w 100% dziedziczona z widgets/custom-image-banner.css/.js
   przez współdzielone klasy ".cib-wrapper"/".cib-bg" - PATRZ komentarz na
   górze custom-hero-banner-widget.php po wyjaśnienie. Ten plik odpowiada
   WYŁĄCZNIE za elementy, których custom_image_banner nie ma: przyciemnienie
   pod tekstem oraz nadnagłówek/nagłówek/lead/przycisk.
   ========================================== */

/* ------------------------------------------
   Wariant "chb-solid" - brak zdjęcia w tle (świadomy wybór, patrz komentarz
   w PHP): spokojny, ciemny gradient w tonacji marki zamiast fotografii, gdy
   zdjęcie pod spodem zbyt mocno "zjada" tekst. Tekst nie potrzebuje wtedy
   cienia (nie leży na fotografii), więc go zerujemy.
   ------------------------------------------ */
.chb-wrapper.chb-solid {
    background: radial-gradient(120% 140% at 50% 0%, #2a2a2a 0%, #1a1a1a 55%, #111111 100%);
}

.chb-solid .chb-kicker,
.chb-solid .chb-heading,
.chb-solid .chb-lead {
    text-shadow: none;
}

.chb-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-color: #111111;
    opacity: 0.45;
}

.chb-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 32px 24px;
    color: #fff;

    /* Ta sama animacja wejścia (fade + lekkie uniesienie) co przycisk w
       custom-image-banner.css (.cib-content) - włączana klasą .cib-in-view,
       którą custom-image-banner.js dokleja WSZYSTKIM .cib-wrapper na
       stronie, także temu widgetowi. */
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.cib-wrapper.cib-in-view .chb-content {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .chb-content {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.chb-kicker {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #d3c6be;
    margin: 0 0 16px;
    text-shadow: 0 2px 10px color-mix(in srgb, var(--ast-global-color-6, #000000) 60%, transparent);
}

.chb-heading {
    margin: 0 0 14px;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 10px color-mix(in srgb, var(--ast-global-color-6, #000000) 60%, transparent);
}

.chb-lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 2px 8px color-mix(in srgb, var(--ast-global-color-6, #000000) 55%, transparent);
}

.chb-lead + .chb-button,
.chb-heading + .chb-button {
    margin-top: 26px;
}

/* ------------------------------------------
   Przycisk - obrys + wypełnienie na hover, strzałka jak w reszcie motywu
   (.ctp-button, .cib-button) - świadomie ta sama logika interakcji.
   ------------------------------------------ */
.chb-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 14px 30px;
    border: 1.5px solid #fff;
    border-radius: 999px;
    color: #fff;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.chb-button:hover,
.chb-button:focus {
    transform: scale(1.03);
}

.chb-button-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.chb-button:hover .chb-button-arrow {
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .chb-heading { font-size: 1.9rem !important; }
    .chb-lead { font-size: 0.95rem; }
}