:root {
  --paper: #fffaf5;
  --paper-deep: #f3e7da;
  --ink: #4a241b;
  --muted: #716560;
  --card: #fffdf9;
  --line: #eadfd4;
  --brand: #c7434d;
  --brand-dark: #9d333c;
  --tape: #f4d7a2;
  --tape-ink: #4d2d1b;
  --pine: #2f7257;
  --soon: #6e4510;
  --shadow: 0 18px 48px rgb(83 49 32 / 0.1);
  --sans: "Source Sans 3", "Segoe UI", sans-serif;
  --display: Fraunces, "Iowan Old Style", Palatino, serif;
  --radius: 1.75rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Menší monitory (notebooky): všechno je v rem, takže menší základ zmenší celý web. Podle šířky i výšky okna
   (nízké notebookové obrazovky), plných 16 px od asi 1900 × 930 px, mobil beze změny. */
@media (min-width: 900px) {
  html { font-size: clamp(12.5px, min(0.5vw + 6.5px, 1.4vh + 3px), 16px); }
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 8% 0%, rgb(244 215 162 / 0.55), transparent 26rem),
    linear-gradient(180deg, #fffdf9 0%, #f7efe6 100%);
}

img { max-width: 100%; }

button, a, summary { -webkit-tap-highlight-color: transparent; }

button, summary, .btn { cursor: pointer; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 560;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

.wrap {
  width: min(70rem, calc(100% - 1.5rem));
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.skip {
  position: absolute;
  left: 1rem;
  top: 1rem;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 1rem;
  border-radius: 999px;
}

.skip:focus { transform: none; }

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.25rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  min-width: 0;
}

.brand img {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  object-fit: cover;
  background: var(--card);
  box-shadow: var(--shadow);
}

.brand span {
  font-family: var(--display);
  line-height: 1;
  font-size: 1.05rem;
}

.brand span span {
  display: block;
  margin-top: 0.2rem;
  color: var(--brand);
  font-size: 1.25rem;
}

.nav { display: none; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }

.nav-link, .chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
}

.nav-link.is-on, .chip.is-on { background: var(--ink); color: var(--paper); }

.nav-link:not(.is-on):hover, .chip:not(.is-on):hover { background: var(--paper-deep); }

.chip { border: 1px solid var(--line); background: var(--card); }

.mobile-nav { position: relative; }

.mobile-nav summary {
  list-style: none;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  font-weight: 700;
}

.mobile-nav summary::-webkit-details-marker { display: none; }

.mobile-nav nav {
  position: absolute;
  right: 0;
  z-index: 5;
  display: grid;
  gap: 0.35rem;
  min-width: 12rem;
  margin-top: 0.4rem;
  padding: 0.4rem;
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow);
}

.mobile-nav .nav-link { padding: 0.7rem 0.8rem; }

.mobile-nav .nav-head {
  margin: 0.45rem 0.8rem 0;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-more { position: relative; }

.nav-more summary { list-style: none; cursor: pointer; }

.nav-more summary::-webkit-details-marker { display: none; }

.nav-more summary::after { content: "▾"; margin-left: 0.35rem; font-size: 0.8em; }

.nav-more[open] summary::after { content: "▴"; }

.nav-drop {
  position: absolute;
  right: 0;
  z-index: 5;
  display: grid;
  gap: 0.2rem;
  min-width: 13rem;
  margin-top: 0.4rem;
  padding: 0.4rem;
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow);
}

.nav-drop .nav-link { padding: 0.6rem 0.8rem; }

main { flex: 1; padding-bottom: 2.5rem; }

.fine { font-size: 0.78rem; }

h1 { font-size: clamp(2.6rem, 8vw, 4.4rem); line-height: 0.92; margin: 0.4rem 0 0; }

h1 span { display: block; color: var(--brand); }

h2 { font-size: 1.8rem; margin: 0 0 0.8rem; }

h3 { font-size: 1.35rem; line-height: 1.2; margin: 0.2rem 0; }

.hero {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.mascot {
  position: relative;
  min-height: 22rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sun {
  position: absolute;
  top: 1.4rem;
  left: 50%;
  width: min(80vw, 18rem);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--tape);
}

.heart {
  position: absolute;
  top: 18%;
  left: 8%;
  width: 2rem;
  height: 2rem;
  color: var(--brand);
}

.mascot img {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  filter: drop-shadow(0 22px 18px rgb(61 38 27 / 0.18));
}

.pill, .eyebrow, .kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pill {
  display: inline-flex;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--tape);
  color: var(--tape-ink);
}

.eyebrow, .kicker { color: var(--brand); margin: 0; }

.lede, .muted { color: var(--muted); line-height: 1.55; }

.lede { font-size: 1.12rem; max-width: 38rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.15rem;
}

a.card { display: block; text-decoration: none; color: inherit; }

.dashed { border-style: dashed; box-shadow: none; }


.date { margin: 0.2rem 0; font-family: var(--display); font-size: 1.7rem; }

.count { margin: 0.2rem 0 0; color: var(--pine); font-weight: 700; font-variant-numeric: tabular-nums; }

.soon { margin: 0.2rem 0 0; color: var(--soon); font-weight: 700; font-variant-numeric: tabular-nums; }

.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.8rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.btn-primary { background: var(--brand); color: var(--paper); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-line { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }

.section-head, .admin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.8rem;
  margin: 2.2rem 0 0.8rem;
}

.section-head { align-items: baseline; margin-bottom: 1.2rem; }
.section-head h2 { margin: 0; }

.section-head a, .back, .links a { color: var(--brand); font-weight: 700; }

.news-grid, .split { display: grid; gap: 0.8rem; }

.split > * { min-width: 0; }

.stack { display: grid; gap: 0.75rem; }

.cards-3 { display: grid; gap: 0.75rem; }

.meta { font-weight: 700; font-size: 0.92rem; }

.redigovano { color: var(--muted); font-weight: 600; }

.article-title { max-width: 18ch; }

/* Na počítači jde nadpis zprávy přes celou šířku textu s vyváženými řádky; dlouhý nadpis by jinak
   v úzkém sloupci 18ch zabral pět řádků a vpravo nechal prázdný pruh. */
@media (min-width: 720px) {
  .article-title { max-width: none; font-size: clamp(2.2rem, 4.6vw, 3.3rem); line-height: 1; text-wrap: balance; }
}

.prose { max-width: 40rem; font-size: 1.12rem; line-height: 1.6; }

.prose p { margin: 0 0 1rem; }

.prose h2, .rich-area h2 { font-size: 1.7rem; line-height: 1.15; margin: 1.3rem 0 0.45rem; }

.prose h3, .rich-area h3 { font-size: 1.3rem; line-height: 1.2; margin: 1.1rem 0 0.35rem; }

.prose ul, .prose ol, .rich-area ul, .rich-area ol { margin: 0 0 1rem; padding-left: 1.3rem; }

.prose ul, .rich-area ul { list-style: disc; }

.prose ol, .rich-area ol { list-style: decimal; }

.prose li, .rich-area li { margin: 0.15rem 0; }

.prose blockquote, .rich-area blockquote {
  margin: 0 0 1rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--line);
}

.prose a { color: var(--brand); font-weight: 700; }

.rich {
  display: grid;
  min-width: 0;
  font-weight: 400;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--card);
  overflow: hidden;
}

.rich trix-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 0.35rem;
  white-space: normal;
  background: var(--paper-deep);
  padding: 0.4rem;
  border-bottom: 1px solid var(--line);
}

.rich trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: stretch;
  gap: 0.35rem;
  overflow: visible;
  margin: 0;
}

.rich trix-toolbar .trix-button-group {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--card);
  overflow: hidden;
}

.rich trix-toolbar .trix-button-group[data-trix-button-group="history"] { flex: 0 0 auto; }

.rich trix-toolbar .trix-button-group--block { flex: 1 1 auto; }

.rich trix-toolbar .trix-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 2.35rem;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-indent: 0;
}

.rich trix-toolbar .trix-button-group[data-trix-button-group="history"] .trix-button { width: 2.35rem; flex: 0 0 2.35rem; }

.rich trix-toolbar .trix-button:last-child { border-right: 0; }

.rich trix-toolbar .trix-button:not(:first-child) { border-left: 0; }

.rich trix-toolbar .trix-button svg { width: 1.15rem; height: 1.15rem; display: block; }

.rich-mark { font-size: 0.82rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }

.rich trix-toolbar .trix-button[data-trix-attribute="quote"] .rich-mark { font-family: var(--display); font-size: 1.25rem; font-weight: 560; }

.rich trix-toolbar .trix-button[data-trix-attribute="italic"] .rich-mark { font-style: italic; font-family: var(--display); }

.rich trix-toolbar .trix-button[data-trix-attribute="underline"] .rich-mark { text-decoration: underline; text-underline-offset: 0.12em; }

.rich trix-toolbar .trix-button:hover,
.rich trix-toolbar .trix-button.trix-active {
  background: var(--paper-deep);
  color: var(--ink);
}

.rich trix-toolbar .trix-button.trix-active { background: var(--tape); color: var(--tape-ink); }

.rich trix-toolbar .trix-button:disabled {
  opacity: 0.38;
  color: var(--ink);
}

.rich trix-toolbar .trix-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  z-index: 1;
}

.rich trix-toolbar .trix-dialogs { position: static; }

.rich trix-toolbar .trix-dialog {
  position: static;
  max-width: none;
  margin: 0.15rem 0 0.35rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--card);
  box-shadow: none;
  font-size: 1rem;
}

.rich trix-toolbar .trix-dialog__link-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.4rem;
}

.rich trix-toolbar .trix-dialog__link-fields .trix-input,
.rich trix-toolbar .trix-input--dialog {
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
}

.rich trix-toolbar .trix-dialog__link-fields .trix-button-group {
  display: contents;
  border: 0;
  background: transparent;
  overflow: visible;
}

.rich trix-toolbar .trix-button--dialog {
  flex: none;
  width: auto;
  height: 2.35rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.86rem;
}

.rich-area {
  display: block;
  min-height: 12rem;
  border: 0;
  border-radius: 0;
  background: var(--card);
  padding: 0.75rem 0.85rem 0.9rem;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  line-height: 1.6;
  outline: none;
}

.rich-area:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

.rich-area.is-empty::before {
  content: "Text zprávy";
  color: var(--muted);
  float: left;
  height: 0;
  pointer-events: none;
}

.rich-area a { color: var(--brand); text-decoration: underline; }

.rich-area > div { margin: 0 0 1rem; }

.dates { display: grid; gap: 0.7rem; }

.dates.compact { grid-template-columns: 1fr; }

.date-tile {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0.8rem;
  padding: 0.8rem 0.9rem;
}

.date-tile strong { display: block; font-variant-numeric: tabular-nums; }
.date-tile span { display: block; color: var(--muted); font-size: 0.92rem; }


.login, .narrow { max-width: 34rem; }

.form { display: grid; gap: 0.8rem; }

.field { display: grid; gap: 0.35rem; font-size: 0.92rem; font-weight: 700; }

.control, .field textarea, .field input, .field select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 0.8rem;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-weight: 400;
}

.control:focus, .field textarea:focus, .field input:focus, .field select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.check { display: flex; gap: 0.5rem; align-items: center; font-weight: 700; }

.hint { font-weight: 400; color: var(--muted); }

.keep-lines { white-space: pre-wrap; overflow-wrap: anywhere; }

.yard h2 { margin: 0.15rem 0 0.6rem; font-size: clamp(1.6rem, 4vw, 2.1rem); }

.yard-home { list-style: none; margin: 0.85rem 0 0; padding: 0; }

.yard-home li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}

.yard-home li:first-child { border-top: 0; padding-top: 0.15rem; }

.yard-home-name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.yard-home-state { margin: 0.2rem 0 0; font-weight: 700; }

.yard-home-detail { margin: 0.12rem 0 0; color: var(--muted); line-height: 1.4; }

/* Druhé upozornění téhož místa (dočasná změna, pak nová doba). */
.yard-home-detail + .yard-home-state,
.yard-home-state + .yard-home-state { margin-top: 0.6rem; }

.yard-home .is-open .yard-home-state { color: var(--pine); }

.yard-home .is-later .yard-home-state { color: var(--soon); }

.yard-home .is-closure .yard-home-state,
.yard-home .is-change .yard-home-state { color: var(--brand); }

.week-list { list-style: none; margin: 0.2rem 0 0.4rem; padding: 0; }

.week-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}

.week-list .is-today > span { font-weight: 700; }

.week-list .is-off { color: var(--muted); }

.week-list .is-closure s { color: var(--muted); font-weight: 400; }

.week-list .is-closure em { color: var(--brand); font-style: normal; }

.hours-grid { display: grid; gap: 0.45rem; }

.hours-grid > span:first-child { font-weight: 700; font-size: 0.92rem; }

.hours-row {
  display: grid;
  grid-template-columns: minmax(8.2rem, 10rem) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.4rem;
  align-items: center;
}

.hours-day {
  display: grid;
  gap: 0.35rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
}

.hours-day .meta { margin: 0; }

.slot-row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 10.5rem) 6.4rem 6.4rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: center;
}

.doctor-week li {
  display: grid;
  grid-template-columns: 9.4rem minmax(0, 1fr);
  gap: 0.15rem 1rem;
  align-items: start;
  padding: 0.55rem 0.7rem;
  border-bottom: 0;
  border-radius: 0.85rem;
}

.doctor-week li:not(.is-today) { border-bottom: 1px solid var(--line); border-radius: 0; }

.doctor-week .day { font-weight: 700; padding-top: 0.12rem; white-space: nowrap; }

.doctor-notice { margin: 0.95rem 0 1.6rem; }

.doctor-week .today-quiet {
  display: block;
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  white-space: normal;
}

.doctor-week .today-mark {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--paper);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  vertical-align: 0.12em;
}

.doctor-week li.is-today {
  background: var(--paper-deep);
  box-shadow: inset 4px 0 0 var(--brand);
  color: var(--ink);
}

.doctor-week .parts {
  display: grid;
  justify-items: stretch;
  gap: 0.28rem;
  min-width: 0;
  text-align: left;
}

.doctor-week .part {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin: 0;
  min-width: 0;
}

.doctor-week .slot {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.45rem;
  max-width: 100%;
}

.doctor-week .part strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.doctor-week .hint { font-weight: 400; line-height: 1.35; }

.week-list.doctor-week li.is-today .hint { color: var(--muted); font-weight: 400; }

.place-ask { margin: -0.4rem 0 1rem; font-weight: 700; }
.place-ask a { color: var(--brand); }

