/* layout.css — Container, grid, section spacing, flex utilities */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}

.section--surface {
  background-color: var(--c-surface);
}

.section--surface-alt {
  background-color: var(--c-surface-alt);
}

/* Pastel tinted section backgrounds */
.section--pink { background-color: var(--c-surface-pink); }
.section--gold { background-color: var(--c-surface-gold); }
.section--mint { background-color: var(--c-surface-mint); }

/* ---------- Dark section modifier ---------- */
/* Flips CSS custom properties so all nested components (cards, text, borders)
   automatically adapt to the dark surface. */
.section--dark {
  position: relative;
  background: linear-gradient(135deg, #0F0B1E 0%, #1A1334 50%, #0F0B1E 100%);
  color: #F0EFF4;
  overflow: hidden;
  /* Cascade overrides — children inherit these */
  --c-text: #F0EFF4;
  --c-text-secondary: #B8B5CC;
  --c-border: rgba(255, 255, 255, 0.12);
  --c-surface: #1A1334;
  --c-surface-alt: #241B47;
}

.section--dark .container {
  position: relative;
  z-index: 1;
}

/* Section-label on dark bg — shine against dark */
.section--dark .section-label {
  background: linear-gradient(90deg, var(--c-accent-bright), var(--c-accent-pink-bright), var(--c-accent-bright));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section--dark .section-label::before {
  background: linear-gradient(90deg, var(--c-accent-bright), var(--c-accent-pink-bright));
}

/* Decorative floating shapes for dark section */
.section-dark-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.section-dark-decor__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  will-change: transform;
}

.section-dark-decor__blob--violet {
  width: 360px;
  height: 360px;
  background: var(--c-accent-bright);
  top: -80px;
  left: -80px;
  animation: zs-drift 16s ease-in-out infinite;
}

.section-dark-decor__blob--pink {
  width: 280px;
  height: 280px;
  background: var(--c-accent-pink);
  bottom: -60px;
  right: -60px;
  animation: zs-drift 20s ease-in-out infinite reverse;
}

/* Decorated section — for background SVG decorations */
.section--decorated {
  position: relative;
  overflow: hidden;
}

.section-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.section-decor__chip {
  position: absolute;
  opacity: 0.18;
  will-change: transform;
}

.section-decor__chip--a { color: var(--c-accent-bright); }
.section-decor__chip--b { color: var(--c-accent-pink); }

.section-decor__chip--a {
  width: 220px;
  height: 220px;
  top: -60px;
  left: -40px;
  animation: zs-spin-slow 40s linear infinite;
}

.section-decor__chip--b {
  width: 180px;
  height: 180px;
  bottom: -40px;
  right: -30px;
  animation: zs-spin-slow 55s linear infinite reverse;
}

.section--decorated .container {
  position: relative;
  z-index: 1;
}

.grid {
  display: grid;
  gap: var(--grid-gap);
}

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

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

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

.flex {
  display: flex;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  align-items: center;
  justify-content: space-between;
}

.flex--column {
  flex-direction: column;
}

.flex--gap {
  gap: var(--grid-gap);
}

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