/**
 * MyChooz Aesthetic - Единая система дизайна
 * Version: 2.0.0
 * Location: mychooz-blocks/src/core/mychooz-aesthetic/
 *
 * КОНЦЕПЦИЯ: Контекстные стили через родительский блок
 * Пример: Любой H4 внутри .mcb-model-block автоматически красный
 *
 * HTML структура:
 * <article class="mcb-model-block">
 *   <div class="mcb-model-content">
 *     <h4>1. Model Name [score id="123"]</h4>
 *     <h3>Подзаголовок/SEO-ключ</h3>
 *   </div>
 * </article>
 */

/* =============================================
   1. РЕЙТИНГОВАЯ СИСТЕМА
   Автоматические стили для заголовков в блоке модели
   ============================================= */

/**
 * H4 - Заголовок модели (название + номер)
 * Применяется: Красный, крупный, жирный, центр, тонкая линия сверху для акцента
 */
.mcb-model-block h4 {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #cf2e2e;
    line-height: 1.3;
    margin: 0 0 3px 0;
    padding-top: 12px;
    border-top: 2px solid #cf2e2e;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/**
 * H3 - Подзаголовок/SEO-ключ (что может модель)
 * Применяется: Темно-серый, средний, полужирный, центр, ограничение 3 строки
 */
.mcb-model-block h3 {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 23px;
    font-weight: 600;
    color: #333333;
    line-height: 1.4;
    margin: 16px 0 16px 0 !important;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Ограничение в 3 строки для длинных подзаголовков */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/**
 * H2 - Крупный заголовок (если нужен)
 * Применяется: Красный, очень крупный, центр
 */
.mcb-model-block h2 {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #cf2e2e;
    line-height: 1.3;
    margin: 24px 0 12px 0;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* =============================================
   АДАПТИВ - Mobile First (≤ 590px)
   Оптимизация для маленьких экранов
   ============================================= */

@media screen and (max-width: 590px) {
    .mcb-model-block h4 {
        font-size: 22px;
        line-height: 1.3;
        margin: 0 0 4px 0;
        padding-top: 10px;
    }

    .mcb-model-block h3 {
        font-size: 20px;
        line-height: 1.4;
        margin: 12px 0 12px 0 !important;
    }

    .mcb-model-block h2 {
        font-size: 26px;
        margin: 0 0 10px 0;
        padding-top: 10px;
    }

    /* Уменьшаем бейдж оценки на 30% на мобайле */
    .mcb-model-block h4 .mcb-model-score {
        font-size: 17px !important;      /* 15px + 10% = 17px */
        padding: 2px 6px !important;     /* Уменьшаем padding */
        margin-left: 7px !important;     /* Уменьшаем отступ */
    }
}

/* =============================================
   СОВМЕСТИМОСТЬ С SHORTCODE [score]
   Бейдж оценки внутри заголовка H4
   ============================================= */

/**
 * Бейдж оценки - inline стили + fallback для vertical-align
 */
.mcb-model-block h4 .mcb-model-score {
    vertical-align: middle;
}

/* =============================================
   АВТОНУМЕРАЦИЯ (SEO-friendly)
   Номера добавляются через JS в DOM
   ============================================= */

/**
 * .rank-number - автоматический номер модели в рейтинге
 * Добавляется через auto-numbering.js
 * Наследует стили от родительского H4 (красный, жирный)
 */
.mcb-model-block h4 .rank-number {
    /* Наследуем цвет и вес от H4 */
    color: inherit;
    font-weight: inherit;
    font-family: inherit;
}