/* ===========================
   Jednoduchý 12-sloupcový grid
   ve stylu Bootstrapu
   =========================== */

/* Volitelně: základní proměnné */
:root {
  --grid-gutter: 16px; /* mezera mezi sloupci */
}

/* ŘÁDEK */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--grid-gutter) / 2);
  margin-right: calc(-1 * var(--grid-gutter) / 2);
}

/* ZÁKLADNÍ NASTAVENÍ PRO SLOUPCE */
[class*="col-"],
.col {
  box-sizing: border-box;
  padding-left: calc(var(--grid-gutter) / 2);
  padding-right: calc(var(--grid-gutter) / 2);
}

/* .col bez čísla – automatické rozdělení šířky */
.col {
  flex: 1 0 0;
  max-width: 100%;
}

/* DEFAULT: mobilní zobrazení – sloupce pod sebou */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ===== ŠÍŘKY SLOUPCŮ (12-sloupcová mřížka) ===== */
/* Můžeš použít přímo .col-6 atd. pro všechna zařízení */

.col-1  { flex: 0 0 calc(100% / 12 * 1);  max-width: calc(100% / 12 * 1); }
.col-2  { flex: 0 0 calc(100% / 12 * 2);  max-width: calc(100% / 12 * 2); }
.col-3  { flex: 0 0 calc(100% / 12 * 3);  max-width: calc(100% / 12 * 3); }
.col-4  { flex: 0 0 calc(100% / 12 * 4);  max-width: calc(100% / 12 * 4); }
.col-5  { flex: 0 0 calc(100% / 12 * 5);  max-width: calc(100% / 12 * 5); }
.col-6  { flex: 0 0 calc(100% / 12 * 6);  max-width: calc(100% / 12 * 6); }
.col-7  { flex: 0 0 calc(100% / 12 * 7);  max-width: calc(100% / 12 * 7); }
.col-8  { flex: 0 0 calc(100% / 12 * 8);  max-width: calc(100% / 12 * 8); }
.col-9  { flex: 0 0 calc(100% / 12 * 9);  max-width: calc(100% / 12 * 9); }
.col-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
.col-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
.col-12 { flex: 0 0 calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }

/* ===== RESPONSIVNÍ VARIANTY PODLE ŠÍŘKY OKNA ===== */
/* Breakpointy jsou zhruba jako v Bootstrapu */

/* >= 576px – .col-sm-* */
@media (min-width: 576px) {
  .col-sm       { flex: 1 0 0; max-width: 100%; }

  .col-sm-1  { flex: 0 0 calc(100% / 12 * 1);  max-width: calc(100% / 12 * 1); }
  .col-sm-2  { flex: 0 0 calc(100% / 12 * 2);  max-width: calc(100% / 12 * 2); }
  .col-sm-3  { flex: 0 0 calc(100% / 12 * 3);  max-width: calc(100% / 12 * 3); }
  .col-sm-4  { flex: 0 0 calc(100% / 12 * 4);  max-width: calc(100% / 12 * 4); }
  .col-sm-5  { flex: 0 0 calc(100% / 12 * 5);  max-width: calc(100% / 12 * 5); }
  .col-sm-6  { flex: 0 0 calc(100% / 12 * 6);  max-width: calc(100% / 12 * 6); }
  .col-sm-7  { flex: 0 0 calc(100% / 12 * 7);  max-width: calc(100% / 12 * 7); }
  .col-sm-8  { flex: 0 0 calc(100% / 12 * 8);  max-width: calc(100% / 12 * 8); }
  .col-sm-9  { flex: 0 0 calc(100% / 12 * 9);  max-width: calc(100% / 12 * 9); }
  .col-sm-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
  .col-sm-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
  .col-sm-12 { flex: 0 0 calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }
}

/* >= 768px – .col-md-* */
@media (min-width: 768px) {
  .col-md       { flex: 1 0 0; max-width: 100%; }

  .col-md-1  { flex: 0 0 calc(100% / 12 * 1);  max-width: calc(100% / 12 * 1); }
  .col-md-2  { flex: 0 0 calc(100% / 12 * 2);  max-width: calc(100% / 12 * 2); }
  .col-md-3  { flex: 0 0 calc(100% / 12 * 3);  max-width: calc(100% / 12 * 3); }
  .col-md-4  { flex: 0 0 calc(100% / 12 * 4);  max-width: calc(100% / 12 * 4); }
  .col-md-5  { flex: 0 0 calc(100% / 12 * 5);  max-width: calc(100% / 12 * 5); }
  .col-md-6  { flex: 0 0 calc(100% / 12 * 6);  max-width: calc(100% / 12 * 6); }
  .col-md-7  { flex: 0 0 calc(100% / 12 * 7);  max-width: calc(100% / 12 * 7); }
  .col-md-8  { flex: 0 0 calc(100% / 12 * 8);  max-width: calc(100% / 12 * 8); }
  .col-md-9  { flex: 0 0 calc(100% / 12 * 9);  max-width: calc(100% / 12 * 9); }
  .col-md-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
  .col-md-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
  .col-md-12 { flex: 0 0 calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }
}