/* Pod čarou: navazující zpráva, zdroj a pozvánka na Facebook (src/article-source.js). */
.article-foot { margin: 1.8rem 0 2.4rem; padding: 0.9rem 0 0; text-align: left; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.article-foot p { margin: 0.25rem 0; }
.article-foot a { color: inherit; font-weight: 600; text-decoration-color: var(--line); text-underline-offset: 2px; }
.article-foot a:hover { text-decoration-color: currentColor; }
.article-foot a.article-facebook { color: var(--brand); text-decoration-color: currentColor; }

.place-jump { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.place-jump .chip { color: var(--ink); }
.yard[id] { scroll-margin-top: 1rem; }
.place-head > .count, .place-head > .soon { margin-bottom: 1rem; }

/* Lékaři: den vždy nad časy, ať dlouhé poznámky mají celou šířku karty (na mobilu to platí pro všechny týdny) */
.doctor-grid .doctor-week li:not(.is-off) { grid-template-columns: 1fr; gap: 0.28rem; }
.doctor-grid .doctor-week li.is-off { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.doctor-grid .doctor-week .day { padding-top: 0; }

.banner p { margin: 0.15rem 0; }

.banner .banner-note { font-weight: 500; margin-top: 0.28rem; }

.thumb { width: 8rem; height: 5rem; object-fit: cover; border-radius: 0.7rem; }

.banner {
  background: var(--tape);
  color: var(--tape-ink);
  border-radius: 0.8rem;
  padding: 0.75rem 0.85rem;
  font-weight: 700;
}

.outage-state { margin: 0; font-weight: 700; }
.outage-state.is-now { color: var(--brand); }
.outage-state.is-soon { color: var(--soon); }
.outage-when {
  margin: 0.15rem 0 0.35rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  line-height: 1.25;
  text-wrap: balance;
}
.outage-places { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.outage-places li {
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.outage-more { margin: 0.35rem 0 0; }

.note { font-weight: 700; }
.note-ok { color: var(--pine); }
.note-bad { color: var(--brand); }

.pair { display: grid; gap: 0.8rem; }

ul.plain { list-style: none; margin: 0; padding: 0; }

.block { margin-top: 0.5rem; }

@media (max-width: 720px) {
  .slot-row { grid-template-columns: 1fr 1fr; }
  .slot-row .check, .slot-row .slot-note { grid-column: 1 / -1; }
  .doctor-week li:not(.is-off) { grid-template-columns: 1fr; gap: 0.28rem; }
  .doctor-week li.is-off { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .doctor-week .day { padding-top: 0; }
  .doctor-week li.is-today .day { font-size: 1.08rem; }
}

@media (max-width: 420px) {
  .rich trix-toolbar .trix-dialog__link-fields { grid-template-columns: 1fr 1fr; }
  .rich trix-toolbar .trix-dialog__link-fields .trix-input { grid-column: 1 / -1; }
  .hours-row { grid-template-columns: 1fr 1fr; }
  .hours-row .check { grid-column: 1 / -1; }
}

@media (min-width: 720px) {
  .cards-3, .dates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dates.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pair { grid-template-columns: 1fr 1fr; }
  /* Otevírací doba a sběrné dvory: karty vedle sebe, kolik se jich vejde, aby týden zůstal čitelný */
  .place-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
  /* Karta zabírá 10 řádků mřížky (záhlaví, nadpis, 7 dnů, změny), takže dny v řádku karet leží na stejné výšce */
  .place-card { display: grid; grid-row: span 10; grid-template-rows: subgrid; row-gap: 0; }
  .place-card .week-list { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  .place-card > .muted, .place-card > .keep-lines { grid-row: span 7; }
  .place-card .doctor-week li { align-content: start; }
  /* Lékaři ve dvou sloupcích plněných shora, každá karta jen tak vysoká, kolik má obsahu, krátké se skládají pod sebe */
  .doctor-grid { display: block; columns: 28rem 2; column-gap: 0.75rem; }
  .doctor-grid > .card { break-inside: avoid; margin-bottom: 0.75rem; }
  .place-grid .dates.compact, .doctor-grid .dates.compact { grid-template-columns: 1fr; }
  .place-grid .doctor-week li { grid-template-columns: 7.6rem minmax(0, 1fr); }
  .place-grid.yard-grid-2, .place-grid.yard-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .nav { display: flex; }
  .mobile-nav { display: none; }
  .hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .news-grid, .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .mascot { min-height: 28rem; }
  .place-grid.yard-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sun { width: 20rem; }
}

.row > form { display: flex; }

/* Karta, na kterou vede odkaz (místo, lékař, dvůr, akce), krátce zasvítí; znovu i po dalším ťuknutí
   na stejný odkaz (třída is-flash z nav.js, jiné jméno animace ji spustí od začátku). */
:is(.yard, .event-card):target { animation: card-flash 1.6s ease-out; }
:is(.yard, .event-card).is-flash { animation: card-flash-again 1.6s ease-out; }

@keyframes card-flash {
  from { background: var(--tape); }
  to { background: var(--card); }
}

@keyframes card-flash-again {
  from { background: var(--tape); }
  to { background: var(--card); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :is(.yard, .event-card):is(:target, .is-flash) { animation: none; }
}

.yard-home-name .notice-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
.yard-home-name .notice-link:hover { text-decoration-color: var(--brand); }
.yard-home-name .notice-link::after { content: "›"; display: inline-block; margin-left: 0.3em; color: var(--brand); text-decoration: none; }

/* Sdílení zprávy (src/share.js): ikonka vedle data a vlastní nabídka. Messenger jen na dotykových zařízeních. */
.article-meta { display: flex; align-items: center; gap: 0.6rem; }
.article-meta .meta { flex: 0 1 auto; min-width: 0; }
.article-meta .share { flex: none; }
.meta-when { white-space: nowrap; }

.share { position: relative; }

.share summary { list-style: none; }

.share summary::-webkit-details-marker { display: none; }

.share-btn {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}

.share-btn:hover, .share[open] .share-btn { background: var(--paper-deep); }

.share-btn svg { width: 1.15rem; height: 1.15rem; }

.share-drop {
  position: absolute;
  left: 0;
  z-index: 5;
  display: grid;
  gap: 0.1rem;
  min-width: 12rem;
  margin-top: 0.3rem;
  padding: 0.4rem;
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow);
}

.share-item {
  padding: 0.6rem 0.8rem;
  border: 0;
  border-radius: 0.7rem;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.share-item:hover { background: var(--paper-deep); }

/* Karta místa, lékaře či dvora: ikonka vpravo u názvu, nabídka se rozbalí doleva, ať nepřeteče z karty. */
.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }

.card-title .share { margin-top: 0.3rem; }

.card-title .share-drop { right: 0; left: auto; }

.share .share-drop.to-left { right: 0; left: auto; }

.share .share-drop.to-right { left: 0; right: auto; }

.share-touch { display: none; }

@media (hover: none) and (pointer: coarse) {
  .share-touch { display: block; }
}

/* Šipky ‹ › u posuvných řádků, které se nevejdou (public/scroll-arrows.js): vedle sebe u nadpisu, nebo `is-edge` na
   krajích přes řádek (box s position: relative nebo sticky). */
.scroll-arrows { display: flex; gap: 0.4rem; }
.scroll-arrows[hidden], .scroll-arrow[hidden] { display: none; }
.scroll-arrow {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0 0 0.15rem;
  font: 700 1.5rem/1 var(--display);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.scroll-arrow:hover:not(:disabled) { color: var(--brand-dark); border-color: var(--brand-dark); }
.scroll-arrow:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.scroll-arrows.is-edge { position: absolute; inset: 0; justify-content: space-between; align-items: center; pointer-events: none; }
.scroll-arrows.is-edge .scroll-arrow { position: relative; z-index: 1; width: 2rem; height: 2rem; margin: 0 0.35rem; font-size: 1.35rem; pointer-events: auto; }
.scroll-arrows.is-edge .scroll-arrow-next { margin-left: auto; }
/* Rubriky na stránce zpráv: drobečky, pás hlavních rubrik a podblok s podrubrikami. */

.news-count { margin: 0.35rem 0 0; color: var(--muted); font-weight: 700; font-size: 0.92rem; }

/* Drobečky: Zprávy › Sport */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.45rem;
  margin: 0;
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.crumb-sep {
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  margin: 0 0.1em 0 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}

.kicker-up { color: var(--muted); }
.kicker .crumb-sep { margin: 0 0.45em 0.08em 0.3em; vertical-align: middle; }

/* Pás hlavních rubrik */
.rubric-nav { margin: 1.15rem 0 1.4rem; }

/* Obal pásu kvůli šipkám na krajích (public/scroll-arrows.js), stejně široký jako pás. */
.rubric-tabs-box { position: relative; width: max-content; max-width: 100%; }

.rubric-tabs {
  display: flex;
  gap: 0.2rem;
  width: max-content;
  max-width: 100%;
  padding: 0.3rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 999px;
  background: var(--paper-deep);
}

.rubric-tabs::-webkit-scrollbar { display: none; }

.rubric-tabs.fade-end { mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
.rubric-tabs.fade-start { mask-image: linear-gradient(90deg, transparent, #000 2.5rem); }
.rubric-tabs.fade-start.fade-end { mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }

.rubric-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.rubric-tab:not(.is-on):hover { background: rgb(255 253 249 / 0.75); }

.rubric-tab.is-on {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 6px 16px rgb(74 36 27 / 0.2);
}

.rubric-tab:focus-visible, .sub-chip:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

/* Rubrika s podrubrikami má šipku dolů. */
.rubric-tab.has-sub::after {
  content: "";
  width: 0.36em;
  height: 0.36em;
  margin-top: -0.2em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}

.rubric-tab.has-sub.is-on::after { opacity: 0.85; }

/* Podblok s podrubrikami, připojený pod vybranou rubriku */
.rubric-sub {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.8rem;
  margin-top: 0.8rem;
  padding: 0.7rem 0.75rem 0.7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--card);
  box-shadow: 0 10px 28px rgb(83 49 32 / 0.07);
}

.rubric-sub.has-notch::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--notch-x, 2rem);
  width: 0.8rem;
  height: 0.8rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--card);
  transform: translate(-50%, -52%) rotate(45deg);
}

.rubric-sub-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rubric-sub-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.sub-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.35rem 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.sub-chip:not(.is-on):hover { background: var(--paper-deep); }

.sub-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.sub-chip.is-on { border-color: var(--brand); background: var(--brand); color: var(--paper); }
.sub-chip.is-on .sub-count { background: rgb(255 255 255 / 0.22); color: var(--paper); }

@media (max-width: 560px) {
  .rubric-tabs { width: 100%; }
  .rubric-sub { padding-left: 0.85rem; }
  .rubric-sub-label { flex-basis: 100%; }
}

/* Na stránce zprávy: odkaz zpět (vpravo případně všechny zprávy), pod ním drobečky rubriky. */
.article-back { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; }
.back-all { color: var(--muted); font-size: .92em; font-weight: 600; }
.back-all:hover { color: var(--brand); }
.article-back + .crumbs { margin-top: 1.1rem; }

/* Další zprávy vedle zprávy (na mobilu pod ní). */
.more-news { margin-top: 1.6rem; }
.more-news h2 { font-size: 1.3rem; margin: 0 0 0.4rem; }
.more-news li + li { border-top: 1px solid var(--line); }
.more-news a { display: grid; gap: 0.15rem; padding: 0.7rem 0; color: inherit; text-decoration: none; }
.more-news a:hover .more-title { text-decoration: underline; text-underline-offset: 0.2em; }
.more-title { font-weight: 700; line-height: 1.3; }
.more-date { color: var(--muted); font-size: 0.88rem; font-weight: 700; }
/* Seznam zpráv bez karet (src/news.js, plán PLAN-VZHLED.md): seznam začíná tmavou linkou, zprávy dělí tenká linka,
   fotka je malá vlevo. Reklamy mezi zprávami zůstávají odlišené. */

.news-page .page-intro .news-count { margin: 0 0 0.8rem; }
.news-page .page-intro .search-form { margin-bottom: 0; }
.news-page .rubric-nav { margin: 0 0 1.5rem; }
/* Seznam má tmavou linku, tenká pod hlavičkou by byla druhá. */
.news-page .page-head { margin-bottom: 1rem; border-bottom: 0; }

.news-list { border-top: 2px solid var(--ink); }

.news-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

/* Na mobilu malý čtverec vlevo, perex nejvýš na tři řádky. */
.news-row.has-photo { grid-template-columns: 6.5rem minmax(0, 1fr); }

.news-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 0.6rem;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  background: var(--paper-deep);
}

.news-photo.is-whole { object-fit: contain; }

.news-row-text { min-width: 0; max-width: 44rem; }
/* Výzva ke čtení hned za dnem, ne odtržená na kraji řádku. */
.news-row .story-foot { justify-content: flex-start; gap: 0.2rem 1.1rem; }
.news-row .story-more { margin-left: 0; }
.news-row h2 { margin: 0.2rem 0 0.35rem; font-size: 1.25rem; line-height: 1.2; transition: color 0.15s; }
.news-row .muted {
  display: -webkit-box;
  margin: 0 0 0.5rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.news-row:hover h2, .news-row:focus-visible h2 {
  color: var(--brand-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.news-row:hover .story-more, .news-row:focus-visible .story-more { text-decoration: underline; text-underline-offset: 0.18em; }

/* Reklama mezi zprávami: vlastní podklad, kolem vzduch místo linky. */
.news-list > .ad-panel { margin: 1.4rem 0; }
.news-list > .ad-panel + .news-row { border-top: 1px solid var(--line); }

.news-empty { margin: 0; padding: 1.4rem 0; }

@media (min-width: 720px) {
  .news-row { gap: 1.4rem; padding: 1.4rem 0; }
  .news-row.has-photo { grid-template-columns: 14rem minmax(0, 1fr); }
  .news-photo { aspect-ratio: 3 / 2; border-radius: 0.8rem; }
  .news-row h2 { font-size: 1.55rem; margin-top: 0.25rem; }
  .news-row .muted { -webkit-line-clamp: 4; }
}

/* Výsledky hledání ve zprávách (src/hledani/view.js) jako řádky seznamu. */
.news-page .search-head { margin: 0 0 1rem; }
.news-page .search-group { margin-top: 0; }
.news-page .search-group + .search-group { margin-top: 2.2rem; }
.news-page .search-group > h2 { padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); }
.news-page .search-group > .stack { gap: 0; border-top: 2px solid var(--ink); }
.news-page .card.search-story { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.news-page .search-story .muted { margin: 0 0 0.4rem; }
.news-page .search-story .meta { margin: 0; }
.news-page .search-story:hover h2 { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 0.15em; }
.news-page .card.search-empty { margin-top: 0; padding-top: 1.1rem; border-top: 2px solid var(--ink); }
/* Inzerát na nástěnce: papírový lístek přes celou šířku, nahoře přilepený proužkem pásky s nápisem,
   fotka připíchnutá celá (logo se neořízne). Od zpráv se schválně liší. */
.ad-panel {
  --note: #fdf3df;
  --note-line: #ecd8b8;
  position: relative;
  width: 100%;
  margin-top: 0.9rem;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.55), transparent 3.5rem),
    var(--note);
  border: 1px solid var(--note-line);
  border-radius: 0.45rem;
  box-shadow: 0 1px 0 rgb(83 49 32 / 0.06), 0 10px 24px rgb(83 49 32 / 0.08);
  padding: 1.35rem 1.1rem 1.1rem;
}

.ad-flag {
  position: absolute;
  top: -0.8rem;
  left: 1.1rem;
  margin: 0;
  padding: 0.28rem 0.85rem;
  background: var(--tape);
  color: var(--tape-ink);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
  box-shadow: 0 1px 2px rgb(83 49 32 / 0.12);
  /* Natržené konce pásky. */
  clip-path: polygon(0 8%, 3% 0, 97% 6%, 100% 0, 99% 92%, 100% 100%, 2% 94%, 0 100%);
}

.ad-layout { display: grid; gap: 0.9rem; align-items: center; }

/* Fotka jako připíchnutá: celá, s bílým okrajem, mírně natočená. */
.ad-photo {
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 12rem;
  object-fit: contain;
  padding: 0.35rem;
  background: #fff;
  border-radius: 0.2rem;
  box-shadow: 0 2px 8px rgb(83 49 32 / 0.16);
  transform: rotate(1.2deg);
}

.ad-copy h1,
.ad-copy h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.2;
}

.ad-copy h1 a,
.ad-copy h3 a { color: inherit; text-decoration: none; }

.ad-copy h3 a:hover { text-decoration: underline; }

.ad-text { margin: 0.4rem 0 0; line-height: 1.5; overflow-wrap: anywhere; }

.ad-place { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.92rem; font-weight: 700; }

.ad-link { margin: 0.6rem 0 0; font-weight: 700; }

.ad-link a,
.ad-link span { color: var(--brand); text-decoration: none; }

.ad-link a::after,
.ad-link span::after { content: " ›"; }

.ad-link a:hover { text-decoration: underline; }

.ad-panel .is-placeholder { color: var(--muted); }

.ad-slot { margin-top: 0.9rem; }

.ad-stage { display: grid; gap: 0.55rem; align-content: start; }

.ad-stage .hint { overflow-wrap: anywhere; }

.ad-solo { max-width: 42rem; }

/* Stránka jedné nabídky: fotka větší, bez natočení. */
.ad-solo .ad-photo { max-height: 32rem; justify-self: start; transform: none; }

@media (min-width: 720px) {
  .ad-panel { padding: 1.5rem 1.4rem 1.25rem; }
  .ad-panel.has-photo .ad-layout { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.4rem; }
  .ad-panel.ad-solo.has-photo .ad-layout { grid-template-columns: 1fr; }
}

@media (min-width: 1100px) {
  .ad-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42rem;
    gap: 0.8rem;
    align-items: start;
  }

  .ad-stage { position: sticky; top: 1rem; }
}

/* Stránka /reklamy: na mobilu pod sebou, na větší obrazovce karty vedle sebe s fotkou nahoře. */
.ads-grid { display: grid; gap: 1.4rem 0.9rem; }

@media (min-width: 720px) {
  .ads-grid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  .ads-grid .ad-panel { width: 100%; }
  .ads-grid .ad-panel.has-photo .ad-layout { grid-template-columns: 1fr; align-items: start; }
  .ads-grid .ad-panel.has-photo .ad-photo { max-height: 11rem; }
}

/* Detail zprávy na počítači: zpráva u levého okraje jako ostatní stránky, reklama a další zprávy v úzkém sloupci vedle. */
@media (min-width: 1000px) {
  .article-page {
    display: grid;
    grid-template-columns: minmax(0, 48rem) 17rem;
    justify-content: space-between;
    gap: 3rem;
    align-items: start;
  }

  .article-side .ad-slot { margin-top: 0; }

  .article-side .ad-panel.has-photo .ad-layout { grid-template-columns: 1fr; align-items: start; }
  .article-side .ad-panel.has-photo .ad-photo { max-height: 11rem; }
}
/* Fotky u zpráv. Karty ořezávají do pevného poměru podle bodu výřezu, detail ukazuje fotku celou. */

.cover {
  display: block;
  width: calc(100% + 2.3rem);
  max-width: none;
  margin: -1.1rem -1.15rem 0.8rem;
  border-radius: var(--radius) var(--radius) 0 0;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  background: var(--paper-deep);
}

/* Plakát se neořezává, v kartě je vidět celý na podkladu. */
.cover.is-whole { object-fit: contain; }

/* Bod výřezu z redakce: x a y po desítkách procent. */
.fx-0 { --fx: 0%; }
.fx-1 { --fx: 10%; }
.fx-2 { --fx: 20%; }
.fx-3 { --fx: 30%; }
.fx-4 { --fx: 40%; }
.fx-5 { --fx: 50%; }
.fx-6 { --fx: 60%; }
.fx-7 { --fx: 70%; }
.fx-8 { --fx: 80%; }
.fx-9 { --fx: 90%; }
.fx-10 { --fx: 100%; }
.fy-0 { --fy: 0%; }
.fy-1 { --fy: 10%; }
.fy-2 { --fy: 20%; }
.fy-3 { --fy: 30%; }
.fy-4 { --fy: 40%; }
.fy-5 { --fy: 50%; }
.fy-6 { --fy: 60%; }
.fy-7 { --fy: 70%; }
.fy-8 { --fy: 80%; }
.fy-9 { --fy: 90%; }
.fy-10 { --fy: 100%; }

.story-text > :last-child { margin-bottom: 0; }

/* Spodek karty zprávy: den a autor vlevo, výzva ke čtení vpravo; na úzké kartě se výzva zalomí pod ně. */
.story-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
}

.story-foot .meta { margin: 0; }

.story-more {
  margin-left: auto;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}

.story-more::after { content: " ›"; }

.story:hover .story-more, .story:focus-visible .story-more { text-decoration: underline; text-underline-offset: 0.18em; }

.article-figure { margin: 1rem 0 1.4rem; }

.article-frame {
  display: flex;
  justify-content: center;
  background: var(--paper-deep);
  border-radius: var(--radius);
  overflow: hidden;
}

.article-photo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(75vh, 42rem);
  object-fit: contain;
}

.article-figure figcaption {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

@media (min-width: 720px) {
  /* Detail zprávy na počítači: fotka vlevo nebo vpravo, text ji obtéká.
     Výška fotky je omezená a šířka se dopočítá z jejího poměru, takže fotka na výšku
     je úzká a vysoká, na šířku široká a nízká. Popisek šířku fotky nemění. */
  .article-body.has-photo { max-width: 48rem; }

  .article-body.has-photo .prose { max-width: none; }

  .article-body::after { content: ""; display: block; clear: both; }

  .article-figure.is-right { float: right; margin: 0.35rem 0 1rem 1.6rem; }

  .article-figure.is-left { float: left; margin: 0.35rem 1.6rem 1rem 0; }

  .article-figure.is-left, .article-figure.is-right { max-width: 46%; }

  .article-figure .article-frame { display: block; background: none; }

  .article-figure .article-photo { max-height: min(70vh, 28rem); }

  .article-figure figcaption { contain: inline-size; }

  /* Citace vedle fotky drží pohromadě. U seznamu jen jednotlivé odrážky: ta, co začíná vedle fotky,
     zůstane celá vedle ní (nezajede pod ni), další se pod fotkou roztáhnou, ať nezůstane prázdné místo. */
  .article-body.has-photo .prose blockquote { display: flow-root; }
  .article-body.has-photo .prose li { display: flow-root list-item; }

  /* Odstavec, ze kterého by pod fotku přetekl jen jeden řádek, drží celý vedle ní (public/article.js). */
  .article-body.has-photo .prose .hug { display: flow-root; }
}

/* Přílohy pod zprávou (jízdní řády, mapy): náhledy, ťuknutím se obrázek otevře celý. */
.article-attachments { max-width: 48rem; margin: 1.6rem 0 1rem; }
.article-attachments h2 { margin: 0 0 0.2rem; font-size: 1.15rem; }
.article-attachments > p { margin: 0 0 0.8rem; font-size: 0.92rem; }
.article-attachments ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.8rem; }
.article-attachments a { display: block; color: inherit; text-decoration: none; }
.article-attachments img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: top;
  border-radius: 0.8rem;
  background: var(--paper-deep);
  border: 1px solid var(--paper-deep);
}
.article-attachments a:hover img { border-color: var(--muted); }
.article-attachments span { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.88rem; line-height: 1.35; }

/* Ke stažení pod zprávou (src/downloads.js): přihláška či propozice na webu zdroje jako tlačítka. */
.article-downloads { max-width: 48rem; margin: 1.6rem 0 1rem; }
.article-downloads h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.article-downloads ul { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.download-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: none;
}
.download-link::before { content: "↓"; }
.download-link span { color: var(--muted); font-weight: 400; }
.download-link:hover { border-color: var(--brand); }
/* Okno s přílohou zprávy (public/attachments.js). */
.attachment-viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
}

.attachment-viewer[open] { display: flex; flex-direction: column; }
.attachment-viewer::backdrop { background: rgb(30 16 12 / 0.94); }

.attachment-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem 0.5rem;
  overflow: auto;
  overscroll-behavior: contain;
}

