/* =====================================================================
   STRONA GŁÓWNA — §4 OFERTA (T-185, kierunek: makieta właścicielki, BRIEF §7)
   Arkusz sekcji. Wspólne tokeny, siatka, nagłówki, przyciski: strona-glowna.css.

   Noc (pasmo przezroczyste, pod spodem niebo). Głowa dzielona: ozdobnik i H2
   po lewej, zdanie kursywą po prawej, na wspólnej linii dołu. Cztery boxy
   2×2 (od siatki 58rem ≈ viewport 980 px), każdy w kolorze swojego rozkładu
   (--sg-akcent, ten sam co kafel w hero): pole z ilustracją rozkładu na
   poświacie akcentu, cyfra rzymska z licznika CSS, znak motywu; niżej nazwa
   (Cormorant), zaleta kursywą w akcencie, fakty z ikonami w kółku, stopka
   z ceną (Cormorant) i przyciskami. Pod boxami akapit z kopertą.

   Tu stoją też BAZOWE reguły komponentu .sg-rozklad (rozklad.php), którego
   używa także hero — dlatego bez prefiksu sekcji.
   ===================================================================== */

/* ---------- komponent: ilustracja rozkładu (hero + oferta) ----------
   SVG 400×240 skaluje się szerokością rodzica. Kreski motywu mają stałą
   grubość 1 px przy każdej skali (non-scaling-stroke), więc w kaflu ~150 px
   nie znikają, a w boxie ~420 px nie grubieją. Kolor motywu = akcent rodzica. */
.sg-rozklad {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 240;
    overflow: visible;
    color: var(--sg-akcent, var(--sg-zloto));
}
.sg-rozklad__motyw { stroke-opacity: 0.5; }
.sg-rozklad__motyw :where(path, circle, ellipse) { vector-effect: non-scaling-stroke; }
.sg-rozklad__iskry { fill: currentColor; fill-opacity: 0.6; stroke: none; }
.sg-rozklad__karty { transition: transform .6s var(--sg-wyjscie); }

/* ---------- sekcja ---------- */

.sg-oferta {
    --sg-of-gap: var(--sg-odstep);                          /* odstęp kolumn = jeden dla całej strony (fundament) */
    --sg-of-pad: clamp(1.375rem, 0.9rem + 1.4vw, 2.125rem); /* wnętrze boxu */
    --sg-of-linia: rgba(245, 237, 224, 0.1);                /* kreski w boxie */
}
.sg-oferta .sg-oferta__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Układ zależy od szerokości siatki w rem, nie od viewportu: przy tekście 200%
   boxy wracają do jednej kolumny, zamiast wystawać. */
.sg-oferta .sg-oferta__wrap { container: sg-oferta / inline-size; }

/* ---------- głowa: ozdobnik + H2 | zdanie kursywą, wyrównane do dołu ---------- */

.sg-oferta .sg-oferta__glowa { margin-bottom: var(--sg-glowa-odstep); }
.sg-oferta .sg-oferta__glowa .sg-h2 { margin: 0; text-align: left; }
.sg-oferta .sg-oferta__glowa .sg-lede { max-width: 34rem; margin: 1.25rem 0 0; }

@container sg-oferta (min-width: 56rem) {
    .sg-oferta .sg-oferta__glowa {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: var(--sg-of-gap);
        align-items: end;
    }
    .sg-oferta .sg-oferta__glowa .sg-lede { margin: 0; padding-bottom: 0.4em; }
}

/* ---------- boxy ---------- */

