/* Container, section and grid helpers – used by the PHP templates and inside components.
   Elementor pages get the same rhythm from the "ARGUS Sektion" container setting (layout/elementor.css). */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

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

.section { padding-block: var(--section-space); }
.section--tight { padding-block: calc(var(--section-space) * .6); }
.section--alt { background: var(--color-surface-alt); }

/* two plain sections in a row: avoid double spacing */
.section:not(.section--alt) + .section:not(.section--alt) { padding-top: 0; }

.grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 899.98px) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639.98px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
}