/* bookfest.cz — základ. Rodičovské Cassiopeia template.min.css se nenačítá. */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bf-paper);
  color: var(--bf-ink);
  font-family: var(--bf-text), "Literata fallback", Georgia, serif;
  font-size: var(--bf-fs-body);
  line-height: var(--bf-lh-body);
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--bf-display), system-ui, sans-serif;
  line-height: var(--bf-lh-title);
  letter-spacing: var(--bf-tr-display);
  text-wrap: balance;
  margin-block: 0 var(--bf-sp-2);
}
h1 { font-size: var(--bf-fs-h1); line-height: var(--bf-lh-tight); }
h2 { font-size: var(--bf-fs-h2); }
h3 { font-size: var(--bf-fs-h3); }
h4 { font-size: var(--bf-fs-h4); }

p { text-wrap: pretty; margin-block: 0 var(--bf-sp-3); max-inline-size: var(--bf-measure); }

a { color: var(--bf-accent); text-decoration-thickness: from-font; text-underline-offset: .18em; }
a:hover { color: var(--bf-accent-ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--bf-hair-2) solid var(--bf-accent-ink);
  outline-offset: 3px;
}

/* Přeskočit na obsah — viditelné jen při focusu */
.bf-skip {
  position: absolute; inset-inline-start: var(--bf-sp-2); inset-block-start: -100%;
  z-index: 100; padding: var(--bf-sp-2) var(--bf-sp-3);
  background: var(--bf-ink); color: var(--bf-paper); text-decoration: none;
}
.bf-skip:focus-visible { inset-block-start: var(--bf-sp-2); }

.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%); height: 1px; width: 1px;
  overflow: hidden; position: absolute; white-space: nowrap;
}

/* Sazební plocha — šířku omezuje max-inline-size, vnitřní okraj (gutter)
   dává components.css přes padding. Dřív tu bylo i inline-size
   min(100% - 2*gutter) → okraj se počítal dvakrát a s vnořením 4× (mobil 215 px). */
.bf-wrap {
  max-inline-size: var(--bf-page-max);
  margin-inline: auto;
}

/* Hlavní osnova — jeden nebo dva sloupce podle toho, jestli je aside */
.bf-body { display: grid; gap: var(--bf-sp-5); padding-block: var(--bf-sp-5); }
.has-sidebar .bf-body { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64em) {
  .has-sidebar .bf-body { grid-template-columns: minmax(0, 1fr) 20rem; }
}

/* Container queries — moduly musí fungovat v hlavním sloupci i v aside.
   Dvě úrovně, protože obojí je potřeba:
     bf-band — celý modulový pás, rozhoduje o počtu sloupců pásu
     bf-slot — jednotlivý slot, podle něj se lámou komponenty uvnitř
   Komponenty z handoffu (galerie, program, karty) se řídí bf-slot, ne oknem. */
.bf-grid-top, .bf-grid-bottom {
  container-type: inline-size;
  container-name: bf-band;
}
.bf-main, .bf-aside, .bf-grid-top > *, .bf-grid-bottom > * {
  container-type: inline-size;
  container-name: bf-slot;
}

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