/* >= 992px – .col-lg-* */
@media (min-width: 992px) {
  .col-lg       { flex: 1 0 0; max-width: 100%; }

  .col-lg-1  { flex: 0 0 calc(100% / 12 * 1);  max-width: calc(100% / 12 * 1); }
  .col-lg-2  { flex: 0 0 calc(100% / 12 * 2);  max-width: calc(100% / 12 * 2); }
  .col-lg-3  { flex: 0 0 calc(100% / 12 * 3);  max-width: calc(100% / 12 * 3); }
  .col-lg-4  { flex: 0 0 calc(100% / 12 * 4);  max-width: calc(100% / 12 * 4); }
  .col-lg-5  { flex: 0 0 calc(100% / 12 * 5);  max-width: calc(100% / 12 * 5); }
  .col-lg-6  { flex: 0 0 calc(100% / 12 * 6);  max-width: calc(100% / 12 * 6); }
  .col-lg-7  { flex: 0 0 calc(100% / 12 * 7);  max-width: calc(100% / 12 * 7); }
  .col-lg-8  { flex: 0 0 calc(100% / 12 * 8);  max-width: calc(100% / 12 * 8); }
  .col-lg-9  { flex: 0 0 calc(100% / 12 * 9);  max-width: calc(100% / 12 * 9); }
  .col-lg-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
  .col-lg-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
  .col-lg-12 { flex: 0 0 calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }
}

/* >= 1200px – .col-xl-* (pokud potřebuješ) */
@media (min-width: 1200px) {
  .col-xl       { flex: 1 0 0; max-width: 100%; }

  .col-xl-1  { flex: 0 0 calc(100% / 12 * 1);  max-width: calc(100% / 12 * 1); }
  .col-xl-2  { flex: 0 0 calc(100% / 12 * 2);  max-width: calc(100% / 12 * 2); }
  .col-xl-3  { flex: 0 0 calc(100% / 12 * 3);  max-width: calc(100% / 12 * 3); }
  .col-xl-4  { flex: 0 0 calc(100% / 12 * 4);  max-width: calc(100% / 12 * 4); }
  .col-xl-5  { flex: 0 0 calc(100% / 12 * 5);  max-width: calc(100% / 12 * 5); }
  .col-xl-6  { flex: 0 0 calc(100% / 12 * 6);  max-width: calc(100% / 12 * 6); }
  .col-xl-7  { flex: 0 0 calc(100% / 12 * 7);  max-width: calc(100% / 12 * 7); }
  .col-xl-8  { flex: 0 0 calc(100% / 12 * 8);  max-width: calc(100% / 12 * 8); }
  .col-xl-9  { flex: 0 0 calc(100% / 12 * 9);  max-width: calc(100% / 12 * 9); }
  .col-xl-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
  .col-xl-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
  .col-xl-12 { flex: 0 0 calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }
}

/* ===========================
   Jednoduchý 12-sloupcový grid
   ve stylu Bootstrapu
   =========================== */

/* Volitelně: základní proměnné */
:root {
  --grid-gutter: 16px; /* mezera mezi sloupci */
}

/* ŘÁDEK */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--grid-gutter) / 2);
  margin-right: calc(-1 * var(--grid-gutter) / 2);
}

/* ZÁKLADNÍ NASTAVENÍ PRO SLOUPCE */
[class*="col-"],
.col {
  box-sizing: border-box;
  padding-left: calc(var(--grid-gutter) / 2);
  padding-right: calc(var(--grid-gutter) / 2);
}

/* .col bez čísla – automatické rozdělení šířky */
.col {
  flex: 1 0 0;
  max-width: 100%;
}

/* DEFAULT: mobilní zobrazení – sloupce pod sebou */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ===== ŠÍŘKY SLOUPCŮ (12-sloupcová mřížka) ===== */
/* Můžeš použít přímo .col-6 atd. pro všechna zařízení */

