/* ==========================================================================
   layout.css — kontajnery, grid, sekcie
   ========================================================================== */

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

.container--narrow { max-width: 860px; }

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

.section--alt { background: var(--c-paper-alt); }

/* Sekcia, ktorá končí celoplošným prvkom (napr. kartami služieb) — spodné
   odsadenie by pod ním nechalo prázdny pás. */
.section--flush { padding-bottom: 0; }

.section--ink {
  background: var(--c-ink);
  color: var(--c-on-ink);
}
.section--ink .muted,
.section--ink .lead,
.section--ink .pullquote__by { color: var(--c-on-ink-soft); }

/* Hlavička sekcie */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: clamp(var(--space-8), 6vw, var(--space-24));
}
.section-head--center {
  align-items: center;
  text-align: center;
}
.section-head--center p { margin-inline: auto; }

/* Dvojstĺpec */
.split {
  display: grid;
  gap: clamp(var(--space-8), 6vw, var(--space-24));
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first > .split__media { order: -1; }
}

/* Vertikálny stack */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, var(--space-6)); }

/* Ozdobná linka */
.rule {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--c-line);
}
.rule--short { width: 64px; background: var(--c-accent); }