/**
 * Container: 100 (Single Column)
 *
 * Single slot within the 12-column grid with responsive outer margins.
 * container_size variants inset the slot by 1–3 columns on each side:
 *   full  → 12 cols (no inset)
 *   small → 10 cols (1 col inset per side)
 *   xs    →  8 cols (2 cols inset per side)
 *   xxs   →  6 cols (3 cols inset per side)
 */


.surface {
  --surface-bg:   var(--ambience);
  --surface-text: var(--trust);

  background-color: var(--surface-bg);
  color: var(--surface-text);
}

/* ── Variants ── */
.surface--white {
  --surface-bg:   var(--white);
  --surface-text: var(--trust);
}

.surface--ambience {
  --surface-bg:   var(--ambience-200);
  --surface-text: var(--trust);
}

.surface--ambience_dark {
  --surface-bg:   var(--ambience);
  --surface-text: var(--trust);
}

.surface--trust {
  --surface-bg:   var(--trust);
  --surface-text: var(--white);
}

.surface--attitude {
  --surface-bg:   var(--attitude);
  --surface-text: var(--trust);
}

.surface--academy {
  --surface-bg:   var(--academy-300, #c0a57b);
  --surface-text: var(--trust);
}


/* ── Grid wrapper ── */
.container-100 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter, 12px);
  padding-inline: var(--grid-margin);
  padding-block: var(--spacing-400);
}

@media (min-width: 768px) {
  .container-100 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1200px) {
  .container-100 {
    grid-template-columns: repeat(12, 1fr);
    padding-block: var(--spacing-1000);
  }
}

@media (min-width: 1440px) {
  .container-100 {
    grid-template-columns: repeat(12, 1fr);
    padding-block: var(--spacing-1750);
  }
}

/* ── Slot: full (default) ── */
.container__inner {
  grid-column: 1 / -1;
  height: 100%;
}

/* ── Slot: small – inset 1 col each side ── */

/* tablet: 2/-2 on 8 cols = 6 of 8 */
@media (min-width: 768px) {
  .container-100--small .container__inner {
    grid-column: 2 / -2;
  }
}

/* desktop: 2/-2 on 12 cols = 10 of 12 */
@media (min-width: 1440px) {
  .container-100--small .container__inner {
    grid-column: 2 / -2;
  }
}

/* ── Slot: xs – inset 2 cols each side ── */

/* tablet: cap at 2/-2 (safe on 8 cols) */
@media (min-width: 768px) {
  .container-100--xs .container__inner {
    grid-column: 2 / -2;
  }
}

/* desktop: 3/-3 on 12 cols = 8 of 12 */
@media (min-width: 1440px) {
  .container-100--xs .container__inner {
    grid-column: 3 / -3;
  }
}

/* ── Slot: xxs – inset 3 cols each side ── */

/* tablet: cap at 2/-2 */
@media (min-width: 768px) {
  .container-100--xxs .container__inner {
    grid-column: 2 / -2;
  }
}

/* desktop: 4/-4 on 12 cols = 6 of 12 */
@media (min-width: 1440px) {
  .container-100--xxs .container__inner {
    grid-column: 4 / -4;
  }
}

.surface--transparent {
  --surface-bg: transparent;
}

/* White surface: reduced vertical spacing */
@media (min-width: 1200px) {
  .container-100.surface--white {
    padding-block: var(--spacing-1000, 80px);
  }

  .path-node.page-node-type-article .container-100.surface--white {
    padding-block: 0 var(--spacing-1000, 80px);
    margin-top: 0;
  }
}

/* In-page navigation inside a container: no vertical padding */
.container-100:has(.in-page-navigation) {
  padding-block: 0;
}

/* Projektunterseite: same horizontal margin as h1 title, first container no vertical padding */
.node-landingpage--project-sub .container-100 {
  padding-inline: var(--grid-margin, 16px);
  max-width: calc(1427px + 2 * var(--grid-margin, 16px));
  margin-inline: auto;
}


.node-landingpage--project-sub .node__content > .container-100:first-child {
  padding-block: 0;
}

/**
 * Container: Fullbleed
 *
 * No grid margins. The single slot spans the full viewport width.
 * Use for hero banners, background-bleeding sections, or full-width media.
 */

.container,
.container--fullbleed {
  width: 100%;
  overflow: hidden;
}