/* ==========================================================================
   Theme "baca" — quiet gallery for bohumilbaca.sk (Indexhibit 0.70d)
   Mobile-first · CSS variables · no frameworks
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg: #0e0e0e;
  --bg-soft: #151515;
  --bg-raised: #1b1b1b;
  --text: #ecebe6;
  --text-dim: #9d9c96;
  --line: #2a2a28;
  --accent: #c8b89a;
  --on-accent: #14110d;
  --focus: #e0c98f;
  --shadow: rgba(0, 0, 0, .55);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --sidebar-w: 284px;
  --topbar-h: 58px;
  --gap: clamp(16px, 3vw, 40px);
  --content-max: 68ch;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 520ms;

  /* --------------------------------------------------------------------------
     Type scale — the ONLY sizes used anywhere in this theme (no ad-hoc px).
     One family: Inter (400/500/600) + system fallbacks (see --font-sans).
     -------------------------------------------------------------------------- */
  --fs-xs: 0.8125rem;    /* 13px — small uppercase labels, counters */
  --fs-sm: 0.9375rem;    /* 15px — secondary text */
  --fs-base: 1.0625rem;  /* 17px — body */
  --fs-lg: 1.25rem;      /* 20px — leads, captions, buttons emphasis */
  --fs-xl: 1.625rem;     /* 26px — titles */
  --fs-2xl: 2.25rem;     /* 36px — page headings, timeline years */

  /* --------------------------------------------------------------------------
     Lightbox overlay — ALWAYS white, in both themes and in calm mode.
     Independent of --bg / --bg-raised (page colours never bleed through:
     the backdrop is fully opaque). All lightbox text/icons use these.
     -------------------------------------------------------------------------- */
  --lb-bg: #ffffff;
  --lb-fg: #111111;          /* 18.88:1 on --lb-bg */
  --lb-muted: #555555;       /*  7.46:1 on --lb-bg */
  --lb-hairline: rgba(0, 0, 0, .12);
  --lb-hover: rgba(0, 0, 0, .06);
  --lb-active: rgba(0, 0, 0, .14);
  --lb-line-strong: rgba(0, 0, 0, .5); /* >= 3:1 vs white after compositing */
  --lb-load: #eeeeee;        /* loading fills — light grey, never black */
}

:root[data-theme='light'] {
  color-scheme: light;

  --bg: #f6f5f1;
  --bg-soft: #efeee9;
  --bg-raised: #ffffff;
  --text: #151515;
  --text-dim: #6b6a64;
  --line: #dcdbd4;
  --accent: #7a6743; /* C9: was #8a7550 — 4.42:1 white-on-accent (pill) +
                        3.81:1 accent-on-bg nav; needs >=4.5:1 for both */
  --on-accent: #ffffff;
  --focus: #7a6234;
  --shadow: rgba(20, 20, 15, .18);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);   /* Inter only (system-ui fallback) */
  font-size: var(--fs-base);       /* 17px — the ONE body size, all viewports */
  line-height: 1.7;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* form-like controls never bring their own font */
button, input, select, textarea { font: inherit; }

/* allowed weights: 400 / 500 / 600 — semantic bold uses 600 everywhere */
b, strong { font-weight: 600; }

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

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  background: var(--bg-raised);
  color: var(--text);
}

.skip-link:focus { left: 8px; top: 8px; }

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

/* --------------------------------------------------------------------------
   Topbar (mobile / tablet < 900px)
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--topbar-h);
  padding: 0 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar .brand {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-chip {
  appearance: none;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn-chip:hover { border-color: var(--text-dim); background: var(--bg-soft); }

@media (min-width: 900px) {
  .topbar { display: none; }
}

/* --------------------------------------------------------------------------
   Sidebar (desktop ≥ 900px) / fullscreen overlay (< 900px)
   -------------------------------------------------------------------------- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  width: min(420px, 100%);
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}

body.menu-open .sidebar {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur) var(--ease), visibility 0s;
}

.menu-veil {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

body.menu-open .menu-veil {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 26px 22px;
}

.sidebar .intro {
  font-size: var(--fs-xl);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 4px 0 4px;
}

.sidebar .intro p { margin: 0; }
.sidebar .intro b { font-weight: 600; }
.sidebar .intro a { font-size: var(--fs-sm); font-weight: 400; letter-spacing: normal; }

.sidebar .menu-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.brand-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

/* menu */

.menu {
  margin-top: 26px;
  flex: 1 0 auto;
}

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

.nav-group { margin-bottom: 18px; }

.nav-group > ul { display: block; }

.group-toggle {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 0;
  margin: 0;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
}

