/* ============================================
КОМПОНЕНТ: ТИПОГРАФИКА
Версия: 2.0
============================================ */



/* ---------- ПОДКЛЮЧЕНИЕ ШРИФТОВ ---------- */

/* Lato Thin */
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-Thin.a034cd8a9164.woff2") format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-ThinItalic.791340678755.woff2") format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* Lato ExtraLight */
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-ExtraLight.41bde016c474.woff2") format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-ExtraLightItalic.3581fb45140a.woff2") format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

/* Lato Light */
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-Light.0658ff00fbf2.woff2") format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-LightItalic.69e41802ce01.woff2") format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Lato Regular */
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-Regular.273b538b3dff.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-Italic.ba8e6dbed5f7.woff2") format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Lato Medium */
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-Medium.d962aa46c63a.woff2") format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-MediumItalic.4f8bbcd1ff1f.woff2") format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Lato SemiBold */
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-SemiBold.876ecf1ee655.woff2") format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-SemiBoldItalic.40ee04c9081a.woff2") format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Lato Bold */
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-Bold.5474b230a534.woff2") format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-BoldItalic.5b7681798e12.woff2") format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Lato ExtraBold */
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-ExtraBold.b011257ead0e.woff2") format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-ExtraBoldItalic.6ae2f6fdfd85.woff2") format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Lato Black */
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-Black.3b4aa642d214.woff2") format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url("/static/core/fonts/Lato-BlackItalic.c4fffa800637.woff2") format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}





/* ---------- ЗАГОЛОВКИ ---------- */

h1 {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 3.0rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}
h2 {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 2.5rem;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 600;
}
h3 {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-secondary);
}
h3::first-letter {
    text-transform: uppercase;
}
h4 {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
    text-align: center;
}





/* ---------- ПАРАГРАФЫ ---------- */

p {
    font-size: 1.0rem;
    line-height: 1.6;
}

/* Оценка процента */
.info-rate {
    font-size: 2.0rem;
    font-weight: bold;
}




/* ---------- МЕЛКИЙ ТЕКСТ ---------- */

small {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.4;
    display: inline-block;
}





/* ---------- ПРИПИСКА ---------- */

.text-light {
    font-size: 0.85rem;
    color: var(--text-secondary);
}





/* ---------- ТЕКСТ-ССЫЛКА ---------- */

.text-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}
.text-link:hover {
    text-decoration: underline;
}



/* ---------- СТИЛИ ---------- */

.text--clr-white {
    color: var(--white);
}
.text--upper {
    text-transform: uppercase;
}





/* ============================================
АДАПТАЦИЯ ТИПОГРАФИКИ
============================================ */

/* ---------- 1280px ---------- */
@media (max-width: 1280px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: 1rem; }
    p { font-size: 0.95rem; }
}

/* ---------- 1024px ---------- */
@media (max-width: 1024px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1rem; }
    h4 { font-size: 0.95rem; }
    p { font-size: 0.9rem; }
    .text-light { font-size: 0.8rem; }
}

/* ---------- 768px (планшеты) ---------- */
@media (max-width: 768px) {
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 0.95rem; }
    h4 { font-size: 0.9rem; }
    p { font-size: 0.85rem; }
    .text-light { font-size: 0.75rem; }
    small { font-size: 0.7rem; }
}

/* ---------- 480px (телефоны) ---------- */
@media (max-width: 480px) {
    h1 { font-size: 1.2rem; }
    h2 { font-size: 1rem; }
    h3 { font-size: 0.85rem; }
    h4 { font-size: 0.8rem; }
    p { font-size: 0.8rem; }
    .text-light { font-size: 0.7rem; }
    small { font-size: 0.65rem; }
}