/* ============================================
   LAYOUT — Containers, Grids, Utilities
   ============================================ */

/* Containers */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

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

/* Section spacing */
.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  position: relative;
  overflow-x: clip;
}

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

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

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

/* Cards grid */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; }
.flex-gap-sm { gap: var(--space-sm); }
.flex-gap-md { gap: var(--space-md); }
.flex-gap-lg { gap: var(--space-lg); }
.flex-wrap { flex-wrap: wrap; }

/* Spacing utilities */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }

/* Width */
.w-full { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Illustration wrapper */
.illus-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.illus-wrap img {
  width: 100%;
  max-width: 420px;
  height: auto;
  /* transparent PNG — no blend mode needed */
}

/* For dark sections: white container around illustration */
.illus-wrap--dark img {
  mix-blend-mode: normal;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

/* Decorative floating illustration */
.illus-deco {
  position: absolute;
  /* transparent PNG — no blend mode needed */
  pointer-events: none;
  z-index: var(--z-float);
}