/* ═══════════════════════════════════════════════════════
   IVAN.BAR — Layout System
   ═══════════════════════════════════════════════════════ */

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

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

/* ─── Sections ─── */
.section { padding: calc(var(--space-20) + 2vw) 0; }
.section--sm { padding: calc(var(--space-12) + 1vw) 0; }
.section--lg { padding: calc(var(--space-32) + 4vw) 0; }

.section--dark {
  background-color: var(--color-dark);
  color: var(--color-surface);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-surface); }
.section--dark p { color: rgba(255, 255, 255, 0.75); }

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

.section--coral { background-color: var(--color-coral); color: var(--color-surface); }
.section--coral h1, .section--coral h2, .section--coral h3 { color: var(--color-surface); }
.section--coral p { color: rgba(255, 255, 255, 0.85); }

/* ─── Grid ─── */
.grid { display: grid; gap: var(--space-8); }
.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-fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

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

/* ─── Split ─── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }

@media (max-width: 768px) {
  .split, .split--reverse { grid-template-columns: 1fr; gap: var(--space-8); direction: ltr; }
}

/* ─── Flex ─── */
.flex { display: flex; }
.flex--center { display: flex; align-items: center; justify-content: center; }
.flex--between { display: flex; align-items: center; justify-content: space-between; }
.flex--col { display: flex; flex-direction: column; }
.flex--gap-sm { gap: var(--space-3); }
.flex--gap { gap: var(--space-6); }
.flex--gap-lg { gap: var(--space-10); }

/* ─── Utilities ─── */
.text-center { text-align: center; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

/* ─── Scroll Reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }