/* Poradnik /nowe-przepisy (2.11.2026): strona informacyjna dla ruchu „nowe przepisy”, z ofertą pakietu w treści.
   Z elementów projektu v3.1 i v3.2 z Claude Design (kartka z kalendarza, zakreślacz, oś dat i karta ceny ze
   strona.css, zwijane pytania ze styl.css); układ własny, do przejrzenia w Claude Design (odstępstwo 2.11,
   docs/produkty/antymobbing/design/CLAUDE-DESIGN.md). Telefon najpierw (390 px), komputer od 960 px.
   Tylko klasy, bez stylów w atrybutach (CSP style-src 'self'). */

/* nagłówek: zielony jak scena strony produktu, ale niższy. Na telefonie odpowiedź „W skrócie” stoi na pierwszym
   ekranie (uwaga marketingowa B1), a pod nią jedna linijka do oferty, bez drugiego żółtego przycisku */
.pg-glowa{position:relative; overflow:hidden; padding-bottom:30px; background:var(--zielen); color:var(--papier)}
.pg-glowa::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 45% at 92% 8%, rgba(245,208,70,.08), transparent 70%)}
.pg-glowa .wrap{position:relative}
.pg-siatka{display:grid; gap:20px}
.pg-skrot{display:grid; gap:4px}
.pg-tytul{display:grid; gap:12px; justify-items:start; align-content:start}
.pg-glowa .h1{color:var(--papier); font-size:clamp(33px, 6.4vw + 8px, 40px); line-height:1.02}
.pg-termin{display:flex; align-items:center; gap:14px; margin-top:4px}
.pg-kartka{--k-szer:46px; --k-dziurka:var(--zielen); flex:none; margin:0 6px 6px 0}
.pg-kartka .kartka-tydzien, .pg-kartka .kartka-rok{display:none}
.pg-fakty{display:grid; gap:2px; font:600 15px/1.35 var(--f-bez); color:var(--papier)}
.pg-fakty li + li{font-weight:500; color:var(--zielen-tekst)}

/* „W skrócie”: kartka papieru na zieleni (ten sam motyw co arkusz regulaminu na stronie produktu) */
.skrot{position:relative; display:grid; gap:10px; padding:18px 18px 20px; border-radius:4px; background:var(--karta); color:var(--atrament); box-shadow:var(--cien-kartki)}
.skrot::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; border-radius:4px 4px 0 0; background:var(--cynober)}
.skrot-etykieta{padding-top:4px; font:600 13px/1.2 var(--f-bez); letter-spacing:.08em; text-transform:uppercase; color:var(--cynober)}
.skrot-tekst{display:grid; gap:8px; font:400 18px/1.5 var(--f-szeryf); font-variation-settings:"opsz" 18}
.pg-oferta{display:block; min-height:44px; padding-block:11px; color:var(--zielen-tekst); font-size:var(--t-maly); line-height:1.45; text-decoration:underline; text-underline-offset:4px; text-wrap:pretty}
.na-zieleni a.pg-oferta{color:var(--zielen-tekst)}
.na-zieleni a.pg-oferta:hover{color:var(--papier)}
.pg-oferta strong{color:var(--papier); font-weight:600}
/* komputer: tytuł i termin z lewej, „W skrócie” z prawej (wiersz najwyżej ok. 70 znaków) */
@media (min-width:960px){
  .pg-glowa{padding-bottom:52px}
  .pg-siatka{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:64px; align-items:start; padding-top:28px}
  .pg-glowa .h1{font-size:58px; line-height:1}
  .pg-tytul{gap:16px}
  .pg-termin{margin-top:10px}
  .skrot{padding:22px 26px 24px}
  .skrot-tekst{font-size:19px}
}
@media (max-width:380px){
  .pg-glowa .h1{font-size:30px}
  .skrot-tekst{font-size:17px}
  .pg-siatka{gap:16px}
}

/* zakreślacz w tekście: najwyżej jedna fraza na blok, jak daty na arkuszu regulaminu */
.zakresl{padding:0 .15em; border-radius:.2em; background:var(--zakreslacz-2); color:inherit; box-decoration-break:clone; -webkit-box-decoration-break:clone}

/* odnośniki do przepisów: mały indeks w kolorze przepisu, cel na liście „Przepisy z cytatami” */
/* cel dotyku 44 x 44 px (ekrany.py nie robi wyjątku dla linku w zdaniu): pole wokół numeru z dopełnienia, ujemny
   margines oddaje miejsce w wierszu, więc tekst stoi jak przy zwykłym indeksie; dwa odnośniki nigdy obok siebie */
.przyp{padding:15px 19px; margin:0 -18px; color:var(--cynober); font:600 12px/0 var(--f-mono); text-decoration:none}
.przyp:hover{color:var(--atrament); text-decoration:underline}
.na-zieleni .skrot a.przyp{color:var(--cynober); font-size:11px}
.na-zieleni .skrot a.przyp:hover{color:var(--atrament)}

