.eon-shell,
.u-max-content {
  width: min(100% - 2rem, var(--eon-container-content));
  margin-inline: auto;
}

.eon-shell--narrow,
.u-max-narrow {
  width: min(100% - 2rem, var(--eon-container-narrow));
  margin-inline: auto;
}

.eon-shell--wide {
  width: min(100% - 2rem, var(--eon-container-wide));
  margin-inline: auto;
}

.eon-section,
.u-pad-section-md {
  padding-block: var(--eon-space-xl);
}

.eon-section--tight,
.u-pad-section-sm {
  padding-block: var(--eon-space-lg);
}

.eon-section--loose,
.u-pad-section-lg {
  padding-block: var(--eon-space-2xl);
}

.eon-section--surface,
.u-section-soft {
  background: var(--eon-color-surface-2);
}

.eon-section--dark,
.u-section-dark {
  background: var(--eon-color-dark);
  color: var(--eon-color-dark-text);
}

.eon-section--accent {
  background: var(--eon-color-accent);
  color: var(--eon-color-accent-contrast);
}

.eon-section--dark h1,
.eon-section--dark h2,
.eon-section--dark h3,
.eon-section--dark h4,
.eon-section--dark h5,
.eon-section--dark h6,
.eon-section--dark a,
.eon-section--accent h1,
.eon-section--accent h2,
.eon-section--accent h3,
.eon-section--accent h4,
.eon-section--accent h5,
.eon-section--accent h6,
.eon-section--accent a,
.u-section-dark h1,
.u-section-dark h2,
.u-section-dark h3,
.u-section-dark h4,
.u-section-dark h5,
.u-section-dark h6,
.u-section-dark a {
  color: inherit;
}

.eon-card,
.u-card {
  padding: var(--eon-space-lg);
  border: 1px solid var(--eon-color-border);
  border-radius: var(--eon-radius-md);
  background: var(--eon-color-surface);
  box-shadow: var(--eon-shadow-sm);
}

.eon-card--soft {
  background: var(--eon-color-surface-2);
}

.eon-card--elevated {
  box-shadow: var(--eon-shadow-md);
}

.eon-grid-2,
.eon-grid-3,
.eon-split,
.eon-auto-grid {
  display: grid;
  gap: var(--eon-space-lg);
}

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

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

.eon-split {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
}

.eon-auto-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

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

.eon-media-cover,
.eon-media-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eon-ratio-square {
  aspect-ratio: 1 / 1;
}

.eon-ratio-landscape {
  aspect-ratio: 4 / 3;
}

.eon-ratio-wide {
  aspect-ratio: 16 / 9;
}

.eon-eyebrow {
  display: inline-block;
  margin-bottom: var(--eon-space-xs);
  color: var(--eon-color-accent);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eon-overlay {
  position: relative;
  overflow: hidden;
}

.eon-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--eon-color-overlay);
  pointer-events: none;
}

.eon-overlay > * {
  position: relative;
  z-index: 1;
}

.u-shadow-sm {
  box-shadow: var(--eon-shadow-sm);
}

.u-shadow-md {
  box-shadow: var(--eon-shadow-md);
}

.u-shadow-lg {
  box-shadow: var(--eon-shadow-lg);
}

.u-radius-sm {
  border-radius: var(--eon-radius-sm);
}

.u-radius-md {
  border-radius: var(--eon-radius-md);
}

.u-radius-lg {
  border-radius: var(--eon-radius-lg);
}

.u-radius-pill {
  border-radius: var(--eon-radius-pill);
}

.u-text-center {
  text-align: center;
}

.eon-measure {
  max-width: 65ch;
}

.eon-hide-mobile {
  display: initial;
}

.eon-hide-desktop {
  display: none;
}

.u-stack-xs > * + * {
  margin-top: var(--eon-space-xs);
}

.u-stack-sm > * + * {
  margin-top: var(--eon-space-sm);
}

.u-stack-md > * + * {
  margin-top: var(--eon-space-md);
}

.u-stack-lg > * + * {
  margin-top: var(--eon-space-lg);
}

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

  .eon-split {
    grid-template-columns: 1fr;
  }
}

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

  .eon-card,
  .u-card {
    padding: var(--eon-space-md);
  }

  .eon-hide-mobile {
    display: none;
  }

  .eon-hide-desktop {
    display: initial;
  }
}