.col-1  { flex: 0 0 calc(100% / 12 * 1);  max-width: calc(100% / 12 * 1); }
.col-2  { flex: 0 0 calc(100% / 12 * 2);  max-width: calc(100% / 12 * 2); }
.col-3  { flex: 0 0 calc(100% / 12 * 3);  max-width: calc(100% / 12 * 3); }
.col-4  { flex: 0 0 calc(100% / 12 * 4);  max-width: calc(100% / 12 * 4); }
.col-5  { flex: 0 0 calc(100% / 12 * 5);  max-width: calc(100% / 12 * 5); }
.col-6  { flex: 0 0 calc(100% / 12 * 6);  max-width: calc(100% / 12 * 6); }
.col-7  { flex: 0 0 calc(100% / 12 * 7);  max-width: calc(100% / 12 * 7); }
.col-8  { flex: 0 0 calc(100% / 12 * 8);  max-width: calc(100% / 12 * 8); }
.col-9  { flex: 0 0 calc(100% / 12 * 9);  max-width: calc(100% / 12 * 9); }
.col-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
.col-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
.col-12 { flex: 0 0 calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }

/* ===== RESPONSIVNÍ VARIANTY PODLE ŠÍŘKY OKNA ===== */
/* Breakpointy jsou zhruba jako v Bootstrapu */

/* >= 576px – .col-sm-* */
@media (min-width: 576px) {
  .col-sm       { flex: 1 0 0; max-width: 100%; }

  .col-sm-1  { flex: 0 0 calc(100% / 12 * 1);  max-width: calc(100% / 12 * 1); }
  .col-sm-2  { flex: 0 0 calc(100% / 12 * 2);  max-width: calc(100% / 12 * 2); }
  .col-sm-3  { flex: 0 0 calc(100% / 12 * 3);  max-width: calc(100% / 12 * 3); }
  .col-sm-4  { flex: 0 0 calc(100% / 12 * 4);  max-width: calc(100% / 12 * 4); }
  .col-sm-5  { flex: 0 0 calc(100% / 12 * 5);  max-width: calc(100% / 12 * 5); }
  .col-sm-6  { flex: 0 0 calc(100% / 12 * 6);  max-width: calc(100% / 12 * 6); }
  .col-sm-7  { flex: 0 0 calc(100% / 12 * 7);  max-width: calc(100% / 12 * 7); }
  .col-sm-8  { flex: 0 0 calc(100% / 12 * 8);  max-width: calc(100% / 12 * 8); }
  .col-sm-9  { flex: 0 0 calc(100% / 12 * 9);  max-width: calc(100% / 12 * 9); }
  .col-sm-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
  .col-sm-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
  .col-sm-12 { flex: 0 0 calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }
}

/* >= 768px – .col-md-* */
@media (min-width: 768px) {
  .col-md       { flex: 1 0 0; max-width: 100%; }

  .col-md-1  { flex: 0 0 calc(100% / 12 * 1);  max-width: calc(100% / 12 * 1); }
  .col-md-2  { flex: 0 0 calc(100% / 12 * 2);  max-width: calc(100% / 12 * 2); }
  .col-md-3  { flex: 0 0 calc(100% / 12 * 3);  max-width: calc(100% / 12 * 3); }
  .col-md-4  { flex: 0 0 calc(100% / 12 * 4);  max-width: calc(100% / 12 * 4); }
  .col-md-5  { flex: 0 0 calc(100% / 12 * 5);  max-width: calc(100% / 12 * 5); }
  .col-md-6  { flex: 0 0 calc(100% / 12 * 6);  max-width: calc(100% / 12 * 6); }
  .col-md-7  { flex: 0 0 calc(100% / 12 * 7);  max-width: calc(100% / 12 * 7); }
  .col-md-8  { flex: 0 0 calc(100% / 12 * 8);  max-width: calc(100% / 12 * 8); }
  .col-md-9  { flex: 0 0 calc(100% / 12 * 9);  max-width: calc(100% / 12 * 9); }
  .col-md-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
  .col-md-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
  .col-md-12 { flex: 0 0 calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }
}