.attachment-frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.4rem;
  background: #fff;
  cursor: zoom-in;
}

/* Zvětšeno: obrázek v plné velikosti, posouvá se prstem nebo kolečkem. */
.attachment-frame.is-zoomed { display: block; }
.attachment-frame.is-zoomed img { max-width: none; max-height: none; margin: auto; cursor: zoom-out; }

.attachment-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
}

.attachment-text { flex: 1; min-width: 0; }
.attachment-text p { margin: 0; font-size: 0.95rem; line-height: 1.35; }
.attachment-text p:empty { display: none; }
.attachment-hint { display: block; margin-top: 0.15rem; font-size: 0.82rem; opacity: 0.7; }
.attachment-hint::before { content: "🔍 "; }
.attachment-count { flex: none; font-size: 0.9rem; opacity: 0.75; font-variant-numeric: tabular-nums; }
.attachment-viewer.is-single .attachment-prev,
.attachment-viewer.is-single .attachment-next { display: none; }

.attachment-viewer button {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  font: 600 1.7rem/1 var(--sans);
  cursor: pointer;
}

.attachment-viewer button:hover,
.attachment-viewer button:focus-visible { background: rgb(255 255 255 / 0.3); }
.attachment-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.attachment-close { position: absolute; top: 0.6rem; right: 0.8rem; z-index: 1; }
/* Titulka (`src/home.js`): velká Drběna s nadpisem, pod nimi deska „Dnes v Kopidlně“, pak zprávy a akce. Jako stránky služeb
   (`public/flat.css`) bez karet: bloky začínají tmavou linkou, podbarvená je jen deska. */
.home-intro { margin: 0; }
.home-intro .lede { margin-bottom: 0; }

@media (min-width: 900px) {
  .hero.home-hero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: center; }
  .home-hero > .mascot { min-height: 25rem; }
}

/* Dnes v Kopidlně: nadpis s tmavou linkou jako ostatní sekce, pod ním skupiny jako samostatné podbarvené plochy.
   Na počítači ve třech stejně vysokých sloupcích (`src/home-layout.js`), volné místo pod posledním blokem vyplní kresba;
   na mobilu jdou bloky pod sebou v pořadí z webu (`home-n*`). */
.today-board .section-head, .home-block .section-head { padding-bottom: 0.55rem; border-bottom: 2px solid var(--ink); }
.today-board .section-head { margin-top: 1.8rem; }
.today-date { margin: 0; color: var(--muted); font-weight: 700; font-size: 0.95rem; }
.today-groups { display: flex; flex-direction: column; gap: 0.75rem; }
.home-col { display: contents; }
.home-fill { display: none; order: 99; }
.home-n0 { order: 10; }
.home-n1 { order: 11; }
.home-n2 { order: 12; }
.home-n3 { order: 13; }
.home-n4 { order: 14; }
.today-group {
  min-width: 0;
  padding: 1rem 1.2rem 1.1rem;
  border-radius: 1rem;
  background: var(--area-plate);
}
.today-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--area-rule);
}
.today-group-head h3 { flex: 1; margin: 0; font-size: 1.12rem; line-height: 1.2; }
.today-group-head h3 a { color: inherit; text-decoration: none; }
.today-group-head h3 a:hover { color: var(--brand-dark); text-decoration: underline; }
.today-icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0.38rem;
  border-radius: 999px;
  background: var(--area-tint);
  fill: none;
  stroke: var(--area-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.today-more { flex: none; color: var(--brand-dark); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.today-group .date { margin-top: 0; font-size: 1.5rem; }
.today-group .yard-home { margin-top: 0; }
.today-group .yard-home li { border-top-color: rgb(74 36 27 / 0.08); }
.today-group .yard-home li:last-child { padding-bottom: 0; }
.today-group .yard-home-name { font-size: 1.15rem; }

@media (min-width: 900px) {
  .today-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .home-col { display: flex; flex-direction: column; gap: 0.75rem; }
}

/* Kresba pod bloky (`src/home-fill.js`): sloupce jsou stejně vysoké a volné místo pod posledním blokem dostane kresbu podle své výšky. */
@media (min-width: 900px) {
  .home-fill { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; min-height: 0; margin-top: -0.75rem; overflow: hidden; container-type: size; }
  .home-fill > svg { display: none; width: 100%; flex: none; }
  .fill-steps, .fill-steps2 { height: auto; }
  .fill-big { display: none; flex: 1; min-height: 0; flex-direction: column; justify-content: flex-end; gap: 0.3rem; }
  .fill-sight { flex: 1; min-height: 0; max-height: 20rem; }
  .fill-walk { display: block; width: 100%; height: auto; flex: none; }
  @container (min-height: 1.6rem) and (max-height: 3.8rem) { .home-fill > .fill-steps { display: block; } }
  @container (min-height: 3.8rem) and (max-height: 7.5rem) { .home-fill > .fill-steps2 { display: block; } }
  @container (min-height: 7.5rem) { .home-fill > .fill-big { display: flex; } }
  /* Kresba roste s mezerou nejvýš do 20rem (víc ji stejně nedovolí šířka sloupce); hodně velká mezera má nad ní stezku stop shora. */
  .fill-trail { display: none; flex: 1; min-height: 0; margin: 0.4rem 0 0.6rem; background: var(--brand); opacity: 0.4;
    mask: url("/stezka-stop.svg") center bottom / 9.1rem auto repeat-y; -webkit-mask: url("/stezka-stop.svg") center bottom / 9.1rem auto repeat-y; }
  @container (min-height: 28rem) {
    .home-fill .fill-trail { display: block; }
    .home-fill .fill-sight { flex: 0 0 20rem; }
  }
  /* Prázdný sloupec (třeba jen svoz): celý je kresba jako mezera pod blokem (do 20rem, ve vysokém se stezkou stop shora),
     jen aspoň 12rem vysoká, ať v nízké tabuli nezůstane drobná. */
  .home-col.is-empty > .home-fill { min-height: 12rem; margin-top: 0; }
}

.home-fill svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fill-hoof { fill: var(--brand); opacity: 0.4; }
/* Kresba je jen čára v masce, barvu jí dává pozadí. */
.fill-sight { display: block; background: var(--brand-dark); opacity: 0.75; mask: center bottom / contain no-repeat; -webkit-mask: center bottom / contain no-repeat; }
.fill-kostel { mask-image: url("/kresba-kostel.svg"); -webkit-mask-image: url("/kresba-kostel.svg"); }
.fill-zamek { mask-image: url("/kresba-zamek.svg"); -webkit-mask-image: url("/kresba-zamek.svg"); }
.fill-sousosi { mask-image: url("/kresba-sousosi.svg"); -webkit-mask-image: url("/kresba-sousosi.svg"); }

/* Zprávy a akce bez karet: nadpis sekce s tmavou linkou, hlavní zpráva s fotkou, vedlejší oddělené linkou. */
.home-block .section-head a { font-size: 0.95rem; }
.home-block .card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.home-block a.card h3 { transition: color 0.15s; }
.home-block a.card:hover h3 { color: var(--brand-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.home-block .cover { width: 100%; margin: 0 0 0.9rem; border-radius: 0.8rem; }
.home-block .card-lead h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.12; }
.home-block .card-lead .muted { font-size: 1.05rem; }
.home-block .news-grid { gap: 1.4rem; }
.home-block .news-grid > .stack { gap: 0; align-content: start; }
.home-block .card-side { padding: 1rem 0; border-top: 1px solid var(--line); }
.home-block .card-side:first-child { padding-top: 0; border-top: 0; }
.home-block .card-side:last-child { padding-bottom: 0; }
.home-block .card-lead + .stack > .card-side:first-child { padding-top: 1rem; border-top: 1px solid var(--line); }
.home-block .cards-3 { gap: 1.6rem 2.25rem; }
.home-block .cards-3 > .card { padding-top: 0.2rem; }
.home-block .cards-3 > .card + .card { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.home-block .dashed { color: var(--muted); }

@media (min-width: 720px) {
  .home-block .cards-3 > .card + .card { padding-top: 0.2rem; border-top: 0; }
  .home-block .cards-3 > .card { padding-left: 1.1rem; border-left: 1px solid var(--line); }
  .home-block .cards-3 > .card:first-child { padding-left: 0; border-left: 0; }
}

@media (min-width: 900px) {
  .home-block .news-grid { gap: 2.25rem; }
  .home-block .card-lead + .stack > .card-side:first-child { padding-top: 0; border-top: 0; }
  .home-block .news-grid > .stack { padding-left: 2.25rem; border-left: 1px solid var(--line); }
}

/* Reklama pod zprávami: štítek „Reklama od sousedů“ přečnívá nahoru, ať nesedí na zprávách. */
.home-ad { margin-top: 2.4rem; }
.news-more { display: flex; justify-content: flex-end; margin-top: 1.2rem; }

/* Perex u menších zpráv vedle hlavní: na mobilu jeden řádek, dlouhý skončí „…“ a „víc ›“; na počítači až tři řádky a „víc ›“ vpravo dole; „víc ›“ má i hlavní zpráva */
.card-side { min-width: 0; }
.card-side .side-excerpt { display: flex; gap: 0.35em; margin: 0.35rem 0 0; white-space: nowrap; }
.side-excerpt > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-more { flex: none; font-weight: 600; color: var(--brand-dark); }

@media (min-width: 900px) {
  .card-side .side-excerpt { align-items: flex-end; white-space: normal; }
  .side-excerpt > :first-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
}

/* Tajná hra (`public/hra.js`): tři ťuknutí na maskota nesmí přiblížit stránku, označit obrázek ani ho orámovat (zvýraznění ťuknutí na mobilu). Při ťuknutí
   se Drběna zavrtí a srdíčko poskočí, od druhého napoví bublinou. */
.mascot[data-game] { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.mascot[data-game] img { cursor: pointer; -webkit-user-drag: none; }
.mascot.is-tapped > img { animation: drbena-wiggle 0.45s ease-in-out; }
.mascot.is-tapped > .heart { animation: drbena-heart 0.45s ease-out; }

.game-hint {
  position: absolute;
  z-index: 2;
  top: 4%;
  right: 2%;
  max-width: 13rem;
  margin: 0;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 1rem 1rem 1rem 0.25rem;
  background: var(--card);
  color: var(--ink);
  font: 700 0.95rem/1.25 var(--sans);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(0.4rem) scale(0.9);
  transform-origin: left bottom;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.game-hint.is-shown { opacity: 1; transform: none; }

@keyframes drbena-wiggle {
  25% { transform: rotate(-4deg); }
  50% { transform: rotate(3deg); }
  75% { transform: rotate(-2deg); }
}

@keyframes drbena-heart {
  40% { transform: translateY(-0.6rem) scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .mascot.is-tapped > img, .mascot.is-tapped > .heart { animation: none; }
  .game-hint { transition: none; }
}
/* Odkazy pod akcí v kalendáři a na titulce: zpráva na drbně, odkaz jinam. */
.event-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.6rem 0 0; }
.event-links a { color: var(--brand-dark); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.event-links a:hover { text-decoration: underline; }

/* Štítek „Dnes“ u akce na titulce i ve stránce akcí. */
.today-tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--paper);
}

/* Zrušená akce: zůstává v kalendáři se štítkem a přeškrtnutým názvem. */
.cancel-tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}
.is-cancelled h3 { text-decoration: line-through; text-decoration-thickness: 2px; }
.event-card.is-cancelled .event-date,
.event-card.is-cancelled .meta,
.event-card.is-cancelled .muted { opacity: 0.6; }

/* Stránka akcí bez karet (plán PLAN-VZHLED.md, obal `.flat`): hlavička `pageTop`, Dnes se koná jako podbarvená plocha,
   kalendář (calendar.css) a seznamy začínají tmavou linkou, akce dělí tenká linka. */

/* Za Drběnou s kalendářem slunce, ne ciferník stránek služeb. */
.events-page .page-sun { background: var(--area-sun); }
/* Pod hlavičkou je plocha Dnes nebo tmavá linka kalendáře, tenká linka by byla navíc. */
.events-page .page-head { margin-bottom: 1.5rem; border-bottom: 0; }

.events-today {
  margin: 0 0 2.5rem;
  padding: 1rem 1.2rem 0.2rem;
  border-radius: 1.1rem;
  background: var(--area-plate);
}
.events-today-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--area-rule);
}
.events-today-head h2 { flex: 1; margin: 0; font-size: 1.25rem; line-height: 1.2; }
.events-today-date { margin: 0; color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.events-today-icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0.38rem;
  border-radius: 999px;
  background: var(--area-tint);
  fill: none;
  stroke: var(--area-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.events-today .event-card { border-bottom-color: rgb(74 36 27 / 0.08); }
.events-today .event-card:last-child { border-bottom: 0; }

.events-list { margin-top: 2.5rem; }
.events-list > h2 { margin: 0; padding-bottom: 0.55rem; border-bottom: 2px solid var(--ink); }
.events-none { margin: 0; padding: 1.1rem 0; }

/* Reklama mezi akcemi: vlastní podklad, kolem vzduch místo linky. */
.events-rows > .ad-panel { margin: 1.4rem 0; }
.events-rows > .ad-panel + .event-card { border-top: 1px solid var(--line); }

/* Karta akce: datum jako list z trhacího kalendáře vlevo. */
.event-card {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 1rem;
}
.event-body { max-width: 44rem; }
.event-body h3 { margin: 0.15rem 0 0.25rem; font-size: 1.3rem; line-height: 1.2; }
.event-body .meta { margin: 0 0 0.3rem; }
.event-body .muted { margin: 0.3rem 0 0; }

.event-date {
  display: grid;
  margin: 0.15rem 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--paper);
  text-align: center;
}

.event-day {
  padding: 0.35rem 0 0.15rem;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 650;
  line-height: 1;
}

.event-month {
  order: -1;
  padding: 0.2rem 0;
  background: var(--brand);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Vícedenní akce: „17.–19.“ se do listu vejde jen menším písmem. */
.event-date.is-range .event-day { padding: 0.5rem 0 0.35rem; font-size: 1.05rem; letter-spacing: -0.02em; white-space: nowrap; }
.event-date.is-range .event-month { font-size: 0.66rem; letter-spacing: 0.02em; }

.event-body > .kicker { margin-top: 0.2rem; }
.event-body > :last-child { margin-bottom: 0; }

@media (min-width: 720px) {
  .events-today { padding: 1.1rem 1.35rem 0.2rem; }
  .event-card { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 1.4rem; padding: 1.3rem 0; }
  .event-body h3 { font-size: 1.45rem; }
}
/* Měsíční kalendář na stránce Akce (src/events-calendar.js, src/events-agenda.js).
   Mobil: mřížka s tečkami (akce) a čárkami (vícedenní), pod ní seznam po dnech. Počítač: akce s časem v políčkách,
   vícedenní jako pruh přes dny, seznam jen po kliknutí na den. Okénko akce je HTML popover (public/events.js ho na počítači posadí k akci). */
.cal {
  --cal-multi: var(--pine);
  --cal-single-bg: #f9e3e3;
  --cal-off: #b3a49b;
  --cal-cancel-bg: #efe9e5;
  margin-top: 2rem;
  padding-inline: 0.9rem;
  scroll-margin-top: 1rem;
}

.cal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title nav" "sum sum";
  align-items: center;
  gap: 0.4rem 1rem;
}
.cal-head h2 { grid-area: title; margin: 0; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.05; }
.cal-head h2::first-letter { text-transform: uppercase; }
.cal-head h2:focus { outline: none; }

.cal-sum { grid-area: sum; margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.35; }
.cal-sum b { color: var(--ink); }

.cal-next {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-dark);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.cal-next:hover { text-decoration: underline; }

.cal-nav { grid-area: nav; display: flex; gap: 0.35rem; }

.cal-arrow, .cal-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.cal-arrow { font-size: 1.5rem; }
.cal-back { padding: 0 0.9rem; }
.cal-arrow:hover, .cal-back:hover { background: var(--tape); }

.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.cal-week { margin-top: 1rem; }
.cal-week span {
  padding-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
.cal-week .is-weekend { color: var(--brand-dark); }

.cal-grid { row-gap: 0.15rem; margin: 0; padding: 0; list-style: none; }

.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  min-height: 3.1rem;
  padding: 0.2rem 0 0.3rem;
  border-radius: 0.7rem;
}

.cal-num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
/* Na mobilu se ťuká na celé políčko. */
.cal-num::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cal-day.is-weekend .cal-num { color: var(--brand-dark); }
.cal-day.is-past .cal-num { color: var(--cal-off); }
.cal-day.is-today .cal-num { background: var(--brand); color: var(--paper); }
.cal-day.is-selected { background: var(--paper-deep); }
.cal-day.is-selected .cal-num { box-shadow: 0 0 0 2px var(--ink); }

.cal-events { display: none; }

.cal-lines { display: grid; gap: 2px; align-self: stretch; }
.cal-lines i { height: 4px; margin: 0 -1px; background: var(--cal-multi); }
.cal-lines i.is-first { margin-left: 30%; border-radius: 4px 0 0 4px; }
.cal-lines i.is-last { margin-right: 30%; border-radius: 0 4px 4px 0; }
.cal-lines i.is-first.is-last { border-radius: 4px; }

.cal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 2.4rem; }
.cal-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--brand); }
.cal-dots i.is-cancelled { background: var(--cal-off); }
.cal-day.is-past .cal-dots, .cal-day.is-past .cal-lines { opacity: 0.45; }

.cal-legend { display: none; }

/* Seznam po dnech pod mřížkou. */
.cal-agenda { margin-top: 1rem; padding-top: 0.2rem; border-top: 1px solid var(--line); }

.cal-group {
  margin: 1rem 0 0.2rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cal-group.is-today { color: var(--brand); }

.cal-group-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.7rem; }
.cal-group-head .cal-group { margin: 0; }

.cal-all {
  flex: none;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}
.cal-all:hover { background: var(--tape); }

.cal-rows { margin: 0; padding: 0; list-style: none; }

