:root {
  --primary-text-color: #272727;   /* основной текст */
  --main-bg-color: #ffffff;        /* фон страницы */
  --container-bg-color: #ffffff;   /* фон блоков/секций */
  --heading-color: #272727;        /* если заголовки тоже черные */
  --accent-color: #FD7F28;         /* кнопки/акценты — оставляем */
  --light-shadow: rgba(0, 0, 0, 0.08);
  --medium-shadow: rgba(0, 0, 0, 0.1);
}

.scrap-page {
    font-family: "Segoe UI", Tahoma, sans-serif; /* Ваш выбор шрифта */
    line-height: 1.6; /* Межстрочный интервал для хорошей читаемости */
    color: var(--primary-text-color); /* Основной цвет текста */
    background-color: var(--main-bg-color); /* Фон для всей области main */

    padding: 16px 0; /* Вертикальный padding 16px, горизонтальный 0, т.к. его задает .container */
    max-width: 100%; /* На мобильных занимает всю доступную ширину */
    overflow-x: hidden; /* Предотвращаем горизонтальный скролл */
}

.scrap-page .container {
    max-width: 960px; /* Максимальная ширина контента */
    margin: 0 auto; /* Центрирование контейнера */
    padding: 0 16px; /* Горизонтальные отступы внутри контейнера для мобильных */
}

/* --- СТИЛИЗАЦИЯ СЕКЦИЙ --- */
/* Общие стили для всех секций внутри main.scrap-page */
.scrap-page section {
    margin-bottom: 10px; /* Отступ между секциями */
    background-color: var(--container-bg-color); /* Белый фон для каждой секции */
    padding: 24px 0; /* Вертикальные отступы секции, горизонтальные задает .container */
    border-radius: 8px; /* Скругленные углы секций */
    box-shadow: 0 4px 10px var(--medium-shadow); /* Мягкая тень для секций */
}

/* Специфические стили для первой секции (hero) */
.scrap-page .hero {
    background-color: var(--main-bg-color); /* Фон hero-секции, может быть такой же как body */
    box-shadow: none; /* Убираем тень для hero-секции, если она не нужна */
    border-radius: 0; /* Убираем скругления */
    padding-top: 12px; /* Увеличиваем отступ сверху */
    padding-bottom: 12px; /* Увеличиваем отступ снизу */
    text-align: center; /* Центрирование текста и изображений в hero */
}

/* Стили для последней секции (призыва к действию) */
.scrap-page .contact-block {
    text-align: center; /* Центрируем текст и кнопку */
}


/* --- ТИПОГРАФИКА --- */

/* Стили для главного заголовка H1 */
.scrap-page h1 {
    font-size: clamp(26px, 6vw, 40px); /* Адаптивный размер: от 26px до 40px */
    font-weight: 700; /* Жирный шрифт */
    margin-bottom: 24px; /* Отступ снизу */
    color: var(--heading-color); /* Цвет заголовка */
    line-height: 1.3; /* Межстрочный интервал */
}

/* Стили для подзаголовков H2 (заголовки секций) */
.scrap-page h2 {
    font-size: clamp(22px, 5vw, 32px); /* Адаптивный размер: от 22px до 32px */
    margin-top: 10px; /* Отступ сверху от предыдущего элемента */
    margin-bottom: 4px; /* Отступ снизу */
    font-weight: 700; /* Жирный шрифт (700 вместо 600 для заголовков) */
    color: var(--heading-color); /* Цвет заголовка */
    line-height: 1.3;
    text-align: center; /* Центрируем заголовки секций */
}

/* Стили для подзаголовков H3 (внутри секций) */
.scrap-page h3 {
    font-size: clamp(18px, 4vw, 24px); /* Адаптивный размер: от 18px до 24px */
    margin-top: 14px;
    margin-bottom: 12px;
    font-weight: 700; /* Жирный шрифт */
    color: var(--heading-color);
    line-height: 1.3;
}

/* Стили для параграфов */
.scrap-page p {
    margin-bottom: 16px; /* Отступ снизу */
    /* line-height: 1.6; - Наследуется от .scrap-page */
}

/* Стили для тега <strong> */
.scrap-page strong {
    font-weight: 700; /* Делаем жирнее (обычно 700 это bold) */
    color: var(--heading-color); /* Можно выделить цветом, если нужно */
}

