/* ==========================================================================
   2-strona.pl · strona v3 A · CENA
   Dwie drogi, dwie karty. Cena jest największą rzeczą w karcie. Karty rosną z treścią:
   podmiana tekstów nie psuje układu. Żółta płyta płynie pod wybraną kartę (sekcje.js).
   ========================================================================== */

.cena-wstep { max-width: 30em; }
.drogi { position: relative; isolation: isolate; display: grid; gap: 14px; }
.drogi-plyta {
  position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 0;
  border-radius: var(--r-karta); background: var(--zolty);
  box-shadow: 6px 6px 0 var(--atrament);
  transition: transform var(--sprezyna-czas) var(--sprezyna), width var(--czas-wolny) var(--wyjscie), height var(--czas-wolny) var(--wyjscie);
}
.dk {
  position: relative; display: grid; align-content: start; gap: clamp(10px, 1.2vw, 14px);
  padding: clamp(18px, 2.1vw, 28px); border: 2px solid var(--atrament); border-radius: var(--r-karta);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html:not(.js) .dk-abonament { background: var(--zolty); }
.dk-glowa { display: flex; align-items: center; gap: 12px; }
.dk-nazwa { font: 900 clamp(34px, 3.3vw, 48px)/.9 var(--kroj-plakat); text-transform: uppercase; }
.dk-cena { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 12px; }
.dk-cena > span[data-decyzja] { display: contents; }
.dk-kwota { font: 900 clamp(92px, 10.4vw, 150px)/.78 var(--kroj-plakat); letter-spacing: -.01em; white-space: nowrap; }
.dk-jednostka { font: 900 clamp(26px, 2.4vw, 34px)/.9 var(--kroj-plakat); text-transform: uppercase; max-width: 7em; padding-bottom: .08em; }
.dk-vat { flex-basis: 100%; margin-top: 6px; font: 800 clamp(17px, 1.3vw, 19px)/1.25 var(--kroj-tekst); }
.dk-lista { display: grid; }
.dk-lista > div { display: grid; gap: 2px; padding: 8px 0; border-top: 2px solid var(--atrament); }
.dk-lista dt { font: 800 13px/1.2 var(--kroj-tekst); letter-spacing: .09em; text-transform: uppercase; }
.dk-lista dd { font-size: 17px; line-height: 1.4; font-weight: 600; text-wrap: pretty; }

/* obrazy dróg: miesiące po kolei i dwie połowy */
.dk-obraz { position: relative; flex: none; width: 64px; height: 64px; }
.dk-obraz-miesiace { border-radius: 50%; background: var(--atrament); }
.dk-obraz-miesiace i {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--biel);
  transform: rotate(calc(var(--n) * 30deg)) translateY(-23px);
}
.dk-obraz-miesiace i:nth-child(1) { --n: 0; } .dk-obraz-miesiace i:nth-child(2) { --n: 1; } .dk-obraz-miesiace i:nth-child(3) { --n: 2; }
.dk-obraz-miesiace i:nth-child(4) { --n: 3; } .dk-obraz-miesiace i:nth-child(5) { --n: 4; } .dk-obraz-miesiace i:nth-child(6) { --n: 5; }
.dk-obraz-miesiace i:nth-child(7) { --n: 6; } .dk-obraz-miesiace i:nth-child(8) { --n: 7; } .dk-obraz-miesiace i:nth-child(9) { --n: 8; }
.dk-obraz-miesiace i:nth-child(10) { --n: 9; } .dk-obraz-miesiace i:nth-child(11) { --n: 10; } .dk-obraz-miesiace i:nth-child(12) { --n: 11; }
.dk-obraz-miesiace b {
  position: absolute; left: 50%; top: 50%; width: 17px; height: 17px; margin: -8.5px; border-radius: 50%;
  background: var(--pomarancz); border: 2px solid var(--biel);
  transform: rotate(0deg) translateY(-23px);
}
.dk.wybrana .dk-obraz-miesiace b { animation: dk-obieg 1.5s var(--wyjscie) both; }
@keyframes dk-obieg { from { transform: rotate(-360deg) translateY(-23px); } to { transform: rotate(0deg) translateY(-23px); } }
.dk-obraz-polowy i {
  position: absolute; top: 0; width: 50%; height: 100%; background: var(--atrament);
  transition: transform var(--sprezyna-czas) var(--sprezyna);
}
.dk-obraz-polowy i:first-child { left: 0; border-radius: 32px 0 0 32px; transform: translateX(-4px) rotate(-8deg); }
.dk-obraz-polowy i:last-child { right: 0; border-radius: 0 32px 32px 0; background: var(--pomarancz); transform: translateX(4px) rotate(8deg); }
.dk.wybrana .dk-obraz-polowy i { transform: none; }

.cena-dol { display: grid; gap: 16px; margin-top: clamp(22px, 2.4vw, 30px); }
.cena-adres { font-size: 17px; line-height: 1.45; max-width: 32em; text-wrap: pretty; }

@media (min-width: 900px) {
  .drogi { grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
  .cena-dol { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}