.
G) 404 — dosud nemá vlastní strukturu. Nová, tři prvky:
se stejnou strukturou karty jako na rubrice. Štítek rubriky se tu
NEskrývá (na rubrice ano), o to se stará CSS níž, šablona nic nemění.
I) ÚVODNÍ STRÁNKA — beze změn markupu proti verzi 1. Jen doplňte do
class="stranka-uvod" (kvůli číslování sekcí) — pokud tam už je, nic.
J) TEXTOVÉ STRÁNKY (O webu, kontakt) —
a v něm
H2 přímo pod sebou; číslo sekce se dopočítá stejně jako v článku.
--------------------------------------------------------------------------- */
/* ===========================================================================
ÚVODNÍ STRÁNKA
=========================================================================== */
.uvod{max-width:var(--sirka);margin:0 auto;padding:0 16px 64px;counter-reset:s}
@media (min-width:760px){.uvod{padding:0 24px 80px}}
/* hlava — jediné místo na webu, kde titulek smí být přes tři řádky.
Linku pod heroem nahrazuje velká mezera a pás čísel na tónované ploše. */
.hero{padding:36px 0 0;border:0}
.kicker{font:800 11.5px/1.4 var(--nadpisy);letter-spacing:.14em;text-transform:uppercase;
color:var(--akcent);margin:0 0 14px}
.hero h1{font-family:var(--display);font-weight:600;font-size:36px;line-height:1.04;
letter-spacing:-.01em;max-width:20ch;margin:0 0 18px}
.hero .lead{max-width:56ch;margin:0}
@media (min-width:760px){.hero h1{font-size:52px}}
@media (min-width:1100px){.hero{padding-top:48px}.hero h1{font-size:64px}}
/* odznaky — kapitálkové popisky na tónované plošce, ne pilulky s rámečkem */
.odznaky{list-style:none;display:flex;flex-wrap:wrap;gap:2px;padding:0;margin:26px 0 0}
.odznaky li{font:800 11.5px/1 var(--nadpisy);letter-spacing:.1em;text-transform:uppercase;
color:var(--tichy);background:var(--plocha);border:0;border-radius:var(--radius);
padding:11px 14px}
/* tlačítka — pravoúhlá plocha, popiska vlevo, žádný posun ani stín.
nowrap + flex-shrink:0, aby se popiska ve flexovém řádku nelámala */
.tlacitko{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;
font:800 15px/1 var(--nadpisy);text-align:left;text-decoration:none;white-space:nowrap;
flex-shrink:0;background:var(--akcent);color:var(--papir);border:0;border-radius:var(--radius)}
.tlacitko:hover{background:var(--akcent-tmavy);color:var(--papir)}
.tlacitko--tichy{background:var(--plocha);color:var(--inkoust)}
.tlacitko--tichy:hover{background:var(--zvyrazneni);color:var(--akcent)}
.hero p:has(.tlacitko){display:flex;flex-wrap:wrap;gap:2px;margin:26px 0 0}
/* pás čísel — jeden souvislý blok tónovaného papíru rozdělený mezerou 2 px.
Čísla mají tabulkové číslice a tučný Archivo, ne vlastní barvu (paleta je
jednoakcentová, ceny a počty odlišuje řez, ne odstín). */
.cisla{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:2px;
margin:40px 0 0}
.cislo-dlazdice{background:var(--plocha);border:0;border-radius:var(--radius);
padding:18px 16px 16px}
.cislo-dlazdice b{display:block;font:800 32px/1.05 var(--nadpisy);letter-spacing:-.03em;
color:var(--cislo);font-variant-numeric:tabular-nums lining-nums}
.cislo-dlazdice span{display:block;margin-top:6px;font:700 11.5px/1.35 var(--nadpisy);
letter-spacing:.1em;text-transform:uppercase;color:var(--tichy)}
/* sezónní blok — tónovaná plocha, měsíc drží kapitálka v barvě rubriky.
Verze 1 ho značila 4px linkou vlevo; tady stačí podklad a barevný kicker. */
.sezona{margin:56px 0 0;background:var(--plocha);border:0;border-radius:var(--radius);
box-shadow:none;padding:24px 18px 26px}
.sezona .kicker{color:var(--rubrika);margin:0 0 10px}
.sezona h2{font-family:var(--display);font-weight:600;font-size:25px;line-height:1.15;
letter-spacing:-.005em;margin:0}
.sezona h2::before{content:none}
.sezona>.tichy{margin:8px 0 0;max-width:56ch}
.sezona ul{list-style:none;padding:0;margin:18px 0 0;counter-reset:z;
display:grid;grid-template-columns:1fr;gap:0 40px}
.sezona li{counter-increment:z}
.sezona li a{position:relative;display:flex;align-items:center;min-height:44px;
padding:4px 0 4px 32px;border:0;font:700 17px/1.35 var(--nadpisy);color:var(--inkoust);
text-decoration:none}
.sezona li a::before{content:counter(z,decimal-leading-zero);position:absolute;left:0;
font:600 13px/1 var(--display);letter-spacing:.1em;color:var(--rubrika);
font-variant-numeric:tabular-nums}
.sezona li a:hover{color:var(--akcent);text-decoration:underline;padding-left:32px}
@media (min-width:760px){
.sezona{padding:28px 24px 30px;margin-inline:-24px}
.sezona h2{font-size:29px}
.sezona ul{grid-template-columns:1fr 1fr}
}
/* sekce úvodní stránky — číslo v antikvě místo 2px linky pod nadpisem */
.sekce{padding:64px 0 0;counter-increment:s}
.sekce::before{content:counter(s,decimal-leading-zero);display:block;
font:600 15px/1 var(--display);letter-spacing:.16em;color:var(--akcent);margin:0 0 10px}
.sekce>h2{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
flex-wrap:wrap;padding:0;border:0;margin:0 0 24px;
font-family:var(--display);font-weight:600;font-size:27px;letter-spacing:-.005em}
.sekce>h2::before{content:none}
.sekce>h2 a{font:700 13px/1 var(--nadpisy);letter-spacing:.1em;text-transform:uppercase;
color:var(--akcent)}
@media (min-width:760px){.sekce>h2{font-size:32px}}
/* rozcestník rubrik — 13 skupin odkazů na papíru. Tónovat všech třináct by
z úvodní stránky udělalo mozaiku, takže barvu nese jen název rubriky a
pravý sloupec s počtem; skupiny drží mřížka a odsazení. */
.rubriky-mriz{display:grid;grid-template-columns:1fr;gap:36px 48px;margin:0}
.rubrika-blok{background:transparent;border:0;border-radius:var(--radius);
box-shadow:none;padding:0;transition:none}
.rubrika-blok:hover{box-shadow:none;transform:none}
.rubrika-blok h3{display:flex;align-items:baseline;justify-content:space-between;
gap:12px;margin:0;font:800 12px/1.3 var(--nadpisy);letter-spacing:.11em;
text-transform:uppercase}
.rubrika-blok h3 a{color:var(--rubrika);text-decoration:none}
.rubrika-blok h3 a:hover{color:var(--akcent);text-decoration:underline}
.rubrika-blok h3 .tichy{font:700 11.5px/1.3 var(--nadpisy);letter-spacing:.08em;
text-transform:uppercase;color:var(--tichy);white-space:nowrap;
font-variant-numeric:tabular-nums}
.rubrika-blok>p.tichy{margin:10px 0 0;font-size:15.5px;line-height:1.45;max-width:44ch}
.rubrika-blok ul{list-style:none;padding:0;margin:12px 0 0}
.rubrika-blok li{border:0}
.rubrika-blok li a{display:flex;align-items:center;min-height:44px;padding:4px 0;
font:500 16.5px/1.35 var(--nadpisy);color:var(--inkoust);text-decoration:none;
transition:none}
.rubrika-blok li a:hover{color:var(--akcent);text-decoration:underline;padding-left:0}
@media (min-width:700px){.rubriky-mriz{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.rubriky-mriz{grid-template-columns:repeat(3,1fr)}}
/* výpisy na úvodní stránce se chovají jako na rubrice — jen štítek rubriky
tady zůstává vidět, protože články jsou napříč rubrikami */
.uvod .mriz:not(.mriz--velka){display:grid;grid-template-columns:1fr;gap:2px}
.uvod .mriz:not(.mriz--velka) .karta{padding:14px 12px;margin:0 -12px;
display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;
align-items:baseline}
.uvod .mriz:not(.mriz--velka) .karta>div{display:contents}
.uvod .mriz:not(.mriz--velka) .karta:hover{background:var(--plocha)}
.uvod .mriz:not(.mriz--velka) .karta img{display:none}
.uvod .mriz:not(.mriz--velka) .karta h3{grid-column:1;font:700 17.5px/1.35 var(--nadpisy)}
.uvod .mriz:not(.mriz--velka) .karta .cas{grid-column:2;grid-row:1;margin:0;text-align:right;
white-space:nowrap;font-variant-numeric:tabular-nums}
.uvod .mriz:not(.mriz--velka) .karta p:not(.cas){display:none}
.uvod .mriz:not(.mriz--velka) .rubrika-stitek{grid-column:1;grid-row:1;
margin:0 0 4px;padding:4px 7px;font-size:10.5px;justify-self:start}
@media (min-width:760px){
.uvod .mriz:not(.mriz--velka) .karta h3{font-size:18px}
}
@media (min-width:900px){
.uvod .mriz:not(.mriz--velka){grid-template-columns:1fr 1fr;column-gap:56px;row-gap:2px}
}
.uvod .newsletter{margin-top:72px}
/* ===========================================================================
CENÍK — jediná stránka, kde je tabulka hlavní obsah, ne doplněk
=========================================================================== */
.cenik-filtr{display:grid;grid-template-columns:1fr;gap:8px 16px;background:var(--plocha);
padding:18px;margin:0 0 8px}
.cenik-filtr label{font:800 11.5px/1.4 var(--nadpisy);letter-spacing:.11em;
text-transform:uppercase;color:var(--tichy)}
.cenik-filtr input,.cenik-filtr select{min-height:48px;width:100%;padding:0 14px;
font:400 17px var(--text);color:var(--inkoust);background:var(--papir);
border:0;border-radius:var(--radius);appearance:none}
.cenik-filtr select{font-family:var(--nadpisy);font-weight:500;
/* šipka dolů jako jeden inline SVG obrázek — dva zkosé gradienty se snáz
poskládají obráceně („^“ místo „v“); currentColor tu nefunguje, takže
odstín je --inkoust nasypaný do URI, a v tmavém režimu se přepíná níž */
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231c1b19' stroke-width='2'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 16px center;padding-right:46px}
@media (prefers-color-scheme:dark){
.cenik-filtr select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f2efe8' stroke-width='2'/%3E%3C/svg%3E")}
}
[data-tema="tmave"] .cenik-filtr select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f2efe8' stroke-width='2'/%3E%3C/svg%3E")}
[data-tema="svetle"] .cenik-filtr select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231c1b19' stroke-width='2'/%3E%3C/svg%3E")}
.cenik-filtr input:focus-visible,.cenik-filtr select:focus-visible{
outline:2px solid var(--akcent-signal);outline-offset:1px}
@media (min-width:700px){
.cenik-filtr{grid-template-columns:2fr 1fr}
.cenik-filtr label{align-self:end}
}
@media (min-width:760px){
/* bleed až od 760 px, kde .vypis přepíná padding na 24 px — stejně jako
.kostka, .souvisejici, .sezona a .udaje, aby přesah byl nula na všech šířkách */
.cenik-filtr{padding:20px 24px;margin-inline:-24px}
}
/* počet nalezených položek — stejný tónovaný štítek jako počet článků na rubrice */
.cenik-pocet{display:inline-block;margin:20px 0 0;padding:7px 11px;background:var(--plocha);
font:700 12px/1.2 var(--nadpisy);letter-spacing:.1em;text-transform:uppercase;
color:var(--tichy);font-variant-numeric:tabular-nums}
/* ceníková tabulka jde přes celou šířku stránky, ne jen přes textový sloupec */
.tabulka-obal--siroka{max-width:none}
#cenik td.cena{background:var(--zvyrazneni);color:var(--cislo);font-weight:700;
white-space:nowrap;text-align:right}
#cenik th:last-child,#cenik td:last-child{text-align:right}
#cenik td:first-child{min-width:200px;font-weight:700;color:var(--inkoust);
white-space:normal}
#cenik td:not(:first-child):not(.cena){color:inherit;font-weight:400;white-space:normal;
background:transparent}
#cenik tr[hidden]{display:none}
@media (max-width:600px){
/* ceník je dlouhý seznam — na mobilu se překlápí na dvojice popisek–hodnota
(potřebuje data-th, viz bod C ve fázi 1), cena zůstává vpravo a zvýrazněná */
#cenik td.cena{text-align:right}
}
/* ===========================================================================
HLEDÁNÍ
=========================================================================== */
.hledani{margin:28px 0 0;max-width:min(var(--sirka-textu),100%)}
.hledani label{display:block;font:800 11.5px/1.4 var(--nadpisy);letter-spacing:.11em;
text-transform:uppercase;color:var(--tichy);margin:0 0 8px}
.hledani input{width:100%;min-height:56px;padding:0 18px;border:0;border-radius:var(--radius);
background:var(--plocha);color:var(--inkoust);
font:500 19px var(--nadpisy);margin:0}
.hledani input::placeholder{color:var(--tichy);font-weight:400}
.hledani input:focus,.hledani input:focus-visible{outline:2px solid var(--akcent-signal);
outline-offset:1px;box-shadow:none;border:0;background:var(--zvyrazneni)}
#pocet{display:inline-block;margin:20px 0 0;padding:7px 11px;background:var(--plocha);
font:700 12px/1.2 var(--nadpisy);letter-spacing:.1em;text-transform:uppercase;
color:var(--tichy);font-variant-numeric:tabular-nums}
#pocet:empty{display:none}
#vysledky{margin-top:24px}
/* ve výsledcích hledání a na 404 je štítek rubriky potřeba — články jsou
z různých rubrik a bez štítku by seznam ztratil kontext */
#vysledky .rubrika-stitek,.chyba .rubrika-stitek{display:inline-block;grid-column:1;
grid-row:1;margin:0 0 4px;padding:4px 7px;font-size:10.5px;justify-self:start}
.prazdno{margin:48px 0 0}
.prazdno h2{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.005em;
margin:0 0 6px}
.prazdno h2::before{content:none}
.prazdno>.tichy{margin:0 0 18px;max-width:56ch}
/* ===========================================================================
404
=========================================================================== */
.chyba{max-width:var(--sirka);margin:0 auto;padding:48px 16px 64px}
@media (min-width:760px){.chyba{padding:64px 24px 80px}}
.chyba__kod{font:600 84px/.8 var(--display);letter-spacing:-.02em;color:var(--akcent);
font-variant-numeric:tabular-nums lining-nums;margin:0 0 24px}
.chyba h1{max-width:24ch;margin:0 0 16px}
.chyba .lead{max-width:56ch;margin:0}
.chyba h2{font:800 11.5px/1.2 var(--nadpisy);letter-spacing:.12em;text-transform:uppercase;
color:var(--tichy);margin:56px 0 14px}
.chyba h2::before{content:none}
.chyba .mriz{display:grid;grid-template-columns:1fr;gap:2px;max-width:var(--sirka)}
.chyba .karta{padding:14px 12px;margin:0 -12px;display:grid;
grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:baseline}
.chyba .karta>div{display:contents}
.chyba .karta:hover{background:var(--plocha)}
.chyba .karta img{display:none}
.chyba .karta h3{grid-column:1;font:700 17.5px/1.35 var(--nadpisy)}
.chyba .karta .cas{grid-column:2;grid-row:1;margin:0;text-align:right;white-space:nowrap}
.chyba .karta p:not(.cas){display:none}
.chyba .hledani{margin-top:16px}
@media (min-width:760px){.chyba__kod{font-size:120px}}
@media (min-width:900px){.chyba .mriz{grid-template-columns:1fr 1fr;column-gap:56px}}
/* ===========================================================================
MAPA WEBU
=========================================================================== */
.mapa{columns:1;column-gap:48px;margin:0}
.mapa-blok{break-inside:avoid;margin:0 0 36px}
.mapa-blok h2{font:800 12px/1.3 var(--nadpisy);letter-spacing:.11em;text-transform:uppercase;
color:var(--rubrika);border:0;padding:0;margin:0 0 8px;
display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.mapa-blok h2::before{content:none}
.mapa-blok h2 a{color:var(--rubrika);text-decoration:none}
.mapa-blok h2 a:hover{color:var(--akcent);text-decoration:underline}
.mapa-blok h2 .tichy{font:700 11.5px/1.3 var(--nadpisy);letter-spacing:.08em;
text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.mapa-blok ul{list-style:none;padding:0;margin:0}
.mapa-blok li a{display:flex;align-items:center;min-height:40px;padding:4px 0;
font:500 16.5px/1.35 var(--nadpisy);color:var(--inkoust);text-decoration:none}
.mapa-blok li a:hover{color:var(--akcent);text-decoration:underline;padding-left:0}
@media (min-width:760px){.mapa{columns:2}}
@media (min-width:1100px){.mapa{columns:3}}
/* ===========================================================================
TEXTOVÉ STRÁNKY (O webu, kontakt, zásady)
Číslování sekcí stejné jako v článku, aby dlouhý text šel přehlédnout.
=========================================================================== */
.text-stranka{counter-reset:s}
.text-stranka .drobecky{padding-top:18px}
.text-stranka h1{margin:22px 0 0}
.text-stranka .lead{margin:16px 0 0}
.text-stranka>h2{counter-increment:s;margin:52px 0 12px}
.text-stranka>h2::before{content:counter(s,decimal-leading-zero);display:block;
font:600 15px/1 var(--display);letter-spacing:.16em;color:var(--akcent);margin:0 0 10px}
.text-stranka ul,.text-stranka ol{padding-left:22px;margin:0 0 16px}
.text-stranka li{margin-bottom:8px}
/* kontaktní údaje a redakční pravidla jako tónovaný blok, ne jako tabulka */
.udaje{background:var(--plocha);padding:22px 18px 24px;margin:32px 0}
.udaje dt{font:800 11.5px/1.4 var(--nadpisy);letter-spacing:.11em;text-transform:uppercase;
color:var(--tichy);margin:0}
.udaje dd{margin:4px 0 18px;font-size:17.5px}
.udaje dd:last-child{margin-bottom:0}
.udaje a{color:var(--akcent)}
@media (min-width:760px){
.udaje{padding:26px 24px 28px;margin-inline:-24px}
.udaje dd{font-size:18px}
}
/* ----------------------------------------------------------------- tisk */
@media print{
.cenik-filtr,.hledani,.prazdno,.cisla,.odznaky{display:none}
.sezona,.udaje,.cenik-filtr{margin-inline:0}
}