/* Hallmark · shape: klad listů (sheet index) · genre: editorial · theme: custom · job: try · idea: "Republika rozřezaná na čtyři mapové listy jako v atlasu; obrys ČR je zároveň rozcestník" · vibe: "noční mapovna, karmín katastru, klidný atlas"
 * paper: oklch(27% 0.035 238) · accent: oklch(66% 0.17 22) · display: Piazzolla · body: Onest · hero: obrys ČR rozdělený na klad čtyř listů, každý list je odkaz · nav: lišta s wordmarkem a čtyřmi číslovanými listy · footer: wordmark nad odkazy na listy · imagery: the product (snímky map) · signature: klikací klad listů přes obrys republiky
 * axes: mid/roman-serif/chromatic-red · posture: dark · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: E, každý list má jen ověřená fakta z vlastní mapy, žádná vymyšlená čísla */
/* Hallmark · waive 64 · číslo listu v Red Hat Mono jako u kladu topografických map · mapový materiál nese číslování listů */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --bar-h: 60px;
  --container: 1320px;
}

[data-sheet="1"] { --sheet: var(--color-sheet-1); }
[data-sheet="2"] { --sheet: var(--color-sheet-2); }
[data-sheet="3"] { --sheet: var(--color-sheet-3); }
[data-sheet="4"] { --sheet: var(--color-sheet-4); }

/* ---------- lišta (společná pro rozcestník i mapy) ---------- */
.bar {
  position: sticky; top: 0; z-index: var(--z-sticky-nav);
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--space-xl);
  padding-inline: var(--space-lg);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem;
  letter-spacing: var(--tracking-display); text-decoration: none; white-space: nowrap;
  color: var(--color-ink);
}
.wordmark span { color: var(--color-accent); }
.bar nav { min-width: 0; flex: 1; }
.bar ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-2xs);
  overflow-x: auto; scrollbar-width: none;
}
.bar ul::-webkit-scrollbar { display: none; }
.bar li a {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-card);
  font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.bar li a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.bar li a:active { background: var(--color-paper-3); }
.bar li a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; transition: none; }
.bar li a[aria-current="page"] { color: var(--color-ink); background: var(--color-paper-2); box-shadow: inset 0 -2px 0 var(--sheet); }
.sheet-no {
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 3px;
  font-family: var(--font-outlier); font-size: var(--text-xs);
  background: var(--sheet); color: var(--color-accent-ink);
}

/* ---------- hero: klad listů ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-2xl); align-items: center;
  min-height: calc(100svh - var(--bar-h));
  max-height: 880px;
  padding-block: var(--space-2xl);
}
.hero h1 {
  font-size: clamp(2.5rem, 3.6vw + 1rem, 4.5rem); font-weight: 700; line-height: 1.02;
  letter-spacing: var(--tracking-display); color: var(--color-ink);
}
.lead { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 34ch; }
.hero .btn { margin-top: var(--space-xl); }

.klad { width: 100%; height: auto; overflow: visible; }
.klad .land { fill: var(--color-paper-2); }
.klad .border { fill: none; stroke: var(--color-ink); stroke-width: 1.6; stroke-linejoin: round; pointer-events: none; }
.klad .grid { stroke: var(--color-muted); stroke-width: 1; stroke-dasharray: 6 6; pointer-events: none; }
.klad .hit { fill: transparent; }
.klad .fill { fill: var(--sheet); opacity: 0.3; transition: opacity var(--dur-short) var(--ease-out); }
.klad .cell-no { font-family: var(--font-outlier); font-size: 28px; fill: var(--sheet); pointer-events: none; }
.klad .cell-name { font-family: var(--font-display); font-weight: 700; font-size: 32px; fill: var(--color-ink); pointer-events: none; }
.klad .cell { outline: none; cursor: pointer; }
.klad .cell:hover .fill { opacity: 0.62; }
.klad .cell:active .fill { opacity: 0.8; }
.klad .cell:focus-visible .fill { opacity: 0.62; transition: none; }
.klad .cell:focus-visible .hit { stroke: var(--color-focus); stroke-width: 4; }

/* ---------- tlačítko ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }

/* ---------- listy ---------- */
.sheets { display: grid; gap: var(--section-gap-s); padding-bottom: var(--section-gap); }
.sheet {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl); align-items: center;
  padding-top: var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.sheet:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sheet:nth-child(even) .sheet-shot { order: 2; }
.sheet-shot {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius-card);
  border: var(--rule-hair) solid var(--color-rule);
  box-shadow: 0 0 0 6px var(--color-paper-2);
  background: var(--color-paper-2);
}
.sheet-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sheet-shot { transition: box-shadow var(--dur-short) var(--ease-out); }
.sheet-shot:hover { box-shadow: 0 0 0 6px var(--sheet); }
.sheet-head { display: flex; align-items: baseline; gap: var(--space-md); }
.sheet h2 {
  font-size: var(--text-section); font-weight: 700; line-height: 1.05;
  letter-spacing: var(--tracking-display);
}
.sheet-num { font-family: var(--font-outlier); font-weight: 400; font-size: var(--text-2xl); color: var(--sheet); flex: none; font-variant-numeric: tabular-nums; }
.sheet-lead { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 40ch; }
.sheet-facts { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.sheet-facts li { padding-left: var(--space-md); border-left: 2px solid var(--sheet); }
.sheet .btn { margin-top: var(--space-xl); }

/* ---------- patička ---------- */
.foot { border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); padding-block: var(--space-2xl); }
.foot-grid { display: grid; gap: var(--space-lg); }
.foot-mark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); }
.foot-mark span { color: var(--color-accent); }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); }
.foot-links a { color: var(--color-ink-2); }
.foot-links a:hover { color: var(--color-ink); }
.foot-links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.foot-legal { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- prohlížeč mapy ---------- */
.viewer { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.frame-wrap { position: relative; flex: 1; min-height: 0; }
.frame { display: block; width: 100%; height: 100%; border: 0; background: var(--color-paper-2); }
.solo {
  flex: none; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-card);
  color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap;
  border: var(--rule-hair) solid var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out);
}
.solo:hover { background: var(--color-paper-2); }
.solo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.noscript { padding: var(--space-xl); }

/* ---------- menší obrazovky ---------- */
@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; max-height: none; gap: var(--space-xl); padding-block: var(--space-xl); }
  .sheet, .sheet:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .sheet:nth-child(even) .sheet-shot { order: 0; }
}
@media (max-width: 40rem) {
  :root { --bar-h: 132px; }
  .bar { flex-wrap: wrap; height: auto; min-height: var(--bar-h); gap: var(--space-2xs); padding-block: var(--space-xs); padding-inline: var(--space-md); }
  .bar nav { flex-basis: 100%; }
  .bar ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: visible; }
  .bar li a { padding: var(--space-xs); }
  .viewer .bar { min-height: 0; }
  .klad .cell-name { font-size: 40px; }
  .solo { margin-left: auto; padding: var(--space-2xs) var(--space-sm); }
  .bar nav { order: 3; }
}

/* ---------- 404 ---------- */
.nf { padding-block: var(--section-gap); min-height: 60svh; }
.nf h1 { font-size: var(--text-display-s); font-weight: 700; }
.nf .btn { margin-top: var(--space-xl); }