/* ==========================================================================
   Stránka Pravidla, souvislý text a bodovací tabulka
   ========================================================================== */

.prose {
  width: 100%;
  max-width: var(--stack-w);
}

/* Nadpisy i nadnadpisy stojí na ose sloupce, stejná sazba jako .hero.
   Souvislý text pod nimi zůstává zarovnaný vlevo, na střed by se četl špatně. */
.prose h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.5vw, 3rem);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  /* serif v regularu snese víc řádkování než grotesk v extra bold */
  line-height: 1.1;
  margin-bottom: var(--sp-3);
  text-align: center;
  text-wrap: balance;
}

.prose h2 {
  font-family: var(--label-font);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
  padding-bottom: calc(7px * var(--ui));
  border-bottom: var(--hairline) solid var(--border);
  text-align: center;
}

/* Otázka v „častých otázkách“ a podobný řádek, na který odpovídá odstavec
   pod ním. Není to další úroveň členění stránky jako h2, proto má sazbu
   textu, plnou barvu a stojí vlevo, ne na ose sloupce. */
.prose h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight-sm);
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  line-height: 1.3;
  color: var(--text);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}

/* O šířce řádku rozhoduje sloupec (--stack-w), ne míra v `ch`, ta by v každém
   motivu skončila jinde než hrana karty. Viz komentář v tokens.css. */
/* Odstavce jdou do serifu, --font--paragraph-text. */
.prose p {
  color: var(--text-muted);
  font-family: var(--font-display);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
  max-width: 100%;
  text-wrap: pretty;
}

.prose ul,
.prose ol {
  color: var(--text-muted);
  font-family: var(--font-display);
  line-height: 1.5;
  margin: 0 0 var(--sp-4) 1.15rem;
  display: grid;
  gap: calc(6px * var(--ui));
}

.prose strong {
  color: var(--text);
  font-weight: 700;
}

/* Odkazy v textu berou akcent z base.css, ale hover tam žádný není.
   :not(.btn) nechává na pokoji tlačítka vysázená v textu jako odkaz. */
.prose a:not(.btn):hover {
  color: var(--accent-hover);
}

/* perex je podnadpis stránky, drží osu nadpisu nad sebou */
.lead {
  font-family: var(--font-display);
  font-weight: var(--display-weight-sm);
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  line-height: 1.35;
  letter-spacing: var(--display-tracking);
  color: var(--text);
  margin-bottom: var(--sp-5);
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  text-wrap: pretty;
}

/* -------------------------------------------------------------- snímek */
/* Obrázek v textu. Rozměry drží v HTML atributy width/height, aby si
   prohlížeč nechal místo dřív, než snímek dorazí, a stránka pod ním
   nepodskočila. Tady se jen vejde do sloupce a dostane rám karty. */
.prose-figure {
  margin: 0 0 var(--sp-4);
}

.prose-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-md);
  background-color: var(--surface-2);
}

.prose-figure figcaption {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-top: var(--sp-2);
  text-align: center;
  text-wrap: pretty;
}

/* ------------------------------------------------------ bodovací tabulka */
.table-scroll {
  width: 100%;
  overflow-x: auto;
}

.score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.82rem, 2.2vw, 0.92rem);
}

.score-table th,
.score-table td {
  padding: calc(9px * var(--ui)) calc(12px * var(--ui));
  text-align: left;
  border-bottom: var(--hairline) solid var(--border);
}

.score-table thead th {
  font-family: var(--label-font);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom-color: var(--border-strong);
}

.score-table tbody tr:last-child td {
  border-bottom: 0;
}

.score-table td:first-child {
  color: var(--text);
}

.score-table td:last-child,
.score-table th:last-child {
  text-align: right;
  white-space: nowrap;
}

.score-table .pts {
  font-family: var(--font-num);
  font-weight: var(--num-weight);
  font-size: 1.15em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* čísla v monu, jako metadata na webu */
.score-table .example {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  white-space: nowrap;
  letter-spacing: 0.04em;
}