/* === Řádek a sloupce === */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -0.5rem;
}
.col {
  padding-inline: 0.5rem;
  flex: 1 1 0%;
}

/* === GRID: Základní === */
.grid {
  display: grid;
  gap: 1.5rem;
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
}
.grid-5 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* === Mobilní varianty === */
.grid-2-sm {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-3-sm {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.grid-4-sm {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* === GAPS: Utility mezery === */
.gap-sm {
  gap: 1rem;
}
.gap-md {
  gap: 2rem;
}
.gap-lg {
  gap: 3rem;
}
.gap-xl {
  gap: 5rem;
}

/* === Containers a wrappers === */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.section {
  padding-block: 4rem 3rem;
}

.section--light {
  background: var(--color-beige);
}

/* === Hospodareni specifické rozvržení === */
.hospodareni-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* === Split layout – fixní a pružná část === */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.split > .fixed {
  flex: 0 0 300px;
}
.split > .flex {
  flex: 1 1 0%;
}

/* === Sekce === */
.section {
  padding-block: 4rem 3rem;
}
.section--light {
  background: var(--color-beige);
}

/* === Mobilní optimalizace grid-2 === */
@media (min-width: 768px) {
  .grid.grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

/* === Debug outline – zakomentovat v produkci */
/*
.container,
.grid.grid-2,
.swiper-slide,
.section {
  outline: 1px solid red;
}
*/