/* Řádek akce otevře okénko s podrobnostmi: šipka vpravo a podbarvení po ťuknutí ukážou, že se na něj dá kliknout. */
.cal-row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.2rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cal-row::after {
  content: "›";
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--brand-dark);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}
.cal-row:hover b { color: var(--brand-dark); }
.cal-row:hover::after, .cal-row:active::after { background: var(--tape); }
.cal-row:active { background: var(--paper-deep); }

.cal-row-time { align-self: start; color: var(--brand-dark); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.35; }
.cal-row.is-multi .cal-row-time { color: var(--cal-multi); }
.cal-row.is-nth .cal-row-time { font-size: 0.82rem; line-height: 1.25; }
.cal-row-body b { display: block; font-size: 1.02rem; line-height: 1.3; }
.cal-row-body small { display: block; margin-top: 0.1rem; color: var(--muted); font-size: 0.88rem; }
.cal-row.is-cancelled b { color: var(--muted); text-decoration: line-through; }

.cal-none { margin: 0.8rem 0 0.2rem; color: var(--muted); }

.cal-past { margin-top: 1rem; }
.cal-past > summary {
  padding: 0.7rem 0.9rem;
  border-radius: 0.8rem;
  background: var(--paper-deep);
  font-weight: 700;
  cursor: pointer;
}
.cal-past .cal-row { opacity: 0.75; }
.cal-past.is-all { margin-top: 0; }
.cal-past.is-all .cal-row { opacity: 1; }

.cal.is-loading .cal-grid, .cal.is-loading .cal-agenda { opacity: 0.5; transition: opacity 0.2s; }

/* Okénko akce: na mobilu vyjede zespodu, na počítači ho public/events.js posadí vedle akce. */
.cal-pop {
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: 80vh;
  margin: 0;
  padding: 1.3rem 1.2rem 1.4rem;
  overflow: auto;
  border: 0;
  border-radius: 1.3rem 1.3rem 0 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 -12px 40px rgb(74 36 27 / 0.25);
}
.cal-pop::backdrop { background: rgb(74 36 27 / 0.25); }

.cal-pop-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.cal-pop-close:hover { background: var(--paper-deep); }

.cal-pop-when { margin: 0 2.2rem 0 0; color: var(--brand-dark); font-size: 0.9rem; font-weight: 700; }
.cal-pop h3 { margin: 0.3rem 2rem 0.5rem 0; font-size: 1.35rem; line-height: 1.15; }
.cal-pop-place { margin: 0.3rem 0; font-weight: 600; }
.cal-pop-place::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border: 2px solid var(--brand);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg) translateY(-1px);
}
.cal-pop-text { margin: 0.4rem 0; color: var(--muted); }
.cal-pop .event-links { gap: 0.45rem; margin-top: 0.9rem; }
.cal-pop .event-links a {
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink);
  font-size: 0.9rem;
}
.cal-pop .event-links a:first-child { background: var(--brand); color: var(--paper); }
.cal-pop .event-links a:hover { text-decoration: none; filter: brightness(0.95); }

/* Na stránce bez karet (obal `.flat`) kalendář začíná tmavou linkou jako ostatní sekce. */
.flat .cal.card { margin-top: 2.5rem; padding: 0.9rem 0 0; border-top: 2px solid var(--ink); }
.flat .page-head + .cal.card { margin-top: 0; }

@media (min-width: 720px) {
  .cal { padding-inline: 1.6rem; }
  .flat .cal.card { padding-inline: 0; }
  .cal-head { grid-template-areas: "title nav" "sum nav"; }

  .cal-week span { padding: 0 0.55rem 0.45rem; text-align: left; }

  .cal-grid { gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--line); }

  .cal-day {
    align-items: stretch;
    gap: 0.25rem;
    min-height: 7rem;
    padding: 0.35rem 0.35rem 0.5rem;
    border-radius: 0;
    background: var(--card);
  }
  .cal-day.is-weekend { background: #fcf3e8; }
  .cal-day.is-blank { background: #faf4ee; }
  .cal-day.is-today { box-shadow: inset 0 0 0 2px var(--brand); }
  .cal-day.is-selected { background: var(--paper-deep); }
  .cal-num { width: 1.75rem; height: 1.75rem; font-size: 0.95rem; }
  .cal-num::after { content: none; }
  .cal-num:hover { background: var(--paper-deep); }
  .cal-day.is-today .cal-num:hover { background: var(--brand-dark); }
  .cal-day.is-weekend .cal-num { color: var(--ink); }
  .cal-day.is-past .cal-num { color: var(--cal-off); }

  .cal-lines, .cal-dots { display: none; }

  .cal-events { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
  .cal-events li { min-width: 0; }
  .cal-events button {
    display: block;
    width: 100%;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .cal-day.is-past .cal-events { opacity: 0.5; }

  .cal-chip button {
    padding: 0.2rem 0.4rem 0.25rem;
    border-left: 3px solid var(--brand);
    border-radius: 0.35rem;
    background: var(--cal-single-bg);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .cal-chip button:hover { background: #f4d0d0; }
  .cal-chip time { display: block; color: var(--brand-dark); font-size: 0.72rem; font-weight: 700; }
  .cal-chip.is-cancelled button { border-left-color: var(--cal-off); background: var(--cal-cancel-bg); color: var(--muted); }
  .cal-chip.is-cancelled span { text-decoration: line-through; }
  .cal-chip.is-cancelled time { color: var(--muted); }
  .cal-chip.is-cancelled time::after { content: " · zrušeno"; }

  /* Pruh vícedenní akce sahá přes mezeru do dalšího dne; na konci týdne končí v políčku a v pondělí začne znovu.
     Barvu má položka, tlačítko s názvem je přes ni a sahá přes všechny dny pruhu v týdnu (`run-N`). */
  .cal-gap, .cal-bar { height: 1.45rem; }
  .cal-bar { position: relative; z-index: 1; margin: 0 calc(-0.35rem - 1px); background: var(--cal-multi); }
  .cal-bar button {
    position: relative;
    height: 100%;
    padding: 0 0.45rem;
    overflow: hidden;
    background: none;
    color: var(--paper);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.45rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cal-bar:hover { filter: brightness(1.12); }
  .cal-bar.is-first { margin-left: 0; border-radius: 0.35rem 0 0 0.35rem; }
  .cal-bar.is-last { margin-right: 0; border-radius: 0 0.35rem 0.35rem 0; }
  .cal-bar.is-first.is-last { border-radius: 0.35rem; }
  .cal-grid > .cal-day:nth-child(7n) .cal-bar { margin-right: 0; }
  .cal-grid > .cal-day:nth-child(7n + 1) .cal-bar { margin-left: 0; }
  .cal-bar:not(.is-cont) { z-index: 2; }
  .cal-bar.run-2 { --run: 2; }
  .cal-bar.run-3 { --run: 3; }
  .cal-bar.run-4 { --run: 4; }
  .cal-bar.run-5 { --run: 5; }
  .cal-bar.run-6 { --run: 6; }
  .cal-bar.run-7 { --run: 7; }
  .cal-bar[class*="run-"] button { width: calc(var(--run) * (100% + 0.35rem) - 0.7rem); }
  .cal-bar.is-cancelled { background: var(--cal-off); }
  .cal-bar.is-cancelled button { text-decoration: line-through; }

  .cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0.8rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
  }
  .cal-legend span::before {
    content: "";
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.35rem;
    border-radius: 0.2rem;
    vertical-align: -1px;
  }
  .cal-legend .is-single::before { background: var(--brand); }
  .cal-legend .is-multi::before { background: var(--cal-multi); }
  .cal-legend .is-cancelled::before { background: var(--cal-off); }

  /* Seznam po dnech na počítači jen pro vybraný den. */
  .cal-agenda { display: none; }
  .cal-agenda.is-day { display: block; max-width: 40rem; }

  .cal-pop {
    inset: 0;
    width: min(22rem, calc(100vw - 2rem));
    height: fit-content;
    max-height: calc(100vh - 2rem);
    margin: auto;
    border-radius: 1.1rem;
    box-shadow: 0 20px 50px rgb(74 36 27 / 0.25);
  }
  .cal-pop::backdrop { background: transparent; }
  /* public/events.js nastaví left/top podle akce. */
  .cal-pop.is-placed { inset: auto; margin: 0; }
}
/* Kapitoly o Kopidlně (src/kopidlno/view.js): přehled podle témat s dlaždicemi a fotky kapitoly (i v povídačkách).
   List kroniky jedné kapitoly je v kronika.css. */

.kop-hero {
  display: grid;
  gap: 0.5rem;
  padding-bottom: 0;
  overflow: hidden;
}
.kop-hero-copy h1 { margin: 0.7rem 0 0.6rem; }
.kop-hero-copy .lede { margin: 0 0 0.6rem; }
.kop-hero-drbena { display: flex; justify-content: center; align-items: flex-end; }
.kop-hero-drbena img {
  display: block;
  width: min(56%, 13rem);
  height: auto;
  margin-bottom: -0.3rem;
  filter: drop-shadow(0 18px 16px rgb(61 38 27 / 0.18));
}

.kop-empty { margin-top: 1.5rem; }

/* Nově přidané (src/kopidlno/view.js, od NEW_FROM kapitol): malé karty s fotkou a nadpisem, na mobilu posuvný řádek. */
.kop-new { margin-top: 1.6rem; }
.kop-new-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.kop-new h2 { margin: 0; font-size: 1.5rem; }
.kop-new-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 42%;
  gap: 0.8rem;
  /* Místo pro stín karet, jinak ho posuvný řádek ořízne do rovné hrany. */
  margin: -0.5rem -0.75rem -1.2rem;
  padding: 0.5rem 0.75rem 1.6rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.75rem;
  /* Posuvník schovaný jako u pruhu témat: že jde řádek posunout, ukazuje useknutá třetí karta. */
  scrollbar-width: none;
}
.kop-new-list::-webkit-scrollbar { display: none; }
.kop-new-list li { scroll-snap-align: start; }
.kop-new-tile {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.kop-new-tile .kop-tile-photo { aspect-ratio: 3 / 2; }
.kop-new-tile strong { padding: 0.6rem 0.8rem 0.75rem; font-family: var(--display); font-size: 1.02rem; line-height: 1.2; }
.kop-new-tile:hover strong { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 0.2em; }

/* Rozcestník témat (od tří témat): štítky s počtem, při posouvání se drží nahoře. Téma na očích zvýrazní public/kopidlno.js.
   Na mobilu jeden řádek, který jde posunout prstem. */
.kop-index {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 1.4rem -0.75rem 0;
  padding: 0.55rem 0.75rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
}
.kop-index-in { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; }
.kop-index-in::-webkit-scrollbar { display: none; }
.kop-index a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.kop-index a:hover { color: var(--brand-dark); border-color: var(--brand-dark); }
.kop-index span {
  min-width: 1.5rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--muted);
  background: var(--paper-deep);
  border-radius: 999px;
}
/* Šipky v pruhu témat (public/scroll-arrows.js, .scroll-arrow v site-base.css): přechod do pozadí pod šipkou zakryje
   štítky, které pod ní jsou. */
.kop-index .scroll-arrow::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  bottom: -0.6rem;
  z-index: -1;
  width: 3.4rem;
  pointer-events: none;
}
.kop-index .scroll-arrow-prev::before { left: -0.4rem; background: linear-gradient(to right, var(--paper) 55%, transparent); }
.kop-index .scroll-arrow-next::before { right: -0.4rem; background: linear-gradient(to left, var(--paper) 55%, transparent); }

.kop-index a.is-on { color: #fff; background: var(--ink); border-color: var(--ink); }
.kop-index a.is-on span { color: var(--ink); background: var(--paper); }

.kop-topic { margin-top: 1.8rem; scroll-margin-top: 4.2rem; }
.kop-topic h2, .chapter-more h2 { margin: 0 0 0.8rem; font-size: 1.5rem; }
.kop-count { margin-left: 0.2rem; font-family: var(--body, inherit); font-size: 0.95rem; font-weight: 700; color: var(--muted); vertical-align: middle; }

/* Dlouhé téma: zbytek kapitol po rozbalení, bez JS. Po rozbalení tlačítko zmizí. */
.kop-more { margin-top: 1rem; }
.kop-more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  list-style: none;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.kop-more summary::-webkit-details-marker { display: none; }
.kop-more summary::after { content: "▾"; }
.kop-more[open] summary { display: none; }

.kop-tiles {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Na mobilu řádek s malou fotkou vlevo, od 640 px dlaždice s fotkou nahoře. */
.kop-tile {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  align-content: start;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.kop-tile:hover strong { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 0.2em; }

.kop-tile-photo { position: relative; display: block; min-height: 5.6rem; background: var(--paper-deep); }
.kop-tile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}
/* Celý obrázek na dlaždici (znak, mapa, plakát; volba v redakci): na bílém, nebo s rozmazanou kopií obrázku za ním. */
.kop-tile-photo.kop-fit-cela,
.kop-tile-photo.kop-fit-rozmazane { position: relative; overflow: hidden; }
.kop-tile-photo.kop-fit-cela { background: #fff; }
.kop-tile-photo .kop-tile-whole { position: relative; object-fit: contain; padding: 0.5rem; }
.kop-tile-photo .kop-tile-blur {
  position: absolute;
  inset: -1.5rem;
  width: calc(100% + 3rem);
  height: calc(100% + 3rem);
  object-fit: cover;
  filter: blur(18px) saturate(1.1);
  opacity: 0.85;
}

.kop-tile-empty {
  display: block;
  height: 100%;
  background: radial-gradient(circle at 70% 30%, var(--tape), transparent 60%), var(--paper-deep);
}

.kop-tile-text { display: grid; align-content: start; gap: 0.2rem; padding: 0.65rem 0.8rem; }
.kop-tile-text strong { font-family: var(--display); font-size: 1.05rem; line-height: 1.2; }
/* Perex nejvýš na dva řádky (na počítači tři), ať jsou karty v řadě stejně vysoké a stránka krátká. */
.kop-tile-text span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--muted);
}


.chapter-intro {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.9rem 1rem;
  background: rgb(244 215 162 / 0.45);
  border-radius: 1.2rem;
}
.chapter-intro img { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 999px; background: var(--paper); object-fit: cover; }
.chapter-intro p { margin: 0; line-height: 1.5; }

/* Jako tabulka: figure je široká jako fotka a popisek se zalomí na její šířku. */
.chapter-cover { display: table; margin: 0 auto; }
/* Úvodní fotka v kartě nahoře celá, bez ořezu: na šířku vyplní sloupec, na výšku (znak, věž) je užší a nízká,
   ať hlavička nepřeroste text vedle. Na dlaždici v přehledu se ořezává dál (bod výřezu z redakce). */
.chapter-cover > a {
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: 1.2rem;
  cursor: zoom-in;
}
.chapter-cover img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: min(55vh, 22rem);
  border-radius: 1.2rem;
}
/* Na mobilu je fotka pod textem přes celou šířku: na výšku ji stáhne víc. */
@media (max-width: 899px) {
  .chapter-cover img { max-height: min(45vh, 18rem); }
}

.chapter-photo { margin: 0 0 1.4rem; }
.chapter-photo > a {
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--paper-deep);
  border-radius: 1.2rem;
  cursor: zoom-in;
}
.chapter-photo img { display: block; max-width: 100%; height: auto; max-height: min(70vh, 36rem); }
.chapter-cover figcaption, .chapter-photo figcaption {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.45rem;
  font-size: 0.95rem;
  line-height: 1.4;
}
.chapter-cover figcaption span, .chapter-photo figcaption span { color: var(--ink); }
.chapter-cover figcaption small, .chapter-photo figcaption small { color: var(--muted); font-size: 0.85rem; }
.chapter-cover figcaption a, .chapter-photo figcaption a { color: inherit; }

.chapter-layout { display: grid; gap: 2rem; margin-top: 2rem; }
.chapter-text { max-width: none; }
.chapter-text > :first-child { margin-top: 0; }
.chapter-text .chapter-photo { margin: 1.2rem 0 1.4rem; }

.chapter-side { display: grid; gap: 1.6rem; align-content: start; }
.chapter-side > * { margin: 0; }
.chapter-side h2 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.chapter-side .chapter-news, .chapter-side .chapter-sources { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.chapter-side .chapter-where + .chapter-news, .chapter-side .chapter-where + .chapter-sources { padding-top: 0; border-top: 0; }
.chapter-side li { font-size: 0.95rem; }
.chapter-fill { display: grid; gap: 1.6rem; }
.chapter-fill[hidden], .chapter-fill [hidden] { display: none; }
.chapter-fill .ad-slot { margin: 0; }
.chapter-fill .more-news { margin: 0; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.chapter-fill .ad-panel.has-photo .ad-layout { grid-template-columns: 1fr; align-items: start; }
.chapter-fill .ad-panel.has-photo .ad-photo { max-height: 11rem; }

.chapter-gallery { margin-top: 2rem; }
.chapter-more { margin-top: 2.6rem; }
.chapter-gallery h2 { margin: 0 0 0.7rem; font-size: 1.3rem; }
.chapter-gallery-grid { display: grid; gap: 1rem; }
.chapter-gallery-grid .chapter-photo { margin: 0; }

.chapter-where p { margin: 0.2rem 0; }
.chapter-where a, .chapter-news a, .kop-sources a, .chapter-back a { color: var(--brand-dark); font-weight: 700; }

.chapter-news li, .kop-sources li { margin: 0.35rem 0; line-height: 1.45; }
.kop-sources a { overflow-wrap: anywhere; }

.chapter-updated { font-size: 0.9rem; }
.chapter-back { margin: 2rem 0 0; }

@media (min-width: 640px) {
  .kop-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kop-tile { grid-template-columns: none; grid-template-rows: auto 1fr; }
  .kop-tile-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .kop-tile-text { gap: 0.3rem; padding: 0.9rem 1.1rem 1.1rem; }
  .kop-tile-text strong { font-size: 1.15rem; }
  .kop-tile-text span { -webkit-line-clamp: 3; font-size: 0.95rem; line-height: 1.45; }
  .kop-index-in { flex-wrap: wrap; }
  .chapter-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .kop-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    padding: 2rem 2.2rem 0;
  }
  .kop-hero-copy { padding-bottom: 1.8rem; }
  .kop-hero-drbena img { width: 16rem; }
  .kop-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kop-new-list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .chapter-layout { grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 2.6rem; align-items: start; }
}

/* Pod zprávou: odkaz na kapitolu o místě nebo člověku, o kterém zpráva je (src/kopidlno/related.js). */
.article-chapters { display: flex; gap: 0.7rem; align-items: center; margin-top: 1.4rem; color: var(--muted); font-size: 0.95rem; }
.article-chapters img { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--paper); object-fit: cover; }
.article-chapters p { margin: 0; line-height: 1.5; }
.article-chapters a { color: var(--brand-dark); font-weight: 700; text-underline-offset: 0.2em; }

/* Náhled skryté kapitoly pro redakci (?nahled=1). */
.chapter-preview { margin: 0 0 1rem; background: rgb(244 215 162 / 0.55); font-weight: 700; }

/* Pod textem kapitoly: povídačky, které se o místě vyprávějí (src/kopidlno/chapter-view.js, dlaždice z povídaček). */
.chapter-tales { margin-top: 2.6rem; }
.chapter-tales h2 { margin: 0 0 0.8rem; font-size: 1.5rem; }
/* Kapitola o Kopidlně jako list z obecní kroniky (src/kopidlno/chapter-view.js): zažloutlý papír s dvojitou linkou kolem,
   nadpis uprostřed s ozdobou (public/povidacky-ozdoba.svg jako maska), patkové písmo, iniciála, mezititulky mezi linkami,
   fotky vlepené do papírových rožků, lístek od Drběny a okraj listu se Kde to najdete, Psali jsme a tlačítkem Odkud to víme
   (okno se zdroji, HTML popover). Pod listem povídačky a další kapitoly jako na přehledu. */

.chron {
  --leaf: #f8efda;
  --leaf-deep: #efe1c2;
  --leaf-edge: #e2cfa8;
  --rule: rgb(120 72 40 / 0.35);
  --corner: #5a3a26;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

/* List: papír tmavší k okrajům, okraje dalších listů pod spodní hranou, uvnitř dvojitá linka. */
.chron-sheet {
  position: relative;
  padding: 2rem 1.3rem 2.2rem;
  background:
    radial-gradient(ellipse at 50% 35%, rgb(255 252 240 / 0.7), transparent 65%),
    radial-gradient(ellipse at 100% 100%, rgb(150 100 40 / 0.1), transparent 45%),
    radial-gradient(ellipse at 0 0, rgb(150 100 40 / 0.08), transparent 40%),
    var(--leaf);
  border-radius: 0.35rem;
  box-shadow: 0 2px 0 #f2e5c8, 0 4px 0 var(--leaf-edge), 0 6px 0 #efe0c0, 0 8px 0 #dcc597, var(--shadow);
}
.chron-sheet::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border: 3px double var(--rule);
  pointer-events: none;
}

.chron-head { position: relative; text-align: center; }
.chron-head .crumbs { justify-content: center; }
.chron-head h1 {
  margin: 0.9rem 0 0.3rem;
  font-size: clamp(2.3rem, 7vw, 3.7rem);
  line-height: 1;
  text-wrap: balance;
}
.chron-head .lede {
  max-width: 38rem;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.55;
  text-wrap: pretty;
}

.chron-ornament {
  display: block;
  width: min(13rem, 65%);
  aspect-ratio: 10 / 1;
  margin: 0.4rem auto 0.9rem;
  background: var(--brand-dark);
  opacity: 0.65;
  mask: url("/povidacky-ozdoba.svg") center / contain no-repeat;
  -webkit-mask: url("/povidacky-ozdoba.svg") center / contain no-repeat;
}
.chron-end { margin: 2rem auto 0; }

/* Úvodní fotka vlepená do kroniky a vedle ní (na mobilu pod ní) lístek od Drběny. */
.chron-opening {
  display: grid;
  gap: 1.6rem;
  justify-items: center;
  margin: 1.8rem 0 0.4rem;
}
.chron-opening .chapter-intro {
  position: relative;
  max-width: 24rem;
  padding: 1rem 1.1rem;
  font-family: var(--serif);
  background: #fffaf0;
  border-radius: 0.2rem;
  box-shadow: 0 6px 16px rgb(83 49 32 / 0.14);
  transform: rotate(1.2deg);
}
/* Kousek lepicí pásky nahoře na lístku. */
.chron-opening .chapter-intro::before {
  content: "";
  position: absolute;
  top: -0.65rem;
  left: 50%;
  width: 5.5rem;
  height: 1.3rem;
  background: rgb(244 215 162 / 0.75);
  transform: translateX(-50%) rotate(-3deg);
}
.chron-opening .chapter-intro p { font-size: 1.05rem; }

/* Fotky vlepené do rožků: bílý okraj fotografie a nad ní čtyři tmavé papírové rožky (jeden pseudo-prvek přes celou fotku). */
.chron .chapter-cover > a,
.chron .chapter-photo > a {
  position: relative;
  overflow: visible;
  padding: 0.45rem;
  background: #fff;
  border-radius: 0.1rem;
  box-shadow: 0 1px 2px rgb(83 49 32 / 0.2), 0 8px 18px rgb(83 49 32 / 0.12);
}
.chron .chapter-cover img,
.chron .chapter-photo img { border-radius: 0; }
.chron .chapter-cover > a::after,
.chron .chapter-photo > a::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  --c: 1.5rem;
  background:
    linear-gradient(135deg, var(--corner) 50%, transparent 50%) top left / var(--c) var(--c) no-repeat,
    linear-gradient(225deg, var(--corner) 50%, transparent 50%) top right / var(--c) var(--c) no-repeat,
    linear-gradient(45deg, var(--corner) 50%, transparent 50%) bottom left / var(--c) var(--c) no-repeat,
    linear-gradient(315deg, var(--corner) 50%, transparent 50%) bottom right / var(--c) var(--c) no-repeat;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25));
  pointer-events: none;
}
.chron .chapter-cover > a { transform: rotate(-0.8deg); }
.chron .chapter-cover figcaption,
.chron .chapter-photo figcaption { margin-top: 0.7rem; font-family: var(--serif); font-style: italic; text-align: center; }
.chron .chapter-cover figcaption small,
.chron .chapter-photo figcaption small { font-family: var(--sans); font-style: normal; }
.chron .chapter-cover { display: block; max-width: 100%; }
.chron .chapter-cover > a { display: table; margin: 0 auto; }