.group-toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}

.nav-group.is-collapsed .group-toggle::after { transform: rotate(-45deg) translate(-1px, -1px); }
.nav-group.is-collapsed .nav-items { display: none; }

.nav-items { padding-top: 8px; }

.nav-items li { margin: 0; }

.nav-items a {
  display: block;
  padding: 7px 0;
  font-size: var(--fs-lg);
  line-height: 1.25;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  opacity: .82;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-items a:hover { opacity: 1; transform: translateX(4px); }

.nav-items li.active a {
  opacity: 1;
  color: var(--accent);
}

.sidebar .intro { margin-top: 6px; }
.sidebar .intro p { font-size: inherit; }

.sidebar-foot {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .sidebar {
    width: var(--sidebar-w);
    transform: none;
    visibility: visible;
    transition: none;
  }
  .sidebar-inner { padding: 34px 30px 26px; }
  .sidebar .menu-close, .menu-veil, .topbar .theme-toggle { display: none; }
  .menu-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

#content {
  min-width: 0;
  padding: 26px var(--gap) 40px;
}

@media (min-width: 900px) {
  #content {
    margin-left: var(--sidebar-w);
    padding: clamp(40px, 6vh, 72px) clamp(36px, 6vw, 96px) 96px;
    max-width: calc(var(--sidebar-w) + 1180px);
  }
}

.container {
  max-width: 1080px;
  margin: 0 auto;
}

/* editorial text */

#content p {
  max-width: var(--content-max);
  margin: 0 0 1.15em;
  hanging-punctuation: first;
}

#content p:has(> strong:only-child),
#content p:first-child > strong:first-child {
  font-size: var(--fs-lg);
  line-height: 1.25;
  font-weight: 600;
  margin-bottom: .5em;
}

/* lead-in / inline strong inside a sentence — normal bold, same size */
#content p > strong:first-child:not(:only-child) {
  font-weight: 600;
}

#content em { font-style: italic; color: var(--text-dim); }

#content h1, #content h2, #content h3, #content h4 {
  font-weight: 600;
  line-height: 1.25;
  max-width: var(--content-max);
  margin: 1.6em 0 .5em;
}

#content h1 { font-size: var(--fs-2xl); letter-spacing: -.02em; }
#content h2 { font-size: var(--fs-xl); letter-spacing: -.01em; }
#content h3 { font-size: var(--fs-lg); }

#content a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Legacy content from the database (Verdana, <font>, inline font-size...) —
   the texts themselves are NEVER edited, only neutralised HERE, inside the
   content area. NOTE: !important appears nowhere else in this stylesheet;
   it exists only for these attribute-selector overrides of inline styles.
   -------------------------------------------------------------------------- */

#content [style*="font-family"] { font-family: inherit !important; }
#content [style*="font-size"] { font-size: inherit !important; }
#content font { font-family: inherit; font-size: inherit; color: inherit; }
#content big { font-size: var(--fs-lg); }
#content small { font-size: var(--fs-xs); }

#content hr {
  border: 0;
  border-top: 1px solid var(--line);
  max-width: var(--content-max);
  margin: 2em 0;
}

.cl { clear: both; }

/* text-page two-column leftovers (deux_column) */

#img-container { margin: 0; padding: 0; }

#d-col1, #d-col2, #hidden-text {
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
  display: block;
}

#hidden-text { display: none !important; }   /* náhrada swapText(): text je priamo v #d-col2 */

#d-col1 { margin-bottom: 8px; }
#d-col1 a { display: inline-block; margin: 0 8px 8px 0; }

/* slideshow leftovers (slideshow format) */

#img-container .nav { display: none; }    /* jQuery-cycle nav — unused with 0 images */
#img-container .pics p { max-width: none; }

/* --------------------------------------------------------------------------
   Hero (home page, JS-only enhancement)
   -------------------------------------------------------------------------- */

.hero {
  margin: 0 calc(-1 * var(--gap)) 34px;
  overflow: hidden;
}

@media (min-width: 900px) {
  .hero { margin: -clamp(40px, 6vh, 72px) calc(-1 * clamp(36px, 6vw, 96px)) 46px; }
}

.hero a {
  display: block;
  text-decoration: none;
}

.hero img {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: cover;
  opacity: 1;
}

.hero-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px clamp(16px, 4vw, 48px) 0;
}

.hero-cap-title {
  font-size: var(--fs-xl);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}

.hero-cap-meta {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Gallery — justified rows (JS) / columns fallback (no JS / waiting)
   -------------------------------------------------------------------------- */

/* plain thumbnail grid in CSS columns — the no-JS view and the
   "dimensions not known yet" fallback */
#img-container {
  margin-top: 30px;
  column-gap: 14px;
  column-count: 2;
}

