/* =====================================================================
   STRONA GŁÓWNA — fundament wspólny sześciu sekcji (T-185, przebudowa)
   ---------------------------------------------------------------------
   Ładowany wyłącznie na `/` (functions.php, sekcja 18, is_front_page()),
   po pages.css i opinie.css (komponent opinii). Po nim idą arkusze sekcji
   strona-glowna-<sekcja>.css — każdy pisze reguły wyłącznie pod klasą
   swojej sekcji.

   Kierunek: makieta właścicielki z 01.10.2026 (vault, strona-glowna/
   makieta.html) przepisana na standardy motywu — paleta i tokeny marki,
   Poppins w tekście i przyciskach, ostre rogi, copy 1:1 z content/.
   Z makiety: rytm NOC | DZIEŃ DZIEŃ | NOC NOC | DZIEŃ, nocne niebo pod
   nocnymi pasmami, szeryfowy krój nagłówków (Cormorant Garamond), papier
   z ziarnem i złotą linią na granicy nocy, akcenty czterech rozkładów.

   Tu stoi to, co musi być jedno dla całej strony: tokeny, siatka wyrównana
   do headera, niebo, pasma, nagłówki, ozdobnik, przyciski, fokus, ruch.
   Prefiks sg-, bez !important.
   ===================================================================== */

:root {
    /* paleta — docs/brand.md §4, tabela kontrastu §4 */
    --sg-noc: #14142a;
    --sg-noc-gleboka: #0e0e20;
    --sg-noc-karta: #1a1a33;
    --sg-papier: #f5ede0;
    --sg-papier-gleb: #ebdfc8;
    --sg-papier-karta: #fbf6ec;
    --sg-miedz: #a85e2c;          /* linie i cyfry od 24 px — NIE drobny tekst */
    --sg-miedz-hi: #c4753a;       /* na nocy: tekst 5,1:1 */
    --sg-miedz-gleb: #6e3a18;     /* napis przycisku-karty na papierze */
    --sg-rdza: #7a4220;           /* akcent tekstu na papierze 6,88:1 */
    --sg-terakota: #d97742;       /* akcent obwódek fokusu; CTA korzysta z --zoriana-cta */
    --sg-terakota-hover: #c2683a; /* granatowy napis 4,58:1 */
    --sg-atrament: #2a1f14;       /* tekst na papierze */
    --sg-atrament-2: #4f3f29;
    --sg-pergamin: #ebdfc8;       /* tekst na nocy */
    --sg-zloto: #c9a84c;          /* na nocy 7,9:1 */
    --sg-zloto-jasne: #e8c978;    /* połysk, gwiazdy, cienkie linie na nocy */
    --sg-zloto-linia: rgba(201, 168, 76, 0.42);

    /* akcenty czterech rozkładów (makieta właścicielki): kafel wyboru w hero
       i box oferty mówią tym samym kolorem. Tylko na nocy — wszystkie ≥ 6:1
       na #14142a. Ustawiane modyfikatorem .sg-akcent--<rozklad>. */
    --sg-akcent-mini: #d4b05a;
    --sg-akcent-pelny: #a99be0;
    --sg-akcent-partnerski: #d9808f;
    --sg-akcent-finansowy: #86bc9c;

    /* kroje: nagłówki szeryfowe (makieta), tekst i interfejs — Poppins (marka) */
    --sg-font-naglowek: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
    --sg-font-tekst: 'Poppins', system-ui, sans-serif;

    /* siatka — krawędzie treści = krawędzie headera T-181 (logo i koszyk):
       1216 px treści, margines boczny jak w headerze (16 px przy 390, 26 px przy 1024) */
    --sg-tresc: 76rem;
    --sg-margines: clamp(1rem, 2.6vw, 1.625rem);

    /* odstęp między kolumnami każdej siatki sekcji (kafle, karty, boxy) — jeden dla
       całej strony; 16/24 px = spaceBetween toru opinii (opinie.js) */
    --sg-odstep: 16px;

    /* rytm pionowy */
    --sg-pasmo-y: clamp(4.5rem, 2.75rem + 5.5vw, 7.5rem);
    --sg-pasmo-ciag: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);  /* drugie pasmo tego samego koloru */
    --sg-glowa-odstep: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);

    /* skala typografii — płynna (docs/brand.md §3). Cormorant ma małą wysokość x,
       dlatego nagłówki są większe niż przy Poppinsie. */
    --sg-fs-h1: clamp(2.65rem, 1.6rem + 3.4vw, 4.125rem);   /* maks. 66 px jak w makiecie — kafle w pierwszym ekranie 1440x900 */
    --sg-fs-h2: clamp(2.15rem, 1.45rem + 3vw, 3.85rem);     /* min. 34,4 px — „Kim jest Wróżka Zoriana?” w jednym wierszu przy 390 */
    --sg-fs-h3: clamp(1.6rem, 1.35rem + 0.9vw, 2.2rem);
    --sg-fs-lede: clamp(1.0625rem, 0.99rem + 0.32vw, 1.25rem);
    --sg-fs-tekst: clamp(1rem, 0.97rem + 0.16vw, 1.0938rem);
    --sg-fs-maly: 0.875rem;
    --sg-fs-etykieta: 0.8125rem;

    /* ruch */
    --sg-wyjscie: cubic-bezier(0.2, 0.7, 0.15, 1);

    /* ziarno papieru (makieta: szum SVG), bez pliku */
    --sg-ziarno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* złota linia na granicy noc → dzień */
    --sg-linia-zlota: linear-gradient(90deg, transparent, #c9a84c, transparent);
}

