/**
 * Containers, sections and reusable layout primitives.
 */

body.annwn-theme {
  background: var(--annwn-ink);
  overflow-x: clip;
}

.annwn-theme .container {
  max-width: var(--annwn-container);
}

.annwn-container,
.annwn-main--full-width .alignwide {
  margin-inline: auto;
  max-width: var(--annwn-container);
  padding-inline: var(--annwn-gutter);
  width: 100%;
}

.annwn-main--full-width {
  --wp--style--global--content-size: var(--annwn-container);
  --wp--style--global--wide-size: var(--annwn-container);
  background: var(--annwn-ink);
  min-height: 50vh;
  width: 100%;
}

.annwn-main--full-width > .annwn-page {
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

.annwn-main--full-width .annwn-page__content {
  margin: 0;
  padding: var(--annwn-section-space) var(--annwn-gutter);
  width: 100%;
}

.annwn-main--full-width .annwn-page__content > :where(:not(.alignfull)) {
  max-width: var(--annwn-container) !important;
}

.annwn-main--full-width .annwn-page__content > .alignfull {
  margin-left: calc(0px - var(--annwn-gutter)) !important;
  margin-right: calc(0px - var(--annwn-gutter)) !important;
  max-width: none;
  width: calc(100% + var(--annwn-gutter) + var(--annwn-gutter));
}

.annwn-main--full-width .alignwide {
  padding-inline: 0;
}

.annwn-section {
  padding-block: var(--annwn-section-space);
  position: relative;
}

.annwn-section--surface {
  background: var(--annwn-anthracite);
}

.annwn-section--bordered {
  border-block: 1px solid var(--annwn-border);
}

.annwn-reading-width {
  max-width: var(--annwn-reading);
}

.annwn-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

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

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

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

.annwn-stack > * + * {
  margin-block-start: var(--annwn-space-5);
}

.annwn-cluster {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--annwn-space-4);
}

.annwn-split {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 7vw, 6rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}