/* ============================================================
   layout.css — Grid containers, utilities.
   ============================================================ */

.grid-container {
  width: 100%;
  max-width: var(--content-max);   /* 1410px hard cap per Figma content column */
  padding: 0 var(--margin);
  margin: 0 auto;
}

.grid-wide {
  width: 100%;
  max-width: var(--container-max); /* 1920px — pro full-bleed sekce (hero image apod.) */
  padding: 0 var(--margin);
  margin: 0 auto;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}

.flex {
  display: flex;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }

/* Section spacing */
.section {
  padding-block: var(--space-9);
}
.section--tight { padding-block: var(--space-7); }
.section--loose { padding-block: calc(var(--space-9) * 1.5); }

/* Image helpers */
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-contain { width: 100%; height: 100%; object-fit: contain; display: block; }
.sample-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-glass-i);
  border-radius: var(--radius-main);
}

/* Hide visually but keep for screen readers (already in base.css as .sr-only) */
.hidden {
  display: none !important;
}

@media (max-width: 1023px) {
  .grid-12 { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-7); }
}