/* Text kroniky: patkové písmo, iniciála na začátku, mezititulky mezi linkami. */
.chron .chapter-layout { margin-top: 2.2rem; }
.chron .chapter-text {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.7;
  hyphens: auto;
}
.chron .chapter-text > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--display);
  font-size: 3.6em;
  font-weight: 650;
  line-height: 0.8;
  color: var(--brand-dark);
}
.chron .chapter-text h2,
.chron .chapter-text h3 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 2rem 0 0.8rem;
  text-align: center;
  text-wrap: balance;
}
.chron .chapter-text h2::before, .chron .chapter-text h2::after,
.chron .chapter-text h3::before, .chron .chapter-text h3::after {
  content: "";
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-top: 1px solid var(--rule);
}
.chron .chapter-text a { color: var(--brand-dark); text-underline-offset: 0.2em; }
.chron .chapter-text .chapter-photo { margin: 1.8rem 0 2rem; font-family: var(--sans); }
.chron .chapter-text blockquote { margin: 0 0 1rem; padding-left: 1rem; font-style: italic; border-left: 3px solid var(--tape); }
.chron .chapter-gallery h2 { font-family: var(--display); text-align: center; }
.chron .chapter-gallery-grid { gap: 1.8rem; }

/* Okraj listu: poznámky oddělené linkou, na počítači svislá linka od textu. */
.chron .chapter-side { font-family: var(--serif); }
.chron .chapter-side h2 { font-family: var(--display); }
.chron .chapter-side .chapter-news,
.chron .chapter-side .chapter-sources,
.chron .chapter-fill .more-news { border-top-color: var(--rule); }
.chron .chapter-fill { font-family: var(--sans); }
.chron .chapter-where { padding: 1rem 1.1rem; background: rgb(255 252 242 / 0.7); border: 1px solid var(--leaf-edge); border-radius: 0.2rem; box-shadow: none; }

/* Odkud to víme: tlačítko na okraji a okno se zdroji. */
.chron-sources-open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  font: inherit;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--brand-dark);
  background: rgb(255 252 242 / 0.8);
  border: 1px solid var(--leaf-edge);
  border-radius: 999px;
  cursor: pointer;
}
.chron-sources-open::before { content: "§"; font-family: var(--display); font-size: 1.15rem; line-height: 1; }
.chron-sources-open:hover { border-color: var(--brand-dark); }

.chron-pop {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(80vh, 40rem);
  padding: 1.3rem 1.4rem 1rem;
  color: var(--ink);
  background: var(--leaf, #f8efda);
  border: 0;
  border-radius: 0.4rem;
  box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 0.25);
  overflow: hidden;
}
.chron-pop:popover-open { display: flex; flex-direction: column; }
.chron-pop::backdrop { background: rgb(40 25 15 / 0.45); }
.chron-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.chron-pop h2 { margin: 0; font-size: 1.4rem; }
.chron-pop > p { margin: 0.3rem 0 0.8rem; font-size: 0.95rem; }
.chron-pop-close {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  background: rgb(255 255 255 / 0.6);
  border: 1px solid var(--leaf-edge);
  border-radius: 999px;
  cursor: pointer;
}
.chron-pop-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; font-family: var(--serif); }
.chron-pop-body .kop-sources { margin: 0; }
.chron-pop-body li { padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.chron-pop-body li:first-child { border-top: 0; }

@media (min-width: 640px) {
  .chron-sheet { padding: 2.8rem 2.6rem 3rem; }
  .chron-sheet::before { inset: 0.9rem; }
}

@media (min-width: 900px) {
  .chron-sheet { padding: 3.2rem 3.4rem 3.4rem; }
  /* Fotka a lístek vedle sebe uprostřed listu, lístek trochu přes okraj fotky. */
  .chron-opening { grid-template-columns: auto minmax(14rem, 20rem); justify-content: center; align-items: center; gap: 0; }
  .chron-opening-plain { grid-template-columns: minmax(0, 24rem); }
  .chron-opening .chapter-intro { z-index: 1; margin-left: -1.2rem; }
  .chron-opening-plain .chapter-intro { margin-left: 0; }
  .chron .chapter-layout { gap: 2.4rem; }
  .chron .chapter-side { padding-left: 1.6rem; border-left: 1px solid var(--rule); }
}
/* Přehled kapitol /o-kopidlne jako obsah kroniky (src/kopidlno/view.js): celá stránka je jeden list z kronika.css,
   nahoře nadpis s Drběnou, Obsah (pruh témat) jako řádek oddílů, témata očíslovaná římsky mezi linkami a dlaždice
   jako fotky vlepené do rožků s popiskem na papíře. Povídačky a výsledky hledání mají dlaždice postaru. */

.chron-index .chron-sheet { padding-bottom: 2.6rem; }

/* Nadpis: na papíře bez karty, Drběna s pohlednicí stojí na spodní lince. */
.chron-index .kop-hero { padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.chron-index .kop-hero .pill {
  display: inline-block;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: none;
}
.chron-index .kop-hero h1 { font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: 1; }
.chron-index .kop-hero .lede { font-family: var(--serif); font-size: 1.15rem; font-style: italic; line-height: 1.55; }
.chron-index .kop-hero-drbena img { margin-bottom: 0; }
.chron-index > .chron-sheet > .chron-ornament { margin: 0.6rem auto 0; }

/* Nadpisy oddílů: římské číslo, název a počet uprostřed mezi linkami. */
.chron-index .kop-topic h2,
.chron-index .kop-new h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  text-align: center;
}
.chron-index .kop-topic h2::before, .chron-index .kop-topic h2::after,
.chron-index .kop-new h2::before, .chron-index .kop-new h2::after {
  content: "";
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-top: 1px solid var(--rule);
}
.chron-index .kop-new-head { display: block; }
.kop-num { font-family: var(--serif); font-weight: 400; color: var(--brand-dark); }
.chron-index .kop-count { font-family: var(--serif); font-weight: 400; font-style: italic; }
.chron-index .kop-topic { margin-top: 2.6rem; }

/* Obsah: oddíly jako řádek odkazů na papíře, drží se nahoře. */
.chron-index .kop-index {
  margin: 1.6rem -0.4rem 0;
  padding: 0.5rem 0.4rem;
  background: color-mix(in srgb, var(--leaf) 94%, transparent);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.chron-index .kop-index a {
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  background: none;
  border: 0;
  border-radius: 0.2rem;
}
.chron-index .kop-index a i { color: var(--brand-dark); }
.chron-index .kop-index a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.chron-index .kop-index span { min-width: 0; padding: 0; font-style: italic; background: none; }
.chron-index .kop-index a.is-on { color: var(--ink); background: rgb(255 252 240 / 0.9); box-shadow: inset 0 -2px 0 var(--brand-dark); }
.chron-index .kop-index a.is-on i { color: var(--brand-dark); }
.chron-index .kop-index a.is-on span { color: var(--muted); background: none; }
.chron-index .kop-index .scroll-arrow-prev::before { background: linear-gradient(to right, var(--leaf) 55%, transparent); }
.chron-index .kop-index .scroll-arrow-next::before { background: linear-gradient(to left, var(--leaf) 55%, transparent); }

/* Dlaždice: fotka s bílým okrajem a rožky, pod ní (na mobilu vedle ní) nadpis a perex na papíře. */
.chron-index .kop-tile,
.chron-index .kop-new-tile {
  overflow: visible;
  gap: 0.2rem 0.9rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.chron-index .kop-tile-photo {
  position: relative;
  min-height: 4.6rem;
  margin: 0.2rem;
  background: var(--leaf-deep);
  border: 0.3rem solid #fff;
  box-shadow: 0 1px 2px rgb(83 49 32 / 0.2), 0 6px 14px rgb(83 49 32 / 0.12);
}
.chron-index .kop-tile-photo.kop-fit-cela,
.chron-index .kop-tile-photo.kop-fit-rozmazane { overflow: hidden; }
.chron-index .kop-tile-photo::after {
  content: "";
  position: absolute;
  inset: -0.45rem;
  --c: 0.8rem;
  background:
    linear-gradient(135deg, var(--corner) 50%, transparent 50%) top left / var(--c) var(--c) no-repeat,
    linear-gradient(225deg, var(--corner) 50%, transparent 50%) top right / var(--c) var(--c) no-repeat,
    linear-gradient(45deg, var(--corner) 50%, transparent 50%) bottom left / var(--c) var(--c) no-repeat,
    linear-gradient(315deg, var(--corner) 50%, transparent 50%) bottom right / var(--c) var(--c) no-repeat;
  pointer-events: none;
}
/* Rozmazaná kopie obrázku by přetekla přes bílý okraj: ořízne ji vnitřek, rožky jdou přes okraj jen u běžné fotky. */
.chron-index .kop-fit-cela::after, .chron-index .kop-fit-rozmazane::after { inset: 0; --c: 0.8rem; }
.chron-index .kop-tile-empty {
  background:
    linear-gradient(var(--leaf-deep), var(--leaf-deep)) padding-box,
    radial-gradient(circle at 70% 30%, var(--tape), transparent 60%);
  opacity: 0.8;
}
.chron-index li:nth-child(3n + 1) .kop-tile-photo { transform: rotate(-0.8deg); }
.chron-index li:nth-child(3n + 2) .kop-tile-photo { transform: rotate(0.6deg); }
.chron-index li:nth-child(3n) .kop-tile-photo { transform: rotate(-0.3deg); }

.chron-index .kop-tile-text { padding: 0.15rem 0; }
.chron-index .kop-tile-text strong,
.chron-index .kop-new-tile strong { font-family: var(--display); }
.chron-index .kop-tile-text span { font-family: var(--serif); font-style: italic; color: #6f5d52; }
.chron-index .kop-new-tile strong { padding: 0.7rem 0.1rem 0; text-align: center; }
.chron-index .kop-tile:hover strong,
.chron-index .kop-new-tile:hover strong { color: var(--brand-dark); }

.chron-index .kop-more summary { font-family: var(--serif); background: rgb(255 252 242 / 0.8); border-color: var(--leaf-edge); }
.chron-index .kop-empty { background: none; box-shadow: none; text-align: center; font-family: var(--serif); font-style: italic; }

/* Nově přidané: posuvný řádek na papíře, stíny fotek nesmí ořezat. */
.chron-index .kop-new-list { margin: -0.6rem -0.4rem -1rem; padding: 0.6rem 0.4rem 1.2rem; }

@media (min-width: 640px) {
  .chron-index .kop-tiles { gap: 2rem 1.6rem; }
  .chron-index .kop-tile-photo { min-height: 0; }
  .chron-index .kop-tile-photo::after { --c: 1rem; }
  .chron-index .kop-tile-text { padding: 0.75rem 0.1rem 0; text-align: center; }
}

@media (min-width: 900px) {
  .chron-index .kop-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: end; padding: 0; }
  .chron-index .kop-hero-copy { padding-bottom: 1.2rem; }
  .chron-index .kop-new-list { margin: 0; padding: 0; }
}
/* Kopidlenské povídačky (src/povidacky/): přehled má dlaždice z kopidlno.css, stránka povídačky se čte jako pohádková
   knížka přes celou šířku webu: na počítači otevřená dvojstrana s hřbetem uprostřed (vlevo nadpis a fotka, vpravo text),
   na mobilu jeden list. Zažloutlý papír s dvojitým rámečkem, patkové písmo, zdobená iniciála, ozdoba
   public/povidacky-ozdoba.svg (maska obarvená v CSS) pod nadpisem a na konci, pod knížkou Co je na tom pravdy. */

/* Kdo vypráví a doba čtení vždy dole na dlaždici, i když je perex kratší než u sousedů. */
.tale-tile .kop-tile-text { display: flex; flex-direction: column; }
.tale-tile-meta { margin-top: auto; padding-top: 0.15rem; color: var(--muted); font-size: 0.85rem; }

.tale-page { --leaf: #fbf2e1; --leaf-edge: #ecdcc0; --frame: rgb(157 51 60 / 0.3); }

/* Knížka: papír s okraji listů pod spodní hranou, každý list s dvojitým rámečkem. */
.tale-book {
  display: grid;
  border-radius: 0.6rem 0.6rem 0.9rem 0.9rem;
  background: var(--leaf);
  box-shadow: 0 2px 0 #f3e6cf, 0 4px 0 var(--leaf-edge), 0 6px 0 #f1e3ca, 0 8px 0 #e3cfae, var(--shadow);
}
.tale-leaf { position: relative; min-width: 0; padding: 2.2rem 1.5rem 2.4rem; }
.tale-leaf::before {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border: 3px double var(--frame);
  border-radius: 0.3rem;
  pointer-events: none;
}
.tale-leaf-title { background: radial-gradient(ellipse at 50% 0, rgb(255 255 255 / 0.55), transparent 70%); }

.tale-head { margin-bottom: 1.6rem; text-align: center; }
.tale-head .crumbs { justify-content: center; }
.tale-head h1 { margin: 0.8rem 0 0.2rem; font-size: clamp(2.1rem, 7vw, 3.3rem); line-height: 1.02; text-wrap: balance; }
.tale-head h1.tale-title-long { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.08; }
.tale-meta { margin: 0 0 1rem; color: var(--muted); font-size: 0.95rem; font-style: italic; }
.tale-head .lede { margin: 0 auto 1.2rem; }
.tale-intro { margin: 0; font-style: italic; line-height: 1.55; }
.tale-bubble { margin-top: 0.2rem; text-align: left; background: rgb(244 215 162 / 0.45); }
/* Levý list, který se nevejde na první obrazovku: menší písmo a mezery po krocích (public/story-leaf.js). */
.tale-fit-1 .tale-head { margin-bottom: 1.1rem; }
.tale-fit-1 .tale-head h1 { margin-top: 0.5rem; font-size: 2.5rem; line-height: 1.08; }
.tale-fit-1 .tale-ornament { margin: 0.3rem auto 0.5rem; }
.tale-fit-1 .tale-meta { margin-bottom: 0.6rem; }
.tale-fit-1 .tale-head .lede { margin-bottom: 0.7rem; font-size: 0.98rem; line-height: 1.42; }
.tale-fit-1 .tale-intro { font-size: 0.98rem; line-height: 1.42; }
.tale-fit-1 .tale-bubble { padding: 0.6rem 0.8rem; font-size: 0.92rem; }
.tale-fit-1 .tale-bubble p { line-height: 1.4; }
.tale-fit-1 .tale-bubble img { width: 2.8rem; height: 2.8rem; }
.tale-fit-2 .tale-head { margin-bottom: 0.8rem; }
.tale-fit-2 .tale-head h1 { font-size: 2.05rem; }
.tale-fit-2 .tale-meta { font-size: 0.88rem; }
.tale-fit-2 .tale-head .lede, .tale-fit-2 .tale-intro { font-size: 0.9rem; line-height: 1.36; }
.tale-fit-2 .tale-bubble { font-size: 0.85rem; }
.tale-fit-2 .tale-bubble p { line-height: 1.34; }

.tale-ornament {
  display: block;
  width: min(14rem, 70%);
  aspect-ratio: 10 / 1;
  margin: 0.5rem auto 0.9rem;
  background: var(--brand-dark);
  opacity: 0.7;
  mask: url("/povidacky-ozdoba.svg") center / contain no-repeat;
  -webkit-mask: url("/povidacky-ozdoba.svg") center / contain no-repeat;
}

/* Úvodní fotka celá a bez ořezu jako v kapitole, ona i fotky v textu v rámečku jako ilustrace v knížce. */
.tale-cover { margin: 0; }
.tale-cover > a, .tale-book .chapter-photo > a {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--leaf-edge);
  border-radius: 0.3rem;
  box-shadow: 0 6px 18px rgb(83 49 32 / 0.12);
  cursor: zoom-in;
}
/* Rámeček obepne obrázek, i když ho public/story-leaf.js zmenší. */
.tale-cover > a { width: fit-content; margin-inline: auto; }
/* Fotka s rozměry nesmí omezenou výškou změnit poměr stran: bez JS ji contain vejde do rámečku, jinak ji rozměří story-leaf.js. */
.tale-cover img { display: block; max-width: 100%; height: auto; max-height: min(60vh, 26rem); object-fit: contain; }
.tale-book .chapter-photo figcaption { font-style: italic; text-align: center; }
.tale-book .chapter-photo figcaption small { font-style: normal; }
.tale-cover figcaption { display: grid; gap: 0.15rem; margin-top: 0.55rem; font-size: 0.95rem; font-style: italic; line-height: 1.4; text-align: center; }
.tale-cover figcaption small { color: var(--muted); font-size: 0.85rem; font-style: normal; }
.tale-cover figcaption a { color: inherit; }

.tale-text {
  max-width: 38rem;
  margin: 0 auto;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.7;
  hyphens: auto;
}
.tale-text > :first-child { margin-top: 0; }
/* Zdobená iniciála jako v pohádkové knížce. */
.tale-text > p:first-child::first-letter {
  float: left;
  margin: 0.1em 0.14em 0 0;
  padding: 0.12em 0.16em 0.06em;
  border: 3px double var(--brand-dark);
  border-radius: 0.12em;
  background: var(--tape);
  font-family: var(--display);
  font-size: 3.3em;
  font-weight: 650;
  line-height: 0.82;
  color: var(--brand-dark);
}
.tale-text a { color: var(--brand-dark); text-underline-offset: 0.2em; }
.tale-text .chapter-photo { margin: 1.4rem 0 1.6rem; font-family: var(--sans); }
.tale-text blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--tape); }

.tale-end { margin: 1.8rem auto 0; }
.tale-leaf-text .chapter-gallery { margin-top: 1.8rem; }

.tale-facts { margin-top: 2.4rem; padding: 1.3rem 1.2rem; background: rgb(244 215 162 / 0.3); }
.tale-facts h2 { margin: 0 0 0.8rem; font-size: 1.4rem; }
.tale-facts li { padding: 0.7rem 0; border-top: 1px solid var(--line); }
.tale-facts li:first-child { padding-top: 0; border-top: 0; }
.tale-facts p { margin: 0; line-height: 1.5; }
.tale-fact-link { display: inline-block; margin-top: 0.3rem; color: var(--brand-dark); font-weight: 700; text-underline-offset: 0.2em; }
.tale-fact-link::after { content: " ›"; }

.tale-more { margin-top: 2.4rem; }
.tale-more h2 { margin: 0 0 0.8rem; font-size: 1.4rem; }

@media (min-width: 640px) {
  .tale-leaf { padding: 3rem 3rem 3.2rem; }
  .tale-leaf::before { inset: 1rem; }
  .tale-facts { padding: 1.6rem 2rem; }
}

/* Otevřená knížka: dva listy a hřbet uprostřed. Levý list (nadpis a fotka) zůstane při čtení na očích, když se vejde
   (třídu tale-stick dává public/story-leaf.js). */
@media (min-width: 1000px) {
  .tale-book {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background:
      linear-gradient(90deg, transparent 44%, rgb(120 80 40 / 0.06) 48.5%, rgb(90 55 25 / 0.2) 50%, rgb(120 80 40 / 0.06) 51.5%, transparent 56%),
      var(--leaf);
  }
  .tale-leaf { padding: 3.4rem 3.6rem 3.6rem; }
  .tale-leaf-title { padding-right: 4rem; }
  .tale-leaf-text { padding-left: 4rem; }
  .tale-head { margin-bottom: 2rem; }
  .tale-cover img { max-height: min(52vh, 26rem); }

  .tale-facts ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
  .tale-facts li, .tale-facts li:first-child { padding: 0.9rem 0 0; border-top: 1px solid var(--line); }
  .tale-stick { position: sticky; top: 1.5rem; }
  /* Levý list povídačky je schovaný, dokud ho public/story-leaf.js nezměří, ať po načtení neposkočí. Bez JS ho ukáže animace. */
  article.tale-page .tale-leaf-inner { opacity: 0; animation: tale-leaf-show 0.15s 1.5s forwards; }
  article.tale-page .tale-leaf-inner.tale-fitted { opacity: 1; animation: none; transition: opacity 0.15s; }
}
@keyframes tale-leaf-show { to { opacity: 1; } }
/* Přehled povídaček /povidacky jako otevřená pohádková knížka (src/povidacky/view.js): knížka, listy, rámečky a ozdoba
   jsou z povidacky.css. Vlevo titulní list s Drběnou na lavičce, vpravo Obsah: obrázek v rámečku, název s tečkami
   k době čtení jako číslo strany, začátek povídačky a kdo vypráví. */

.tales-index .tale-head { margin-bottom: 0; }
.tales-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
.tales-index .tale-head .lede {
  max-width: 30rem;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.6;
}
.tales-drbena {
  display: block;
  width: min(70%, 17rem);
  height: auto;
  margin: 0.4rem auto 0.6rem;
  filter: drop-shadow(0 16px 14px rgb(61 38 27 / 0.16));
}
.tales-index .place-ask { margin: 0; }

.tales-contents-title { margin: 0; font-size: clamp(1.9rem, 5vw, 2.4rem); text-align: center; }
.tales-empty { margin: 1rem 0 0; font-family: "Iowan Old Style", Palatino, Georgia, serif; font-style: italic; text-align: center; }

.tales-contents { margin: 0.6rem 0 0; padding: 0; list-style: none; }
.tales-contents li { border-top: 1px solid rgb(157 51 60 / 0.15); }
.tales-contents li:first-child { border-top: 0; }

.tales-entry {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  color: inherit;
  text-decoration: none;
}

/* Obrázek jako ilustrace v knížce: bílý okraj, tenký rámeček, lehký stín. */
.tales-entry .kop-tile-photo {
  min-height: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0.25rem solid #fff;
  outline: 1px solid var(--leaf-edge);
  border-radius: 0.2rem;
  box-shadow: 0 6px 14px rgb(83 49 32 / 0.12);
}

.tales-entry-text { display: grid; gap: 0.25rem; min-width: 0; }
.tales-entry-head { display: flex; align-items: last baseline; gap: 0.4rem; }
.tales-entry-head strong { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; }
/* Tečky od názvu k době čtení jako v obsahu knížky. */
.tales-leader { flex: 1 1 1rem; min-width: 1rem; border-bottom: 2px dotted rgb(113 101 96 / 0.5); transform: translateY(-0.25em); }
.tales-time { flex: none; font-family: "Iowan Old Style", Palatino, Georgia, serif; font-style: italic; color: var(--brand-dark); white-space: nowrap; }
.tales-teaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-style: italic;
  line-height: 1.5;
  color: #6f5d52;
}
.tales-entry small { color: var(--muted); font-size: 0.85rem; }
.tales-entry:hover strong { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 0.2em; }

