/* =============================================================================
   bookfest.cz — modulové pozice

   Claude Design v handoffu moduly NEŘEŠIL — jeho CSS cílí jen na výstup
   com_content a na .navbar-nav. Tahle vrstva je doplněk implementace.

   Klíčové omezení z podkladů: každá nepovinná pozice může být PRÁZDNÁ
   a layout to musí ustát. Prázdné pozice index.php vůbec nevykreslí
   (countModules), takže tady stačí řešit vzhled neprázdných.
   ========================================================================== */

/* ---------- obálka modulu (jdoc style="card") ----------------------------- */
.bf-card {
  background: var(--bf-paper-2);
  border-top: var(--bf-hair-2) solid var(--bf-ink);
  padding: var(--bf-sp-3);
}
.bf-card + .bf-card { margin-top: var(--bf-sp-3); }

.bf-card__title {
  font-family: var(--bf-micro), system-ui, sans-serif;
  font-size: var(--bf-fs-micro);
  letter-spacing: var(--bf-tr-micro);
  text-transform: uppercase;
  color: var(--bf-muted);
  margin-block: 0 var(--bf-sp-2);
}

/* Moduly bez obálky (style="none") nesmí nic dědit — jen odsazení. */
.bf-topbar .moduletable,
.bf-banner .moduletable,
.bf-footer .moduletable { margin: 0; }

/* ---------- topbar -------------------------------------------------------- */
.bf-topbar {
  background: var(--bf-ink);
  color: var(--bf-dark-text);
  font-family: var(--bf-micro), system-ui, sans-serif;
  font-size: var(--bf-fs-micro);
  letter-spacing: var(--bf-tr-micro);
  text-transform: uppercase;
}
.bf-topbar :where(a) { color: var(--bf-dark-text); }
.bf-topbar :where(p) { margin: 0; max-inline-size: none; }

/* ---------- mřížka modulových pásů ---------------------------------------- */
.bf-grid-top,
.bf-grid-bottom {
  display: grid;
  gap: var(--bf-gap);
  padding-block: var(--bf-sp-4);
}
/* Dva sloupce jen když jsou obě pozice plné. Které divy vzniknou, řídí
   index.php přes countModules; :has() dořeší, že jeden div = jeden sloupec.
   Dotaz míří na vlastní kontejner pásu (bf-band), ne na okno. */
@container bf-band (min-width: 44em) {
  .bf-grid-top:has(> * + *),
  .bf-grid-bottom:has(> * + *) { grid-template-columns: 1fr 1fr; }
}

/* ---------- postranní panel ---------------------------------------------- */
.bf-aside {
  font-size: var(--bf-fs-small);
  align-self: start;
  position: sticky;
  top: var(--bf-sp-3);
}
@media (max-width: 63.99em) {
  .bf-aside { position: static; }
}

/* ---------- patička ------------------------------------------------------ */
.bf-footer {
  background: var(--bf-dark-bg);
  color: var(--bf-dark-muted);
  padding-block: var(--bf-sp-6) var(--bf-sp-4);
  margin-top: var(--bf-sp-7);
  font-size: var(--bf-fs-small);
}
.bf-footer :where(a) { color: var(--bf-dark-text); }
.bf-footer :where(a:hover) { color: var(--bf-red-light); }
.bf-footer :where(h2, h3) { color: var(--bf-dark-text); font-size: var(--bf-fs-h4); }
.bf-footer :where(ul) { list-style: none; padding: 0; margin: 0; }

/* Kolofon: org. údaje + navigace, dělicí linka, spodní řádek s copyrightem.
   Reálný obsah patičky (mod_custom "Patička"); struktura podle handoffu
   Claude Design (.bf-colophon), zjednodušená na doložitelný obsah. */
.bf-footer__grid {
  display: grid;
  gap: var(--bf-sp-3) var(--bf-sp-4);
}
.bf-footer__org-name {
  font-family: var(--bf-micro), system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--bf-fs-nano);
  letter-spacing: var(--bf-tr-nano);
  text-transform: uppercase;
  color: var(--bf-dark-text);
  margin: 0 0 var(--bf-sp-1);
}
.bf-footer__org-addr {
  margin: 0;
  line-height: var(--bf-lh-meta);
}
.bf-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-sp-1) var(--bf-sp-3);
  margin: 0;
}
.bf-footer__rule {
  border: 0;
  border-top: var(--bf-hair) solid var(--bf-dark-rule);
  margin: var(--bf-sp-4) 0;
}
.bf-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-sp-2) var(--bf-sp-3);
  justify-content: space-between;
  align-items: baseline;
}
.bf-footer__copy { margin: 0; }
.bf-footer__top:focus-visible { outline-offset: 2px; }

@media (min-width: 48em) {
  .bf-footer__grid { grid-template-columns: 1fr auto; align-items: start; }
}

/* ---------- vyhledávání (mod_finder) ------------------------------------- */
.bf-header .mod-finder__form { display: flex; gap: var(--bf-sp-1); }
.bf-header .mod-finder input[type="search"] {
  font: inherit;
  padding: var(--bf-sp-1) var(--bf-sp-2);
  border: var(--bf-hair) solid var(--bf-rule-strong);
  background: var(--bf-paper);
  color: var(--bf-ink);
  min-inline-size: 12ch;
}

/* ---------- drobečková navigace ------------------------------------------ */
.bf-breadcrumb :where(ol) {
  display: flex; flex-wrap: wrap; gap: var(--bf-sp-1);
  list-style: none; padding: 0; margin: 0;
  font-family: var(--bf-micro), system-ui, sans-serif;
  font-size: var(--bf-fs-micro);
  letter-spacing: var(--bf-tr-micro);
  text-transform: uppercase;
  color: var(--bf-muted);
}
.bf-breadcrumb :where(li + li)::before { content: "·"; margin-inline-end: var(--bf-sp-1); }
.bf-breadcrumb :where(a) { color: var(--bf-muted); }

/* ---------- systémové hlášky --------------------------------------------- */
#system-message-container joomla-alert {
  display: block;
  margin-block-end: var(--bf-sp-3);
  border-inline-start: var(--bf-hair-2) solid var(--bf-accent);
  padding: var(--bf-sp-2) var(--bf-sp-3);
  background: var(--bf-paper-2);
}


/* ---------- mobilní navigace --------------------------------------------- */
/* Handoff má `.bf-header__nav { display: none }` nepodmíněně a zapíná ho až
   od 992 px. Přepínač v js/nav.js přepíná atribut [hidden], takže bez tohohle
   pravidla by na mobilu neměl žádný viditelný efekt — panel by zůstal skrytý
   deklarací z components.css. Doplněk implementace, ne oprava designu. */
@media (max-width: 61.99em) {
  .bf-header__nav:not([hidden]) {
    display: block;
    inline-size: 100%;
    padding-block: var(--bf-sp-3);
    border-top: var(--bf-hair) solid var(--bf-rule);
  }
}

/* Přepínač je viditelný jen tam, kde je navigace skrytá. */
.bf-nav-toggle { display: inline-flex; align-items: center; gap: var(--bf-sp-1);
  min-block-size: 44px; min-inline-size: 44px;
  background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
@media (min-width: 62em) { .bf-nav-toggle { display: none; } }