/* =============================================================================
   cv.css — strona CV (cv.schdeveloper.pl)

   ICOD-002. Wydzielone ze `schstyle.css`, zeby ten nie puchl od stylow kolejnych
   stron — dokladnie ten sam powod, dla ktorego powstaly `cta.css` i `blog-post.css`.
   Tu trafia WSZYSTKO, co dotyczy wylacznie CV.

   Wspolne budulce marki (siatka, poswiata, przyciski, akcent) siedza w `cta.css`
   i sa uzywane przez klase `.brand-bg` — tutaj ustawiamy tylko ich parametry.
   ============================================================================= */

/* --- Hero (#header) ---------------------------------------------------------
   Pierwsza sekcja dostaje ten sam jezyk wizualny co hero strony glownej:
   siatka + poswiata (z `.brand-bg`) i font marki. Gradientow NIE kopiujemy —
   sekcja podaje tylko zmienne `--brand-*`, tak jak #home i #contact. */
#header{
    font-family: 'Manrope', 'Open Sans', sans-serif;

    /* poswiata w lewym-gornym rogu, jak na #home */
    --brand-mask: radial-gradient(circle at 16% 18%, #000 0%, transparent 78%);
    --brand-glow: radial-gradient(circle, #b2cc2650, #b2cc2622 42%, transparent 74%);
    --brand-glow-top: -320px;
    --brand-glow-left: -220px;
    --brand-glow-w: 940px;
    --brand-glow-h: 940px;
    --brand-glow-maxw: 115vw;
    --brand-glow-maxh: 115vw;

    /* tresc ponad tlem (::before/::after maja z-index 0) */
    > .container{
        position: relative;
        z-index: 1;
    }

    h1{
        font-weight: 800;
        font-size: clamp(28px, 4vw, 44px);
        line-height: 1.06;
        letter-spacing: -0.02em;

        span{
            font-weight: normal !important;
        }
    }

    .avatar{
        position: relative;
        z-index: 2;
    }
}

/* --- Lista stacku -----------------------------------------------------------
   Marker jest `outside`, a `ul` nie mialo padding-left — przez to kropki wypadaly
   na lewo POZA kolumne tekstu. Padding wciaga je do srodka i dodatkowo WCINA cala
   liste wzgledem napisu „Moj stack technologiczny", zeby czytala sie jako jego
   rozwiniecie, a nie jako kolejny akapit. Wartosc sprawdzona w przegladarce.

   margin-bottom: zdanie „Zapraszam do zapoznania sie…" stoi zaraz pod lista i bez
   odstepu przyklejalo sie do ostatniej pozycji (wygladalo jak jej ciag dalszy). */
.tech-stack{
    margin: 8px 0 18px;
    padding-left: 2.6em;
}
.tech-stack li{
    line-height: 1.75;
    padding-left: .2em;
}
.tech-stack li::marker{
    color: var(--schcolor1);
}

/* Ponizej 992px hero przechodzi na wyrownanie do srodka (`.hero-unit` w main.css),
   a wtedy wciecie z kropkami sie rozjezdza: marker zostaje przy lewej krawedzi,
   tekst ucieka na srodek. Na waskim ekranie kropki nic nie wnosza — same
   wysrodkowane linie czytaja sie czysciej. */
@media screen and (max-width: 991.98px){
    .tech-stack{
        padding-left: 0;
        list-style: none;
    }
    .tech-stack li{
        padding-left: 0;
    }
    /* hero jest wtedy wysrodkowane — ikony wracaja na srodek, jak w CTA */
    #header .cta-social{
        justify-content: center;
    }
}

/* --- Ikony social -----------------------------------------------------------
   Wyglad bierze `.cta-social` z cta.css (te same kwadraciki co w CTA na glownej).
   Tam sa wysrodkowane, bo cala sekcja kontaktu jest wysrodkowana — tu hero jest
   do lewej, wiec ikony musza siasc pod tekstem, a nie na srodku kolumny. */
#header .cta-social{
    justify-content: flex-start;
    margin-top: 14px;
}

/* --- Akcenty w tekscie biezacym ---------------------------------------------
   `.sch-color` ma globalnie `padding: 0 10px 0 4px`. W naglowku to nie przeszkadza,
   ale w zdaniu robi dziure po obu stronach slowa — „z moim [ CV ] ponizej" czytalo
   sie jak podwojna spacja. Zerujemy TYLKO w obrebie hero CV. */
#header .sch-color{
    padding: 0;
}