/*
 * layout.css — Grid systém a flexbox utility
 * Mobilní first, breakpointy: 480px, 768px, 1024px, 1280px
 */

/* ===== CONTAINER ===== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

.container--narrow {
  max-width: var(--container-lg);
}

.container--fluid {
  max-width: 100%;
}

/* ===== GRID ===== */

.grid {
  display: grid;
  gap: var(--space-6);
}

/* Základní sloupce — mobilní first (1 sloupec) */
.grid--cols-2 { grid-template-columns: 1fr; }
.grid--cols-3 { grid-template-columns: 1fr; }
.grid--cols-4 { grid-template-columns: 1fr; }

/* Tablet ≥ 768px */
@media (min-width: 768px) {
  .grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
  .grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
  .grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Gap varianty */
.grid--gap-sm  { gap: var(--space-4); }
.grid--gap-md  { gap: var(--space-8); }
.grid--gap-lg  { gap: var(--space-12); }

/* Auto-fill grid (pro galerie, karty) */
.grid--auto-sm {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.grid--auto-md {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* ===== FLEX UTILITY ===== */

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* ===== DVOU-SLOUPCOVÝ LAYOUT (text + media) ===== */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  /* Text vlevo, media vpravo */
  .split--text-first .split__text   { order: 1; }
  .split--text-first .split__media  { order: 2; }

  /* Media vlevo, text vpravo */
  .split--media-first .split__media { order: 1; }
  .split--media-first .split__text  { order: 2; }

  /* 60/40 varianta */
  .split--60-40 {
    grid-template-columns: 3fr 2fr;
  }
}

/* ===== SECTION WRAPPER ===== */

.section {
  padding-block: var(--section-py);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverted);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-white);
}

/* ===== STACK (vertikální mezery) ===== */

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-8); }

/* ===== CENTER ===== */

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ===== ASPECT RATIO ===== */

.aspect-square    { aspect-ratio: 1 / 1; }
.aspect-video     { aspect-ratio: 16 / 9; }
.aspect-portrait  { aspect-ratio: 3 / 4; }
.aspect-landscape { aspect-ratio: 4 / 3; }

/* ===== RESPONSIVE BREAKPOINTS (pouze pro layout) ===== */

/* Skryj na mobilu */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

/* Skryj na tabletu a výše */
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}