/* ============================================
   FTL Advisers — Layout
   layout.css
   
   Reset, контейнер, 12-колоночная сетка,
   секции, утилиты.
   
   Зависит от: variables.css
   ============================================ */


/* ── Reset ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

body {
  background-color: var(--bg-page);
  overflow-x: hidden;
}


/* ── Container ── */
.container {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--edge);
}


/* ══════════════════════════════════════════
   12-COLUMN GRID
   ══════════════════════════════════════════ */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gutter);
}

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

/* Start position: .start-1 ... .start-12 */
.start-1  { grid-column-start: 1; }
.start-2  { grid-column-start: 2; }
.start-3  { grid-column-start: 3; }
.start-4  { grid-column-start: 4; }
.start-5  { grid-column-start: 5; }
.start-6  { grid-column-start: 6; }
.start-7  { grid-column-start: 7; }
.start-8  { grid-column-start: 8; }
.start-9  { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }
.start-11 { grid-column-start: 11; }
.start-12 { grid-column-start: 12; }


/* ══════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════ */

/* Стандартная секция */
.section {
  padding-top: var(--gap-blocks);
}

/* Секция с фоновой плашкой */
.section-bg {
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-top);
  background-color: var(--bg-card);
}

/* Тёмная секция */
.section-dark {
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-top);
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
}

/* Группа внутри секции */
.group {
  margin-top: var(--gap-groups);
}

/* Элемент внутри группы */
.element {
  margin-top: var(--gap-elements);
}


/* ══════════════════════════════════════════
   CARD GRIDS
   ══════════════════════════════════════════ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-cards);
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
}

.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-cards);
}


/* ══════════════════════════════════════════
   CARD BASE
   ══════════════════════════════════════════ */

.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  padding: var(--card-pad);
}

.card-sm {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-3);
  padding: var(--card-pad-sm);
}


/* ══════════════════════════════════════════
   DIVIDER
   ══════════════════════════════════════════ */

.divider {
  width: 100%;
  height: 1px;
  background: var(--border-color);
  border: none;
}


/* ══════════════════════════════════════════
   BORDER RADIUS HELPERS
   ══════════════════════════════════════════ */

.rounded-1 { border-radius: var(--radius-1); }
.rounded-2 { border-radius: var(--radius-2); }
.rounded-3 { border-radius: var(--radius-3); }


/* ══════════════════════════════════════════
   BACKGROUND HELPERS
   ══════════════════════════════════════════ */

.bg-page  { background-color: var(--bg-page); }
.bg-card  { background-color: var(--bg-card); }
.bg-dark  { background-color: var(--bg-dark); }


/* ══════════════════════════════════════════
   FLEX HELPERS
   ══════════════════════════════════════════ */

.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-e           { gap: var(--gap-elements); }
.gap-g           { gap: var(--gap-groups); }
.gap-c           { gap: var(--gap-cards); }


/* ══════════════════════════════════════════
   SPACING UTILITIES
   ══════════════════════════════════════════ */

.mt-blocks   { margin-top: var(--gap-blocks); }
.mt-groups   { margin-top: var(--gap-groups); }
.mt-elements { margin-top: var(--gap-elements); }
.mb-blocks   { margin-bottom: var(--gap-blocks); }
.mb-groups   { margin-bottom: var(--gap-groups); }
.mb-elements { margin-bottom: var(--gap-elements); }

.pt-blocks   { padding-top: var(--gap-blocks); }
.pt-groups   { padding-top: var(--gap-groups); }
.pb-blocks   { padding-bottom: var(--gap-blocks); }
.pb-groups   { padding-bottom: var(--gap-groups); }

.p-card      { padding: var(--card-pad); }
.p-card-sm   { padding: var(--card-pad-sm); }


/* ══════════════════════════════════════════
   RESPONSIVE — Tablet
   ══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .col-t-6  { grid-column: span 6; }
  .col-t-12 { grid-column: span 12; }
}


/* ══════════════════════════════════════════
   RESPONSIVE — Mobile
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
  .card-grid,
  .card-grid-3 {
    grid-template-columns: 1fr;
  }
  .card-grid-2 {
    grid-template-columns: 1fr;
  }
  .col-m-12 { grid-column: span 12; }
}


/* ══════════════════════════════════════════
   TEXT COLUMNS — двухколоночный текстовый блок
   
   Основная секция текста на текстовых страницах.
   Ширина 1200, gap между колонками 48.
   Применение: <div class="text-columns"> ... </div>
   ══════════════════════════════════════════ */

.text-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}


/* ══════════════════════════════════════════
   TEXT LIST — список с кастомным буллитом

   Использование: <ul class="text-list"><li>...</li></ul>
   Буллит: bullit.svg, 12×12, отступ 24 слева.
   ══════════════════════════════════════════ */

.text-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.text-list li {
  padding-left: 16px;             /* 8 (буллит) + 8 (отступ) */
  position: relative;
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-primary);
}

.text-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;                       /* вертикальное выравнивание по строке */
  width: 8px;
  height: 8px;
  background: url('../img/bullit.svg') no-repeat center / contain;
}

.text-list li:last-child {
  margin-bottom: 0;
}


/* ══════════════════════════════════════════
   NUMBERED LIST — нумерованный список с SVG-иконками

   Использование: <ol class="numbered-list"><li>...</li></ol>
   Иконки: bullit1.svg … bullit9.svg, диаметр 24px.
   Отступ от иконки до текста: 16px.
   Отступ между пунктами: 16px.
   ══════════════════════════════════════════ */

.numbered-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.numbered-list li {
  padding-left: 40px; /* 24 (иконка) + 16 (отступ) */
  position: relative;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
}

.numbered-list li:last-child {
  margin-bottom: 0;
}

.numbered-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px; /* выравнивание по первой строке */
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.numbered-list li:nth-child(1)::before { background-image: url('../img/bullit1.svg'); }
.numbered-list li:nth-child(2)::before { background-image: url('../img/bullit2.svg'); }
.numbered-list li:nth-child(3)::before { background-image: url('../img/bullit3.svg'); }
.numbered-list li:nth-child(4)::before { background-image: url('../img/bullit4.svg'); }
.numbered-list li:nth-child(5)::before { background-image: url('../img/bullit5.svg'); }
.numbered-list li:nth-child(6)::before { background-image: url('../img/bullit6.svg'); }
.numbered-list li:nth-child(7)::before { background-image: url('../img/bullit7.svg'); }
.numbered-list li:nth-child(8)::before { background-image: url('../img/bullit8.svg'); }
.numbered-list li:nth-child(9)::before { background-image: url('../img/bullit9.svg'); }