/* =====================================================================
   STRONA GŁÓWNA — §6 NARZĘDZIA „Rozkład na stole” (T-185, koncept k1)
   Arkusz sekcji. Wspólne tokeny, siatka, pasma, nagłówki i przyciski:
   strona-glowna.css. Każda reguła zaczyna się od .sg-narzedzia.

   Sześć darmowych narzędzi to sześć kart Wielkich Arkanów
   (cards-new) rozłożonych na lnianym bieżniku: Kapłanka (pytanie do
   wróżki), Mag (tarot za darmo), Sprawiedliwość z wagą (tak czy nie),
   Świat (horoskop), Pustelnik z księgą (wróżba dnia), Słońce (karta dnia). Pod każdą kartą
   nazwa, zdanie i przycisk — zawsze widoczne, bez najechania i bez JS.

   Papier zostaje (rytm makiety: noc → dzień → stopka): stół to papier
   w świetle lampy, z krótką złotą linią na obu granicach z nocą; bieżnik
   biegnie od krawędzi do krawędzi ekranu (na telefonie — pionowo pod
   kolumną kart). Ruch: karta wchodzi rewersem do góry i odwraca się licem
   (rozdanie, kaskada z data-sg-reveal); najechanie albo fokus unosi kartę,
   prostuje ją i przesuwa po niej połysk. Bez JS i przy prefers-reduced-
   motion karty leżą licem i nic się nie rusza.

   Progi w rem: przy powiększonym kroju przeglądarki (200%) rosną razem
   z tekstem, więc telefon z dużym tekstem dostaje układ jednokolumnowy.
     podstawa   karta nad opisem (wąsko albo duży tekst)
     22.5rem    wiersze karta | opis, pionowy bieżnik
     48rem      karty 3 + 3, dwa bieżniki
     72rem      sześć kart w jednym rzędzie, wachlarz
     114rem     reszta talii w marginesach (2048)
   ===================================================================== */

.sg-narzedzia {
    --sg-n-karta: 13rem;                                  /* szerokość karty od 48rem */
    --sg-n-h: calc(var(--sg-n-karta) * 630 / 351);        /* jej wysokość (proporcje cards-new) */
    --sg-n-kol: clamp(6.5rem, 30vw, 9.5rem);              /* kolumna karty w wierszach telefonu */
    --sg-n-cien: drop-shadow(0 1px 1px rgba(42, 31, 20, 0.3)) drop-shadow(0 0.9rem 1rem rgba(42, 31, 20, 0.26));
    --sg-n-rewers: url('../img/strona-glowna/rewers.svg');
    /* bieżnik: len (splot z dwóch rzadkich prążków) w odcieniu głębokiego papieru,
       obszyty ciągłą linią miedzi */
    --sg-n-len:
        repeating-linear-gradient(0deg, rgba(110, 80, 45, 0.05) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(110, 80, 45, 0.04) 0 1px, transparent 1px 3px),
        #e9dcc3;
    --sg-n-obszycie: rgba(168, 94, 44, 0.34);
}

/* światło lampy nad stołem (jaśniejsza plama pod rozkładem) i złota linia
   na dolnej granicy dnia — klamra z linią u góry (.sg-pasmo--po-nocy) */
.sg-narzedzia::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        var(--sg-linia-zlota) 50% 100% / min(560px, 70%) 1px no-repeat,
        radial-gradient(ellipse 70% 40% at 50% 66%, rgba(255, 251, 241, 0.8), rgba(255, 251, 241, 0) 72%);
    pointer-events: none;
}

/* ---------- głowa ---------- */

.sg-narzedzia .sg-narzedzia__glowa { margin-bottom: clamp(3rem, 2rem + 2.6vw, 4.75rem); }
.sg-narzedzia .sg-narzedzia__glowa .sg-h2 { max-width: none; }
.sg-narzedzia .sg-narzedzia__glowa .sg-lede { max-width: 46rem; }

/* ---------- rozkład: podstawa — karta nad opisem ---------- */

/* stół = własna warstwa: odcinki bieżnika (z-index -1) leżą pod kartami, a nad papierem */
.sg-narzedzia .sg-narzedzia__stol { isolation: isolate; }

.sg-narzedzia .sg-narzedzia__rozklad {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3rem;
}

