/* =====================================================================
   STRONA GŁÓWNA — §2 KIM JESTEM (T-185, przebudowa)
   Arkusz sekcji. Wspólne tokeny, siatka, nagłówki i przyciski: strona-glowna.css.

   Układ z makiety właścicielki (01.10.2026), pierwsze pasmo dnia po nocy
   (złota linia u góry daje fundament: .sg-pasmo--po-nocy).
   Po lewej łuk 4:5 z dwiema cienkimi złotymi liniami, w środku prawdziwy
   portret (kim-portret-*: postać wycięta z płaskiego złotego koła) zamiast
   zaślepki makiety. Po prawej: ozdobnik bez słów, H2 Cormorantem, akapit
   z inicjałem, zdanie z cytatami klientek jako wyróżniony cytat (kursywa
   Cormorantem, złota pionowa linia z rombem), akapit, przycisk na papierze.
   Telefon i tablet: łuk ~300 px nad tekstem.
   ===================================================================== */

.sg-kim {
    --sg-kim-druga: clamp(0.625rem, 0.5rem + 0.4vw, 0.875rem);  /* linia wewnętrzna → zewnętrzna */
    --sg-kim-wnetrze: clamp(0.625rem, 0.5rem + 0.35vw, 0.75rem); /* linia wewnętrzna → zdjęcie */
}

.sg-kim__uklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(3rem, 2.25rem + 3vw, 5.625rem);
    align-items: center;
}

/* ---------- łuk z portretem ---------- */

/* łuk 4:5 — dwie cienkie złote linie (ozdoba, nie tekst): wewnętrzna na krawędzi
   bloku, zewnętrzna o --sg-kim-druga dalej; margines = ten odstęp, więc zewnętrzna
   linia leży na krawędzi kolumny */
.sg-kim__luk {
    position: relative;
    width: min(100% - 2 * var(--sg-kim-druga) - 2rem, 19rem);
    aspect-ratio: 4 / 5;
    margin: var(--sg-kim-druga) auto;
}
.sg-kim__luk::before,
.sg-kim__luk::after {
    content: '';
    position: absolute;
    border: 1px solid var(--sg-zloto);
    border-radius: 999rem 999rem 0 0;
    pointer-events: none;
}
.sg-kim__luk::before { inset: 0; opacity: 0.8; }
.sg-kim__luk::after { inset: calc(-1 * var(--sg-kim-druga)); opacity: 0.38; }

/* tarcza astrolabium za łukiem — jedyna ozdoba szerokiego ekranu: od 900 px
   środek na lewej krawędzi łuku, więc tarcza wychodzi ku lewej krawędzi ekranu
   i wypełnia pusty margines; na telefonie mniejsza, wyśrodkowana aureola.
   z-index -1 kładzie ją pod łukiem i tekstem, nad papierem pasma (.sg-wrap ma
   własny kontekst). Rysunek własny: kim-tarcza.svg, linie miedzi. */
.sg-kim__tarcza {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 46%;
    width: 165%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: url('../img/strona-glowna/kim-tarcza.svg') center / contain no-repeat;
    opacity: 0.07;
    pointer-events: none;
}

/* wnętrze łuku — nisza wyraźnie głębsza niż papier wokół (papier ~#f1e8da,
   nisza #e8dbc1 → #dac7a2) z cieplejszym, złotawym środkiem za głową i miękkim
   cieniem wewnętrznym przy krawędziach. Dwa cienkie kręgi miedzi (pełny
   i kropkowany — gest zaślepki z makiety) otaczają głowę; kwadratowy obraz
   kręgów ma szerokość okna, pozycja 50% 21% stawia jego środek na twarzy. */
