/* ==========================================================================
   Layout — grids, section rhythm, shared structural patterns
   ========================================================================== */

.section-header {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  text-align: center;
}

.section-header .eyebrow { margin-bottom: var(--space-xs); }
.section-header h2 { margin-bottom: var(--space-sm); }

.section-header--start {
  margin-inline: 0;
  text-align: start;
}

.section-bg-subtle {
  background: var(--color-bg-subtle);
}

.section-mesh {
  background-image: var(--gradient-mesh);
  background-repeat: no-repeat;
}

/* ---- Grid helpers -------------------------------------------------------*/
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid-auto-sm {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.grid-auto-md {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

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

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

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

/* ---- Page hero shell (shared across interior pages) ---------------------*/
.page-hero {
  padding-block: clamp(6rem, 5rem + 5vw, 9rem) var(--space-xl);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gradient-mesh);
  pointer-events: none;
  z-index: 0;
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero-content {
  max-width: 760px;
}

.page-hero-content.text-center {
  margin-inline: auto;
}