.sg-narzedzia .sg-narzedzia__miejsce {
    position: relative;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "karta" "tekst" "link";
    justify-items: center;
    text-align: center;
}

/* bieżnik — każda pozycja rysuje swój odcinek pod kartą; w podstawie go nie ma */
.sg-narzedzia .sg-narzedzia__miejsce::after {
    content: none;
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

/* ---------- karta: miejsce na stole → uniesienie i cień → obrót 3D ---------- */

.sg-narzedzia .sg-narzedzia__karta {
    grid-area: karta;
    position: relative;
    display: block;
    width: min(70%, 11rem);
    margin-bottom: 1.75rem;
    aspect-ratio: 351 / 630;
    align-self: center;
    rotate: var(--sg-n-obrot, 0deg);
    translate: 0 var(--sg-n-y, 0);
    transform-origin: 50% 55%;
    /* opacity/transform = pojawianie się z fundamentu (data-sg-reveal), reszta = uniesienie */
    transition:
        opacity 1.1s ease var(--sg-opoznienie, 0s),
        transform 1.1s var(--sg-wyjscie) var(--sg-opoznienie, 0s),
        rotate .5s var(--sg-wyjscie),
        translate .5s var(--sg-wyjscie),
        scale .5s var(--sg-wyjscie);
}
.sg-narzedzia .sg-narzedzia__unos {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    perspective: 60rem;
    filter: var(--sg-n-cien);   /* stały — filtra na elemencie z 3D nie animujemy (CLAUDE.md motywu) */
}
/* cień uniesionej karty: osobna warstwa 2D pod kartą, animowana tylko przezroczystością */
.sg-narzedzia .sg-narzedzia__karta::before {
    content: '';
    position: absolute;
    inset: 4% 5% 1%;
    z-index: -1;
    border-radius: 4% / 2.2%;
    box-shadow: 0 1.75rem 2rem -0.5rem rgba(42, 31, 20, 0.36);
    opacity: 0;
    transition: opacity .5s var(--sg-wyjscie);
    pointer-events: none;
}
.sg-narzedzia .sg-narzedzia__obrot {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s var(--sg-wyjscie) calc(var(--sg-opoznienie, 0s) + 0.45s);
}
.sg-narzedzia .sg-narzedzia__strona {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.sg-narzedzia .sg-narzedzia__strona--rewers { transform: rotateY(180deg); }

/* rozdanie: dopóki karta nie weszła w okno, leży rewersem do góry; potem odwraca się licem */
.sg-js .sg-narzedzia .sg-narzedzia__karta:not(.is-visible) .sg-narzedzia__obrot { transform: rotateY(180deg); }

/* połysk przy uniesieniu (zaokrąglenie = narożniki lic cards-new) */
.sg-narzedzia .sg-narzedzia__unos::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 4% / 2.2%;
    background: linear-gradient(112deg, rgba(255, 248, 228, 0) 38%, rgba(255, 248, 228, 0.36) 50%, rgba(255, 248, 228, 0) 62%) no-repeat;
    background-size: 260% 100%;
    background-position: 130% 0;
    opacity: 0;
    transition: background-position .9s var(--sg-wyjscie), opacity .4s ease;
    pointer-events: none;
}

/* ---------- opis pod kartą: nazwa i zdanie jednym blokiem ---------- */

.sg-narzedzia .sg-narzedzia__tekst { grid-area: tekst; min-width: 0; }
.sg-narzedzia .sg-narzedzia__nazwa {
    margin: 0 0 0.45rem;
    font-family: var(--sg-font-naglowek);
    font-weight: 500;
    font-size: clamp(1.5rem, 1.38rem + 0.35vw, 1.75rem);
    line-height: 1.08;
    color: var(--sg-atrament);
    text-wrap: balance;
    transition: color .25s ease;
}
.sg-narzedzia .sg-narzedzia__zdanie {
    margin: 0;
    font-size: var(--sg-fs-maly);
    line-height: 1.6;
    color: var(--sg-atrament-2);
    text-wrap: pretty;
}
.sg-narzedzia .sg-narzedzia__link {
    grid-area: link;
    width: 100%;
    margin-top: 1.125rem;
    padding-inline: 0.5rem;
}
/* rozciągnięty cel: całe miejsce (karta + opis) prowadzi tam, gdzie przycisk */
.sg-narzedzia .sg-narzedzia__link::before {
    content: '';
    position: absolute;
    inset: 0;
}

/* ---------- najechanie albo fokus: karta unosi się, prostuje i łapie światło ---------- */

.sg-narzedzia .sg-narzedzia__miejsce:hover .sg-narzedzia__karta,
.sg-narzedzia .sg-narzedzia__miejsce:focus-within .sg-narzedzia__karta {
    rotate: 0deg;
    translate: 0 calc(var(--sg-n-y, 0px) - 0.75rem);
    scale: 1.035;
}
.sg-narzedzia .sg-narzedzia__miejsce:hover .sg-narzedzia__karta::before,
.sg-narzedzia .sg-narzedzia__miejsce:focus-within .sg-narzedzia__karta::before { opacity: 1; }
.sg-narzedzia .sg-narzedzia__miejsce:hover .sg-narzedzia__unos::after,
.sg-narzedzia .sg-narzedzia__miejsce:focus-within .sg-narzedzia__unos::after { opacity: 1; background-position: -30% 0; }
.sg-narzedzia .sg-narzedzia__miejsce:hover .sg-narzedzia__nazwa,
.sg-narzedzia .sg-narzedzia__miejsce:focus-within .sg-narzedzia__nazwa { color: var(--sg-rdza); }
/* najechanie na miejsce = najechanie na jego jedyny link */
.sg-narzedzia .sg-narzedzia__miejsce:hover .sg-btn--papier {
    background: var(--sg-atrament);
    border-color: var(--sg-atrament);
    color: var(--sg-papier);
}

/* ---------- od 22.5rem (telefon 360+): wiersze karta | opis, pionowy bieżnik ---------- */

@media (min-width: 22.5rem) {
    .sg-narzedzia .sg-narzedzia__rozklad { gap: 2.5rem; }
    .sg-narzedzia .sg-narzedzia__miejsce {
        grid-template-columns: var(--sg-n-kol) minmax(0, 1fr);
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas:
            "karta ."
            "karta tekst"
            "karta link"
            "karta .";
        column-gap: 1.375rem;
        justify-items: stretch;
        text-align: left;
    }
    .sg-narzedzia .sg-narzedzia__karta { width: 100%; margin-bottom: 0; }
    /* przycisk na szerokość kolumny opisu, ciasny margines wewnętrzny —
       „Sprawdź swój znak” (~175 px) mieści się w jednym wierszu od 360 px */
    .sg-narzedzia .sg-narzedzia__link { width: min(100%, 20rem); }

    /* odcinki łączą się w pionowy pas pod kolumną kart */
    .sg-narzedzia .sg-narzedzia__miejsce::after {
        content: '';
        top: -1.25rem;
        bottom: -1.25rem;
        left: calc(var(--sg-n-kol) * 0.19);
        width: calc(var(--sg-n-kol) * 0.62);
        background:
            linear-gradient(90deg, rgba(110, 80, 45, 0.07), transparent 22%, transparent 78%, rgba(110, 80, 45, 0.07)),
            linear-gradient(var(--sg-n-obszycie), var(--sg-n-obszycie)) 5px 0 / 1px 100% no-repeat,
            linear-gradient(var(--sg-n-obszycie), var(--sg-n-obszycie)) calc(100% - 5px) 0 / 1px 100% no-repeat,
            var(--sg-n-len);
    }
    .sg-narzedzia .sg-narzedzia__miejsce:first-child::after { top: -2rem; }
    .sg-narzedzia .sg-narzedzia__miejsce:last-child::after { bottom: -2rem; }

    /* karty leżą lekko krzywo, na przemian */
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(1) { --sg-n-obrot: -2deg; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(2) { --sg-n-obrot: 1.5deg; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(3) { --sg-n-obrot: -1deg; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(4) { --sg-n-obrot: 2deg; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(5) { --sg-n-obrot: -1.5deg; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(6) { --sg-n-obrot: 1deg; }
}

/* ---------- od 48rem: karty pionowo, 3 + 3; bieżnik poziomo, od krawędzi do krawędzi ----------
   Pozycja dziedziczy trzy wiersze listy (subgrid): karta | nazwa ze zdaniem | przycisk.
   Nazwy zaczynają się na jednej linii (stały odstęp od kart), przyciski stoją na jednej
   linii i mają szerokość kolumny. */

@media (min-width: 48rem) {
    .sg-narzedzia::before {
        background:
            var(--sg-linia-zlota) 50% 100% / min(560px, 70%) 1px no-repeat,
            radial-gradient(ellipse 55% 46% at 50% 66%, rgba(255, 251, 241, 0.85), rgba(255, 251, 241, 0) 72%),
            radial-gradient(ellipse 110% 90% at 50% 62%, rgba(122, 66, 32, 0) 58%, rgba(122, 66, 32, 0.07) 100%);
    }

    .sg-narzedzia .sg-narzedzia__rozklad {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: var(--sg-odstep);
        row-gap: 0;
    }
    .sg-narzedzia .sg-narzedzia__miejsce {
        grid-column: span 2;
        grid-row: span 3;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: subgrid;
        grid-template-areas: "karta" "tekst" "link";
        row-gap: 0;
        justify-items: center;
        text-align: center;
        margin-bottom: 4rem;
    }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(n+4) { margin-bottom: 0; }

    /* odcinek bieżnika sięga daleko w obie strony (pasmo go przycina): odcinki
       jednego rzędu leżą na tej samej wysokości i składają się w jeden pas */
    .sg-narzedzia .sg-narzedzia__miejsce::after,
    .sg-narzedzia .sg-narzedzia__miejsce:first-child::after,
    .sg-narzedzia .sg-narzedzia__miejsce:last-child::after {
        top: calc(var(--sg-n-h) * 0.18);
        bottom: auto;
        left: -100vw;
        right: -100vw;
        width: auto;
        height: calc(var(--sg-n-h) * 0.66);
        background:
            linear-gradient(180deg, rgba(110, 80, 45, 0.07), transparent 22%, transparent 78%, rgba(110, 80, 45, 0.07)),
            linear-gradient(var(--sg-n-obszycie), var(--sg-n-obszycie)) 0 5px / 100% 1px no-repeat,
            linear-gradient(var(--sg-n-obszycie), var(--sg-n-obszycie)) 0 calc(100% - 5px) / 100% 1px no-repeat,
            var(--sg-n-len);
    }

    /* odstęp karta → nazwa: margines minus opad przechylonej karty (≥ 47 px w każdej kolumnie) */
    .sg-narzedzia .sg-narzedzia__karta { width: min(100%, var(--sg-n-karta)); margin-bottom: 4rem; align-self: start; }
    .sg-narzedzia .sg-narzedzia__tekst { align-self: start; }
    .sg-narzedzia .sg-narzedzia__nazwa { margin-bottom: 0.55rem; }
    .sg-narzedzia .sg-narzedzia__zdanie { max-width: 16rem; margin-inline: auto; }
    .sg-narzedzia .sg-narzedzia__link {
        width: 100%;
        justify-self: stretch;
        align-self: start;
        margin-top: 1.5rem;
        padding-inline: 0.375rem;
    }

    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(1) { --sg-n-obrot: -4deg; --sg-n-y: 0.6rem; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(2) { --sg-n-obrot: 0deg; --sg-n-y: 0rem; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(3) { --sg-n-obrot: 4deg; --sg-n-y: 0.6rem; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(4) { --sg-n-obrot: -4deg; --sg-n-y: 0.6rem; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(5) { --sg-n-obrot: 0deg; --sg-n-y: 0rem; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(6) { --sg-n-obrot: 4deg; --sg-n-y: 0.6rem; }
}

/* przeglądarka bez subgrid: kolumna, przycisk dosunięty do dołu */
@supports not (grid-template-rows: subgrid) {
    @media (min-width: 48rem) {
        .sg-narzedzia .sg-narzedzia__miejsce { display: flex; flex-direction: column; align-items: center; }
        .sg-narzedzia .sg-narzedzia__link { margin-top: auto; }
        .sg-narzedzia .sg-narzedzia__tekst { margin-bottom: 1.5rem; }
    }
}

/* ---------- od 72rem: sześć kart w jednym rozkładzie, wachlarzem ----------
   Mniejsze karty zostawiają oddech między sześcioma kolumnami.
   Subgrid wyrównuje tekst i CTA także przy etykietach w dwóch wierszach. */

@media (min-width: 72rem) {
    .sg-narzedzia { --sg-n-karta: 9rem; }
    .sg-narzedzia .sg-narzedzia__rozklad { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sg-narzedzia .sg-narzedzia__miejsce { grid-column: auto; margin-bottom: 0; }

    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(1) { --sg-n-obrot: -5deg; --sg-n-y: 0.8rem; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(2) { --sg-n-obrot: -3deg; --sg-n-y: 0.3rem; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(3) { --sg-n-obrot: -1deg; --sg-n-y: 0rem; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(4) { --sg-n-obrot: 1deg; --sg-n-y: 0rem; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(5) { --sg-n-obrot: 3deg; --sg-n-y: 0.3rem; }
    .sg-narzedzia .sg-narzedzia__miejsce:nth-child(6) { --sg-n-obrot: 5deg; --sg-n-y: 0.8rem; }
    .sg-narzedzia .sg-narzedzia__zdanie { font-size: 0.9rem; }
}

@media (min-width: 80rem) {
    .sg-narzedzia { --sg-n-karta: 10rem; }
}

/* ---------- szeroki ekran: reszta talii leży na bieżniku, w marginesach ----------
   Kotwica od krawędzi treści z odstępem 5.5rem (wizualnie ≥ 4rem od przechylonej
   skrajnej karty); od 114rem margines mieści talię z zapasem do krawędzi ekranu. */

.sg-narzedzia .sg-narzedzia__talia,
.sg-narzedzia .sg-narzedzia__wstega { display: none; }

@media (min-width: 114rem) {
    .sg-narzedzia .sg-narzedzia__talia,
    .sg-narzedzia .sg-narzedzia__wstega {
        display: block;
        position: absolute;
        top: calc(var(--sg-n-h) * 0.51);
        translate: 0 -50%;
        filter: var(--sg-n-cien);
        pointer-events: none;
    }
    /* talia: stos rewersów z widoczną grubością */
    .sg-narzedzia .sg-narzedzia__talia {
        right: calc(100% + 5.5rem);
        width: 8.5rem;
        aspect-ratio: 337 / 610;
        rotate: -9deg;
        background:
            var(--sg-n-rewers) 0 0 / calc(100% - 6px) calc(100% - 6px) no-repeat,
            var(--sg-n-rewers) 2px 2px / calc(100% - 6px) calc(100% - 6px) no-repeat,
            var(--sg-n-rewers) 4px 4px / calc(100% - 6px) calc(100% - 6px) no-repeat,
            var(--sg-n-rewers) 6px 6px / calc(100% - 6px) calc(100% - 6px) no-repeat;
    }
    /* wstęga: rewersy rozsunięte w rząd, z którego wybiera się karty */
    .sg-narzedzia .sg-narzedzia__wstega {
        left: calc(100% + 5.5rem);
        width: calc(6rem + 4 * 1.15rem);
        height: calc(6rem * 610 / 337 + 4 * 0.4rem);
        rotate: 8deg;
        background:
            var(--sg-n-rewers) calc(4 * 1.15rem) calc(4 * 0.4rem) / 6rem auto no-repeat,
            var(--sg-n-rewers) calc(3 * 1.15rem) calc(3 * 0.4rem) / 6rem auto no-repeat,
            var(--sg-n-rewers) calc(2 * 1.15rem) calc(2 * 0.4rem) / 6rem auto no-repeat,
            var(--sg-n-rewers) 1.15rem 0.4rem / 6rem auto no-repeat,
            var(--sg-n-rewers) 0 0 / 6rem auto no-repeat;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .sg-narzedzia .sg-narzedzia__karta,
    .sg-narzedzia .sg-narzedzia__karta::before,
    .sg-narzedzia .sg-narzedzia__unos::after,
    .sg-narzedzia .sg-narzedzia__obrot,
    .sg-narzedzia .sg-narzedzia__nazwa { transition: none; }
    .sg-js .sg-narzedzia .sg-narzedzia__karta:not(.is-visible) .sg-narzedzia__obrot { transform: none; }
    .sg-narzedzia .sg-narzedzia__miejsce:hover .sg-narzedzia__karta,
    .sg-narzedzia .sg-narzedzia__miejsce:focus-within .sg-narzedzia__karta {
        rotate: var(--sg-n-obrot, 0deg);
        translate: 0 var(--sg-n-y, 0);
        scale: none;
    }
    .sg-narzedzia .sg-narzedzia__unos::after { display: none; }
}