.sg-oferta .sg-oferta__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sg-of-gap);
    grid-template-columns: minmax(0, 1fr);
    counter-reset: sg-oferta;
}
@container sg-oferta (min-width: 58rem) {
    .sg-oferta .sg-oferta__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Box: pięć wierszy (pole, nazwa, zaleta, fakty, zakup), każdy przypisany na
   sztywno — box bez ceny nie przesuwa reszty. W dwóch kolumnach wiersze dzieli
   z sąsiadem `subgrid`: nazwy, fakty, kreski stopek i przyciski na wspólnych
   liniach. Box NIE ma `container-type` (zawieranie układu wyłącza subgrid). */
.sg-oferta .sg-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, auto);
    min-width: 0;
    margin: 0;
    color: var(--sg-papier);
    background: linear-gradient(180deg, rgba(27, 26, 50, 0.94) 0%, rgba(17, 16, 36, 0.95) 100%);
    border: 1px solid rgba(245, 237, 224, 0.1);
    box-shadow: 0 2.5rem 4rem -2.5rem rgba(0, 0, 0, 0.7);
    counter-increment: sg-oferta;
    scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--zoriana-header-h, 4rem) + 1rem);
    transition: border-color .4s ease;
}
@supports (grid-template-rows: subgrid) {
    @container sg-oferta (min-width: 58rem) {
        .sg-oferta .sg-box { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    }
}
@media (hover: hover) {
    .sg-oferta .sg-box:hover { border-color: rgba(201, 168, 76, 0.4); }
    .sg-oferta .sg-box:hover { border-color: color-mix(in srgb, var(--sg-akcent) 50%, transparent); }
    .sg-oferta .sg-box:hover .sg-rozklad__karty { transform: translateY(-4px); }
}
/* cel kafla hero (#oferta-pelny …): obrys w kolorze rozkładu. Box-cel pokazuje
   się od razu, bez wjazdu [data-sg-reveal] — przesunięcie o 14 px w chwili
   przewijania do kotwicy wsuwało górę boxu i obrys pod lepki header. */
.sg-oferta .sg-box:target {
    border-color: var(--sg-akcent);
    outline: 2px solid var(--sg-akcent);
    outline-offset: 5px;
    opacity: 1;
    transform: none;
}

/* ---------- pole ilustracji: poświata akcentu, cyfra, znak, rozkład ---------- */

.sg-oferta .sg-box__pole {
    grid-row: 1;
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(2.25rem, 1.6rem + 1.8vw, 3rem) clamp(1.25rem, 6%, 3rem) clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
    overflow: hidden;
    color: var(--sg-akcent);
    background: radial-gradient(ellipse 60% 78% at 50% 60%, rgba(201, 168, 76, 0.16), transparent 72%);
    background: radial-gradient(ellipse 60% 78% at 50% 60%, color-mix(in srgb, var(--sg-akcent) 22%, transparent), transparent 72%);
}
/* linia dołu pola: akcent wygasający ku brzegom */
.sg-oferta .sg-box__pole::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sg-akcent), transparent);
    opacity: 0.6;
}
/* cyfra rzymska z licznika — ozdoba bez tekstu dostępnego */
.sg-oferta .sg-box__pole::before {
    content: counter(sg-oferta, upper-roman);
    content: counter(sg-oferta, upper-roman) / '';
    position: absolute;
    top: 1rem;
    left: var(--sg-of-pad);
    font-family: var(--sg-font-naglowek);
    font-style: italic;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--sg-akcent);
}
.sg-oferta .sg-box__znak {
    position: absolute;
    top: 1.05rem;
    right: var(--sg-of-pad);
    width: 1.625rem;
    height: 1.625rem;
    color: var(--sg-akcent);
    opacity: 0.9;
}
.sg-oferta .sg-box__pole .sg-rozklad { width: min(100%, 26rem); }

/* ---------- treść boxu ---------- */

.sg-oferta .sg-box__nazwa,
.sg-oferta .sg-box__zaleta,
.sg-oferta .sg-box__fakty,
.sg-oferta .sg-box__zakup { margin-inline: var(--sg-of-pad); }

.sg-oferta .sg-box__nazwa {
    grid-row: 2;
    margin-block: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem) 0;
    font-family: var(--sg-font-naglowek);
    font-weight: 500;
    font-size: var(--sg-fs-h3);
    line-height: 1.08;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.sg-oferta .sg-box__nazwa a {
    color: #f5ede0;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .5s var(--sg-wyjscie);
}
.sg-oferta .sg-box__nazwa a:hover { color: #f5ede0; background-size: 100% 1px; }
.sg-oferta .sg-box__nazwa a:focus-visible { outline: 3px solid var(--sg-terakota); outline-offset: 4px; }
/* ostre rogi w fokusie — globalne `a:focus-visible { border-radius: 6px }` z blog.css */
.sg-oferta a:focus-visible { border-radius: 0; }

/* zaleta: kursywa w kolorze rozkładu (akcenty ≥ 6:1 na nocy) */
.sg-oferta .sg-box__zaleta {
    grid-row: 3;
    margin-block: 0.5rem 1.5rem;
    font-size: var(--sg-fs-lede);
    font-style: italic;
    font-weight: 300;
    line-height: 1.45;
    color: var(--sg-akcent);
}

.sg-oferta .sg-box__fakty {
    grid-row: 4;
    list-style: none;
    margin-block: 0;
    padding: 0;
}
.sg-oferta .sg-box__fakty li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--sg-of-linia);
    font-size: var(--sg-fs-tekst);
    line-height: 1.4;
    color: rgba(245, 237, 224, 0.9);
}
.sg-oferta .sg-box__fakty li > span { min-width: 0; overflow-wrap: anywhere; }
/* ikona w kółku — koło dozwolone (BRIEF §7.2) */
.sg-oferta .sg-box__ikona {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    border: 1px solid rgba(201, 168, 76, 0.4);
    border: 1px solid color-mix(in srgb, var(--sg-akcent) 45%, transparent);
    border-radius: 50%;
    color: var(--sg-akcent);
}

/* ---------- stopka: cena + „W tym VAT”, „Zamów”, „Poznaj szczegóły” ----------
   Wąsko: cena nad przyciskami, przyciski dzielą rząd. Szeroko (jedna kolumna
   ≥ 36rem albo dwie kolumny przy pełnej siatce ≥ 72rem): cena po lewej,
   przyciski po prawej. W boxie bez ceny „Poznaj szczegóły” stoi tam, gdzie
   w sąsiednich boxach — na dole i przy prawej krawędzi. */
