/* ==========================================
   Custom Text Block - elegancki blok tekstowy
   Nagłówek + separator + treść, z delikatną
   animacją pojawiania się przy wejściu w viewport.
   ========================================== */

.cet-wrapper {
    width: 100%;
    padding: clamp(24px, 5vw, 64px) 0;
    box-sizing: border-box;
}

.cet-inner {
    width: 100%;
}

/* ------------------------------------------
   Marginesy - na wyraźną prośbę klienta ("zmniejszmy je o ok. 25-30% w
   stosunku do tego co jest obecnie, dotyczy wszystkich podstron").

   Ten widget (Custom Text Block) to główny "manifest marki" - tekst
   wprowadzający na niemal każdej podstronie (widoczny m.in. na stronie
   głównej i na "O nas") - i to właśnie jego kontrolki "Maksymalna szerokość
   treści" / "Maksymalna szerokość nagłówka" (procentowe, ustawiane osobno
   dla KAŻDEJ instancji w Elementorze) są głównym źródłem wąskich marginesów,
   o których pisze klientka - zmierzone na żywo na "O nas": nagłówek 80%
   szerokości, treść 78% szerokości.

   Zamiast ręcznie poprawiać dziesiątki osobnych instancji tego widgetu na
   każdej podstronie w Elementorze, nadpisujemy tu obie wartości globalnie
   przez !important - to jedna zmiana, widoczna wszędzie, zgodnie z prośbą
   "niech to dotyczy wszystkich podstron". 88% / 92% odpowiada zmniejszeniu
   marginesu o ok. 25-30% względem typowych dotychczasowych wartości (78-80%
   szerokości -> ok. 20-22% marginesu bocznego -> po zmianie ok. 8-12%).

   Jeśli na którejś konkretnej podstronie widget był celowo ustawiony na
   węższą szerokość (np. krótki cytat wyśrodkowany w wąskiej kolumnie),
   również zostanie odpowiednio poszerzony - to świadomy kompromis za cenę
   jednej, spójnej zmiany zamiast edycji każdej strony z osobna. */
.cet-inner {
    max-width: 92% !important;
}

.cet-heading {
    max-width: 88% !important;
}

.cet-heading {
    margin: 0 0 0.2em 0;
    font-family: inherit;
    /* Na wyraźną prośbę klienta ("ten górny pogrubiony poproszę o kursywę,
       będzie bardziej spójne z resztą strony") - część nagłówków tego widgetu
       (np. "Inspiruje nas elegancja...") była zapisana per-instancję jako
       zwykła pogrubiona czcionka, podczas gdy większość pozostałych już
       używa kursywy. !important wymusza kursywę WSZĘDZIE, gdzie użyto tego
       widgetu, niezależnie od tego, co zapisano w ustawieniach danej
       instancji w Elementorze - tam, gdzie kursywa już była ustawiona,
       nic się wizualnie nie zmienia. */
    font-style: italic !important;
}

/*
 * Kursywa dla nagłówka na stronie głównej ("Inspiruje nas elegancja
 * klasycznych form, które interpretujemy we współczesny sposób.") - dla
 * spójności z innymi wyróżnionymi nagłówkami na stronie. Celujemy w
 * konkretny element po unikalnym ID nadawanym przez Elementor, a nie
 * globalnie we wszystkie instancje tego widgetu - bo ten sam widget jest
 * używany też z innymi, "zwykłymi" nagłówkami, których nie zmieniamy.
 */
.elementor-element-c38e7cc .cet-heading {
    font-style: italic;
}

.cet-content {
    margin: 0;
}

.cet-content p {
    margin: 0 0 1em 0;
}

.cet-content p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------
   Separator
   ------------------------------------------ */
.cet-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.cet-divider-line {
    display: inline-block;
    height: 1px;
    background-color: var(--nl-accent-gold, #d3c6be);
    opacity: 0.75;
}

.cet-divider-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--nl-accent-gold, #d3c6be);
    flex-shrink: 0;
}

.cet-divider-style-dot .cet-divider-dot {
    width: 8px;
    height: 8px;
}

/* ------------------------------------------
   Animacja: nagłówek, separator i treść
   "wyłaniają się" kolejno (opóźnienie sterowane
   zmienną --cet-order oraz --cet-stagger),
   delikatne uniesienie + rozjaśnienie.
   Uruchamiana dodaniem klasy .cet-in-view przez JS,
   gdy element wejdzie w widoczny obszar ekranu.
   ------------------------------------------ */
.cet-animated .cet-item {
    opacity: 0;
    transform: translateY(22px);
    will-change: opacity, transform;
}

.cet-animated.cet-in-view .cet-item {
    animation-name: cet-fade-in-up;
    animation-duration: var(--cet-duration, 1100ms);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: forwards;
    animation-delay: calc(var(--cet-order, 0) * var(--cet-stagger, 160ms));
}

/* Separator ma dodatkowo swój własny, subtelny efekt "rozciągania się" linii,
   niezależnie od pojawienia się reszty treści - podkreśla charakter elementu jako
   delikatnego, precyzyjnego detalu, a nie zwykłej kreski. */
.cet-animated .cet-divider-line {
    transform: scaleX(0);
    transform-origin: center;
    will-change: transform;
}

.cet-animated.cet-in-view .cet-divider {
    animation-name: cet-fade-in-up;
    animation-duration: var(--cet-duration, 1100ms);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: forwards;
    animation-delay: calc(var(--cet-order, 0) * var(--cet-stagger, 160ms));
}

.cet-animated.cet-in-view .cet-divider-line {
    animation-name: cet-line-grow;
    animation-duration: calc(var(--cet-duration, 1100ms) * 0.9);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: forwards;
    animation-delay: calc(var(--cet-order, 0) * var(--cet-stagger, 160ms) + 120ms);
}

@keyframes cet-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cet-line-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Osoby preferujące ograniczony ruch na ekranie - bez animacji, treść widoczna od razu. */
@media (prefers-reduced-motion: reduce) {
    .cet-animated .cet-item,
    .cet-animated .cet-divider-line {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* ------------------------------------------
   Responsywność - telefony
   ------------------------------------------ */
@media (max-width: 767px) {
    .cet-divider-line {
        max-width: 40px;
    }
}