/**
 * Student24 — Utility-слой
 *
 * Точечные классы-«единичные свойства» для случаев, когда компонента не
 * покрывает конкретную микро-настройку (и тратить BEM-модификатор на неё
 * неоправданно). Все значения — только через токены из s24-tokens.css.
 *
 * Шкала spacing наследует s24-space-*:
 *   0 = 0
 *   1 = var(--s24-space-1) = 4px
 *   2 = var(--s24-space-2) = 8px
 *   3 = var(--s24-space-3) = 12px
 *   4 = var(--s24-space-4) = 16px
 *   5 = var(--s24-space-5) = 20px
 *   6 = var(--s24-space-6) = 24px
 *
 * Когда применять утилиту (см. tpl-no-legacy.mdc, секция
 * «Протокол редизайна при встрече легаси-утилиты»):
 *   1. Если компонента уже покрывает правило — удалить, ничего не писать.
 *   2. Если правило консистентно для всех экземпляров компоненты —
 *      перенести в CSS компоненты.
 *   3. Иначе — s24-u-* как точечный инструмент, одновременно маркер
 *      «страница здесь уже пройдена».
 *
 * НИКОГДА не писать `!important` в этом файле. Если утилита нужна для
 * override — это знак, что компонента неправильно построена.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Margin
   ═══════════════════════════════════════════════════════════════════════════ */

.s24-u-m-0 { margin: 0; }

.s24-u-mt-0 { margin-top: 0; }
.s24-u-mt-1 { margin-top: var(--s24-space-1); }
.s24-u-mt-2 { margin-top: var(--s24-space-2); }
.s24-u-mt-3 { margin-top: var(--s24-space-3); }
.s24-u-mt-4 { margin-top: var(--s24-space-4); }
.s24-u-mt-5 { margin-top: var(--s24-space-5); }
.s24-u-mt-6 { margin-top: var(--s24-space-6); }

.s24-u-mb-0 { margin-bottom: 0; }
.s24-u-mb-1 { margin-bottom: var(--s24-space-1); }
.s24-u-mb-2 { margin-bottom: var(--s24-space-2); }
.s24-u-mb-3 { margin-bottom: var(--s24-space-3); }
.s24-u-mb-4 { margin-bottom: var(--s24-space-4); }
.s24-u-mb-5 { margin-bottom: var(--s24-space-5); }
.s24-u-mb-6 { margin-bottom: var(--s24-space-6); }

.s24-u-ml-0 { margin-left: 0; }
.s24-u-ml-1 { margin-left: var(--s24-space-1); }
.s24-u-ml-2 { margin-left: var(--s24-space-2); }
.s24-u-ml-3 { margin-left: var(--s24-space-3); }
.s24-u-ml-4 { margin-left: var(--s24-space-4); }

.s24-u-mr-0 { margin-right: 0; }
.s24-u-mr-1 { margin-right: var(--s24-space-1); }
.s24-u-mr-2 { margin-right: var(--s24-space-2); }
.s24-u-mr-3 { margin-right: var(--s24-space-3); }
.s24-u-mr-4 { margin-right: var(--s24-space-4); }

.s24-u-mx-auto { margin-left: auto; margin-right: auto; }

.s24-u-my-1 { margin-top: var(--s24-space-1); margin-bottom: var(--s24-space-1); }
.s24-u-my-2 { margin-top: var(--s24-space-2); margin-bottom: var(--s24-space-2); }
.s24-u-my-3 { margin-top: var(--s24-space-3); margin-bottom: var(--s24-space-3); }
.s24-u-my-4 { margin-top: var(--s24-space-4); margin-bottom: var(--s24-space-4); }

/* ═══════════════════════════════════════════════════════════════════════════
   Padding
   ═══════════════════════════════════════════════════════════════════════════ */

.s24-u-p-0 { padding: 0; }
.s24-u-p-1 { padding: var(--s24-space-1); }
.s24-u-p-2 { padding: var(--s24-space-2); }
.s24-u-p-3 { padding: var(--s24-space-3); }
.s24-u-p-4 { padding: var(--s24-space-4); }
.s24-u-p-5 { padding: var(--s24-space-5); }

.s24-u-pt-1 { padding-top: var(--s24-space-1); }
.s24-u-pt-2 { padding-top: var(--s24-space-2); }
.s24-u-pt-3 { padding-top: var(--s24-space-3); }
.s24-u-pt-4 { padding-top: var(--s24-space-4); }

.s24-u-pb-1 { padding-bottom: var(--s24-space-1); }
.s24-u-pb-2 { padding-bottom: var(--s24-space-2); }
.s24-u-pb-3 { padding-bottom: var(--s24-space-3); }
.s24-u-pb-4 { padding-bottom: var(--s24-space-4); }

/* ═══════════════════════════════════════════════════════════════════════════
   Width
   ═══════════════════════════════════════════════════════════════════════════ */

.s24-u-w-full { width: 100%; }
.s24-u-w-auto { width: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   Float — переходный слой
   Используйте только если рефакторинг родителя на flex/grid сейчас неуместен.
   Предпочтительно: flex-layout в родителе.
   ═══════════════════════════════════════════════════════════════════════════ */

.s24-u-pull-left  { float: left; }
.s24-u-pull-right { float: right; }
.s24-u-clear      { clear: both; }

/* ═══════════════════════════════════════════════════════════════════════════
   Text alignment
   ═══════════════════════════════════════════════════════════════════════════ */

.s24-u-text-left   { text-align: left; }
.s24-u-text-right  { text-align: right; }
.s24-u-text-center { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   Display / visibility
   ═══════════════════════════════════════════════════════════════════════════ */

.s24-u-iblock { display: inline-block; }
.s24-u-block  { display: block; }
.s24-u-flex   { display: flex; }
.s24-u-none   { display: none; }

/* Для скрытия через JS используйте .hidden (описан в s24-base.css) —
   это ЖИВОЙ JS-контракт: $(el).addClass('hidden') / .removeClass('hidden') /
   .toggleClass('hidden') встречается в десятках JS-файлов и TPL. Переименовывать
   опасно. Не дублируем его в s24-u-* — оставляем одну точку истины.

   Класс .hide трогать ТОЖЕ НЕ НУЖНО: он часть Bootstrap 2 modal-контракта
   (<div class="modal hide fade">), bootstrap.min.js делает toggleClass('hide')
   в плагине .modal(). Убирать — сломаются модалки. */

/* ═══════════════════════════════════════════════════════════════════════════
   Cursor
   ═══════════════════════════════════════════════════════════════════════════ */

.s24-u-pointer { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   Accessibility: visually-hidden
   Скрытие для глаз с сохранением доступа для screen-reader.
   Использовать, когда .hide применялся не по Bootstrap 2 modal-контракту
   (например, невидимый label для aria-labelledby) — см. ui-components.mdc.
   ═══════════════════════════════════════════════════════════════════════════ */

.s24-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}