/* Стили для обычных неупорядоченных списков */
.scrap-page ul {
    list-style-type: disc; /* Стандартные маркеры */
    margin-left: 1.5em; /* Отступ слева для маркеров */
    margin-bottom: 20px; /* Отступ снизу от списка */
}

/* Стили для элементов списка */
.scrap-page ul li {
    margin-bottom: 10px;
}

/* Стили для вложенных списков (например, список марок стали) */
.scrap-page ul ul { /* Правило для ul внутри ul */
    margin-top: 8px;
    margin-bottom: 8px;
    list-style-type: circle; /* Можно использовать другой маркер для вложенных */
}

/* Специфические стили для списка марок стали */
.scrap-page ul.steel-grades li {
    font-style: italic; /* Курсив для марок стали */
    color: var(--steel-grade-color); /* Темно-серый цвет */
}

/* Стили для "Важно:" или особых заметок */
.scrap-page .important-note {
    display: block; /* Выделяем как блочный элемент */
    font-weight: 700; /* Полужирный */
    color: var(--accent-color); /* Выделим акцентным цветом */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Стили для контейнера figure, который оборачивает изображение и подпись */
.scrap-page figure {
    margin: 24px 0; /* Отступ сверху и снизу от блока с изображением */
    text-align: center; /* Центрируем изображение и подпись */
}

/* Стили для самого изображения внутри figure */
.scrap-page figure img {
    width: 100%; /* Изображение занимает всю доступную ширину родителя */
    height: auto; /* Сохраняем пропорции изображения */
    display: block; /* Убираем лишний пробел под изображением */
    border-radius: 4px; /* Скругленные углы изображения */
    box-shadow: 0 2px 8px var(--light-shadow); /* Тень для изображения */
    max-width: 700px; /* Ограничиваем максимальную ширину изображения на больших экранах */
    margin: 0 auto; /* Центрируем изображение, если max-width меньше 100% */
}

/* Стили для подписи к изображению */
.scrap-page figcaption {
    font-size: 0.9em; /* Чуть меньше размер шрифта */
    color: var(--primary-text-color); /* Цвет подписи */
    margin-top: 8px; /* Отступ сверху от изображения */
    font-style: italic; /* Курсив для подписи */
}

.scrap-page .btn {
    display: inline-block; /* Позволяет задавать padding и выравнивать текст */
    padding: 12px 24px; /* Внутренние отступы */
    font-size: 1rem; /* Размер шрифта, 1rem = базовый размер body */
    font-weight: 700; /* Жирный */
    color: var(--container-bg-color); /* Белый текст кнопки */
    background-color: #FD7F28; /* Акцентный цвет кнопки */
    text-decoration: none; /* Убираем подчеркивание */
    border-radius: 6px; /* Скругление углов */
    text-align: center; /* Центрируем текст внутри кнопки */
    margin-top: 20px; /* Отступ сверху */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Плавный переход и легкая анимация */
    border: none; /* Убираем стандартную рамку */
    cursor: pointer; /* Указатель мыши */
}
.scrap-page section {
    margin-bottom: 40px; /* Отступ между секциями */
    background-color: var(--container-bg-color); /* Белый фон для каждой секции */
    padding: 24px 0; /* Вертикальные отступы секции, горизонтальные задает .container */
    border-radius: 8px; /* Скругленные углы секций */
    box-shadow: 0 4px 10px var(--medium-shadow); /* Мягкая тень для секций */
}
.scrap-page .btn:hover {
    background-color: #f5a871;
    transform: translateY(-2px); /* Легкий эффект поднятия */
}

@media (min-width: 768px) {
    .scrap-page {
        padding: 40px 0;
    }

    .scrap-page .container {
        padding: 0;
    }

    /* Увеличиваем отступы между секциями */
    .scrap-page section {
        margin-bottom: 20px;
        padding: 22px 0; /* Увеличиваем вертикальный padding */
    }
    
    .scrap-page h1 {
        font-size: clamp(32px, 5vw, 48px); /* Увеличиваем максимальный размер H1 */
    }

    .scrap-page h2 {
        font-size: clamp(26px, 4vw, 36px); /* Увеличиваем максимальный размер H2 */
    }
    
    /* Кнопка на больших экранах */
    .scrap-page .btn {
        font-size: 1.125rem; /* ~18px */
        padding: 14px 28px;
        background-color: #FD7F28;
    }
}