@media (min-width: 700px) {
  #img-container { column-count: 3; }
}

@media (min-width: 1300px) {
  #img-container { column-count: 4; }
}

.g-item {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: var(--bg-raised);
  break-inside: avoid;
  margin-bottom: 14px;
}

.g-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 700ms var(--ease), opacity 700ms var(--ease), filter 500ms var(--ease);
  will-change: transform, opacity;
}

.g-js .g-item img:not(.is-loaded) { opacity: 0; }

.g-item .g-cap {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  padding: 6px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.35;
  color: #ffffff;
  /* pevný chip, NIE gradient — kontrast textu garantovaný aj cez biely obrázok:
     biela textová farba na rgba(0,0,0,.62) ponad biely podklad = 6.2:1 (AA) */
  background: rgba(0, 0, 0, .62);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 6px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}

/* justified rows (JS, once every aspect ratio is known) */
#img-container.g-rows { column-count: auto; }

.g-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.g-row .g-item {
  flex: 0 0 auto;
  height: var(--h);
  width: var(--w);
  margin-bottom: 0;
}

.g-row .g-item img { height: 100%; }

/* hover: zoom this + dim the rest */
@media (hover: hover) {
  #img-container.g-rows:hover .g-item img { filter: brightness(.62) saturate(.85); }

  #img-container.g-rows .g-item:hover img {
    transform: scale(1.045);
    filter: none;
  }

  #img-container .g-item:hover .g-cap { opacity: 1; transform: none; }
}

/* popisok aj pri klávesnicovom fokuse (progressive enhancement) */
#img-container .g-item:focus-visible .g-cap { opacity: 1; transform: none; }

/* dotykové zariadenia: žiadny overlay (nie je na čom hoverovať) */
@media (hover: none) {
  #img-container .g-cap { display: none; }
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  /* fully opaque white — independent of the page theme and atmosphere */
  background: var(--lb-bg);
  color-scheme: light;
  opacity: 0;
  visibility: hidden;
  transition: opacity 340ms var(--ease), visibility 0s linear 340ms;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 340ms var(--ease), visibility 0s;
}

body.lightbox-open { overflow: hidden; }

.lb-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

.lb-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
}

.lb-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  /* hairline so paintings with white backgrounds stay visible against
     the white overlay — no drop shadow */
  border: 1px solid var(--lb-hairline);
}

.lb-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  color: var(--lb-fg);
  background: transparent;
  border-top: 1px solid var(--lb-hairline);
}

.lb-caption {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}

.lb-caption[hidden] { display: none; }

.lb-cap-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: normal;
  color: var(--lb-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-cap-meta {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-cap-title[hidden],
.lb-cap-meta[hidden] { display: none; }

.lb-counter {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lb-muted);
  white-space: nowrap;
}

.lb-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  color: var(--lb-fg);
  background: transparent;
  border: 1px solid var(--lb-hairline);
  border-radius: 50%;
  cursor: pointer;
  transition: background 300ms var(--ease), transform 300ms var(--ease), border-color 300ms var(--ease);
}

.lb-btn:hover { background: var(--lb-hover); border-color: var(--lb-line-strong); }
.lb-btn:active { transform: scale(.94); }
.lightbox :focus-visible { outline: 2px solid var(--lb-fg); outline-offset: 3px; }
.lb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-close { position: absolute; top: 14px; right: 14px; z-index: 3; }

@media (max-width: 700px) {
  .lb-nav { top: auto; bottom: 78px; transform: none; }
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
}

/* lupa: toggle in the toolbar (icon + label, aria-pressed) */
.lb-lupa {
  width: auto;
  padding: 0 15px;
  gap: 9px;
  border-radius: 24px;
}

.lb-lupa-text {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lb-lupa[aria-pressed='true'] {
  background: var(--lb-active);
  border-color: var(--lb-fg);
}

.lb-lupa:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.lb-lupa:disabled:hover { background: transparent; border-color: var(--lb-hairline); }

/* subtle loading state while the full-res bitmap is fetched + decoded */
.lb-lupa.is-loading { background: var(--lb-load); border-color: var(--lb-hairline); }
.lb-lupa.is-loading svg { animation: lb-lupa-pulse 900ms ease-in-out infinite; }

@keyframes lb-lupa-pulse { 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  .lb-lupa.is-loading svg { animation: none; opacity: .55; }
}

/* round lens — pure CSS background of the full-resolution image */
.lb-lens {
  position: fixed;
  left: 0;
  top: 0;
  width: 220px;
  height: 220px;
  box-sizing: border-box;
  z-index: 4;
  border-radius: 50%;
  /* dark rim on the white overlay, no drop shadow at all */
  border: 2px solid var(--lb-fg);
  background-color: var(--lb-bg);
  background-repeat: no-repeat;
  box-shadow: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 130ms var(--ease), visibility 0s linear 130ms;
}

.lb-lens.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 130ms var(--ease), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .lb-lens, .lb-lens.is-visible { transition: none; }
}

