/* ===================================================================
 * Alsu LABS — дизайн-система
 * Единые стили для всех страниц сайта.
 * Подключается через {% include head.html %} в каждой странице.
 * =================================================================== */


/* ===== Базовый сброс ===== */
* {
    box-sizing: border-box;
}

body {
    background: #f6f6f6;
    font: 18px Roboto, Monospace;
    color: #31112c;
    margin: 0 14% 60px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    body { margin: 0 6% 60px; font-size: 17px; }
}

@media (max-width: 600px) {
    body { margin: 0 4% 60px; font-size: 16px; }
}


/* ===== Типографика ===== */

/* Title — главный заголовок страницы */
.title {
    color: #184d47;
    font: 35px Roboto, sans-serif;
    margin: 0 0 16px;
    line-height: 1.2;
}

@media (max-width: 600px) {
    .title { font-size: 28px; }
}

/* Heading 1 — крупный секционный заголовок */
.heading-1 {
    color: #184d47;
    font: 35px Roboto, sans-serif;
    margin: 32px 0 16px;
    line-height: 1.2;
}

/* Heading 2 — заголовок секции */
.heading-2 {
    color: #810000;
    font: 32px Roboto, sans-serif;
    margin: 28px 0 12px;
    line-height: 1.2;
}

/* Heading 3 — подсекция */
.heading-3 {
    color: #810000;
    font: 28px Roboto, sans-serif;
    margin: 24px 0 10px;
    line-height: 1.3;
}

/* Subtitle — подзаголовок или акцентный текст */
.subtitle {
    color: #31112c;
    font: 22px Roboto, sans-serif;
    font-style: italic;
    margin: 8px 0 16px;
}

/* Heading 4 — мелкий заголовок (для акцентов, легенд) */
.heading-4 {
    color: #31112c;
    font: 20px Roboto, Monospace;
    margin: 16px 0 8px;
}

/* Body text — обычный текст абзаца */
.body-text {
    text-align: justify;
    font: 18px Roboto, Monospace;
    margin: 12px 0;
    color: #31112c;
}

/* Lead text — крупный вступительный абзац */
.lead {
    font: 22px Roboto, sans-serif;
    margin: 16px 0;
    color: #31112c;
}

/* Caption — мелкий текст-подпись */
.caption {
    font: 14px Roboto, sans-serif;
    color: #606060;
    margin: 8px 0;
}

/* ===== Ссылки ===== */
.link { color: #1f6f4a; text-decoration: underline; }
.link:hover { color: #184d47; }
.link-accent { color: #810000; font-weight: 600; text-decoration: underline; }
.link-accent:hover { color: #5a0000; }
.link-plain { color: #31112c; text-decoration: underline; }

/* ===== Кнопки ===== */
.button {
    display: inline-block;
    background: #184d47;
    color: #fff;
    padding: 12px 22px;
    border-radius: 4px;
    text-decoration: none;
    font: 16px Roboto, sans-serif;
    transition: background .2s;
    margin: 8px 0;
}
.button:hover { background: #0f3a35; }

.button-secondary {
    display: inline-block;
    background: transparent;
    color: #184d47;
    padding: 10px 20px;
    border: 2px solid #184d47;
    border-radius: 4px;
    text-decoration: none;
    font: 16px Roboto, sans-serif;
    transition: all .2s;
    margin: 8px 0;
}
.button-secondary:hover { background: #184d47; color: #fff; }