/*
 * Funkční základ sdílených komponent (lightbox, výběr data, mapa, cookie lišta).
 * Barvy a typografii přebírá z proměnných, které definuje CSS každého návrhu:
 *   --c-bg, --c-surface, --c-ink, --c-muted, --c-line, --c-accent, --c-on-accent,
 *   --radius-sm, --radius-md, --font-body, --font-display
 */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .75rem 1rem;
  background: var(--c-ink); color: var(--c-bg);
  border-radius: var(--radius-sm, 6px);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Lightbox ---------- */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: clamp(3.5rem, 6vw, 5rem) clamp(1rem, 6vw, 6rem);
  border: 0;
  background: rgb(16 16 17 / .94); /* vždy tmavé, nezávisle na tématu */
  color: #f4f4f2;
  overflow: hidden;
}
.lightbox::backdrop { background: rgb(0 0 0 / .55); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { margin: 0; display: grid; gap: .9rem; justify-items: center; max-height: 100%; }
.lightbox__img {
  max-width: min(100%, 900px);
  max-height: calc(100dvh - 10rem);
  object-fit: contain;
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6);
}
.lightbox__caption { font: 500 .95rem/1.4 var(--font-body, system-ui); text-align: center; opacity: .9; }
.lightbox__counter {
  position: absolute; left: 50%; top: 1.25rem; transform: translateX(-50%);
  margin: 0; font: 500 .85rem/1 var(--font-mono, var(--font-body, system-ui));
  font-variant-numeric: tabular-nums; opacity: .7;
}
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px;
  background: rgb(255 255 255 / .06);
  color: inherit; font-size: 1.35rem; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.lightbox__btn:hover { background: rgb(255 255 255 / .16); }
.lightbox__btn:active { transform: scale(.96); }
.lightbox__btn:focus-visible { outline: 2px solid var(--c-accent, #ea6f22); outline-offset: 3px; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 1rem; top: 50%; translate: 0 -50%; }
.lightbox.is-single .lightbox__prev,
.lightbox.is-single .lightbox__next { display: none; }
@media (max-width: 640px) {
  .lightbox__prev, .lightbox__next { top: auto; bottom: 1rem; translate: none; }
}

/* ---------- Výběr data ---------- */
.date-strip {
  display: flex; gap: .5rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .25rem .1rem .75rem;
  scrollbar-width: thin;
}
.date-chip {
  position: relative;
  flex: 0 0 auto; scroll-snap-align: start;
  display: grid; justify-items: center; gap: .1rem;
  min-width: 4.6rem; padding: .7rem .6rem;
  border: 1px solid var(--c-line, #ccc);
  border-radius: var(--radius-md, 10px);
  background: var(--c-surface, #fff);
  color: var(--c-ink, #111);
  cursor: pointer; user-select: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.date-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.date-chip__dow { font-size: .78rem; font-weight: 600; color: var(--c-muted, #666); }
.date-chip__day { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.date-chip__mon { font-size: .72rem; color: var(--c-muted, #666); }
.date-chip:hover { border-color: var(--c-ink, #111); }
.date-chip:active { transform: scale(.97); }
.date-chip:has(input:checked) {
  background: var(--c-accent, #ea6f22);
  border-color: var(--c-accent, #ea6f22);
  color: var(--c-on-accent, #1d1b1c);
}
.date-chip:has(input:checked) .date-chip__dow,
.date-chip:has(input:checked) .date-chip__mon { color: inherit; }
.date-chip:has(input:focus-visible) { outline: 2px solid var(--c-ink, #111); outline-offset: 2px; }

/* ---------- Mapa působnosti (Leaflet) ---------- */
.coverage-map { position: relative; width: 100%; min-height: 320px; isolation: isolate; }
.coverage-map .leaflet-container,
.coverage-map.leaflet-container { font: inherit; background: var(--c-surface, #eee); }
.leaflet-tooltip.town-label {
  padding: 0; border: 0; box-shadow: none; background: transparent;
  color: var(--map-label, var(--c-ink, #111));
  font: 600 12px/1.1 var(--font-body, system-ui);
  text-shadow: 0 0 3px var(--map-halo, #fff), 0 0 3px var(--map-halo, #fff), 0 0 6px var(--map-halo, #fff);
}
.leaflet-tooltip.town-label::before { display: none; }
.leaflet-tooltip.town-label.is-base { font-weight: 800; font-size: 13px; }
.coverage-map .leaflet-control-attribution { font-size: 10px; }
/* Při zlomkovém zoomu (zoomSnap .25) vznikají mezi dlaždicemi vlasové spáry: půl pixelu přesahu je zakryje.
   Leaflet 1.9 dává dlaždicím mix-blend-mode: plus-lighter, se kterým by byl přesah vidět jako světlá linka. */
.coverage-map .leaflet-tile-container img.leaflet-tile { width: 256.5px !important; height: 256.5px !important; mix-blend-mode: normal; }
/* Odbarvení OSM podkladu (v produkci nahradí Mapy.com). Návrh může přepsat přes --map-tile-filter. */
.coverage-map--light .leaflet-tile-pane { filter: var(--map-tile-filter, grayscale(1) contrast(.92) brightness(1.04)); }
.coverage-map--dark .leaflet-tile-pane { filter: var(--map-tile-filter, grayscale(1) invert(1) brightness(.78) contrast(1.08)); }

/* ---------- Cookie lišta (orestbida/cookieconsent v3) – přebírá tokeny návrhu ---------- */
#cc-main {
  --cc-font-family: var(--font-body, system-ui);
  --cc-bg: var(--c-surface, #fff);
  --cc-primary-color: var(--c-ink, #111);
  --cc-secondary-color: var(--c-muted, #555);
  --cc-btn-primary-bg: var(--c-accent, #ea6f22);
  --cc-btn-primary-color: var(--c-on-accent, #1d1b1c);
  --cc-btn-primary-border-color: var(--c-accent, #ea6f22);
  --cc-btn-primary-hover-bg: var(--c-ink, #111);
  --cc-btn-primary-hover-color: var(--c-bg, #fff);
  --cc-btn-primary-hover-border-color: var(--c-ink, #111);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--c-ink, #111);
  --cc-btn-secondary-border-color: var(--c-line, #ccc);
  --cc-btn-secondary-hover-bg: var(--c-bg, #f4f4f4);
  --cc-btn-secondary-hover-color: var(--c-ink, #111);
  --cc-btn-secondary-hover-border-color: var(--c-ink, #111);
  --cc-separator-border-color: var(--c-line, #ddd);
  --cc-toggle-on-bg: var(--c-accent, #ea6f22);
  --cc-toggle-off-bg: var(--c-muted, #777);
  --cc-toggle-readonly-bg: var(--c-line, #ccc);
  --cc-cookie-category-block-bg: var(--c-bg, #f6f6f6);
  --cc-cookie-category-block-border: var(--c-line, #ddd);
  --cc-cookie-category-block-hover-bg: var(--c-bg, #f0f0f0);
  --cc-cookie-category-block-hover-border: var(--c-line, #ccc);
  --cc-footer-bg: var(--c-bg, #f6f6f6);
  --cc-footer-color: var(--c-muted, #555);
  --cc-footer-border-color: var(--c-line, #ddd);
  --cc-modal-border-radius: var(--radius-md, 10px);
  --cc-btn-border-radius: var(--radius-btn, var(--radius-sm, 6px));
  --cc-link-color: var(--c-ink, #111);
}