/* --------------------------------------------------------------------------
   Scroll-to-top
   -------------------------------------------------------------------------- */

.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 65;
  appearance: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  box-shadow: 0 10px 30px var(--shadow);
}

.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}

.to-top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* --------------------------------------------------------------------------
   Reveals (JS adds .reveal-ready to html; content fades in)
   -------------------------------------------------------------------------- */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Focus / misc
   -------------------------------------------------------------------------- */

#togmenu { display: none; }

::view-transition-old(root) {
  animation: baca-out 260ms var(--ease) both;
}

::view-transition-new(root) {
  animation: baca-in 420ms var(--ease) both;
}

@keyframes baca-out { to { opacity: 0; } }
@keyframes baca-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .topbar, .sidebar, .menu-veil, .to-top, .lightbox, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: var(--fs-base); }
  #content { margin: 0; padding: 0; max-width: none; }
  #img-container .vm-control { display: none; }
  #img-container { column-count: 3; }
  .g-row { display: block; }
  .g-row .g-item { width: auto !important; height: auto !important; page-break-inside: avoid; }
  a { text-decoration: underline; }
}

/* ==========================================================================
   Gallery view modes — segmented control (Rady / Stena / Velke)
   ========================================================================== */

.vm-control {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 18px;
}

.vm-opt { position: relative; }

.vm-opt input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.vm-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 16px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.vm-opt:hover .vm-label { border-color: var(--text-dim); background: var(--bg-soft); }

.vm-opt input:focus-visible + .vm-label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.vm-opt input:checked + .vm-label {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* mobile: Stena cells would be unreadably small — hide the option (JS falls back to Rady) */
@media (max-width: 599px) {
  .vm-opt[data-mode='stena'] { display: none; }
  .vm-label { padding: 6px 13px; }
}

/* --- Stena: dense contact sheet (uniform 4px gap, uniform row height) --- */

body[data-viewmode='stena'] #img-container .g-row { gap: 4px; margin-bottom: 4px; }

.g-row.g-single { justify-content: center; }

@media (hover: hover) {
  /* dim the rest, lift / zoom the hovered tile — transform + opacity only, no layout shift */
  body[data-viewmode='stena'] #img-container.g-rows:hover .g-row .g-item img {
    opacity: .35;
    filter: none;
  }

  body[data-viewmode='stena'] #img-container.g-rows .g-item:hover img {
    transform: scale(1.06);
    opacity: 1;
    filter: none;
  }
}

/* keyboard focus: same spotlight (dimming only when :has is supported) */
body[data-viewmode='stena'] #img-container.g-rows .g-item:focus-visible img {
  transform: scale(1.06);
  opacity: 1;
  filter: none;
}

body[data-viewmode='stena'] #img-container.g-rows:has(.g-item:focus-visible) .g-row .g-item img {
  opacity: .35;
  filter: none;
}

/* reduced motion / calm: instant state change, never zoom */
@media (prefers-reduced-motion: reduce) {
  body[data-viewmode='stena'] .g-item img { transform: none !important; }
}

html[data-calm='1'] body[data-viewmode='stena'] .g-item img { transform: none !important; }

/* --- Velke: one painting per row, centered, generous vertical spacing --- */

body[data-viewmode='velke'] #img-container .g-row {
  justify-content: center;
  margin-bottom: clamp(44px, 9vh, 110px);
}

/* ==========================================================================
   Prezentácia (lightbox presentation)
   ========================================================================== */

.lightbox .lb-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 5;
  background: var(--lb-hairline);
  pointer-events: none;
  display: none;
}

.lightbox.is-presenting .lb-progress { display: block; }

.lb-progress-fill {
  height: 100%;
  width: 0;
  background: var(--lb-fg);
}

/* second layer for the crossfade (fades in over the primary) */
.lightbox .lb-xfade {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  left: 16px;
  object-fit: contain;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  -webkit-user-drag: none;
}

.lb-xfade.xf-in { opacity: 1; transition: opacity 560ms var(--ease); z-index: 2; }

.lightbox .lb-img { position: relative; z-index: 1; }
.lightbox img.xf-out { opacity: 0; transition: opacity 560ms var(--ease); z-index: 2; }