@media (min-width: 640px) {
  .tales-entry { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.3rem; padding: 1.2rem 0; }
  .tales-entry .kop-tile-photo { aspect-ratio: 4 / 3; }
}

/* Na počítači je titulní list svisle uprostřed a Obsah začíná nahoře. */
@media (min-width: 1000px) {
  .tales-index .tale-leaf-title { display: flex; flex-direction: column; justify-content: center; }
  .tales-drbena { width: 19rem; }
}
/* Hledání (src/hledani/): lupa v hlavičce, políčko na stránkách Zprávy, Kopidlno a Hledat, výsledky ve skupinách. */
.top-end { display: flex; align-items: center; gap: 0.5rem; }

.nav-search {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
}
.nav-search:hover, .nav-search.is-on { border-color: var(--brand); color: var(--brand-dark); }

.site-search { display: flex; gap: 0.5rem; max-width: 34rem; margin: 0.8rem 0 0; }
.site-search input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 1rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.site-search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.site-search .btn {
  padding: 0.7rem 1.2rem;
  font: inherit;
  font-weight: 700;
  color: var(--paper);
  background: var(--brand);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.site-search .btn:hover { background: var(--brand-dark); }

.search-page-head .lede { margin: 0.2rem 0 0; }
.search-head { margin: 1.2rem 0 0.4rem; color: var(--muted); }
.search-head a { color: var(--brand-dark); font-weight: 700; }

.search-group { margin-top: 1.8rem; }
.search-group > h2 { margin: 0 0 0.7rem; font-size: 1.35rem; }
.search-story h2 { margin: 0.2rem 0 0.3rem; font-size: 1.25rem; }

.search-links { display: grid; gap: 0.5rem; }
.search-links a {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  color: inherit;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1rem;
}
.search-links a strong { color: var(--brand-dark); }
.search-links a:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.search-links a span { color: var(--muted); }

.search-empty { margin-top: 1.4rem; }
.search-empty p { margin: 0.3rem 0; }
.search-empty a { color: var(--brand-dark); font-weight: 700; }

/* Prázdná stránka Hledat: nahoře nadpis, políčko a tipy, pod nimi v prázdném místě Drběna s lupou. */
.search-drbena { display: flex; justify-content: center; margin: 1.5rem 0 0; }
.search-drbena img {
  display: block;
  width: min(62%, 15rem);
  height: auto;
  filter: drop-shadow(0 18px 16px rgb(61 38 27 / 0.18));
}

.search-tips { margin-top: 1rem; }
.search-tips p { margin: 0 0 0.45rem; color: var(--muted); font-weight: 600; }
.search-tips ul { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.search-tips .chip {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  color: var(--ink);
  text-decoration: none;
  background: rgb(244 215 162 / 0.45);
  border-radius: 999px;
  font-weight: 600;
}
.search-tips .chip:hover { background: var(--tape); color: var(--brand-dark); }

@media (min-width: 900px) {
  .search-drbena { margin-top: 0.5rem; }
  .search-drbena img { width: 17rem; }
}

/* Stránka Hledat bez karet (plán PLAN-VZHLED.md, obal `.flat`): hlavička `pageTop`, skupiny výsledků začínají tmavou
   linkou a řádky dělí tenká linka; dlaždice kapitol a povídaček zůstávají. */
.search-page .page-head { margin-bottom: 1.2rem; }
.search-page .page-intro .site-search { margin-bottom: 0.4rem; }
.search-page .search-head { margin: 0 0 1.4rem; }
.search-page .search-group { margin-top: 0; }
.search-page .search-group + .search-group { margin-top: 2.4rem; }
.search-page .search-group > h2 { padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); }
.search-page .search-group > .stack { gap: 0; }
.search-page .card.search-story { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.search-page .search-story .muted { margin: 0 0 0.4rem; }
.search-page .search-story .meta { margin: 0; }
.search-page .search-story:hover h2 { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 0.15em; }
.search-page .search-links { gap: 0; margin-top: -0.7rem; }
.search-page .search-links a { padding: 0.8rem 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.search-page .search-group > h2 + .kop-tiles { margin-top: 1.1rem; }
/* Bez dotazu je pod hlavičkou Drběna, linka by ji odřízla. */
.search-page .page-head:has(+ .search-drbena) { border-bottom: 0; margin-bottom: 0; }
/* Stránka svozu popelnic bez karet (plán PLAN-VZHLED.md, obal `.flat`): hlavička `pageHead` s Drběnou popelářkou,
   nejbližší svoz jako jediná podbarvená plocha, další termíny začínají tmavou linkou a dělí je tenká linka. */

/* Za Drběnou slunce, ne ciferník stránek s otevírací dobou. */
.bins-page .page-sun { background: var(--area-sun); }
/* Pod hlavičkou je hned podbarvená plocha, tenká linka by byla navíc. */
.bins-page .page-head { margin-bottom: 1.5rem; border-bottom: 0; }

.bins-next {
  margin: 0 0 2.5rem;
  padding: 1rem 1.2rem 1.2rem;
  border-radius: 1.1rem;
  background: var(--area-plate);
}

.bins-next-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--area-rule);
}
.bins-next-head h2 { flex: 1; margin: 0; font-size: 1.25rem; line-height: 1.2; }

.bins-icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0.38rem;
  border-radius: 999px;
  background: var(--area-tint);
  fill: none;
  stroke: var(--area-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bins-count {
  margin: 0;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgb(47 114 87 / 0.12);
  color: var(--pine);
  font-weight: 700;
  font-size: 0.95rem;
}
.bins-count.is-soon { background: var(--brand); color: #fff; }

.bins-when {
  margin: 1rem 0 0.2rem;
  font-family: var(--display);
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  font-weight: 650;
  line-height: 1.05;
}

.bins-kind { margin: 0 0 0.8rem; font-weight: 700; color: var(--muted); }

.bins-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}
.bins-facts li { position: relative; padding-left: 1.3rem; line-height: 1.4; }
.bins-facts li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #ef7d1a;
}

.bins-list > h2 { margin: 0; padding-bottom: 0.55rem; border-bottom: 2px solid var(--ink); }

.bins-dates {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.bins-date {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "day in" "date in";
  align-items: center;
  column-gap: 0.8rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.bins-day {
  grid-area: day;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: lowercase;
}

.bins-date strong {
  grid-area: date;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 650;
}

.bins-in {
  grid-area: in;
  color: var(--muted);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.bins-note { max-width: 44rem; margin: 1.6rem 0 0.4rem; color: var(--muted); }
.bins-more { margin: 0; }
.bins-more a { color: var(--brand-dark); font-weight: 700; }

@media (min-width: 720px) {
  .bins-next { padding: 1.1rem 1.35rem 1.4rem; }
  /* Tři sloupce oddělené svislou linkou, termíny jdou po řádcích zleva doprava. */
  .bins-dates { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .bins-date { padding: 0.85rem 1.2rem; border-left: 1px solid var(--line); }
  .bins-date:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .bins-date:nth-child(3n) { padding-right: 0; }
}
/* Stránka Počasí bez karet (obal `.flat`, plán PLAN-VZHLED.md): podbarvená plocha je jen Teď v Kopidlně,
   ostatní oddíly začínají tmavou linkou. Výstrahy mají barvu stupně ČHMÚ. */

.weather-page .page-sun { background: var(--area-sun); }
.weather-page .page-head { margin-bottom: 1.5rem; border-bottom: 0; }

.wx-icon {
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wx-alerts { display: grid; gap: 0.75rem; margin: 0 0 1.25rem; }
.wx-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  border-left: 0.35rem solid var(--alert-edge);
  border-radius: 0.7rem;
  background: var(--alert-plate);
}
.wx-alert.is-yellow { --alert-edge: #d2a106; --alert-plate: rgb(230 185 30 / 0.16); }
.wx-alert.is-orange { --alert-edge: #d96a0b; --alert-plate: rgb(225 120 30 / 0.15); }
.wx-alert.is-red { --alert-edge: #b92323; --alert-plate: rgb(190 40 40 / 0.12); }
.wx-alert h3 { margin: 0; font-size: 1.1rem; }
.wx-alert p { margin: 0.35rem 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.wx-alert .wx-alert-meta { margin-top: 0.1rem; color: var(--muted); font-size: 0.92rem; font-weight: 700; }

.wx-now {
  margin: 0 0 2.5rem;
  padding: 1rem 1.2rem 1.2rem;
  border-radius: 1.1rem;
  background: var(--area-plate);
}
.wx-now-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--area-rule);
}
.wx-now-head h2 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.wx-now-head .wx-icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: var(--area-tint);
  color: var(--area-ink);
}
.wx-now-body { display: grid; gap: 1rem; margin-top: 0.9rem; }
.wx-temp {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 12vw, 4.6rem);
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wx-feels { margin: 0.35rem 0 0; font-weight: 700; }
.wx-at { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.92rem; }

.wx-facts, .wx-past-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1rem;
  margin: 0;
}
.wx-fact dt { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.wx-fact dd { margin: 0; line-height: 1.3; overflow-wrap: anywhere; }

.wx-notes {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--area-rule);
  list-style: none;
  font-weight: 700;
}
.wx-notes li + li { margin-top: 0.35rem; }

.wx-hours-wrap > h2, .wx-days-wrap > h2, .wx-past > h2 {
  margin: 0;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--ink);
}
.wx-hours-wrap, .wx-days-wrap, .wx-past { margin: 0 0 2.5rem; }

.wx-hours {
  display: flex;
  margin: 0;
  padding: 0.75rem 0 0.5rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.wx-hour {
  flex: 0 0 4.4rem;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.25rem;
  padding: 0 0.3rem;
  border-left: 1px solid var(--line);
  text-align: center;
}
.wx-hour:first-child { border-left: 0; }
.wx-hour-time { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.wx-hour strong { font-family: var(--display); font-size: 1.2rem; font-weight: 650; }
.wx-hour-note { min-height: 2em; color: var(--muted); font-size: 0.75rem; line-height: 1; }
.wx-hour-wind { color: var(--muted); font-size: 0.72rem; line-height: 1.1; }
.wx-hour-wind.is-gusty { color: var(--ink); font-weight: 700; }

.wx-days { margin: 0; padding: 0; list-style: none; }
.wx-day {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.2rem 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.wx-day-icon { color: var(--area-ink); }
.wx-day-text h3 { margin: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 650; }
.wx-day-text p { margin: 0.15rem 0 0; line-height: 1.35; }
.wx-day-text .wx-unsure { color: var(--muted); font-size: 0.92rem; }
.wx-tag {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--area-tint);
  color: var(--area-ink);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}
.wx-day-temps { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; margin: 0.3rem 0 0; }
.wx-day-temps div { display: flex; align-items: baseline; gap: 0.35rem; }
.wx-day-temps dt { color: var(--muted); font-size: 0.85rem; }
.wx-day-temps dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.wx-note, .wx-empty { max-width: 44rem; margin: 0.9rem 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }

@media (min-width: 720px) {
  .wx-now { padding: 1.1rem 1.35rem 1.4rem; }
  .wx-now-body { grid-template-columns: minmax(11rem, auto) minmax(0, 1fr); align-items: center; column-gap: 2.5rem; }
  .wx-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wx-past-list { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0.9rem; }
  .wx-day { grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; }
  .wx-day-temps { grid-column: 3; display: grid; grid-template-columns: auto; justify-items: end; gap: 0.1rem; margin: 0; }
}
/* Lékaři a otevírací doba: příštích 7 dní, den se změnou a dnešek nenápadně označené,
   běžné hodiny a rozpis změny v okně (HTML popover, bez JS). */

.next-days li.is-today {
  background: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--soon);
}

.next-days .today-mark {
  background: none;
  color: var(--soon);
  border: 1px solid currentColor;
}

.next-days li.is-change {
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--brand);
}

.next-days li.is-change.is-today { box-shadow: inset 3px 0 0 var(--soon); }

.next-days li.is-change.is-off { color: var(--ink); }

.next-days li > .change-note {
  grid-column: 1 / -1;
  margin: 0.1rem 0 0;
  color: var(--brand);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.next-days .change-mark {
  display: inline-block;
  margin-right: 0.15rem;
  padding: 0.04rem 0.38rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  vertical-align: 0.12em;
}

.regular-hours { margin: 0.8rem 0 0.4rem; }

.place-offers { margin: 0.8rem 0 0.4rem; }
.place-offers + .regular-hours { margin-top: 0.4rem; }

.offer-list { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.offer-list li { padding: 0.25rem 0; }

.pop-open {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.date-tile .pop-open { margin-top: 0.3rem; font-size: 0.92rem; justify-self: start; }

.date-tile .tile-state { color: var(--ink); font-weight: 700; }

/* Okno: uprostřed obrazovky, na mobilu skoro přes celou šířku. Vejde se skoro na výšku obrazovky;
   když ne, posouvá se jen obsah pod nadpisem a posuvník je tenký. */
.hours-pop {
  width: min(30rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 1rem 1.1rem 0.6rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 0.25);
  overflow: hidden;
}

.hours-pop:popover-open { display: flex; flex-direction: column; }

.hours-pop-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.hours-pop-body::-webkit-scrollbar { width: 6px; }
.hours-pop-body::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--line); }

.hours-pop-body > .week-list { margin-bottom: 0; }

.hours-pop-body > .week-list > li:last-child { border-bottom: 0; }

.hours-pop::backdrop { background: rgb(40 25 15 / 0.45); }

.hours-pop-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  flex: none;
  margin-bottom: 0.4rem;
}

.hours-pop-head h3 { margin: 0; font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }

.hours-pop-head .kicker { margin: 0 0 0.15rem; }

.pop-close {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: var(--paper-deep);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.hours-pop .doctor-week li:not(.is-off) { grid-template-columns: 1fr; gap: 0.25rem; }
.hours-pop .doctor-week li.is-off { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

/* Lékaři i místa: den nahoře, pod ním každý čas na vlastním řádku a poznámka k němu hned vedle.
   Svislá čára vede od dne k jeho časům; u dne se změnou je červená a časy tučně. */
:is(.doctor-grid, .place-grid) .doctor-week li:not(.is-off) { grid-template-columns: 1fr; gap: 0.35rem; align-items: start; }
:is(.doctor-grid, .place-grid) .doctor-week li.is-off { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
:is(.doctor-grid, .place-grid) .doctor-week li.is-off .day { white-space: normal; }

:is(.doctor-grid, .place-grid) .doctor-week .day,
:is(.doctor-grid, .place-grid) .doctor-week li.is-today .day { font-size: 1.02rem; }

:is(.doctor-grid, .place-grid) .doctor-week li:not(.is-off) .parts {
  display: grid;
  gap: 0.3rem;
  margin-left: 0.15rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--line);
}

:is(.doctor-grid, .place-grid) .doctor-week .part {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: 0 0.7rem;
  align-items: baseline;
}

:is(.doctor-grid, .place-grid) .doctor-week .slot { grid-column: 1; }
:is(.doctor-grid, .place-grid) .doctor-week .hint { grid-column: 2; margin: 0; }
:is(.doctor-grid, .place-grid) .doctor-week .part strong { font-weight: 500; }

:is(.doctor-grid, .place-grid) .next-days li.is-change .parts { border-left-color: var(--brand); }
:is(.doctor-grid, .place-grid) .next-days li.is-change .part strong { font-weight: 700; }

/* Časy bez poznámek na jednom řádku (sloučené dny). */
:is(.doctor-grid, .place-grid) .doctor-week li:not(.is-off) .parts.one-line {
  display: block;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
:is(.doctor-grid, .place-grid) .doctor-week .parts.one-line strong { font-weight: 500; white-space: nowrap; }
:is(.doctor-grid, .place-grid) .next-days li.is-change .parts.one-line strong { font-weight: 700; }

/* Karty míst mají různě řádků (sloučené dny), proto se s kartami vedle nesrovnávají po řádcích. */
@media (min-width: 720px) {
  .places-list .place-card,
  .places-list .place-card .week-list { display: block; }
  /* Zeď (public/masonry.js): drobné řádky, karta jich zabere podle své výšky; mezera pod kartou je její okraj. */
  .places-list.is-masonry { grid-auto-rows: 4px; row-gap: 0; align-items: start; }
  .places-list.is-masonry > .place-card { margin-bottom: 0.75rem; }
}

/* Tabule: tečka stavu, místo s dnešními časy, vpravo stav jako štítek. */
.now-board { margin: 0 0 1rem; padding: 1.1rem 1.35rem 0.6rem; }
.now-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--paper-deep);
}
.now-board h2 { margin: 0; font-family: var(--display); font-size: 1.4rem; }
.now-clock { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; color: var(--muted); font-size: 0.92rem; }
.now-time {
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.now-list { list-style: none; margin: 0; padding: 0; }
.now-list li {
  display: grid;
  grid-template-columns: 0.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 0.8rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}
.now-list li:last-child { border-bottom: 0; }
/* Na počítači dva sloupce čtené shora dolů, ať pořadí sedí s kartami pod tabulí. */
@media (min-width: 900px) {
  .now-list { columns: 2; column-gap: 2.5rem; }
  .now-list li { break-inside: avoid; }
}
.now-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 2px solid #cdbfb2; }
.now-list .is-open .now-dot { border-color: var(--pine); background: var(--pine); box-shadow: 0 0 0 3px rgb(47 114 87 / 0.16); }
.now-list .is-soon .now-dot { border-color: #c98b2b; background: #c98b2b; }
.now-list .is-open.is-unsure .now-dot { border-color: #e0782a; background: #e0782a; box-shadow: 0 0 0 3px rgb(224 120 42 / 0.18); }
.now-place { display: grid; min-width: 0; }
.now-list a { color: var(--ink); font-weight: 700; text-decoration: none; }
.now-list a:hover, .now-list a:focus-visible { color: var(--brand); text-decoration: underline; text-underline-offset: 0.18em; }
.now-today { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.now-span { white-space: nowrap; }
.now-state { text-align: right; }
.now-text {
  display: inline-block;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.now-list .is-open .now-text { background: rgb(47 114 87 / 0.1); color: var(--pine); font-weight: 700; }
.now-list .is-soon .now-text { background: rgb(201 139 43 / 0.15); color: var(--soon); font-weight: 700; }
/* Poznámka pod stavem nesmí na mobilu sloupec rozšířit: šířku dává štítek nad ní, poznámka se do ní zalomí.
   Na širší obrazovce je místa dost a je na jednom řádku. */
.now-state { display: grid; justify-items: end; }
.now-note { width: 0; min-width: 100%; margin-top: 0.2rem; padding-right: 0.65rem; color: var(--soon); font-size: 0.86rem; font-weight: 500; line-height: 1.3; text-align: right; }
@media (min-width: 520px) {
  .now-note { width: auto; min-width: 0; }
}

/* Úzký mobil: menší okraje, delší stav se zalomí pod název. */
@media (max-width: 519px) {
  .now-board { padding: 1rem 1.1rem 0.5rem; }
  .now-list li { gap: 0.2rem 0.6rem; padding: 0.55rem 0; }
  .now-text { padding: 0.15rem 0.55rem; }
  /* Dlouhý stav („Zavřeno, ve čtvrtek od 10:00“) se zalomí, ať nezúží název místa. */
  .now-state { max-width: 9.5rem; }
}

/* Dlouhé názvy míst ať nezaberou tři řádky. */
@media (min-width: 720px) {
  .place-card h2 { font-size: 1.85rem; }
}

/* Státní svátek, kdy by podle běžných hodin bylo otevřeno, ale nikdo to nepotvrdil. */
.next-days li.is-unsure, .next-days li.is-holiday { box-shadow: inset 3px 0 0 var(--line); }
/* Ve svátek vždy zavřeno (volba u místa): jen štítek, zavřeno je vidět z řádku. */
.next-days li > .change-note.is-holiday { color: var(--muted); }
.next-days li > .change-note.is-unsure { color: var(--muted); font-weight: 500; }
/* Stránky bez karet (služby, Zprávy; plán PLAN-VZHLED.md): obsah rovnou na stránce. Bloky oddělují linky a vzduch,
   podbarvená je jen přehledová plocha nahoře (tabule, Dnes). Nová stránka styl dostane obalením do `.flat`
   a hlavičkou `pageHead` ze src/view.js. */

/* Barva oblasti webu: štítek nad nadpisem, kruh za Drběnou, kroužek ikonky a podbarvená plocha. Praktické
   (služby a tabule Dnes v Kopidlně na titulce) švestkové, Akce hořčicové, ostatní béžové jako papír.
   Oblast dá obal stránky třídou `area-practical` nebo `area-events`. */
:root {
  --area-ink: var(--tape-ink);
  --area-tint: var(--tape);
  --area-sun: var(--tape);
  --area-plate: rgb(243 231 218 / 0.55);
  --area-rule: rgb(74 36 27 / 0.12);
}
.area-practical {
  --area-ink: #6e3f6e;
  --area-tint: rgb(120 70 120 / 0.17);
  --area-sun: rgb(120 70 120 / 0.2);
  --area-plate: rgb(120 70 120 / 0.065);
  --area-rule: rgb(120 70 120 / 0.22);
}
.area-events {
  --area-ink: #7a4e08;
  --area-tint: rgb(205 145 30 / 0.3);
  --area-sun: rgb(205 145 30 / 0.42);
  --area-plate: rgb(205 145 30 / 0.1);
  --area-rule: rgb(205 145 30 / 0.3);
}

.page-intro .pill { background: var(--area-tint); color: var(--area-ink); }

.flat .card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Hlavička: text vlevo, nepovinná malá Drběna vpravo, pod tím tenká linka. Na mobilu bez Drběny, ať stránka nenarůstá. */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem;
  margin: 0.5rem 0 1.75rem;
  border-bottom: 1px solid var(--line);
}
.page-intro { padding-bottom: 1.4rem; }
.page-intro h1 { margin: 0.6rem 0 0.7rem; }
.page-intro .lede { margin: 0 0 0.6rem; }
.page-intro .place-ask { margin-bottom: 0; }
.page-drbena { display: none; }

@media (min-width: 720px) {
  .page-head.has-drbena { grid-template-columns: minmax(0, 1fr) 11rem; }
  .page-intro { padding-bottom: 1.8rem; }
  .page-drbena { position: relative; display: flex; justify-content: center; align-items: flex-end; }
  /* Za Drběnou ciferník: kruh v barvě pásky a dvě ručičky. */
  .page-sun {
    position: absolute;
    bottom: 8%;
    left: 50%;
    width: 10rem;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 999px;
    background:
      linear-gradient(var(--area-ink), var(--area-ink)) 50% 22% / 3px 30% no-repeat,
      linear-gradient(var(--area-ink), var(--area-ink)) 69% 50% / 22% 3px no-repeat,
      var(--area-sun);
    opacity: 0.9;
  }
  .page-drbena img {
    position: relative;
    z-index: 1;
    display: block;
    width: 8.5rem;
    height: auto;
    margin-bottom: -1px;
    filter: drop-shadow(0 14px 12px rgb(61 38 27 / 0.16));
  }
}

/* Přehled nahoře (tabule otevírací doby, Dnes u odstávek): jediná podbarvená plocha, bez stínu a rámečku. */
.flat .now-board,
.flat .ol-today {
  border: 0;
  border-radius: 1.1rem;
  background: var(--area-plate);
  box-shadow: none;
}
.flat .now-board { margin: 0 0 2.5rem; padding: 1.1rem 1.35rem 0.6rem; }
.flat .ol-today { padding: 1.1rem 1.35rem; }
.flat .now-head { border-bottom-color: var(--line); }
.flat .now-list li { border-bottom-color: rgb(74 36 27 / 0.08); }
.flat .now-time { background: var(--card); }

/* Místa, lékaři a dvory: každý začíná tmavou linkou jako sloupek v novinách, mezi nimi jen vzduch. */
.flat .yard {
  padding-top: 0.9rem;
  border-top: 2px solid var(--ink);
}
.flat .yard h2 { margin-top: 0.1rem; }
.flat .yard:target { border-top-color: var(--brand); }
.flat .place-grid { column-gap: 2.25rem; row-gap: 2rem; }
.flat .doctor-grid { gap: 2.25rem; }
.flat .stack:has(> .yard) { row-gap: 2.25rem; }

@media (min-width: 720px) {
  .flat .places-list.is-masonry { row-gap: 0; }
  .flat .places-list.is-masonry > .place-card { margin-bottom: 2.25rem; }
  .flat .doctor-grid { column-gap: 2.25rem; }
  .flat .doctor-grid > .card { margin-bottom: 2.25rem; }
}

/* Dlaždice změn (Plánované změny u dvorů, Další změny): podbarvené, bez rámečku. */
.flat .date-tile { border: 0; border-radius: 0.8rem; background: var(--area-plate); box-shadow: none; }

/* Odstávky: položky s barevnou linkou vlevo podle druhu, bez rámečku; postranní sloupec jako bloky s linkou. */
.flat .ol-layout { margin-top: 0; }
.flat .ol-group > h2 { padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); color: var(--ink); font-size: 0.9rem; }
.flat .ol-list { gap: 0; }
.flat .ol-item {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  padding: 1rem 0 1.1rem 1rem;
  box-shadow: inset 3px 0 0 var(--kind);
  margin: 0.6rem 0 0;
}
.flat .ol-side { gap: 1.75rem; }
.flat .ol-side .card { padding: 0.8rem 0 0; border-top: 2px solid var(--ink); }
/* Stránka 404: Drběna u nápisu, vedle vysvětlení a tlačítko domů, pod tím rozcestník a reklama. */

.notfound-hero {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  overflow: hidden;
}

.notfound-copy h1 {
  margin: 0.7rem 0 0.6rem;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.05;
}

.notfound-text {
  margin: 0 0 1.2rem;
  max-width: 34rem;
  font-size: 1.1rem;
  line-height: 1.5;
}

.notfound-drbena { display: flex; justify-content: center; }

.notfound-drbena img {
  display: block;
  width: min(80%, 18rem);
  height: auto;
  filter: drop-shadow(0 14px 14px rgb(61 38 27 / 0.16));
}

.notfound-more { margin-top: 0.9rem; }

.notfound-more h2 { margin: 0 0 0.8rem; }

.notfound-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.notfound-links a {
  display: block;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.notfound-links a:hover { border-color: var(--brand); color: var(--brand); }

@media (min-width: 720px) {
  .notfound-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .notfound-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    padding: 2rem 2.2rem;
  }
  .notfound-drbena img { width: 22rem; max-width: 100%; }
}

.notfound-more .place-ask { margin: 1rem 0 0; }

/* Chybová stránka (src/broken-view.js): dvě tlačítka a drobný popis chyby pro redakci. */
.broken-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }

.broken-detail {
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
/* Uvítací okno s Drběnou (src/welcome.js, public/welcome.js). */
.welcome {
  width: min(100% - 2rem, 50rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 28px 80px rgb(74 36 27 / 0.28);
  overflow: hidden;
}

.welcome:focus { outline: none; }

.welcome[open] { animation: welcome-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15); }

.welcome::backdrop {
  background: rgb(74 36 27 / 0.45);
  backdrop-filter: blur(3px);
  animation: welcome-fade 0.3s ease-out;
}

@keyframes welcome-in {
  from { opacity: 0; transform: translateY(1.5rem) scale(0.96); }
}

@keyframes welcome-fade {
  from { opacity: 0; }
}

@keyframes welcome-wave {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-4deg); }
  60% { transform: rotate(3deg); }
}

.welcome-box {
  position: relative;
  display: grid;
  grid-template-columns: 15rem 1fr;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.welcome-side {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem 1rem 1.5rem 1.5rem;
  background:
    radial-gradient(circle at 50% 55%, rgb(244 215 162 / 0.8), transparent 70%),
    var(--paper-deep);
}

.welcome-side img {
  width: 100%;
  height: auto;
  max-height: 26rem;
  object-fit: contain;
  transform-origin: 50% 90%;
  animation: welcome-wave 1.2s ease-in-out 0.5s 2;
}

.welcome-text { padding: 2rem 2.25rem 1.75rem 2rem; }

.welcome h2 {
  margin: 0 2rem 0.75rem 0;
  font-family: var(--display);
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--brand-dark);
}

.welcome p, .welcome ul { margin: 0 0 0.8rem; line-height: 1.5; }

.welcome ul { padding: 0; list-style: none; }

.welcome li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.25rem;
}

.welcome li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.6em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--brand);
}

.welcome-team a { color: var(--brand-dark); font-weight: 700; }

.welcome-beta {
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  background: var(--tape);
  color: var(--tape-ink);
  font-size: 0.92rem;
}

.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.welcome-x {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
}

.welcome-x:hover { background: var(--paper-deep); }

/* Mobil: Drběna nahoře, text pod ní, tlačítka přes celou šířku. */
@media (max-width: 640px) {
  .welcome-box { grid-template-columns: 1fr; }

  .welcome-side { padding: 1rem 0 0; }

  .welcome-side img { width: auto; height: 8.5rem; }

  .welcome-text { padding: 1.1rem 1.25rem 0; }

  .welcome h2 { margin-right: 0; font-size: 1.45rem; }

  .welcome p, .welcome ul { font-size: 0.95rem; line-height: 1.45; }

  /* Tlačítka zůstanou vidět dole, i když se text musí posunout. */
  .welcome-actions {
    position: sticky;
    bottom: 0;
    margin: 0 -1.25rem;
    padding: 0.75rem 1.25rem 1rem;
    background: var(--card);
    box-shadow: 0 -10px 16px -12px rgb(74 36 27 / 0.25);
  }

  .welcome-actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome[open], .welcome::backdrop, .welcome-side img { animation: none; }
}
/* Stránka Odebírat (/odber) bez karet (plán PLAN-VZHLED.md, obal `.flat`): hlavička `pageTop`, sekce začínají
   tmavou linkou, feedy dělí tenká linka. */
.feeds-page .page-head { margin-bottom: 1rem; border-bottom: 0; }
.feeds-section { margin-top: 2.5rem; }
.feeds-page .page-head + .feeds-section { margin-top: 0; }
.feeds-section > h2 { margin: 0 0 0.9rem; padding-bottom: 0.55rem; border-bottom: 2px solid var(--ink); }
.feeds-intro { max-width: 44rem; margin: 0 0 0.4rem; }

.feed-list { display: grid; }
.feed-row { padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
.feed-row h3 { margin: 0; font-size: 1.15rem; }
.feed-row h3 a { color: var(--brand-dark); }
.feed-row .muted { margin: 0.2rem 0 0; }
.feed-url { margin: 0.35rem 0 0; }
.feed-url code, .feed-calendar code { font-size: 0.82rem; overflow-wrap: anywhere; word-break: break-all; }
.feed-calendar p:first-child { max-width: 44rem; margin-top: 0; }
.feed-rubrics { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0.6rem 0 0; list-style: none; }
.feed-rubrics a { display: inline-block; padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 0.9rem; }
.feed-rubrics a:hover { border-color: var(--brand); color: var(--brand); }
/* Nenápadný řádek: kdo hledá, najde, úvodu a Drběně nekonkuruje. */
.events-subscribe { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.85rem; }
.events-subscribe a { color: inherit; font-weight: 600; text-decoration-color: rgb(113 101 96 / 0.45); text-underline-offset: 0.15em; }
.events-subscribe a:hover { color: var(--brand); text-decoration-color: currentColor; }
.feed-list + h3 { margin: 1.8rem 0 0; }

@media (min-width: 720px) {
  /* Na počítači dva feedy vedle sebe, mezi nimi svislá linka. */
  .feed-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feed-row:nth-child(odd) { padding-right: 1.4rem; }
  .feed-row:nth-child(even) { padding-left: 1.4rem; border-left: 1px solid var(--line); }
}
/* Stránka O nás bez karet (plán PLAN-VZHLED.md, obal `.flat`): v hlavičce `pageTop` poslání a maskot, pod ní
   Kdo drbnu provozuje a Zapojte se jako dva sloupky s tmavou linkou, dole drobným písmem soukromí. */

.about-page .page-sun { background: var(--area-sun); }
/* Pod hlavičkou začínají sloupky tmavou linkou, tenká linka by byla navíc. */
.about-page .page-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; border-bottom: 0; }

.about-rich p, .about-rich li { max-width: 40rem; line-height: 1.6; }
.about-rich > :first-child { margin-top: 0; }
.about-rich > :last-child { margin-bottom: 0; }
.about-rich a { color: var(--brand-dark); font-weight: 700; }
.about-mission > p:first-child { font-family: var(--display); font-size: 1.3rem; line-height: 1.4; color: var(--ink); }

.about-blocks { display: grid; gap: 2.25rem; }
.about-block { padding-top: 0.9rem; border-top: 2px solid var(--ink); }
.about-block h2 { margin: 0.1rem 0 0.6rem; font-size: 1.3rem; }

/* Přehled autorů, podpisy u zpráv a povídaček vedou na jednotlivé řádky (.author-link kvůli nim platí na všech stránkách). */
.author-link { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.about-authors { margin-top: 2.25rem; }
.about-author-list { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.about-author { display: flex; gap: 1rem; align-items: flex-start; scroll-margin-top: 5rem; }
.about-author:target h3 { color: var(--brand-dark); }
.about-author-photo { flex: none; width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; }
.about-author-text { min-width: 0; }
.about-author-text h3 { margin: 0; font-size: 1.1rem; }
.about-author-text p { max-width: 40rem; margin: 0.4rem 0 0; line-height: 1.6; }
.about-author-text .about-author-role { margin-top: 0.1rem; color: var(--muted); font-size: 0.95rem; }

.about-fine { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
.about-fine p { max-width: 44rem; margin: 0 0 0.5rem; }
.about-fine a { color: inherit; }

@media (min-width: 720px) {
  .about-page .page-head { grid-template-columns: minmax(0, 1fr) 15rem; }
  .about-page .page-drbena { align-self: center; }
  .about-page .page-sun { bottom: 50%; width: 15rem; transform: translate(-50%, 50%); }
  .about-page .page-drbena img { width: 15rem; margin: 0; filter: none; }
  .about-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}

/* Na širokém displeji vedle textu zbývá víc místa: maskot se sluncem ho zaplní. */
@media (min-width: 1000px) {
  .about-page .page-head { grid-template-columns: minmax(0, 1fr) 21rem; }
  .about-page .page-sun { width: 20rem; }
  .about-page .page-drbena img { width: 21rem; }
}
/* Detail zprávy ve stylu bez karet (plán PLAN-VZHLED.md): text zůstává, jak byl, sjednocené jsou okolní prvky.
   Odkaz zpět je malý odkaz „‹ …“ jako na ostatních stránkách, Ke stažení, Přílohy a Další zprávy začínají tmavou
   linkou jako sekce jinde, reklama v bočním sloupci zůstává odlišená. */

.article-back .back { color: var(--brand-dark); font-size: 0.92rem; text-decoration: none; }
.article-back .back::before { content: "‹ "; }
.article-back .back:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.article-page .article-meta { margin: 0.7rem 0 1.4rem; }

.article-downloads,
.article-attachments { padding-top: 0.8rem; border-top: 2px solid var(--ink); }
.article-downloads { margin-top: 2.2rem; }
.article-attachments { margin-top: 2.2rem; }
.article-downloads h2,
.article-attachments h2 { font-size: 1.2rem; }

.article-side .more-news { margin-top: 2.2rem; }
.article-side .more-news h2 { margin: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); font-size: 1.2rem; }
.article-side .more-news li + li { border-top: 1px solid var(--line); }
.article-side .ad-slot + .more-news { margin-top: 2.2rem; }
/* Bez reklamy začíná boční sloupec rovnou linkou, zarovnanou s odkazem zpět. */
.article-side > .more-news:first-child { margin-top: 0; }
/* Vánoční vzhled (src/skins.js, od 1. adventní neděle do Tří králů): jedlově zelená a zlatá místo barev oblastí,
   girlanda pod hlavičkou, vločky v pozadí, sníh na patičce a stromeček v tabuli na titulce. Stavové barvy
   (Otevřeno, Zavřeno, Zrušeno), reklamy, kapitoly a povídačky se nemění. */
.skin-vanoce,
.skin-vanoce .area-practical,
.skin-vanoce .area-events {
  --tape: #f1d68f;
  --area-ink: #2f5d3a;
  --area-tint: rgb(47 93 58 / 0.15);
  /* Zlaté slunce za Drběnou se zeleným proužkem jako věnec. */
  --area-sun: radial-gradient(circle, rgb(232 190 96 / 0.55) 0 63%, rgb(47 93 58 / 0.35) 63% 67%, rgb(232 190 96 / 0.35) 67%);
  --area-plate: rgb(47 93 58 / 0.06);
  --area-rule: rgb(47 93 58 / 0.2);
}

/* Girlanda a sníh mají šířku okna i se scrollbarem: přesah do strany se ořízne, ať stránka nejde posouvat do boku. */
.skin-vanoce { position: relative; overflow-x: clip; }

/* Vločky leží za vším obsahem přes celou výšku stránky a posouvají se s ní. */
.skin-vanoce::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.65;
  background: url("/skin-vanoce-vlocky.svg") 0 0 / 420px auto repeat;
}

/* Girlanda visí pod hlavičkou přes celou šířku okna; výška je přesně výška obrázku (240 × 64), ať se koule dole neuseknou. Obsah pod ní dostane víc místa. */
.skin-vanoce .top { position: relative; }
.skin-vanoce .top::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4rem;
  width: 100vw;
  height: 4.8rem;
  transform: translateX(-50%);
  background: url("/skin-vanoce-girlanda.svg") center top / 18rem auto repeat-x;
  pointer-events: none;
}
.skin-vanoce main { padding-top: 3.2rem; }

/* Sníh na horní hraně patičky. */
.skin-vanoce .foot { position: relative; }
.skin-vanoce .foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1.4rem;
  transform: translateX(-50%);
  background: url("/skin-vanoce-snih.svg") 0 0 / 15rem 100% repeat-x;
  pointer-events: none;
}

/* Tabule na titulce: stromeček (src/home-board.js) a stopy Drběny jedlově zelené. */
.fill-stromek { mask-image: url("/kresba-stromek.svg"); -webkit-mask-image: url("/kresba-stromek.svg"); }
.skin-vanoce .fill-sight { background: #2f5d3a; }
.skin-vanoce .fill-hoof { fill: #2f5d3a; }
.skin-vanoce .fill-trail { background: #2f5d3a; }
/* Podzimní vzhled (src/skins.js): rezavá a hořčicová místo barev oblastí, padající listy pod hlavičkou,
   padající listí v pozadí, hromádka listí na patičce a dýně s jablky v tabuli na titulce. Stavové barvy
   (Otevřeno, Zavřeno, Zrušeno), reklamy, kapitoly a povídačky se nemění. */
.skin-podzim,
.skin-podzim .area-practical,
.skin-podzim .area-events {
  --tape: #f0c98a;
  --area-ink: #94401c;
  --area-tint: rgb(181 86 42 / 0.16);
  /* Hořčicové slunce za Drběnou s rezavým proužkem. */
  --area-sun: radial-gradient(circle, rgb(205 145 30 / 0.5) 0 63%, rgb(181 86 42 / 0.35) 63% 67%, rgb(205 145 30 / 0.3) 67%);
  --area-plate: rgb(181 86 42 / 0.065);
  --area-rule: rgb(181 86 42 / 0.22);
}

/* Listy pod hlavičkou a na patičce mají šířku okna i se scrollbarem: přesah do strany se ořízne, ať stránka nejde posouvat do boku. */
.skin-podzim { position: relative; overflow-x: clip; }

/* Listí leží za vším obsahem přes celou výšku stránky a posouvá se s ní. */
.skin-podzim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
  background: url("/skin-podzim-listi.svg") 0 0 / 420px auto repeat;
}

/* Pod hlavičkou padají přes celou šířku okna volné listy (ne girlanda); obsah pod ní dostane víc místa. */
.skin-podzim .top { position: relative; }
.skin-podzim .top::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3.4rem;
  width: 100vw;
  height: 4.4rem;
  transform: translateX(-50%);
  background: url("/skin-podzim-padajici.svg") center top / 42rem auto repeat-x;
  pointer-events: none;
}
.skin-podzim main { padding-top: 3rem; }

/* Hromádka listí na horní hraně patičky. */
.skin-podzim .foot { position: relative; }
.skin-podzim .foot::before {
  content: "";
  position: absolute;
  top: -1.3rem;
  left: 50%;
  width: 100vw;
  height: 2.2rem;
  transform: translateX(-50%);
  background: url("/skin-podzim-hromadka.svg") 0 0 / 15rem auto repeat-x;
  pointer-events: none;
}

/* Tabule na titulce: dýně s jablky (src/home-board.js) a stopy Drběny rezavé. */
.fill-dyne { mask-image: url("/kresba-dyne.svg"); -webkit-mask-image: url("/kresba-dyne.svg"); }
.skin-podzim .fill-sight { background: #94401c; }
.skin-podzim .fill-hoof { fill: #94401c; }
.skin-podzim .fill-trail { background: #94401c; }
.privacy {
  max-width: 48rem;
  margin: 2rem auto 4rem;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: var(--paper, #fffdf6);
  border-radius: 1rem;
}
.privacy h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.15; }
.privacy h2 { margin-top: 1.8rem; font-size: 1.35rem; }
.privacy p, .privacy li { line-height: 1.65; overflow-wrap: anywhere; }
.privacy li { margin-bottom: .75rem; }
.privacy a { text-decoration: underline; text-underline-offset: .15em; }
/* Stránka Odstávky a uzavírky (src/outages-page.js). */
:root {
  --water: #2b6a93;
  --water-bg: #e6f0f6;
  --power: #8a5a00;
  --power-bg: #fbefd6;
  --road: #b23a44;
  --road-bg: #f8e3e3;
}

.ol-layout { display: grid; gap: 1.5rem; margin-top: 1.4rem; }
@media (min-width: 900px) {
  .ol-layout { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; gap: 2rem; }
}

.ol-today {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow);
}
.ol-today h2 { font-size: 1.15rem; margin: 0 0 0.55rem; }
.ol-today ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ol-today li { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 600; }
.ol-today li svg { margin-top: 0.15rem; }
.ol-today p { margin: 0; color: var(--pine); font-weight: 600; }
.ol-until { font-weight: 400; color: var(--muted); }
.ol-main > .banner { margin-top: 1rem; }

.ol-group { margin-top: 1.6rem; }
.ol-group > h2 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
.ol-list { display: grid; gap: 0.75rem; }

.is-voda { --kind: var(--water); --kind-bg: var(--water-bg); }
.is-elektrina { --kind: var(--power); --kind-bg: var(--power-bg); }
.is-silnice { --kind: var(--road); --kind-bg: var(--road-bg); }
.ol-today li svg { color: var(--kind); }

.ol-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 0.35rem solid var(--kind);
  border-radius: 1rem;
  padding: 0.85rem 1.1rem 1rem;
}
.ol-top { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; align-items: center; margin: 0; font-size: 0.88rem; }
.ol-chip {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  background: var(--kind-bg);
  color: var(--kind);
  font-weight: 700;
  border-radius: 99px;
  padding: 0.12rem 0.6rem 0.12rem 0.45rem;
}
.ol-layout svg { width: 1.05rem; height: 1.05rem; flex: none; }
.ol-state { font-weight: 700; }
.ol-state.is-now { color: var(--brand); }
.ol-item h3 { font-size: 1.2rem; margin: 0.45rem 0 0.2rem; line-height: 1.25; text-wrap: balance; }
.ol-when { margin: 0; font-weight: 600; }
.ol-where { margin: 0.35rem 0 0; overflow-wrap: anywhere; }
.ol-note { margin: 0.35rem 0 0; color: var(--muted); }
.ol-more { margin-top: 0.45rem; }
.ol-more summary { cursor: pointer; color: var(--brand-dark); font-weight: 600; }
.ol-more ul { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.ol-more li { padding: 0.3rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.ol-link { margin: 0.5rem 0 0; font-size: 0.92rem; }

.ol-quiet { margin-top: 1.4rem; color: var(--muted); }
.ol-quiet p { margin: 0.25rem 0; display: flex; gap: 0.5rem; align-items: center; }

.ol-side { display: grid; gap: 1rem; }
.ol-side .card { padding: 1rem 1.15rem; }
.ol-side h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.ol-side p { margin: 0.35rem 0; font-size: 0.95rem; }
.ol-side .ol-tel { font-size: 1.2rem; font-weight: 700; margin-top: 0; }
.ol-side .fine { color: var(--muted); }
/* Patička webu (src/footer.js): tmavý pruh přes celou šířku okna s Drběnou, rozcestníkem ve sloupcích a drobným
   pruhem dole. Obsah zůstává ve sloupci stránky (.wrap), barvu do stran natáhne border-image, ta nepřidá posouvání do strany. */

.foot {
  --foot-text: #fffaf5;
  --foot-muted: rgb(255 250 245 / 0.72);
  --foot-line: rgb(255 250 245 / 0.16);
  margin-top: 1rem;
  padding: 2.25rem 0.5rem 0;
  border-image: conic-gradient(var(--ink) 0 0) fill 0 // 0 100vw;
  color: var(--foot-text);
}

.foot a { color: var(--foot-text); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.foot a:focus-visible { outline: 3px solid var(--tape); outline-offset: 2px; border-radius: 0.3rem; }

.foot-main { display: grid; gap: 2rem; }

.foot-brand { display: inline-flex; align-items: center; gap: 0.8rem; }
.foot-brand:hover { text-decoration: none; }
.foot-brand img { width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--paper); }
.foot-brand span { font-family: var(--display); font-size: 1.2rem; line-height: 1; }
.foot-brand span span { display: block; margin-top: 0.2rem; color: var(--tape); font-size: 1.4rem; }

.foot-about p { margin: 0.9rem 0 1.1rem; max-width: 22rem; color: var(--foot-muted); line-height: 1.5; }

.foot .foot-home {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--tape);
  color: var(--tape-ink);
  font-weight: 700;
}
.foot .foot-home::before { content: "←"; }
.foot .foot-home:hover { text-decoration: none; background: #f8e3bb; }

.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }

.foot-col h2 {
  margin: 0 0 0.7rem;
  font: 700 0.78rem/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tape);
}

.foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
.foot-col a { display: inline-block; padding: 0.3rem 0; font-weight: 600; }
.foot-col a[aria-current] { color: var(--tape); }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  margin-top: 2rem;
  padding: 1.1rem 0 1.5rem;
  border-top: 1px solid var(--foot-line);
  color: var(--foot-muted);
  font-size: 0.82rem;
}

.foot-base p { margin: 0; }
.foot-small { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.foot-base a { color: var(--foot-muted); }

@media (min-width: 720px) {
  .foot { padding: 3rem 1.5rem 0; }
  .foot-main { grid-template-columns: minmax(14rem, 1fr) 2fr; gap: 3rem; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media print {
  .foot { border-image: none; color: inherit; }
  .foot-cols, .foot-home, .foot-small { display: none; }
}
@media (min-width: 900px) {
  .hero {
    align-items: start;
  }

  .hero > .mascot {
    margin-top: 3rem;
    min-height: 0;
    align-items: flex-start;
  }

  .hero > .mascot > img {
    width: min(86%, 22rem);
  }
}