@media (min-width: 768px) {
    :root { --sg-odstep: 24px; }
}

/* ---------- akcenty rozkładów ---------- */

.sg-akcent--mini { --sg-akcent: var(--sg-akcent-mini); }
.sg-akcent--pelny { --sg-akcent: var(--sg-akcent-pelny); }
.sg-akcent--partnerski { --sg-akcent: var(--sg-akcent-partnerski); }
.sg-akcent--finansowy { --sg-akcent: var(--sg-akcent-finansowy); }

/* Tło strony pod niebem — bez niego szczeliny między pasmami i przewinięcie
   poza krawędź (iOS, gładzik) pokazują biel z main.css. */
body.home { background-color: var(--sg-noc-gleboka); }

/* ---------- nocne niebo ----------
   Jedna warstwa pod całą stroną (front-page.php, [data-sg-niebo]). Nocne
   pasma są przezroczyste, więc niebo prześwituje przez hero, ofertę i
   księżyc; pasma papieru je zakrywają. Bez JS: mgławica i gwiazdy z CSS.
   Z JS (assets/js/strona-glowna.js): płótno z gwiazdami w trzech warstwach,
   paralaksa przy przewijaniu, konstelacja przy kursorze, rzadka spadająca
   gwiazda — rysowane tylko, gdy widać nocne pasmo. */

.sg-niebo {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 50% at 82% 6%, rgba(122, 36, 51, 0.2), transparent 60%),
        radial-gradient(ellipse 60% 50% at 8% 62%, rgba(70, 52, 120, 0.22), transparent 65%),
        radial-gradient(ellipse 80% 60% at 60% 110%, rgba(201, 168, 76, 0.07), transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23f5ede0'%3E%3Ccircle cx='18' cy='30' r='.8' opacity='.6'/%3E%3Ccircle cx='96' cy='12' r='.6' opacity='.45'/%3E%3Ccircle cx='170' cy='58' r='1' opacity='.7'/%3E%3Ccircle cx='60' cy='118' r='.6' opacity='.45'/%3E%3Ccircle cx='214' cy='140' r='.8' opacity='.55'/%3E%3Ccircle cx='132' cy='190' r='.7' opacity='.5'/%3E%3Ccircle cx='30' cy='210' r='1' opacity='.6'/%3E%3Ccircle cx='190' cy='226' r='.5' opacity='.45'/%3E%3C/g%3E%3Ccircle cx='120' cy='96' r='1.1' fill='%23e8c978' opacity='.7'/%3E%3C/svg%3E"),
        var(--sg-noc-gleboka);
}
.sg-niebo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- siatka i pasma ---------- */

