/* --------------------------------------------------------------------------
 * Vkládaný katalog komponent (sekce „Pro kodéry").
 *
 * Ukázky se vkládají rámcem, ne přímo do stránky. Důvod: katalog nese CELÝ
 * Bootstrap a styly šablony, které pracují s holými značkami (h1, p, .btn…).
 * Vložené přímo do stránky by přepsaly vzhled samotného manuálu — a poznalo by
 * se to až na jiných stránkách. Rámec dává úplné oddělení stylů i skriptů,
 * takže ukázky zůstávají klikací (modály, záložky, galerie) a manuál se nehne.
 * ----------------------------------------------------------------------- */

/* Katalog potřebuje víc místa než běžný text — mřížky ukázek jsou širší.
   Cílí se přes :has(), aby se rozšíření týkalo jen stránek s ukázkou. */
body:has(.ui-demo-ramec) .md-grid {
  max-width: 72rem;
}

/* Postranní obsah stránky by u ukázek jen ukrajoval šířku (nadpisy jsou uvnitř
   rámce, takže by stejně byl prázdný). */
body:has(.ui-demo-ramec) .md-sidebar--secondary {
  display: none;
}

.ui-demo-ramec {
  display: block;
  width: 100%;
  /* Výchozí výška platí, než se ozve obsah rámce (viz ui-demo.js). Není to
     odhad „tak akorát", ale záměrně velká hodnota: kdyby skript selhal, je
     lepší mít pod ukázkou prázdno než useknutou ukázku. */
  height: 900px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .3rem;
  background: #fff;
  color-scheme: light;   /* ukázky jsou stavěné na světlé pozadí */
}

.ui-demo-poznamka {
  margin-top: .6rem;
  font-size: .72rem;
  color: var(--md-default-fg-color--light);
}

.ui-demo-poznamka a {
  color: inherit;
  text-decoration: underline;
}