/* ============================================================================
   layout.css — kontejnery, gridy, flex utility, skryté položky
   ============================================================================ */

.container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.container-prose {
  max-width: var(--max-prose);
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Grid base */
.grid {
  display: grid;
  gap: var(--space-md);
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responzivní — pod 720 px vše do 1 sloupce */
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Flex utilities */
.flex      { display: flex; }
.flex-col  { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

/* Mezery */
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }

/* Vizuálně skryté, dostupné pro čtečky */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}