/* =============================================================================
   cta.css — wspólne budulce marki (ICOD-002, dekompozycja schstyle.css)

   Elementy uzywane w WIELU miejscach (homepage hero, sekcja kontaktu, mostek CTA
   na blogu). Wydzielone, zeby nie kopiowac tego samego kodu 3 razy — siatka markowa
   byla zduplikowana w #home, #contact i .blog-cta-band identycznie.

   Zawiera:
     .brand-bg    — tlo markowe (siatka 46px + poswiata), sparametryzowane zmiennymi
     .cta-btn     — przyciski "Wole maila / Wole videorozmowe" (ghost -> zielone)
     .cta-akcent  — wyroznienie slowa limonka (haslo CTA)
   ============================================================================= */

/* --- Tlo markowe (branding.md §4) -------------------------------------------
   Element z klasa .brand-bg dostaje siatke (::before) i poswiate (::after).
   KAZDY kontekst ustawia wlasne parametry przez zmienne — siatka jest wspolna,
   maska i poswiata roznia sie per miejsce (rog na hero, srodek na kontakcie/blogu). */
.brand-bg{
    position: relative;
    overflow: hidden;
}
.brand-bg::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(#ffffff10 1px, transparent 1px),
        linear-gradient(90deg, #ffffff10 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: var(--brand-mask);
            mask-image: var(--brand-mask);
}
.brand-bg::after{
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    top: var(--brand-glow-top);
    left: var(--brand-glow-left);
    width: var(--brand-glow-w);
    height: var(--brand-glow-h);
    max-width: var(--brand-glow-maxw, 125vw);
    max-height: var(--brand-glow-maxh, none);
    transform: var(--brand-glow-transform, none);
    background: var(--brand-glow);
}

/* --- Przyciski CTA ----------------------------------------------------------
   Ghost (biala ramka) domyslnie, hover+klik -> zielone. Te same na homepage
   (#contact) i na blogu (.blog-cta). Globalna klasa .cta-btn zamiast dwoch
   skopiowanych regul z prefiksem. */
.cta-btn{
    display: inline-flex; align-items: center; gap: 9px; font-weight: 700; border-radius: 10px;
    padding: 14px 26px; font-size: 16px; text-decoration: none;
    background: transparent; border: 1.5px solid #ffffff28; color: #fff !important;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.cta-btn i{ color: inherit !important; font-size: 16px; }
.cta-btn:hover,
.cta-btn:focus,
.cta-btn:active{
    background: var(--schcolor1);
    border-color: var(--schcolor1);
    color: #202020 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(178,204,38,.32);
}

/* --- Ikony social -----------------------------------------------------------
   Kwadraciki z zaokraglonym rogiem, hover -> limonka i podniesienie. Byly przypiete
   do `#contact`, ale to samo jest potrzebne na CV — wiec globalna klasa, tak jak
   `.cta-btn`. Uzycie: `<ul class="cta-social">`, a ikona siedzi na SAMYM `<a>`
   (`class="fa fa-facebook"`), bez zagniezdzonego `<i>`.

   NIE lacz z `.social-icons` z main.css — tamte reguly (`ul.social-icons li a`) maja
   wyzsza specyficznosc i wygraja z tymi tutaj. */
.cta-social{
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 16px; justify-content: center;
}
.cta-social a{
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid #ffffff14;
    color: #cfcfcf !important; font-size: 20px;
    transition: transform .15s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.cta-social a:hover{
    color: var(--schcolor1) !important;
    border-color: rgba(178,204,38,.5);
    background: rgba(178,204,38,.10);
    transform: translateY(-3px);
}

/* --- Akcent slowa w hasle CTA ----------------------------------------------
   *slowo* w tresci -> ten span (patrz blog-cta.blade.php). !important, bo
   body{color:white!important} + kontener daja bialy — akcent musi je przebic. */
.cta-akcent{
    color: var(--schcolor1) !important;
}

/* --- Blog CTA (handoff) — przycisk z akcentem slowa ------------------------
   Blogowy wariant .cta-btn: normalnie ramka LIMONKOWA (nie biala jak homepage),
   bo w przycisku siedzi slowo-akcent. Aktywny (hover/klik): globalne .cta-btn:hover
   wypelnia limonka, wiec slowo-akcent inwertuje z limonki na BIEL — inaczej lime-na-lime
   byloby niewidoczne. Scope .blog-cta, zeby nie ruszac przyciskow #contact na homepage. */
.blog-cta .cta-btn{
    border-color: var(--schcolor1);
}
.blog-cta .cta-btn:hover .cta-akcent,
.blog-cta .cta-btn:focus .cta-akcent,
.blog-cta .cta-btn:active .cta-akcent{
    color: #fff !important;
}