/* ==========================================================================
   Romana Pokorná, finanční architektka
   Vzhled webu.

   Obsah je v souborech .html, vzhled tady. Když chceš změnit barvu nebo
   velikost písma, hledej to tady.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Barvy a písma na jednom místě
   -------------------------------------------------------------------------- */

:root {
  --petrolejova:       #1D3B3C;   /* ztlumená, dřív sytější #0F4B50 */
  --petrolejova-tmava: #061F22;   /* skoro černá, na hero a patičku */
  --terakotova:        #A35D3C;   /* velké nadpisy a plochy, ztlumená z #C0562E */
  --terakotova-text:   #8F5438;   /* malé texty na světlém, ztlumená z #A8431F */
  --terakotova-svetla: #E3AC96;   /* malé texty na tmavém, ztlumená z #EFA885 */
  --kremova:           #F8F2E9;
  --kremova-bila:      #FDFAF5;

  --text:          #16292B;
  --text-tlumeny:  #556566;
  --text-na-tmave: #EDE3D4;
  --linka:         #DDD2C0;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --sirka-obalu: 76rem;
  --sirka-textu: 40rem;
}

/* --------------------------------------------------------------------------
   2. Základ
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kremova);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   3. Pruhy a obal

   Web je poskládaný z vodorovných pruhů. Pruh drží barvu přes celou šířku
   okna, obal uvnitř drží obsah uprostřed.
   -------------------------------------------------------------------------- */

.pas { padding: 4.5rem 0; }
.pas--uzky { padding: 3rem 0; }

.pas--tmavy  { background: var(--petrolejova); color: var(--text-na-tmave); }
.pas--cerny  { background: var(--petrolejova-tmava); color: var(--text-na-tmave); }
.pas--terakota { background: var(--terakotova); color: #FFFFFF; }
.pas--bily   { background: var(--kremova-bila); }

.obal {
  max-width: var(--sirka-obalu);
  margin: 0 auto;
  padding: 0 2rem;
}

.obal--text { max-width: var(--sirka-textu); }

/* --------------------------------------------------------------------------
   4. Typografie

   Velké nadpisy jsou verzálkami, patkovým písmem a s těsným řádkováním.
   Druhý řádek bývá kurzívou v terakotové. To je poznávací znamení značky,
   převzaté z tvých vizuálů.
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
}

h1 {
  font-size: clamp(1.875rem, 4.2vw, 2.875rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(1.4375rem, 2.8vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

/* Druhý řádek nadpisu: kurzíva, malá písmena, terakotová */
.duraz {
  display: block;
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--terakotova);
}

h1 .duraz { font-size: 0.78em; }
h2 .duraz { font-size: 0.88em; }

.pas--tmavy .duraz,
.pas--cerny .duraz,
.uvod .duraz { color: var(--terakotova-svetla); }

.pas--terakota .duraz { color: #FFE0CE; }

p { margin: 0 0 1.25rem; }

.uvodni-odstavec {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-tlumeny);
  max-width: 34rem;
}

.pas--tmavy .uvodni-odstavec,
.pas--cerny .uvodni-odstavec,
.uvod .uvodni-odstavec { color: var(--text-na-tmave); opacity: 0.8; }

.pas--terakota .uvodni-odstavec { color: #FFFFFF; opacity: 1; }

/* Odkaz v terakotovém pruhu. Bez tohohle pravidla by zdědil terakotovou
   na terakotové a byl by neviditelný. */
.pas--terakota a { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, 0.6); }
.pas--terakota a:hover { text-decoration-color: #FFFFFF; }

/* Malý verzálkový štítek nad nadpisem */
.stitek {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terakotova-text);
  margin: 0 0 1.5rem;
}

.pas--tmavy .stitek,
.pas--cerny .stitek,
.uvod .stitek { color: var(--terakotova-svetla); }