/* układ treści: na telefonie spis w dwóch kolumnach pod nagłówkiem, na komputerze spis przyklejony z lewej
   i kolumna do czytania (najwyżej ok. 70 znaków w wierszu) */
.pg-uklad{display:grid; padding-top:22px}
.spis{display:grid; gap:10px}
.spis-tytul{font:600 13px/1.2 var(--f-bez); letter-spacing:.08em; text-transform:uppercase; color:var(--atrament-2)}
.spis ol{display:grid; grid-template-columns:1fr 1fr; column-gap:16px; border-top:2px solid var(--atrament); counter-reset:spis}
.spis li{counter-increment:spis; border-bottom:1px solid var(--linia)}
.spis a{display:grid; grid-template-columns:26px minmax(0,1fr); align-items:center; min-height:46px; padding:6px 0; color:var(--atrament); font-size:var(--t-maly); font-weight:500; line-height:1.25; text-decoration:none}
.spis a::before{content:counter(spis, decimal-leading-zero); font:500 12px/1 var(--f-mono); color:var(--atrament-2)}
.spis a:hover{color:var(--zielen-2)}
.pg-tresc{min-width:0}
.rozdzial{display:grid; gap:16px; padding-block:40px; border-bottom:1px solid var(--linia); scroll-margin-top:12px}
.rozdzial:last-child{border-bottom:0}
.rozdzial .h2{font-size:clamp(27px, 1.2vw + 22px, 38px)}
.rozdzial p, .rozdzial li{max-width:66ch}
.odpowiedz{font:400 20px/1.45 var(--f-szeryf); font-variation-settings:"opsz" 20; color:var(--atrament); text-wrap:pretty}
.tekst{display:grid; gap:12px; color:var(--atrament-2); line-height:1.6}
.tekst strong{color:var(--atrament); font-weight:600}
@media (min-width:960px){
  .pg-uklad{grid-template-columns:200px minmax(0,720px); column-gap:72px; align-items:start; padding-top:56px}
  .spis{position:sticky; top:28px; padding-top:40px}
  .spis ol{grid-template-columns:1fr}
  .spis a{min-height:44px}
  .rozdzial{padding-block:44px 52px}
  .rozdzial:first-child{padding-top:40px}
  .odpowiedz{font-size:23px}
}

/* kogo dotyczą: dwa progi jak pozycje w rejestrze, cztery obszary regulaminu jako etykiety 2 x 2 */
.progi{display:grid; border-top:2px solid var(--atrament)}
.prog{display:grid; gap:2px; padding:14px 0; border-bottom:1px solid var(--linia)}
.prog dt{font-size:var(--t-maly); line-height:1.4; color:var(--atrament-2)}
.prog dd{font:600 25px/1.15 var(--f-szeryf); font-variation-settings:"opsz" 36}
@media (min-width:600px){
  .prog{grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:24px; padding:16px 0}
  .prog dd{text-align:right}
}
.obszary-tytul{font:600 var(--t-maly)/1.4 var(--f-bez); color:var(--atrament)}
.obszary{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.obszary li{display:flex; align-items:center; min-height:52px; padding:10px 12px; border:1.5px solid var(--linia-mocna); border-radius:var(--r-2); background:var(--karta); font-size:var(--t-maly); font-weight:500; line-height:1.3}

/* co zrobić: kroki z numerami jak plan dat na stronie produktu; pod każdym linia „W pakiecie” (most do oferty) */
.kroki-p{display:grid; border-top:2px solid var(--atrament); counter-reset:krok}
.krok-p{display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:14px; row-gap:6px; padding:18px 0; border-bottom:1px solid var(--linia)}
.krok-p::before{counter-increment:krok; content:counter(krok); grid-row:1 / span 3; align-self:start; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--karta); box-shadow:inset 0 0 0 2px var(--atrament); font:600 15px/1 var(--f-mono)}
.krok-p h3{padding-top:5px; font:600 18px/1.35 var(--f-bez)}
.krok-p .krok-opis{color:var(--atrament-2); line-height:1.55}
.krok-p .w-pakiecie{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; align-items:baseline; margin-top:4px; padding:9px 12px; border-radius:var(--r-1); background:var(--zakreslacz-tlo); box-shadow:inset 3px 0 0 var(--zakreslacz); color:var(--atrament); font-size:var(--t-maly); line-height:1.45}
.w-pakiecie b{font:600 11.5px/1.7 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--zielen-2)}
@media (max-width:380px){ .krok-p .w-pakiecie{grid-template-columns:1fr} }

