/* === Base reset (минимальный) === */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* === Container === */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* По умолчанию на самых маленьких — без max-width (100%) */

@media (min-width: 576px) {
  .container { max-width: var(--container-sm); }
}
@media (min-width: 768px) {
  .container { max-width: var(--container-md); }
}
@media (min-width: 992px) {
  .container { max-width: var(--container-lg); }
}
@media (min-width: 1200px) {
  .container { max-width: var(--container-xl); }
}
@media (min-width: 1400px) {
  .container { max-width: var(--container-xxl); } /* 1320 */
}

/* Узкий контейнер для текста/статей */
.container-narrow {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Full-bleed секции (фон на всю ширину, контент в контейнере) */
.full-bleed {
  width: 100%;
}

/* === Sections spacing === */
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.section-lg { padding: 110px 0; }

@media (max-width: 900px) {
  .section { padding: 64px 0; }
  .section-lg { padding: 84px 0; }
}
@media (max-width: 600px) {
  .section { padding: 48px 0; }
  .section-sm { padding: 36px 0; }
  .section-lg { padding: 64px 0; }
}

/* === Grid system (12 columns) === */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.col-12 { grid-column: span 12; }
.col-11 { grid-column: span 11; }
.col-10 { grid-column: span 10; }
.col-9  { grid-column: span 9; }
.col-8  { grid-column: span 8; }
.col-7  { grid-column: span 7; }
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }
.col-2  { grid-column: span 2; }
.col-1  { grid-column: span 1; }

/* Адаптивные спаны */
@media (max-width: 900px) {
  .col-md-12 { grid-column: span 12; }
  .col-md-8  { grid-column: span 8; }
  .col-md-6  { grid-column: span 6; }
  .col-md-4  { grid-column: span 4; }
}

@media (max-width: 600px) {
  .col-sm-12 { grid-column: span 12; }
}

/* === Ready-to-use grids for cards === */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

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

/* === Utilities === */
.stack  { display: flex; flex-direction: column; }
.stack-8  { display: flex; flex-direction: column; gap: 8px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.stack-24 { display: flex; flex-direction: column; gap: 24px; }


/* === Flex grids (cards) === */
.flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}

.flex-col {
  flex: 0 0 auto;
}

/* 2/3/4 колонки на десктопе */
.flex-2 > .flex-col { width: calc((100% - var(--grid-gap)) / 2); }
.flex-3 > .flex-col { width: calc((100% - (var(--grid-gap) * 2)) / 3); }
.flex-4 > .flex-col { width: calc((100% - (var(--grid-gap) * 3)) / 4); }

/* Планшет */
@media (max-width: 900px) {
  .flex-4 > .flex-col,
  .flex-3 > .flex-col { width: calc((100% - var(--grid-gap)) / 2); }
}

/* Мобилка */
@media (max-width: 600px) {
  .flex-4 > .flex-col,
  .flex-3 > .flex-col,
  .flex-2 > .flex-col { width: 100%; }
}

.flex-align-start {
    align-items: flex-start;
}

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

.flex-align-end {
    align-items: flex-end;
}

.flex-align-stretch {
    align-items: stretch;
}

.flex-align-baseline {
    align-items: baseline;
}

.flex-jc-start {
    justify-content: flex-start;
}

.flex-jc-center {
    justify-content: center;
}

.flex-jc-end {
    justify-content: flex-end;
}

.flex-jc-space-between {
    justify-content: space-between;
}

.flex-jc-space-around {
    justify-content: space-around;
}

.flex-jc-space-evenly {
    justify-content: space-evenly;
}


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

.flex-row-reverse {
    flex-direction: row-reverse;
}

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

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}