/* Styl textových stránek (Provoz a úpravy, Weby Praha, Kolik stojí web).
   Hlavní stránka ho nenačítá — má vlastní částicovou scénu a jiné rozvržení.
   Dřív byl tenhle blok zkopírovaný v každé stránce zvlášť; při třetí kopii
   už bylo jisté, že se rozejdou. */

body.pravni { background: var(--cerna); color: var(--papir); min-height: 100vh; }

.pravni-obsah { max-width: 48rem; margin: 0 auto; padding: 120px var(--zleva) 90px; }
.pravni-obsah h1 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.03em; line-height: 1.05; }
.pravni-obsah .uvod { margin-top: 20px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55;
                      color: var(--slabe); max-width: 34rem; }
.pravni-obsah .datum { margin-top: 14px; font-size: 13px; color: var(--slabsi); }
.pravni-obsah h2 { margin-top: 56px; font-size: 22px; letter-spacing: -.015em; }
.pravni-obsah h3 { margin-top: 34px; font-size: 15px; font-weight: 500; letter-spacing: .04em;
                   text-transform: uppercase; color: var(--slabsi); }
.pravni-obsah p, .pravni-obsah li { margin-top: 12px; line-height: 1.65; color: var(--slabe); }
.pravni-obsah ul { margin-top: 8px; padding-left: 20px; }
.pravni-obsah strong { color: var(--papir); font-weight: 500; }
.pravni-obsah a { color: var(--zluta); }
.pravni-obsah .zpet { display: inline-block; margin-top: 52px; }

/* Tabulka se na úzké obrazovce nezmenšuje do nečitelna — překlopí se na
   kartičky, kde má každý řádek svůj popisek pod sebou. */
.tab { width: 100%; margin-top: 20px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tab th { text-align: left; font-size: 13px; font-weight: 500; letter-spacing: .04em;
          text-transform: uppercase; color: var(--slabsi); padding: 0 0 10px; }
.tab td { padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); line-height: 1.4; color: var(--slabe); }
.tab td:last-child { text-align: right; white-space: nowrap; color: var(--papir); font-weight: 500; padding-left: 16px; }
.tab th:last-child { text-align: right; }

/* Sazby mají tři sloupce: minutová je hlavní údaj, hodinová vedle ní jen převod. */
.tab.sazby td:nth-child(2), .tab.sazby th:nth-child(2) { text-align: right; white-space: nowrap; }
.tab.sazby td:nth-child(2) { color: var(--papir); font-weight: 500; }
.tab.sazby td:last-child, .tab.sazby th:last-child { color: var(--slabsi); font-weight: 400; }

.zdarma-seznam { margin-top: 18px; display: grid; gap: 10px 26px;
                 grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.zdarma-seznam div { position: relative; padding-left: 22px; line-height: 1.45; color: var(--slabe); }
.zdarma-seznam div::before { content: ""; position: absolute; left: 2px; top: .62em;
                             width: 7px; height: 7px; border-radius: 50%; background: var(--zluta); }

.pravidla, .kroky { margin-top: 20px; counter-reset: pr; list-style: none; padding: 0; }
.pravidla li, .kroky li { counter-increment: pr; position: relative; padding-left: 40px; margin-top: 22px; }
.pravidla li::before, .kroky li::before {
  content: counter(pr); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--cerna); background: var(--zluta); }

.ramecek { margin-top: 36px; padding: 22px 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; }
.ramecek h2 { margin-top: 0; }
.ramecek p:first-of-type { margin-top: 10px; }

@media (max-width: 620px) {
  .tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tab tr { display: block; border-top: 1px solid rgba(255,255,255,.1); padding: 13px 0; }
  .tab td { display: block; border: 0; padding: 0; }
  .tab td:last-child { text-align: left; padding: 6px 0 0; }
  .tab.sazby td:nth-child(2), .tab.sazby td:last-child { display: inline-block; text-align: left; }
  .tab.sazby td:last-child::before { content: " · "; }
}