.sg-kim__okno {
    position: absolute;
    inset: var(--sg-kim-wnetrze);
    overflow: hidden;
    border-radius: 999rem 999rem 0 0;
    background-color: #e3d3b4;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23a85e2c'%3E%3Ccircle cx='100' cy='100' r='70' stroke-opacity='.42' stroke-width='.5'/%3E%3Ccircle cx='100' cy='100' r='88' stroke-opacity='.5' stroke-width='.6' stroke-dasharray='.6 3' stroke-linecap='round'/%3E%3C/svg%3E"),
        radial-gradient(58% 40% at 50% 38%, rgba(240, 214, 160, 0.75), rgba(240, 214, 160, 0) 100%),
        linear-gradient(180deg, #e8dbc1 0%, #e3d3b4 55%, #dac7a2 100%);
    background-size: 100% auto, auto, auto;
    background-position: 50% 21%, 0 0, 0 0;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 2.5rem rgba(110, 70, 30, 0.16);
}

/* postać przy dnie łuku; kadr ma wys./szer. 1,063, łuk w środku ~1,27 — przy 102 %
   szerokości nad głową zostaje ~18 % szerokości, głowa mieści się pod łukiem.
   Maska wygasza boki i dół postaci, żeby siedziała w niszy, a nie była wklejonym
   prostokątem (bez twardego cięcia włosów na krawędzi i płaskiego dołu). */
.sg-kim .sg-kim__postac {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 102%;
    max-width: none;
    height: auto;
    transform: translateX(-50%);
    display: block;
    filter: sepia(0.22);   /* szarości wpadają w ciepło papieru — jak tonowana odbitka */
    -webkit-mask-image:
        linear-gradient(90deg, transparent 1%, #000 13%, #000 87%, transparent 99%),
        linear-gradient(0deg, transparent 0, rgba(0, 0, 0, 0.55) 7%, #000 17%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 1%, #000 13%, #000 87%, transparent 99%),
        linear-gradient(0deg, transparent 0, rgba(0, 0, 0, 0.55) 7%, #000 17%);
    mask-composite: intersect;
}

/* ---------- list ---------- */

/* w jednej kolumnie blok listu stoi na osi łuku; width: 100%, bo sam auto-margines
   zrobiłby z niego „fit-content” rosnący do najdłuższego słowa przy powiększeniu tekstu */
.sg-kim__tresc {
    min-width: 0;
    width: 100%;
    max-width: 38rem;
    margin-inline: auto;
}

.sg-kim .sg-kim__orn { margin-bottom: clamp(1rem, 0.8rem + 0.6vw, 1.4rem); }

/* font-family wprost (zapas): do T-185 strona główna ładowała stary ceremonia-pelni.css,
   który dawał h2 Poppinsa selektorem (0,1,1) i bił samo .sg-h2 (0,1,0). Dziś na `/` h2
   dostaje Poppinsa tylko z main.css (0,0,1), a arkusz pełni od T-193 jest inny. */
.sg-kim .sg-kim__h2 {
    font-family: var(--sg-font-naglowek);
    max-width: none;
    margin-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
}

.sg-kim .sg-kim__akapit {
    max-width: 38rem;
    margin: 0;
    font-size: var(--sg-fs-tekst);
    line-height: 1.8;
    color: var(--sg-atrament-2);
    text-wrap: pretty;
}

/* inicjał listu — Cormorant, miedź (≥ 24 px, wolno); initial-letter trzyma go
   na liniach pisma; bez wsparcia (Firefox) pływający blok o tej samej wysokości */
.sg-kim .sg-kim__akapit--inicjal::first-letter {
    float: left;
    margin: 0.32em 0.14em 0 0;
    font-family: var(--sg-font-naglowek);
    font-size: 4.4em;
    font-weight: 500;
    line-height: 0.66;
    color: var(--sg-miedz);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    .sg-kim .sg-kim__akapit--inicjal::first-letter {
        float: none;
        margin: 0 0.16em 0 0;
        font-size: inherit;
        line-height: inherit;
        -webkit-initial-letter: 3;
        initial-letter: 3;
    }
}

/* zdanie z cytatami klientek — wyróżniony cytat; jedno zdanie w DOM,
   cytaty klientek w span.sg-cytat */
.sg-kim .sg-kim__cytat {
    position: relative;
    max-width: 36rem;
    margin: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem) 0;
    padding: 0.2rem 0 0.2rem clamp(1.25rem, 1rem + 0.8vw, 1.875rem);
    border-left: 1px solid var(--sg-zloto);
    font-family: var(--sg-font-naglowek);
    font-size: clamp(1.5rem, 1.3rem + 0.65vw, 1.8rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.38;
    color: var(--sg-atrament);
    text-wrap: pretty;
}
/* romb na początku linii */
.sg-kim .sg-kim__cytat::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    width: 7px;
    height: 7px;
    background: var(--sg-zloto);
    transform: rotate(45deg);
}
.sg-kim .sg-cytat { color: var(--sg-rdza); }

.sg-kim .sg-kim__btn { margin-top: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); }

/* łuk wjeżdża od dołu, jak w makiecie (JS dodaje .is-visible) */
.sg-js .sg-kim__luk[data-sg-reveal] .sg-kim__okno {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.6s var(--sg-wyjscie) 0.2s;
}
.sg-js .sg-kim__luk[data-sg-reveal].is-visible .sg-kim__okno { clip-path: inset(0); }

/* ---------- dwie kolumny (makieta: .8fr / 1.2fr) ---------- */

@media (min-width: 900px) {
    .sg-kim__uklad {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }
    /* zewnętrzna linia łuku na lewej krawędzi siatki (= krawędź logo w headerze) */
    .sg-kim__luk {
        width: min(100% - 2 * var(--sg-kim-druga), 27rem);
        margin-inline: var(--sg-kim-druga) auto;
    }
    .sg-kim__tresc {
        max-width: none;
        margin-inline: 0;
    }
    .sg-kim__tarcza {
        left: 2%;
        top: 50%;
        width: 235%;
        opacity: 0.08;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-js .sg-kim__luk[data-sg-reveal] .sg-kim__okno { clip-path: none; transition: none; }
}