/* start button visible outside presentation; pause/play while running */
.lightbox .lb-present,
.lightbox .lb-pp,
.lightbox .lb-interval { display: none; }

.lightbox:not(.is-presenting) .lb-present { display: inline-flex; }
.lightbox.is-presenting .lb-pp { display: inline-flex; }
.lightbox.is-presenting .lb-interval { display: inline-flex; }

.lb-present,
.lb-pp {
  width: auto;
  padding: 0 15px;
  gap: 9px;
  border-radius: 24px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lb-pp .ic-play { display: none; }
.lb-pp.pp-paused .ic-play { display: block; }
.lb-pp.pp-paused .ic-pause { display: none; }
.lb-pp[aria-pressed='true'] {
  background: var(--lb-active);
  border-color: var(--lb-fg);
}

.lb-interval {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 4px;
}

.lb-interval button {
  appearance: none;
  padding: 6px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--lb-muted);
  background: transparent;
  border: 1px solid var(--lb-hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease);
}

.lb-interval button:hover { color: var(--lb-fg); border-color: var(--lb-line-strong); }
.lb-interval button.is-active {
  background: var(--lb-active);
  border-color: var(--lb-fg);
  color: var(--lb-fg);
}

/* "koniec cyklu" badge at the end of one loop */
.lightbox .lb-end {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--lb-hairline);
  color: var(--lb-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lightbox .lb-end[hidden] { display: none; }
.lightbox.is-presenting .lb-end:not([hidden]) { display: block; }

/* cursor + toolbar hide after 3 s of inactivity */
.lightbox.ui-hidden { cursor: none; }
.lightbox.ui-hidden .lb-bar,
.lightbox.ui-hidden .lb-close,
.lightbox.ui-hidden .lb-nav {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  .lb-interval button { padding: 5px 8px; }
}

/* ==========================================================================
   Pokojný režim (calm mode — data-calm='1' on <html>)
   Higher contrast, bigger type, no motion, bigger touch targets.
   ========================================================================== */

:root[data-calm='1'] { --content-max: 62ch; }

:root[data-theme='dark'][data-calm='1'] {
  --bg: #000000;
  --bg-soft: #000000;
  --bg-raised: #000000;
  --text: #ffffff;
  --text-dim: #ffffff;
  --accent: #ffffff;
  --on-accent: #000000;
  --focus: #ffffff;
  --line: #4d4d4d;
  --shadow: rgba(0, 0, 0, 0);
}

:root[data-theme='light'][data-calm='1'] {
  --bg: #ffffff;
  --bg-soft: #ffffff;
  --bg-raised: #ffffff;
  --text: #000000;
  --text-dim: #000000;
  --accent: #000000;
  --on-accent: #ffffff;
  --focus: #000000;
  --line: #bbbbbb;
  --shadow: rgba(0, 0, 0, 0);
}

:root[data-calm='1'] body {
  font-size: var(--fs-lg);   /* calm = the same token set, stepped up once */
  line-height: 1.8;
}

:root[data-calm='1'] *,
:root[data-calm='1'] *::before,
:root[data-calm='1'] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* hover-zoom / parallax-style movement off */
:root[data-calm='1'] .g-row .g-item img { transform: none !important; }
:root[data-calm='1'] .nav-items a:hover { transform: none !important; }

/* never leave reveal-flagged content hidden */
:root[data-calm='1'] .reveal-ready [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* page transitions off (mirrors the reduced-motion rule) */
:root[data-calm='1'] ::view-transition-old(root),
:root[data-calm='1'] ::view-transition-new(root) { animation: none !important; }

/* thicker focus outlines */
:root[data-calm='1'] :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* enlarged click targets: menu + lightbox buttons >= 48px */
:root[data-calm='1'] .btn-chip { min-height: 48px; padding: 10px 16px; }
:root[data-calm='1'] .group-toggle { min-height: 48px; padding: 12px 0; }
:root[data-calm='1'] .nav-items a { padding: 11px 0; }
:root[data-calm='1'] .to-top { width: 48px; height: 48px; }
:root[data-calm='1'] .vm-label { min-height: 48px; }

:root[data-calm='1'] .lb-btn { width: 48px; height: 48px; }
:root[data-calm='1'] .lb-btn.lb-lupa,
:root[data-calm='1'] .lb-btn.lb-pp,
:root[data-calm='1'] .lb-btn.lb-present {
  width: auto;
  min-width: 60px;
  min-height: 48px;
  padding: 0 14px;
}
:root[data-calm='1'] .lb-interval button { min-height: 48px; }