.sg-wrap {
    width: min(100% - 2 * var(--sg-margines), var(--sg-tresc));
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

.sg-pasmo {
    position: relative;
    padding-block: var(--sg-pasmo-y);
    overflow: hidden;
    overflow-wrap: break-word;
    font-family: var(--sg-font-tekst);
}
/* drugie pasmo tego samego koloru (dzień po dniu, noc po nocy) — bez pełnego oddechu u góry */
.sg-pasmo--ciag { padding-top: var(--sg-pasmo-ciag); }

/* NOC — przezroczysta: pod spodem jest niebo */
.sg-pasmo--noc {
    background: transparent;
    color: var(--sg-pergamin);
}
.sg-pasmo--glebiej {
    background: linear-gradient(180deg, rgba(14, 14, 32, 0) 0%, rgba(14, 14, 32, 0.7) 100%);
    color: var(--sg-pergamin);
}

/* DZIEŃ — papier z ziarnem */
.sg-pasmo--papier {
    background-color: var(--sg-papier);
    background-image: var(--sg-ziarno), linear-gradient(170deg, var(--sg-papier) 0%, #f1e7d6 100%);
    color: var(--sg-atrament);
}
/* pierwszy dzień po nocy: złota linia na granicy */
.sg-pasmo--po-nocy {
    background-image:
        var(--sg-linia-zlota),
        var(--sg-ziarno),
        linear-gradient(170deg, var(--sg-papier) 0%, #f1e7d6 100%);
    background-size: min(560px, 70%) 1px, auto, auto;
    background-position: center top, 0 0, 0 0;
    background-repeat: no-repeat, repeat, no-repeat;
}

/* ---------- głowa sekcji: ozdobnik, H2, zdanie ---------- */

.sg-glowa {
    text-align: center;
    margin: 0 auto var(--sg-glowa-odstep);
}
.sg-glowa--lewo { text-align: left; margin-left: 0; }

/* gwiazdka między kreskami — eyebrow makiety bez słów (copy nie ma eyebrow) */
.sg-orn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--sg-miedz);
    margin: 0 auto 1.4rem;
}
.sg-pasmo--noc .sg-orn,
.sg-pasmo--glebiej .sg-orn { color: var(--sg-zloto); }
.sg-orn svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
.sg-orn::before,
.sg-orn::after {
    content: '';
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
}
.sg-orn::after { background: linear-gradient(90deg, currentColor, transparent); }
.sg-orn--lewo { justify-content: flex-start; margin-left: 0; }
.sg-orn--lewo::before { display: none; }

.sg-h2 {
    font-family: var(--sg-font-naglowek);
    font-weight: 500;
    font-size: var(--sg-fs-h2);
    line-height: 1.06;
    letter-spacing: -0.005em;
    text-wrap: balance;
    max-width: 21ch;
    margin: 0 auto;
    color: inherit;
}
.sg-pasmo--noc .sg-h2,
.sg-pasmo--glebiej .sg-h2 { color: #f5ede0; }
.sg-pasmo--papier .sg-h2 { color: var(--sg-atrament); }
.sg-h2--lewo,
.sg-glowa--lewo .sg-h2 { margin-left: 0; text-align: left; }

/* zdanie pod nagłówkiem — kursywa, jak w makiecie */
.sg-lede {
    max-width: 44rem;
    margin: 1.25rem auto 0;
    font-family: var(--sg-font-tekst);
    font-size: var(--sg-fs-lede);
    font-style: italic;
    font-weight: 300;
    line-height: 1.65;
    text-wrap: pretty;
}
.sg-pasmo--papier .sg-lede { color: var(--sg-atrament-2); font-weight: 400; }
.sg-pasmo--noc .sg-lede,
.sg-pasmo--glebiej .sg-lede { color: rgba(245, 237, 224, 0.8); }
.sg-glowa--lewo .sg-lede { margin-left: 0; }

/* ---------- przyciski ----------
   Jeden język z przyciskami komponentu opinii (.opinie__cta): ostre rogi,
   wersaliki z rozstrzeleniem, 600. Etykieta zawija się wewnątrz (bez nowrap),
   cel ≥ 48 px, fokus 3 px z odstępem 3 px. */

.sg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    max-width: 100%;
    min-height: 52px;
    padding: 0.85rem 1.75rem;
    font-family: var(--sg-font-tekst);
    font-weight: 600;
    font-size: var(--sg-fs-etykieta);
    line-height: 1.25;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    overflow-wrap: anywhere;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* border-radius: 0 także przy fokusie — blog.css daje globalne a:focus-visible { border-radius: 6px } */
.sg-btn:focus-visible { outline: 3px solid var(--sg-terakota); outline-offset: 3px; border-radius: 0; }
.sg-pasmo--papier .sg-btn:focus-visible { outline-color: var(--sg-noc); }

/* Główne wezwanie — wspólne żółte CTA na nocy i na papierze. */
.sg-btn--zamow,
.sg-btn--glowny { background: var(--zoriana-cta); color: var(--sg-noc); border-color: var(--zoriana-cta); }
.sg-btn--zamow:hover,
.sg-btn--glowny:hover { background: var(--zoriana-cta-hover); border-color: var(--zoriana-cta-hover); color: var(--sg-noc); }

/* drugorzędny na nocy — obrys papieru */
.sg-btn--obrys,
.sg-btn--noc { background: transparent; color: var(--sg-papier); border-color: rgba(245, 237, 224, 0.45); }
.sg-btn--obrys:hover,
.sg-btn--noc:hover { border-color: var(--sg-papier); background: var(--sg-papier); color: var(--sg-noc); }

/* drugorzędny na papierze — obrys atramentu */
.sg-btn--papier { background: transparent; color: var(--sg-atrament); border-color: var(--sg-atrament); }
.sg-btn--papier:hover { background: var(--sg-atrament); border-color: var(--sg-atrament); color: var(--sg-papier); }

/* przycisk-karta — jak „Zobacz wszystkie opinie” (.opinie__cta) */
.sg-btn--karta {
    background: var(--sg-papier-karta);
    color: var(--sg-miedz-gleb);
    border: 1px solid rgba(168, 94, 44, 0.45);
    border-bottom: 2px solid var(--sg-miedz);
}
.sg-btn--karta:hover { background: #fff; color: var(--sg-atrament); }

/* strzałka jako ozdoba bez tekstu dostępnego */
.sg-btn--strzalka::after {
    content: '→';
    content: '→' / '';
    letter-spacing: 0;
    transition: transform .35s var(--sg-wyjscie);
}
/* fokus z klawiatury dostaje ten sam ruch strzałki co najechanie myszą */
.sg-btn--strzalka:hover::after,
.sg-btn--strzalka:focus-visible::after { transform: translateX(4px); }

/* ---------- obrazy ---------- */

.sg-pasmo img { max-width: 100%; height: auto; }

/* ---------- pojawianie się przy przewijaniu ----------
   [data-sg-reveal] ukrywa dopiero JS (klasa sg-js na <html>), więc bez JS
   i przy prefers-reduced-motion wszystko jest widoczne od razu.
   Opóźnienie kaskady: style="--sg-opoznienie: .15s". */

.sg-js [data-sg-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1.1s ease var(--sg-opoznienie, 0s), transform 1.1s var(--sg-wyjscie) var(--sg-opoznienie, 0s);
}
.sg-js [data-sg-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- ruch ---------- */

@media (prefers-reduced-motion: reduce) {
    .sg-btn,
    .sg-btn--strzalka::after { transition: none; }
    .sg-js [data-sg-reveal] { opacity: 1; transform: none; transition: none; }
}