/* utilities.css — хелперы layout/spacing. */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Flex / grid */
.flex      { display: flex; }
.flex-col  { display: flex; flex-direction: column; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1    { flex: 1; }

.grid { display: grid; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Секции */
.section {
  padding-block: var(--space-20);
}

.section--tight {
  padding-block: var(--space-12);
}

.section-title {
  text-align: center;
  margin-bottom: var(--space-3);
}

.section-subtitle {
  text-align: center;
  color: var(--clr-text-3);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.hidden { display: none !important; }

@media (max-width: 640px) {
  .section { padding-block: var(--space-12); }
}