/* Container, grid, section rhythm. */

.ez-container {
  width: var(--ez-container);
  margin-inline: auto;
}

.ez-section {
  padding-block: var(--ez-section-pad);
}
.ez-section--tight { padding-block: calc(var(--ez-section-pad) * .6); }
.ez-section--white  { background: var(--ez-surface); color: var(--ez-text); }
.ez-section--gray   { background: var(--ez-surface-alt); color: var(--ez-text); }
.ez-section--dark   { background: var(--ez-surface-dark); color: var(--ez-text-on-dark); }
.ez-section--dark p, .ez-section--dark .ez-eyebrow { color: var(--ez-text-on-dark-mute); }
.ez-section--dark h1, .ez-section--dark h2, .ez-section--dark h3 { color: var(--ez-text-on-dark); }
.ez-section--red    { background: var(--ez-red); color: var(--ez-white); }
.ez-section--red p  { color: rgba(255,255,255,.88); }

.ez-grid {
  display: grid;
  gap: var(--ez-space-6);
}
.ez-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ez-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ez-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ez-grid--5 { grid-template-columns: repeat(5, 1fr); }
.ez-grid--sidebar { grid-template-columns: 2fr 1fr; gap: var(--ez-space-8); }

@media (max-width: 1024px) {
  .ez-grid--4, .ez-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .ez-grid--sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ez-grid--2, .ez-grid--3, .ez-grid--4, .ez-grid--5 { grid-template-columns: 1fr; }
  :root { --ez-section-pad: 56px; }
}

.ez-flex { display: flex; align-items: center; }
.ez-flex--between { justify-content: space-between; }
.ez-flex--gap-2 { gap: var(--ez-space-2); }
.ez-flex--gap-3 { gap: var(--ez-space-3); }
.ez-flex--gap-4 { gap: var(--ez-space-4); }
.ez-flex--gap-6 { gap: var(--ez-space-6); }
.ez-flex--wrap { flex-wrap: wrap; }
.ez-flex--col { flex-direction: column; align-items: flex-start; }

.ez-stack > * + * { margin-top: var(--ez-space-5); }
.ez-stack--sm > * + * { margin-top: var(--ez-space-3); }
.ez-stack--lg > * + * { margin-top: var(--ez-space-7); }

.ez-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ez-space-8);
  align-items: center;
}
@media (max-width: 900px) {
  .ez-hero-split { grid-template-columns: 1fr; }
}

.ez-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.ez-skip-link {
  position: absolute;
  top: -999px;
  left: 0;
  background: var(--ez-black);
  color: var(--ez-white);
  padding: var(--ez-space-3) var(--ez-space-5);
  z-index: 999;
  border-radius: 0 0 var(--ez-r) 0;
}
.ez-skip-link:focus {
  top: 0;
}