/* Корневые переменные для основных цветов и значений */
:root {
    --primary-color: #2563eb; /* Основной цвет */
    --secondary-color: #1e40af; /* Вторичный цвет */
    --accent-color: #f59e0b; /* Цвет акцента */
    --text-color: #1e293b; /* Цвет текста */
    --bg-color: #f8fafc; /* Цвет фона */
    --card-bg: #f0f4f9; /* Цвет фона карточки */
    --shadow: 0 0.375rem 0.75rem -0.125rem rgba(0, 0, 0, 0.1); /* Тень элементов */
    --border-radius: 0.75rem; /* Радиус скругления углов */
    --grid-gap: 3.125rem; /* Зазор между элементами сетки */
    --mobile-padding: 0.625rem; /* Базовый padding для мобильных */
    --error-bg: #fff5f5; /* Фон для ошибок */
    --success-bg: #f0fdf4; /* Фон для успешных изменений */
}

/* Основной контейнер - задает максимальную ширину и центрирование */
.content-blocks-container {
    max-width: 100rem; /* Максимальная ширина контейнера */
    margin: 2.5rem auto; /* Отступы сверху/снизу и автоматическое выравнивание по горизонтали */
    padding: 0 1.25rem; /* Отступы по бокам */
}

/* Система сетки - организует карточки в адаптивную сетку */
.blocks-grid {
    display: grid; /* Используется grid layout */
    grid-template-columns: 1fr; /* Адаптивное количество колонок */
    grid-auto-rows: minmax(min-content, auto); /* Автоматическое определение высоты строк */
    gap: calc(var(--grid-gap) * 0.6); /* Зазор между элементами сетки */
    max-width: 100rem; /* Максимальная ширина сетки */
    margin: 1.875rem auto; /* Отступы сверху/снизу и автоматическое выравнивание по горизонтали */
    align-items: start; /* Выравнивание элементов сетки по вертикали в начале */
}

/* Стили карточек - основной контейнер для блока контента */
.content-block-card {
    background: var(--card-bg); /* Цвет фона карточки */
    border-radius: var(--border-radius); /* Радиус скругления углов карточки */
    box-shadow: var(--shadow); /* Тень карточки */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Граница карточки */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Unified timing function */
    overflow: hidden; /* Скрывает содержимое за границами */
    width: 100%; /* Ширина карточки на всю ширину контейнера */
    min-width: 0; /* Запрет уменьшения ширины */
    box-sizing: border-box; /* Корректный расчет размеров с учетом padding и border */
    display: flex; /* Использование flexbox для содержимого карточки */
    flex-direction: column; /* Содержимое распологается в столбец */
    margin: 0.3125rem 0; /* Внешние отступы карточки */
    padding: 0.625rem; /* Внутренние отступы карточки */
    justify-content: flex-start; /* Выравнивание содержимого по вертикали в начале */
    max-height: none; /* Запрет уменьшения высоты */
}

/* Анимация при наведении на карточку */
.content-block-card:hover {
    transform: none; /* Убираем анимацию наведения на мобильных */
    box-shadow: 0 0.75rem 1.5rem -0.25rem rgba(0, 0, 0, 0.15); /* Изменение тени при наведении */
}

/* Шапка карточки с градиентным фоном и иконкой */
.card-header {
    padding: 0.75rem; /* Меньшие отступы */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); /* Градиентный фон шапки */
    color: white; /* Цвет текста в шапке */
    border-radius: var(--border-radius) var(--border-radius) 0 0; /* Скругление углов шапки (только сверху) */
    position: relative; /* Относительное позиционирование для ::after */
    overflow: hidden; /* Скрытие содержимого за границами */
    display: flex; /* Использование flexbox */
    align-items: center; /* Выравнивание элементов по вертикали */
    gap: 0.5rem; /* Меньший зазор */
}

/* Декоративный элемент под шапкой карточки */
.card-header::after {
    content: ""; /* Пустой контент */
    position: absolute; /* Абсолютное позиционирование */
    bottom: -0.625rem; /* Расположение декоративного элемента */
    left: 0;
    right: 0;
    height: 1.25rem; /* Высота декоративного элемента */
    background: var(--card-bg); /* Цвет фона декоративного элемента */
    transform: skewY(-1.5deg); /* Скос декоративного элемента */
}

/* Иконка в шапке карточки */
.card-icon {
    font-size: 2rem; /* Меньший размер иконки */
    filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)); /* Тень иконки */
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; /* Семейство шрифтов для иконок */
    flex-shrink: 0; /* Запрет уменьшения размера */
}

/* Добавляем стили для заголовка карточки */
.card-title {
    font-weight: 700;
    font-size: 1.6rem; /* Базовый размер для мобильных */
    margin: 0; /* Убирает внешние отступы заголовка */
    line-height: 1.2; /* Высота строки заголовка */
    color: white; /* Цвет текста заголовка */
    text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1); /* Тень текста заголовка */
}