/* od kiedy i do kiedy: oś ze strona.css, pod nią daty w rzędach (data krojem maszynowym, A11) */
.rozdzial .os{margin-block:4px}
.os-legenda{display:flex; flex-wrap:wrap; gap:6px 18px}
.os-znak{display:inline-flex; align-items:center; gap:7px}
.os-znak::before{content:""; flex:none; width:14px; height:10px; border-radius:2px}
.os-znak-30::before{background:var(--zielen)}
.os-znak-14::before{background:var(--zakreslacz); box-shadow:inset 0 0 0 1.5px var(--atrament)}
.daty{display:grid; border-top:2px solid var(--atrament)}
.data-w{display:grid; grid-template-columns:104px minmax(0,1fr); column-gap:16px; padding:13px 0; border-bottom:1px solid var(--linia)}
.data-w dt{font:600 15px/1.5 var(--f-mono)}
.data-w dd{line-height:1.5; color:var(--atrament-2)}
.data-w dd strong{color:var(--atrament); font-weight:600}
.data-w.data-start dt, .data-w.data-koniec dt{color:var(--cynober)}
.uwaga-czas{font:500 var(--t-tresc)/1.5 var(--f-bez); color:var(--zielen)}

/* oferta: karta ceny ze strony produktu z podglądem pierwszej strony regulaminu (uwaga marketingowa W6) */
.oferta{display:grid; overflow:hidden; margin-block:8px; border:2px solid var(--atrament); border-radius:var(--r-3); background:var(--karta); box-shadow:0 5px 0 var(--atrament); scroll-margin-top:16px}
.oferta-obraz{display:grid; border-bottom:1px solid var(--linia); background:var(--papier-2)}
.oferta-kadr{position:relative; height:196px; overflow:hidden}
.oferta-kadr img{display:block; width:74%; max-width:330px; margin:22px auto 0; border-radius:2px; box-shadow:var(--cien-2); transform:rotate(-2deg)}
.oferta-kadr::after{content:""; position:absolute; left:0; right:0; bottom:0; height:56px; background:linear-gradient(rgba(236,232,220,0), var(--papier-2))}
.oferta-tresc{display:grid; gap:16px; padding:22px 20px}
.oferta-glowka{display:grid; gap:6px}
.oferta-etykieta{font:600 13px/1.2 var(--f-bez); letter-spacing:.08em; text-transform:uppercase; color:var(--cynober)}
.oferta-tytul{font:600 25px/1.2 var(--f-szeryf); font-variation-settings:"opsz" 36; text-wrap:balance}
.oferta .cena-lista{padding-top:0; border-top:0}
.oferta-cena{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding-top:14px; border-top:1px dashed var(--linia-mocna)}
.oferta-cena strong{font:600 48px/.95 var(--f-szeryf); font-variation-settings:"opsz" 72; letter-spacing:-.03em}
.oferta-cena span{font:500 17px/1.2 var(--f-bez)}
.oferta-cena small{flex-basis:100%; font-size:var(--t-maly); color:var(--atrament-2)}
.oferta-pewnosc{display:grid; gap:4px; font-size:var(--t-maly); line-height:1.45; color:var(--zielen); font-weight:500}
.oferta-dalej{display:grid; gap:2px; padding-top:6px; border-top:1px solid var(--linia)}
.oferta-dalej .link-dalej, .oferta-dalej .zamiast-linku .link-dalej{justify-self:start; font-size:var(--t-maly); text-align:left}
.oferta-kup{display:grid; gap:16px}
.oferta-dalej small{font-size:13px; color:var(--atrament-2)}
.oferta-zastrzezenie{font-size:13px; line-height:1.45; color:var(--atrament-2)}
.oferta-dla{font-size:var(--t-maly); line-height:1.45; color:var(--atrament); font-weight:500}
.oferta-podpis{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 14px; padding:2px 20px 4px; font-size:13px; line-height:1.35; color:var(--atrament-2)}
.oferta-podpis > span{padding-block:8px}
.oferta-podpis a{display:inline-flex; align-items:center; gap:5px; min-height:44px; color:var(--zielen-2); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.oferta-podpis small{font-weight:400; color:var(--atrament-2)}
.rozdzial-oferta{padding-block:28px}
@media (min-width:720px){
  .oferta-kadr{height:250px}
  .oferta-kadr img{width:58%; margin-top:30px}
  .oferta-podpis{padding-inline:28px}
  .oferta-tresc{grid-template-columns:minmax(0,1fr) 248px; grid-template-rows:auto auto 1fr auto; column-gap:32px; align-items:start; padding:28px 28px 26px}
  .oferta-glowka, .oferta-dalej{grid-column:1 / -1}
  .oferta .cena-lista{grid-column:1}
  .oferta-zastrzezenie{grid-column:1}
  .oferta-kup{grid-column:2; grid-row:2 / span 2}
  .oferta-kup .oferta-cena strong{font-size:44px}
}

/* nowa definicja: dwa brzmienia przepisu, stare ze skreśleniem, nowe na kartce; pod nimi punkty */
.brzmienia{display:grid; gap:12px}
.brzmienie{display:grid; gap:8px; padding:16px 18px; border-radius:var(--r-2)}
.brzmienie-bylo{border:1.5px dashed var(--linia-mocna)}
.brzmienie-jest{background:var(--karta); box-shadow:var(--cien-2)}
.brzmienie-etykieta{font:600 13px/1.2 var(--f-bez); letter-spacing:.06em; text-transform:uppercase; color:var(--atrament-2)}
.brzmienie-jest .brzmienie-etykieta{color:var(--cynober)}
.brzmienie blockquote{font:400 19px/1.45 var(--f-szeryf); color:var(--atrament-2); text-wrap:pretty}
.brzmienie-jest blockquote{font-size:23px; line-height:1.3; font-weight:500; color:var(--atrament)}
.brzmienie del{text-decoration:line-through 2.5px var(--cynober); color:var(--atrament)}
.punkty{display:grid; gap:10px}
.punkty li{display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; line-height:1.55; color:var(--atrament-2)}
.punkty li::before{content:""; width:8px; height:8px; margin-top:.62em; border-radius:1px; background:var(--cynober)}
.punkty li strong{color:var(--atrament); font-weight:600}
.zamiast-linku .link-dalej{padding:0; border:0; background:none; color:var(--zielen-2); font:600 var(--t-tresc)/1.35 var(--f-bez); text-align:left; cursor:pointer}
.zamiast-linku .link-dalej:hover{color:var(--atrament)}
.stara-polityka{display:grid; gap:4px; padding:14px 16px; border-radius:var(--r-2); background:var(--papier-2); line-height:1.5}
.stara-polityka p{color:var(--atrament-2)}

/* pytania: zwijane jak na stronie produktu, odpowiedź zwykłym tekstem */
.pg-pytania{display:grid; border-top:2px solid var(--atrament)}
.pg-pytania .zwin > summary{font-size:var(--t-wiekszy)}
.pg-pytania .zwin-tresc p{max-width:64ch}

/* wezwanie: zielony pas na końcu treści, nagłówek jak w reklamie tej grupy */
.wezwanie{padding-block:52px; background:var(--zielen); color:var(--papier)}
.wezwanie-siatka{display:grid; gap:18px; justify-items:start}
.wezwanie .h2{color:var(--papier); max-width:18ch}
.wezwanie .h2 .akcent{color:var(--zakreslacz)}
.wezwanie-cena{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px}
.wezwanie-cena strong{font:600 38px/1 var(--f-szeryf); letter-spacing:-.015em}
.wezwanie-cena span{color:var(--zielen-tekst)}
.wezwanie .zamiast-linku{width:100%}
.wezwanie .btn{width:100%}
.wezwanie-uwagi{display:grid; gap:4px; font-size:var(--t-maly); line-height:1.45; color:var(--zielen-tekst)}
@media (min-width:960px){
  .wezwanie{padding-block:80px}
  .wezwanie-siatka{grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:80px; align-items:center}
  .wezwanie-siatka > .h2{grid-row:span 3}
  .wezwanie .btn{width:auto; min-width:260px}
  .wezwanie .zamiast-linku{width:auto}
}

/* przepisy: każdy przypis z numerem, nazwą przepisu i cytatem słowo w słowo; cel odnośnika podświetlony */
.pg-przepisy{padding-block:48px}
.przypisy-siatka{display:grid; gap:20px}
.przypisy{display:grid; border-top:2px solid var(--atrament)}
.przypis{display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:12px; row-gap:6px; padding:14px 0 16px; border-bottom:1px solid var(--linia); scroll-margin-top:16px}
.przypis-nr{grid-row:1 / span 3; font:600 14px/1.55 var(--f-mono); color:var(--cynober)}
.przypis-akt{font-weight:600; line-height:1.4}
.przypis-akt small{display:block; font-weight:400; font-size:var(--t-maly); color:var(--atrament-2)}
.przypis blockquote{padding-left:12px; border-left:3px solid var(--zakreslacz); font:400 17px/1.55 var(--f-szeryf); color:var(--atrament); text-wrap:pretty}
.przypis-uwaga{font-size:var(--t-maly); line-height:1.5; color:var(--atrament-2)}
.przypis:target{background:var(--bursztyn-jasny); box-shadow:-10px 0 0 var(--bursztyn-jasny), 10px 0 0 var(--bursztyn-jasny)}
@media (min-width:960px){
  .pg-przepisy{padding-block:88px}
  .przypisy-siatka{grid-template-columns:200px minmax(0,720px); column-gap:72px}
  .przypisy-siatka .sekcja-glowka{position:sticky; top:28px; align-self:start}
}