.pas--terakota .stitek { color: #FFFFFF; }

.linka-znacky {
  width: 4rem;
  height: 3px;
  background: var(--terakotova);
  border: 0;
  margin: 0 0 2.5rem;
}

.pas--tmavy .linka-znacky,
.pas--cerny .linka-znacky,
.uvod .linka-znacky { background: var(--terakotova-svetla); }

/* --------------------------------------------------------------------------
   5. Odkazy a tlačítka
   -------------------------------------------------------------------------- */

a {
  color: var(--terakotova-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(192, 86, 46, 0.45);
  transition: text-decoration-color 0.2s ease;
}

a:hover { text-decoration-color: var(--terakotova); }

.pas--tmavy a, .pas--cerny a, .uvod a {
  color: var(--terakotova-svetla);
  text-decoration-color: rgba(224, 138, 95, 0.5);
}

.tlacitko {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.0625rem 2.25rem;
  background: var(--terakotova);
  color: #FFFFFF;
  border: 1px solid var(--terakotova);
  transition: background 0.2s ease, color 0.2s ease;
}

/* Lomítko a prázdné uvozovky znamenají: zobraz šipku, ale čtečce ji nehlas. */
.tlacitko::after { content: "→" / ""; font-size: 1rem; }

.tlacitko:hover { background: transparent; color: var(--terakotova); }

.pas--tmavy .tlacitko:hover,
.pas--cerny .tlacitko:hover,
.uvod .tlacitko:hover { color: var(--terakotova-svetla); border-color: var(--terakotova-svetla); }

.tlacitko--obrys {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}

.tlacitko--obrys:hover { background: transparent; opacity: 0.7; }

.tlacitka {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.75rem;
}

/* --------------------------------------------------------------------------
   6. Hlavička a menu
   -------------------------------------------------------------------------- */

.hlavicka {
  background: var(--petrolejova-tmava);
  color: var(--text-na-tmave);
  padding: 1.5rem 0;
}

.hlavicka-obsah {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.znacka {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-na-tmave);
  text-decoration: none;
}

.znacka span {
  display: block;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 0.25rem;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.menu a {
  color: var(--text-na-tmave);
  text-decoration: none;
  opacity: 0.7;
  padding-bottom: 0.3125rem;
  border-bottom: 2px solid transparent;
}

.menu a:hover { opacity: 1; }

.menu a[aria-current="page"] {
  opacity: 1;
  border-bottom-color: var(--terakotova);
}

/* Vstupní služba je v menu zvýrazněná, aby byla na dosah z každé stránky,
   ne jen z úvodu a z patičky. Tmavší odstín kvůli kontrastu bílého textu,
   na světlejším by malé písmo bylo na hraně čitelnosti. */
.menu .menu-cta {
  opacity: 1;
  color: #FFFFFF;
  background: var(--terakotova-text);
  padding: 0.5rem 1rem;
  border-bottom: 0;
  border-radius: 999px;
}

.menu .menu-cta:hover { background: var(--terakotova); }

/* --------------------------------------------------------------------------
   7. Úvodní blok

   Na velké obrazovce dva sloupce: text a fotka. Fotka jde až do pravého
   kraje okna, aby blok působil jako plakát, ne jako odstavec s obrázkem.
   -------------------------------------------------------------------------- */

.uvod {
  background: var(--petrolejova-tmava);
  color: var(--text-na-tmave);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.uvod--velky {
  padding: 0;
  min-height: min(62vh, 34rem);   /* zmenšeno 30. 10. 2026, zabíralo moc místa */
  display: flex;
  align-items: center;
}

.uvod-mrizka {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}

.uvod h1 { color: var(--kremova-bila); margin-bottom: 2rem; }

/* Nadpis článku je menší. Článek má začít textem, ne plakátem přes obrazovku. */
.uvod .obal--text h1 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  margin-bottom: 0;
}

.uvod--velky .obal { padding-top: 3.5rem; padding-bottom: 3.5rem; }

/* Rámeček na fotku. Dokud fotka není, drží místo sám. */

/* Pravý sloupec úvodního bloku. Místo fotky nese tři slova značky,
   poslední kurzívou v terakotové, stejně jako druhý řádek nadpisů. */
.triada {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.15;
  color: var(--text-na-tmave);
}

.triada span {
  display: block;
  padding-bottom: 1.125rem;
  margin-bottom: 1.125rem;
  border-bottom: 1px solid rgba(237, 227, 212, 0.2);
}

.triada span:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Portrét. Fotka je čtvercová, rámeček na webu je na výšku.
   object-fit: cover ořízne přebytek a nedeformuje, object-position
   posune ořez nahoru, aby zůstal obličej a ne stůl pod ním. */
.portret {
  width: 100%;
  max-width: 13rem;        /* záměrně malá, fotka má doplňovat, ne vést */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 16%;
  margin-bottom: 2.75rem;
}

/* Terakotový pruh, který vybíhá z kraje. Převzato z tvých vizuálů. */
.pruh-znacky {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0.5rem;
  background: var(--terakotova);
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   10. Pruh s čísly
   -------------------------------------------------------------------------- */

.cisla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cislo-velke {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  color: var(--terakotova-svetla);
  margin-bottom: 0.75rem;
}

.cisla p {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-na-tmave);
  opacity: 0.75;
  margin: 0;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   11. Tělo článku
   -------------------------------------------------------------------------- */

.clanek h2 {
  font-size: 1.375rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
  margin-top: 3.25rem;
  margin-bottom: 1rem;
}

.clanek ul { padding-left: 1.25rem; margin: 0 0 1.5rem; }
.clanek li { margin-bottom: 0.625rem; }

.clanek blockquote {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.45;
  border-left: 3px solid var(--terakotova);
  padding-left: 1.75rem;
  margin: 2.75rem 0;
  color: var(--text);
}

.rozcestnik { margin-top: 3rem; font-size: 0.875rem; }

/* Textový blok ve dvou sloupcích: nadpis vlevo, celý text vedle něj.
   Pro sekce, které nesou jen text, například O mně nebo Co diagnostika
   není. Dřív stál nadpis nad textem a stránka se tím natahovala do výšky. */
.blok {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
  gap: 1.25rem 3.5rem;
  align-items: start;
  margin-bottom: 3.5rem;
}

.blok:last-of-type { margin-bottom: 0; }

/* Stránka O mně: fotka nahoře v levém sloupci, moto pod ní, text vedle.
   Fotka proto nepotřebuje velkou spodní mezeru, moto ji drží samo. */
.blok-nadpis .portret { margin-bottom: 1.5rem; }

/* Moto pod fotkou stojí v užším sloupci než dřív vedle ní, tak je o stupeň
   menší, aby se nelámalo po dvou slovech. */
.moto--pod-fotkou { font-size: 1.125rem; padding-left: 1.25rem; }

/* Role pod jménem. Dva krátké řádky: čím Romi je a čemu se věnuje.
   Převzato z uspořádání, které si vybrala jako vzor 4. 11. 2026. */
.pozice {
  margin: 0.375rem 0 0;
  font-weight: 500;
  color: var(--terakotova-text);
  text-align: left;
}

.pozice--druha {
  color: var(--text-tlumeny);
  font-weight: 400;
  font-size: 0.9375rem;
  margin-bottom: 2rem;
}

.moto {
  max-width: 46rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-style: italic;
  line-height: 1.35;
  margin: 0;
  padding-left: 1.75rem;
  border-left: 3px solid var(--terakotova);
  text-wrap: balance;
}
.blok-nadpis > :first-child { margin-top: 0; }
.blok-nadpis h2 { margin-top: 0; }
.blok-text { max-width: 46rem; }
.blok-text > :first-child { margin-top: 0; }
.blok-text > :last-child { margin-bottom: 0; }

@media (max-width: 56rem) {
  .blok { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.5rem; }
  .blok-text { max-width: none; }
}

/* Hlava sekce ve dvou sloupcích: štítek a nadpis vlevo, uvedení vedle nich.
   Stránka se tím zkrátí a čtenář vidí nadpis i popis najednou, místo aby
   je četl pod sebou. Pod 56rem se to srovná pod sebe. */
.hlava-sekce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem 3.5rem;
  align-items: start;
  margin-bottom: 3rem;
}

.hlava-sekce > div > :first-child { margin-top: 0; }
.uvod .hlava-sekce { margin-bottom: 0; }
.hlava-sekce .uvodni-odstavec { margin: 0; max-width: 32rem; }

/* Text vpravo lícuje s hlavním nadpisem, ne se štítkem nad ním.
   Odsazení je výška štítku, tedy 0,75rem krát řádkování, plus jeho
   spodní mezera 1,5rem. Hlavy bez štítku zůstávají nahoře. */
.hlava-sekce:has(.stitek) .uvodni-odstavec {
  margin-top: calc(0.75rem * 1.65 + 1.5rem);
}
.hlava-sekce .linka-znacky { margin-bottom: 0; }

@media (max-width: 56rem) {
  .hlava-sekce { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.25rem; }
  .hlava-sekce:has(.stitek) .uvodni-odstavec { margin-top: 0; }
}

/* Hlava kapitoly nad mřížkou karet. Dělá ze série strukturu místo
   věty v textu. */
.kapitola-hlava {
  border-top: 1px solid var(--linka);
  padding-top: 1.25rem;
  margin: 3rem 0 1.5rem;
}

.kapitoly {
  border-left: 2px solid var(--linka);
  padding-left: 2.5rem;
  margin-top: 2.5rem;
}

.kapitoly > .kapitola-hlava:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.kapitola-cislo {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terakotova-text);
  margin: 0 0 0.375rem;
}

.kapitola-hlava h3 {
  font-size: 1.375rem;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.kapitola-pozn {
  font-size: 0.875rem;
  color: var(--text-tlumeny);
  margin: 0.5rem 0 0;
}

/* Tichá poznámka pod mřížkou karet, například že série poroste */
.pozn-pod {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--text-tlumeny);
}

/* Odkazy na příbuzné články, hned nad rozcestníkem. Dva až tři na článek,
   aby se čtenář dostal z jednoho textu do druhého a nemusel zpátky
   na seznam. */
.dal-k-tematu { margin-top: 2.5rem; font-size: 0.875rem; }
.dal-k-tematu strong { color: var(--terakotova-text); }
.dal-k-tematu + .rozcestnik { margin-top: 0.75rem; }

/* Zarovnání odstavců do bloku, tedy na obou stranách rovně.

   Jen v úzkém textovém sloupci, kde je řádek dost dlouhý. V kartách,
   dlaždicích a sloupcích jsou řádky krátké a zarovnání do bloku by v nich
   roztrhalo mezery mezi slovy.

   hyphens: auto zapne dělení slov na konci řádku. Bez něj čeština
   s dlouhými slovy vytvoří v bloku bílé řeky. Prohlížeč pozná, podle
   jakého jazyka dělit, z lang="cs" na značce <html>. */
.obal--text p,
.obal--text li,
.blok-text p,
.blok-text li,
.uvodni-odstavec,
.model-popis,
.role dd,
.krok p,
.model-paticka p,
.paragrafy p,
.box-pozn {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Zarovnání do bloku nedostávají štítky, popisky a čísla. Jsou to krátké
   popisné řádky, kde není co zarovnávat, a roztažené mezery by v nich byly
   vidět nejvíc. Vycentrovaná schémata a otázky na tmavém pruhu si zarovnání
   řídí svým vlastním pravidlem. */
.obal--text .stitek,
.obal--text .rozcestnik,
.stitek,
.cisla p {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* --------------------------------------------------------------------------
   12. Patička
   -------------------------------------------------------------------------- */

.paticka {
  background: var(--petrolejova-tmava);
  color: rgba(237, 227, 212, 0.7);
  padding: 3.5rem 0;
  font-size: 0.875rem;
}

.paticka-obsah {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.paticka p { margin: 0 0 0.375rem; }
.paticka a { color: rgba(237, 227, 212, 0.9); }

/* --------------------------------------------------------------------------
   13. Malé displeje
   -------------------------------------------------------------------------- */

@media (max-width: 56rem) {
  .uvod-mrizka { grid-template-columns: 1fr; gap: 2.5rem; }
  .uvod--velky { min-height: 0; }
  .pruh-znacky { display: none; }
  .kroky--tri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kapitoly { padding-left: 1.5rem; }
}

@media (max-width: 40rem) {
  .kroky--tri { grid-template-columns: 1fr; }
  .kapitoly { border-left: 0; padding-left: 0; }
  .pas { padding: 3.25rem 0; }
  .uvod { padding: 3.5rem 0; }
  .obal { padding: 0 1.5rem; }
  .menu { gap: 1.25rem; font-size: 0.6875rem; letter-spacing: 0.12em; }
  .clanek blockquote { font-size: 1.25rem; padding-left: 1.25rem; }
}

/* --------------------------------------------------------------------------
   14. Karty modelů

   Používá se v článcích ze série Peníze uvnitř holdingu. Přenáší na web
   stavbu tvých PDF karet: tři sloupce vedle sebe, každý se schématem
   a s trojicí hotovost, dluh, riziko.
   -------------------------------------------------------------------------- */

.modely {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.model {
  border: 1px solid var(--linka);
  background: var(--kremova-bila);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.model-stitek {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terakotova-text);
  margin: 0 0 0.75rem;
}

.model h3 {
  font-size: 1.1875rem;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}

.model-popis {
  font-size: 0.9375rem;
  color: var(--text-tlumeny);
  margin: 0;
}

/* Schéma toku peněz. Je to jen text v rámečku, žádný obrázek,
   takže zůstane ostré na každé obrazovce a přečte ho i čtečka. */
.schema {
  background: #EFE7DA;
  padding: 1.25rem 1rem;
  margin: 1.5rem 0;
  text-align: center;
}

.schema-box {
  display: inline-block;
  background: var(--petrolejova-tmava);
  color: var(--kremova-bila);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.5rem 0.875rem;
  margin: 0.1875rem;
}

.schema-sipka {
  display: block;
  font-size: 0.75rem;
  color: var(--terakotova-text);
  margin: 0.625rem 0;
}

.schema-pozn {
  display: block;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-tlumeny);
  margin-top: 0.75rem;
}

/* Trojice hotovost, dluh, riziko. Značka <dl> je seznam dvojic
   pojem a jeho popis, což přesně odpovídá tomu, co tu je. */
.role { margin: 0; }

.role dt {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terakotova-text);
  margin-top: 1.25rem;
}

.role dd {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.model-paticka {
  border-top: 1px solid var(--linka);
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.8125rem;
  color: var(--text-tlumeny);
}

.model-paticka p { margin: 1.5rem 0 0; }

/* Velká otázka na tmavém pruhu, převzaté z patičky tvých karet */
.otazka {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  line-height: 1.25;
  margin: 0;
  color: var(--kremova-bila);
}

@media (max-width: 40rem) {
  .model { padding: 1.5rem; }
}

/* --------------------------------------------------------------------------
   15. Další prvky z karet série

   Číslované kroky, odkazy na paragrafy a poznámkový box.
   -------------------------------------------------------------------------- */

/* Číslované kroky vedle sebe, poslední se dá zvýraznit */
.kroky {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.krok {
  border: 1px solid var(--linka);
  background: var(--kremova-bila);
  padding: 1.5rem;
}

/* Na tmavém pruhu zůstává karta světlá, takže text v ní nesmí zdědit
   světlou barvu pruhu. Bez tohohle je nadpis karty prakticky neviditelný. */
.pas--tmavy .krok,
.pas--cerny .krok,
.uvod .krok { color: var(--text); }

/* Pevné tři sloupce tam, kde by auto-fit rozložil položky nerovnoměrně */
.kroky--tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Celá karta jako odkaz. Používá se na stránce Příspěvky. */
.krok-odkaz {
  display: block;
  color: inherit;
  text-decoration: none;
}

.krok-odkaz:hover h3,
.krok-odkaz:hover h4 { color: var(--terakotova-text); }

/* Malý štítek nad nadpisem karty, když karta nemá číslo */
.krok-stitek {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terakotova-text);
  margin: 0 0 0.5rem;
}

.krok h3,
.krok h4 {
  font-size: 1.0625rem;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}

.krok p {
  font-size: 0.9375rem;
  color: var(--text-tlumeny);
  margin: 0;
}

.krok-cislo {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--terakotova-text);
  margin-right: 0.5rem;
}

/* Poslední krok je ten, o kterém článek je, proto je tmavý */
.krok--zvyraznen {
  background: var(--petrolejova-tmava);
  border-color: var(--petrolejova-tmava);
  border-top: 3px solid var(--terakotova);
  color: var(--text-na-tmave);
}

.krok--zvyraznen h3 { color: var(--kremova-bila); }
.krok--zvyraznen p { color: var(--text-na-tmave); opacity: 0.8; }
.krok--zvyraznen .krok-cislo { color: var(--terakotova-svetla); }

/* Odkazy na paragrafy zákona. Tmavá značka vlevo, text vpravo. */
.paragrafy {
  list-style: none;
  padding: 0;
  margin: 0;
}

.paragrafy > li {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  gap: 1.125rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--linka);
}

.paragrafy > li:first-child { border-top: 0; padding-top: 0; }

.paragraf-znacka {
  background: var(--petrolejova-tmava);
  color: var(--kremova-bila);
  font-size: 0.8125rem;
  text-align: center;
  padding: 0.375rem 0.25rem;
  align-self: start;
}

.paragrafy p { margin: 0; font-size: 0.9375rem; }
.paragrafy strong { display: block; margin-bottom: 0.25rem; }

/* Malý štítek u nadpisu sloupce, například Zákon nebo Tržní praxe */
.stitek-maly {
  float: right;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-tlumeny);
  border: 1px solid var(--linka);
  border-radius: 999px;
  padding: 0.1875rem 0.75rem;
}

/* Poznámkový box, odlišený podkladem */
.box-pozn {
  background: #EFE7DA;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.box-pozn strong { color: var(--terakotova-text); }

/* Box je světlý i na oranžovém pruhu, text v něm proto nesmí zdědit
   bílou barvu pruhu. */
.pas--terakota .box-pozn { color: var(--text); }

/* Karta je světlá i na oranžovém pruhu, text v ní proto nesmí zdědit
   bílou barvu pruhu. */
.pas--terakota .krok { color: var(--text); }

/* --------------------------------------------------------------------------
   Formulář pro dotaz

   POZOR: od 2. 11. 2026 formulář na webu není, Romi ho zatím zrušila.
   Tyhle styly se nikde nepoužívají a zůstávají schválně, aby se dal vrátit.
   Nemazat. Kdyby se vracel: stojí v oranžovém pruhu na Diagnostice,
   odesílání zajišťuje hotová služba třetí strany a adresa patří do atributu
   action. Dokud tam není, formulář nic neodešle. Viz SPEC.md, sekce
   Formulář pro dotaz.
   -------------------------------------------------------------------------- */

.formular {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  background: var(--kremova-bila);
  color: var(--text);
  padding: 1.75rem;
  margin: 2.5rem 0 0;
  max-width: 46rem;
}

.pole { margin: 0; }
.pole--siroke { grid-column: 1 / -1; }

.pole label {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terakotova-text);
  margin-bottom: 0.4375rem;
}

.pole input,
.pole textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid var(--linka);
  border-radius: 0;
  padding: 0.625rem 0.75rem;
}

.pole textarea { resize: vertical; }

.pole input:focus,
.pole textarea:focus {
  outline: 2px solid var(--terakotova-text);
  outline-offset: 1px;
}

.formular button { cursor: pointer; }

.pole-pozn {
  font-size: 0.875rem;
  color: var(--text-tlumeny);
}

@media (max-width: 40rem) {
  .formular { grid-template-columns: 1fr; padding: 1.25rem; }
}

/* Menší nadpis sekce. Velké h2 je verzálkami, tohle je na delší větné
   nadpisy uvnitř článku, kde by verzálky byly nečitelné. */
.nadpis--mensi {
  font-size: 1.4375rem;
  text-transform: none;
  letter-spacing: 0;
}

/* Statusy tvrzení pod článkem.

   Přejaté z Rominy rešeršní šablony Reserse_se_zdroji. U každého článku je
   vidět, co stojí na zákoně, co na běžné tržní praxi a co na její zkušenosti.
   Pro cílovku, kterou jsou majitelé a finanční ředitelé, je tohle známka
   serióznosti, ne slabina. Nahrazuje dřívější jednu slepou poznámku. */
.status {
  border-top: 1px solid var(--linka);
  padding-top: 1.5rem;
  margin: 3rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-tlumeny);
}

.status dt {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terakotova-text);
  margin-top: 1.125rem;
}

.status dt:first-child { margin-top: 0; }

.status dd {
  margin: 0.25rem 0 0;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}