/* Основное содержимое карточки */
.card-body {
    padding: var(--mobile-padding); /* Базовый padding для мобильных */
    padding-bottom: 0.15625rem; /* Нижний внутренний отступ контента карточки */
    display: flex; /* Использование flexbox для содержимого */
    flex-direction: column; /* Содержимое в столбец */
    gap: 0.3125rem; /* Расстояние между элементами содержимого */
    color: var(--text-color); /* Цвет текста в содержимом */
    position: relative; /* Относительное позиционирование для z-index */
    z-index: 1; /* Порядок наложения элементов */
    overflow-y: visible; /* Разрешить контенту выходить за рамки */
    text-rendering: optimizeLegibility; /* Оптимизация рендеринга текста */
    -webkit-font-smoothing: antialiased; /* Сглаживание шрифтов */
    background: transparent; /* Прозрачный фон */
}

/* Секции контента: назначение, функции, примеры */
.purpose-box,
.features-box,
.example-box {
    margin-bottom: 0.625rem; /* Нижний отступ секции контента */
    position: relative; /* Относительное позиционирование */
}

/* Стили для текста в секции Purpose */
.purpose-box p {
    font-weight: 500;
    font-size: 1.25rem; /* Базовый размер для мобильных */
    line-height: 1.5;
    color: var(--secondary-color); /* Цвет текста */
    margin: 0.3125rem 0 0.9375rem; /* Отступы вокруг текста */
    letter-spacing: 0.01em; /* Межбуквенный интервал */
}

/* Последний элемент без нижнего отступа */
.purpose-box:last-child,
.features-box:last-child,
.example-box:last-child {
    margin-bottom: 0; /* Убирает нижний отступ у последнего элемента */
}

/* Разделитель между секциями с градиентом */
.section-divider {
    height: 0.125rem; /* Высота разделителя */
    background: linear-gradient(90deg, var(--primary-color) 0%, transparent 100%); /* Градиентный фон разделителя */
    margin: 0.625rem 0; /* Отступы разделителя */
}

/* Заголовки секций */
.purpose-box h4,
.features-box h4,
.example-box h4 {
    margin: 0 0 0.625rem; /* Отступы заголовков секций */
    color: var(--secondary-color); /* Цвет текста заголовков секций */
    font-size: 1.5rem; /* Размер заголовков секций */
    font-weight: 700; /* Толщина шрифта заголовков секций */
    display: flex; /* Использование flexbox для выравнивания */
    align-items: center; /* Выравнивание элементов по вертикали */
    gap: 0.3125rem; /* Расстояние между элементами в заголовках */
    line-height: 1.3; /* Высота строки заголовков */
    text-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1); /* Тень текста заголовка */
}

/* Список функций с кастомными маркерами */
.features-box ul {
    list-style: none; /* Убирает стандартные маркеры списка */
    padding: 0; /* Убирает внутренние отступы списка */
    margin: 0; /* Убирает внешние отступы списка */
    display: grid; /* Использование grid для списка */
    gap: 0.46875rem; /* Расстояние между элементами списка */
}

.features-box li {
    display: flex; /* Использование flexbox для выравнивания */
    align-items: baseline; /* Выравнивание элементов по базовой линии */
    font-size: 1.25em; /* Размер текста элементов списка */
    line-height: 1.35; /* Высота строки элементов списка */
    color: var(--text-color); /* Цвет текста элементов списка */
    padding: 0.09375rem 0; /* Отступы сверху и снизу элементов списка */
    word-break: break-word;  /* Изменено для предотвращения переполнения */
    white-space: normal;
    overflow-wrap: break-word; /* Добавлено для переноса длинных слов */
    max-width: 95%;
}

.features-box li strong {
    font-weight: 700; /* Толщина шрифта */
    color: var(--secondary-color); /* Цвет текста */
    display: inline-block; /* Строчно-блочный элемент */
    margin-right: 0.25rem; /* Отступ справа */
}

.features-box li span:first-of-type {
    font-weight: 700; /* Толщина шрифта */
    color: var(--secondary-color); /* Цвет текста */
    margin-right: 0.25rem; /* Отступ справа */
}

.feature-emoji {
    font-size: 1.3rem; /* Размер иконки */
    min-width: 1.6rem; /* Минимальная ширина иконки */
    display: inline-block; /* Строчно-блочный элемент */
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; /* Семейство шрифтов для иконок */
    margin-right: 0.1875rem; /* Отступ справа */
}

.feature-item {
    padding-left: 0.9375rem; /* Внутренний отступ элемента */
    position: relative; /* Относительное позиционирование */
}

.feature-item::before {
    content: "•"; /* Маркер списка */
    color: var(--accent-color); /* Цвет маркера */
    position: absolute; /* Абсолютное позиционирование маркера */
    left: 0;
    font-size: 1.4em; /* Размер маркера */
    line-height: 1; /* Высота строки маркера */
}

