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

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

.mps-section {
  padding-block: var(--section-space-desktop);
}

.mps-section--surface {
  background: var(--mps-color-surface);
}

.mps-section--soft {
  background: var(--mps-color-surface-soft);
}

.mps-site-main {
  min-height: 60vh;
}

.mps-stack {
  display: flex;
  flex-direction: column;
}

.mps-stack--large { gap: var(--content-gap-large); }
.mps-stack--medium { gap: var(--content-gap-medium); }
.mps-stack--small { gap: var(--content-gap-small); }
.mps-stack--xsmall { gap: var(--content-gap-xsmall); }

.mps-grid {
  display: grid;
  gap: var(--content-gap-medium);
}

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

.mps-content-area {
  padding-block: var(--section-space-desktop);
}

.mps-entry + .mps-entry {
  margin-top: var(--section-space-tablet);
}

.mps-entry__title {
  margin-bottom: var(--content-gap-medium);
}

.mps-entry__content > * + * {
  margin-top: var(--content-gap-small);
}

.mps-foundation-preview {
  background: var(--mps-color-surface-soft);
}

.mps-foundation-preview__intro {
  max-width: 900px;
}

.mps-foundation-preview__panel {
  padding: 42px;
  border: 1px solid var(--mps-color-border);
  background: var(--mps-color-background);
}

.mps-foundation-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1024px) {
  .mps-container,
  .mps-container--narrow {
    width: min(calc(100% - (2 * var(--gutter-tablet))), var(--container-width));
  }

  .mps-section,
  .mps-content-area {
    padding-block: var(--section-space-tablet);
  }

  .mps-foundation-preview__panel {
    padding: 32px;
  }
}

@media (max-width: 600px) {
  .mps-container,
  .mps-container--narrow {
    width: min(calc(100% - (2 * var(--gutter-mobile))), var(--container-width));
  }

  .mps-section,
  .mps-content-area {
    padding-block: var(--section-space-mobile);
  }

  .mps-grid--2 {
    grid-template-columns: 1fr;
  }

  .mps-foundation-preview__panel {
    padding: 24px 20px;
  }

  .mps-foundation-preview__actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Decorative rings — shared background component. */
.mps-pattern-bg {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.mps-pattern-bg::after {
  position: absolute;
  z-index: 0;
  top: var(--mps-pattern-top, 0);
  right: var(--mps-pattern-right, 0);
  width: var(--mps-pattern-width, 34%);
  height: var(--mps-pattern-height, 100%);
  background: url("../../images/decorations/rings.png") right center / contain no-repeat;
  content: "";
  opacity: var(--mps-pattern-opacity, 0.16);
  pointer-events: none;
}

.mps-pattern-bg > .mps-container,
.mps-pattern-bg > .mps-container--narrow {
  position: relative;
  z-index: 1;
}

.mps-pattern-bg--bottom-right::after {
  top: auto;
  bottom: var(--mps-pattern-bottom, 0);
}

@media (max-width: 767px) {
  .mps-pattern-bg::after {
    width: var(--mps-pattern-width-mobile, 58%);
    opacity: var(--mps-pattern-opacity-mobile, 0.12);
  }
}

body.mps-overlay-open { overflow: hidden; }