/* >= 992px – .col-lg-* */
@media (min-width: 992px) {
  .col-lg       { flex: 1 0 0; max-width: 100%; }

  .col-lg-1  { flex: 0 0 calc(100% / 12 * 1);  max-width: calc(100% / 12 * 1); }
  .col-lg-2  { flex: 0 0 calc(100% / 12 * 2);  max-width: calc(100% / 12 * 2); }
  .col-lg-3  { flex: 0 0 calc(100% / 12 * 3);  max-width: calc(100% / 12 * 3); }
  .col-lg-4  { flex: 0 0 calc(100% / 12 * 4);  max-width: calc(100% / 12 * 4); }
  .col-lg-5  { flex: 0 0 calc(100% / 12 * 5);  max-width: calc(100% / 12 * 5); }
  .col-lg-6  { flex: 0 0 calc(100% / 12 * 6);  max-width: calc(100% / 12 * 6); }
  .col-lg-7  { flex: 0 0 calc(100% / 12 * 7);  max-width: calc(100% / 12 * 7); }
  .col-lg-8  { flex: 0 0 calc(100% / 12 * 8);  max-width: calc(100% / 12 * 8); }
  .col-lg-9  { flex: 0 0 calc(100% / 12 * 9);  max-width: calc(100% / 12 * 9); }
  .col-lg-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
  .col-lg-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
  .col-lg-12 { flex: 0 0 calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }
}

/* >= 1200px – .col-xl-* (pokud potřebuješ) */
@media (min-width: 1200px) {
  .col-xl       { flex: 1 0 0; max-width: 100%; }

  .col-xl-1  { flex: 0 0 calc(100% / 12 * 1);  max-width: calc(100% / 12 * 1); }
  .col-xl-2  { flex: 0 0 calc(100% / 12 * 2);  max-width: calc(100% / 12 * 2); }
  .col-xl-3  { flex: 0 0 calc(100% / 12 * 3);  max-width: calc(100% / 12 * 3); }
  .col-xl-4  { flex: 0 0 calc(100% / 12 * 4);  max-width: calc(100% / 12 * 4); }
  .col-xl-5  { flex: 0 0 calc(100% / 12 * 5);  max-width: calc(100% / 12 * 5); }
  .col-xl-6  { flex: 0 0 calc(100% / 12 * 6);  max-width: calc(100% / 12 * 6); }
  .col-xl-7  { flex: 0 0 calc(100% / 12 * 7);  max-width: calc(100% / 12 * 7); }
  .col-xl-8  { flex: 0 0 calc(100% / 12 * 8);  max-width: calc(100% / 12 * 8); }
  .col-xl-9  { flex: 0 0 calc(100% / 12 * 9);  max-width: calc(100% / 12 * 9); }
  .col-xl-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); }
  .col-xl-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); }
  .col-xl-12 { flex: 0 0 calc(100% / 12 * 12); max-width: calc(100% / 12 * 12); }
}

/* ==============================
   Responzivní obrázky
   ============================== */

.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Margin a padding s breakpoints */
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 16px; }
.m-4 { margin: 32px; }
.m-5 { margin: 64px; }

.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 16px; }
.p-4 { padding: 32px; }
.p-5 { padding: 64px; }

/* Margin a padding pro breakpoints */
@media (min-width: 576px) {
  .m-sm-1 { margin: 4px; }
  .m-sm-2 { margin: 8px; }
  .m-sm-3 { margin: 16px; }
  .m-sm-4 { margin: 32px; }
  .m-sm-5 { margin: 64px; }

  .p-sm-1 { padding: 4px; }
  .p-sm-2 { padding: 8px; }
  .p-sm-3 { padding: 16px; }
  .p-sm-4 { padding: 32px; }
  .p-sm-5 { padding: 64px; }
}

@media (min-width: 768px) {
  .m-md-1 { margin: 4px; }
  .m-md-2 { margin: 8px; }
  .m-md-3 { margin: 16px; }
  .m-md-4 { margin: 32px; }
  .m-md-5 { margin: 64px; }

  .p-md-1 { padding: 4px; }
  .p-md-2 { padding: 8px; }
  .p-md-3 { padding: 16px; }
  .p-md-4 { padding: 32px; }
  .p-md-5 { padding: 64px; }
}

@media (min-width: 992px) {
  .m-lg-1 { margin: 4px; }
  .m-lg-2 { margin: 8px; }
  .m-lg-3 { margin: 16px; }
  .m-lg-4 { margin: 32px; }
  .m-lg-5 { margin: 64px; }

  .p-lg-1 { padding: 4px; }
  .p-lg-2 { padding: 8px; }
  .p-lg-3 { padding: 16px; }
  .p-lg-4 { padding: 32px; }
  .p-lg-5 { padding: 64px; }
}

@media (min-width: 1200px) {
  .m-xl-1 { margin: 4px; }
  .m-xl-2 { margin: 8px; }
  .m-xl-3 { margin: 16px; }
  .m-xl-4 { margin: 32px; }
  .m-xl-5 { margin: 64px; }

  .p-xl-1 { padding: 4px; }
  .p-xl-2 { padding: 8px; }
  .p-xl-3 { padding: 16px; }
  .p-xl-4 { padding: 32px; }
  .p-xl-5 { padding: 64px; }
}