/* Пример секции */
.example-box {
    margin-top: 0.625rem;
    padding-top: 0.3125rem;
    margin-bottom: -0.3125rem;
}

/* Контейнер для сравнения примеров До/После */
.comparison-container {
    padding: 0;
    border-radius: var(--border-radius);
    position: relative;
    margin: 0;
    gap: 0.625rem;
    background: transparent;
}

/* Объединённые стили для .mistake и .improved */
.mistake,
.improved {
    padding: 0.625rem; /* Уменьшенные отступы */
    margin-bottom: 0.9375rem;
    position: relative;
    border-left-width: 0.375rem;
    border-left-style: solid;
}

.mistake {
    background: var(--error-bg);
    border-color: #dc2626;
    box-shadow: 0 0.125rem 0.5rem rgba(220, 38, 38, 0.1);
}

.improved {
    background: var(--success-bg);
    border-color: #059669;
    box-shadow: 0 0.125rem 0.5rem rgba(5, 150, 105, 0.1);
    margin-top: 0.625rem;
}

/* Метки "Ошибка" и "Улучшено" с иконками */
.comparison-container .label {
    display: inline-flex; /* Использование flexbox для выравнивания */
    align-items: center; /* Выравнивание элементов по вертикали */
    gap: 0.5rem; /* Расстояние между элементами */
    margin: 0 0 0.625rem; /* Отступы метки */
    padding: 0.375rem 0.625rem; /* Внутренние отступы метки */
    border-radius: 0.375rem; /* Радиус скругления углов метки */
    font-weight: 800; /* Толщина шрифта */
    font-size: 0.9rem; /* Размер шрифта */
    letter-spacing: 0.03125rem; /* Межбуквенный интервал */
    text-transform: uppercase; /* Преобразование текста в верхний регистр */
    position: relative; /* Относительное позиционирование для before */
    top: 0;
    background: white; /* Цвет фона */
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08); /* Тень метки */
}

.mistake .label {
    color: #dc2626; /* Цвет текста */
    border: 2px solid #fecaca; /* Граница метки */
}

.improved .label {
    color: #059669; /* Цвет текста */
    border: 2px solid #86efac; /* Граница метки */
}

.comparison-container .label::before {
    display: none; /* Убираем иконку */
    content: ''; /* Пустой контент для иконки */
    display: inline-block; /* Блочный элемент */
    width: 1.5rem; /* Ширина иконки */
    height: 1.5rem; /* Высота иконки */
    background-size: contain; /* Масштабирует иконку */
}

.mistake .label::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23dc2626"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
}

.improved .label::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23059669"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

/* Блоки с текстом примеров */
.text {
    padding: var(--mobile-padding); /* Использован базовый padding для мобильных */
    border-radius: 0.375rem; /* Радиус скругления углов */
    font-family: 'Courier New', monospace; /* Семейство шрифтов */
    font-size: 1.15rem; /* Размер шрифта */
    line-height: 1.5; /* Высота строки */
    font-weight: 600; /* Толщина шрифта */
    color: var(--text-color); /* Цвет текста */
}

/* Добавить новые стили для секций примеров */
.example-box .original,
.example-box .improved {
    font-weight: 700; /* Толщина шрифта */
    color: var(--text-color); /* Цвет текста */
    font-size: 1.1rem; /* Размер шрифта */
}

.example-box .improved {
    color: var(--secondary-color); /* Цвет улучшенного текста */
}

/* Правила для экранов 480px и меньше (mobile) */
@media (max-width: 30rem) { /* Экраны 480px и меньше */
    .content-blocks-container {
        padding: 0 0.625rem; /* ...existing code... */
    }
    .content-block-card {
        margin: 0.125rem; /* ...existing code... */
    }
    .mistake .label::before,
    .improved .label::before {
        display: none;
    }
}

/* Правила для экранов от 481px до 767px */
@media (min-width: 30.0625rem) and (max-width: 47.9375rem) { /* От 481px до 767px */
    .content-blocks-container {
        padding: 0 0.9375rem; /* ...existing code... */
    }
}

/* Правила для экранов от 768px (48rem) */
@media (min-width: 48rem) {
    .card-title {
        font-size: 1.75rem;
    }
    .purpose-box p {
        font-size: 1.3rem;
    }
    .blocks-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на средних экранах */
        gap: calc(var(--grid-gap) * 0.8); /* Уменьшенный зазор */
    }
    /* Для экранов от 768px по умолчанию скрываем эмодзи */
    .mistake .label::before,
    .improved .label::before {
        display: none;
    }
}

/* Правила для экранов 1200px и более */
@media (min-width: 75rem) { /* 1200px и более */
    .blocks-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки на больших экранах */
    }
    /* Показываем эмодзи для PC */
    .blocks-grid .mistake .label::before,
    .blocks-grid .improved .label::before {
        display: inline-block;
    }
}