.sg-oferta .sg-box__zakup {
    grid-row: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.125rem;
    margin-top: 1.5rem;
    padding: 1.5rem 0 var(--sg-of-pad);
    border-top: 1px solid var(--sg-of-linia);
}
/* „W tym VAT” pod kwotą, nie obok — blok ceny jest wtedy wąski i mieści się
   w jednym rzędzie z przyciskami */
.sg-oferta .sg-box__cena {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    line-height: 1;
}
.sg-oferta .sg-box__cena .amount {
    font-family: var(--sg-font-naglowek);
    font-weight: 500;
    font-size: clamp(2.5rem, 2.1rem + 1.1vw, 3.125rem);
    letter-spacing: -0.01em;
    color: #f5ede0;
    /* cyfry wyrównane: domyślne nautyczne Cormoranta skakały (7 i 9 pod linią, mała 1) */
    font-variant-numeric: lining-nums tabular-nums;
    overflow-wrap: anywhere;
}
.sg-oferta .sg-box__cena .woocommerce-Price-currencySymbol {
    margin-left: 0.1em;
    font-size: 0.48em;
    font-style: italic;
    color: rgba(245, 237, 224, 0.62);
}
/* „W tym VAT”: papier 70% na nocy ≥ 8:1 */
.sg-oferta .sg-box__cena .z-vat-note {
    display: inline;
    margin: 0;
    font-size: var(--sg-fs-etykieta);
    letter-spacing: 0.02em;
    opacity: 1;
    color: rgba(245, 237, 224, 0.7);
}
.sg-oferta .sg-box__akcje { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.sg-oferta .sg-box__akcje .sg-btn { flex: 1 1 auto; padding-inline: 1.1rem; }

/* Bardzo wąsko w rem (tekst 200% na telefonie): ikony faktów to ozdoba —
   znikają, żeby słowa nie łamały się w połowie; mniejsze wnętrze boxu. */
@container sg-oferta (max-width: 18rem) {
    .sg-oferta .sg-box { --sg-of-pad: 1rem; }
    .sg-oferta .sg-box__ikona { display: none; }
    .sg-oferta .sg-box__akcje .sg-btn { flex-basis: 100%; padding-inline: 0.75rem; }
}

@container sg-oferta ((min-width: 36rem) and (max-width: 57.99rem)) or (min-width: 72rem) {
    .sg-oferta .sg-box__zakup {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .sg-oferta .sg-box__akcje { margin-left: auto; }
    .sg-oferta .sg-box__akcje .sg-btn { flex: 0 0 auto; padding-inline: 1.35rem; }
}

/* ---------- akapit pod boxami: koperta + tekst ----------
   Złota linia wygasająca ku brzegom otwiera blok (gest granicy noc → dzień
   z fundamentu). Bez dolnej linii i dolnego paddingu: tekst kończy się na
   dolnym oddechu pasma (--sg-pasmo-y), jak w każdej sekcji — wcześniej płytka
   dokładała 40 px i przejście oferta → księżyc wychodziło za duże.
   Wąsko koperta stoi nad tekstem, szeroko obok. */

.sg-oferta .sg-oferta__jak {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem clamp(1.25rem, 0.6rem + 1.6vw, 2.25rem);
    align-items: start;
    max-width: 56rem;
    margin: clamp(3rem, 2rem + 3vw, 4.75rem) auto 0;
    padding: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem) clamp(0.25rem, -1rem + 4vw, 2.5rem) 0;
    background: linear-gradient(90deg, transparent, var(--sg-zloto-linia), transparent) top / 100% 1px no-repeat;
}
@container sg-oferta (min-width: 36rem) {
    .sg-oferta .sg-oferta__jak { grid-template-columns: auto minmax(0, 1fr); }
}
.sg-oferta .sg-oferta__koperta {
    width: clamp(2.75rem, 2.4rem + 1vw, 3.25rem);
    height: clamp(2.75rem, 2.4rem + 1vw, 3.25rem);
    padding: 0.7rem;
    border: 1px solid rgba(201, 168, 76, 0.5);
    border-radius: 50%;
    color: var(--sg-zloto);
}
.sg-oferta .sg-oferta__tekst {
    margin: 0;
    font-size: var(--sg-fs-tekst);
    line-height: 1.75;
    color: rgba(245, 237, 224, 0.8);
    text-wrap: pretty;
}
.sg-oferta .sg-oferta__wstep {
    display: block;
    margin: 0.2rem 0 0.5rem;
    font-family: var(--sg-font-naglowek);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
    line-height: 1.15;
    color: #f5ede0;
}

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

@media (prefers-reduced-motion: reduce) {
    .sg-rozklad__karty,
    .sg-oferta .sg-box,
    .sg-oferta .sg-box__nazwa a { transition: none; }
    .sg-oferta .sg-box:hover .sg-rozklad__karty { transform: none; }
}