/* ==========================================================================
   2-strona.pl · strona v3 A · PODSTRONY: wzór strony z długim tekstem i strona 404
   ========================================================================== */

/* ---- wzór strony z długim tekstem ---- */
.pod-glowa { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--pasek-wys) + 56px) 0 clamp(40px, 6vw, 72px); background: var(--zolty); border-bottom: 2px solid var(--atrament); }
.pod-kolo { position: absolute; z-index: -1; right: -8vw; top: -30%; width: clamp(240px, 42vw, 560px); aspect-ratio: 1; border-radius: 50%; background: var(--pomarancz); }
.pod-nad { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.pod-nad::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--atrament); }
.pod-tytul { font-size: clamp(56px, 8.4vw, 124px); }
.pod-tekst { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7.5vw, 96px); font-size: 18px; line-height: 1.6; }
.pod-tekst > * { max-width: 720px; }
.pod-tekst > * + * { margin-top: 20px; }
.pod-wstep { font-size: clamp(20px, 2vw, 22px); line-height: 1.45; font-weight: 700; }
.pod-tekst h2 { margin-top: 48px; font: 900 clamp(38px, 4.2vw, 50px)/.9 var(--kroj-plakat); text-transform: uppercase; }
.pod-tekst h3 { margin-top: 36px; font: 800 21px/1.25 var(--kroj-tekst); }
/* listy: wyliczenie ma pomarańczową kropkę, lista numerowana pokazuje numery (1., potem a., potem i.),
   a każda lista w liście jest wcięta */
.pod-tekst ul { display: grid; gap: 10px; }
.pod-tekst ul > li { position: relative; padding-left: 30px; }
.pod-tekst ul > li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 14px; height: 14px; border-radius: 50%; background: var(--pomarancz); }
.pod-tekst ol { list-style: decimal outside; padding-left: 2.1em; }
.pod-tekst ol ol { list-style-type: lower-alpha; }
.pod-tekst ol ol ol { list-style-type: lower-roman; }
.pod-tekst ol > li { padding-left: .3em; }
.pod-tekst ol > li + li { margin-top: 10px; }
.pod-tekst ol > li::marker { font-weight: 800; font-variant-numeric: tabular-nums; }
.pod-tekst li > ul, .pod-tekst li > ol { margin-top: 10px; }
.pod-tabela { border: 2px solid var(--atrament); border-radius: 20px; overflow: hidden; }
.pod-tabela table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.4; }
.pod-tabela th { background: var(--atrament); color: var(--biel); font: 800 14px/1.2 var(--kroj-tekst); letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.pod-tabela th, .pod-tabela td { padding: 14px 16px; vertical-align: top; }
.pod-tabela td { border-top: 2px solid var(--atrament); }
.pod-tabela td + td, .pod-tabela th + th { border-left: 2px solid var(--atrament); }
.pod-tabela th + th { border-left-color: rgba(255, 255, 255, .3); }
.pod-powrot { margin-top: 48px; }
.pod-powrot .btn { gap: 8px; padding-left: 20px; }
.btn-ikona { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .pod-tabela table, .pod-tabela thead, .pod-tabela tbody, .pod-tabela tr, .pod-tabela th, .pod-tabela td { display: block; }
  .pod-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pod-tabela td + td { border-left: 0; border-top-style: dashed; }
  .pod-tabela tr + tr td:first-child { border-top-width: 2px; }
  .pod-tabela tr:first-child td:first-child { border-top: 0; }
}

/* ---- 404: pusta kartka, którą można obrócić ---- */
.blad-strona { background: var(--biel); }
.pusto {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100svh; padding: calc(var(--pasek-wys) + 28px) var(--margines) 40px;
  display: grid; justify-items: center; align-content: center; gap: clamp(16px, 2.4vh, 28px); text-align: center;
}
.pusto-kolo {
  position: absolute; z-index: -1; left: 50%; top: 54%; width: min(120vw, 82svh); aspect-ratio: 1; border-radius: 50%;
  background: var(--zolty); transform: translate(-50%, -50%);
  transition: background-color .6s var(--wyjscie);
}
.pusto-tytul { display: grid; font-size: clamp(64px, min(15vw, 17svh), 190px); }
.pusto-karta {
  width: clamp(130px, 20svh, 210px); aspect-ratio: .72; padding: 0; border: 0; background: none;
  perspective: 900px; -webkit-tap-highlight-color: transparent;
}
.pusto-obrot { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.pusto-sciana {
  position: absolute; inset: 0; display: grid; align-content: start; gap: 9%; padding: 14% 12%;
  border: 3px solid var(--atrament); border-radius: 18px; background: var(--biel);
  box-shadow: 8px 8px 0 var(--atrament);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.pusto-sciana i { display: block; height: 9px; border-radius: 5px; border: 2px dashed var(--atrament); opacity: .5; }
.pusto-sciana i:nth-child(2) { width: 70%; }
.pusto-sciana i:nth-child(3) { width: 84%; }
.pusto-sciana b { align-self: end; justify-self: center; font: 900 clamp(60px, 9svh, 96px)/.8 var(--kroj-plakat); color: var(--pomarancz); }
.pusto-tyl { transform: rotateY(180deg); align-content: center; background: var(--atrament); }
.pusto-tyl b { align-self: center; font-size: clamp(34px, 5svh, 52px); line-height: .9; color: var(--zolty); text-transform: uppercase; }
.pusto-tekst { max-width: 22em; font-size: clamp(18px, 2vw, 21px); line-height: 1.4; font-weight: 700; text-wrap: balance; }
.pusto-btn { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .pusto-tytul span { animation: pusto-w .9s var(--sprezyna) both; }
  .pusto-tytul span:nth-child(2) { animation-delay: .08s; }
  .pusto-kolo { animation: pusto-kolo 1s var(--sprezyna) both; }
  .pusto-karta { animation: pusto-w .9s var(--sprezyna) both .15s; }
}
@keyframes pusto-w { from { opacity: 0; transform: translateY(50%) rotate(3deg); } }
@keyframes pusto-kolo { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }