/* =========================
   Основные переменные и шрифты
   ========================= */
:root {
    --primary-color: #101010; /* Основной цвет фона */
    --secondary-color: #282828; /* Вторичный цвет (блоки, кнопки) */
    --contrast-color: #D5D800; /* Контрастный цвет (акценты, границы) */
    --white-color: #FFFFFF; /* Белый цвет для текста */
}

/* Импорт Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap'); /* Импорт шрифта Noto Serif Display */

/* Кастомные шрифты */
@font-face {
    font-family: 'Cal Sans'; /* Имя кастомного шрифта */
    src: url('./fonts/CalSans-Regular.ttf'); /* Путь к файлу шрифта */
    font-weight: 400; /* Толщина */
    font-style: normal; /* Стиль */
}
@font-face {
    font-family: 'Poiret One'; /* Имя кастомного шрифта */
    src: url('./fonts/PoiretOne-Regular.ttf'); /* Путь к файлу шрифта */
    font-weight: 400; /* Толщина */
    font-style: normal; /* Стиль */
}
@font-face {
    font-family: 'Raleway'; /* Имя кастомного шрифта */
    src: url('./fonts/Raleway-VariableFont_wght.ttf'); /* Путь к файлу шрифта */
    font-weight: 100 900; /* Диапазон толщин */
    font-style: normal; /* Стиль */
}

/* =========================
   Контейнер для всех карточек авто
   ========================= */
.cars-container{
    padding-top: 180px; /* Отступ сверху для учета фиксированного хедера */
    display: flex; /* Flex-контейнер для вертикального списка */
    flex-direction: column; /* Колонка */
    align-items: center; /* Центрируем по горизонтали */
}

/* =========================
   Карточка автомобиля
   ========================= */
.car{
    max-width: 800px; /* Максимальная ширина карточки */
    height: 200px; /* Высота карточки */
    display: flex; /* Flex-контейнер для горизонтального расположения */
    align-items: center; /* Центрируем по вертикали */
    border: 1px solid var(--contrast-color); /* Граница карточки */
    border-radius: 10px; /* Скругление углов */
    margin: 15px; /* Внешний отступ */
    padding: 10px; /* Внутренний отступ */
    /* box-sizing: border-box по умолчанию для flex-children */
}

/* =========================
   Блок с изображением авто
   ========================= */
.car-image{
    width: 300px; /* Ширина блока с фото */
    height: 200px; /* Высота блока с фото */
}

.car-image img{
    width: 100%; /* Фото на всю ширину блока */
    height: 100%; /* Фото на всю высоту блока */
    object-fit: cover; /* Обрезка по размеру, чтобы не искажать */
}

/* =========================
   Блок с информацией об авто
   ========================= */
.car-info{
    display: flex; /* Flex-контейнер для вертикального расположения */
    flex-direction: column; /* Колонка */
    justify-content: flex-start; /* Вверх */
    padding-left: 20px; /* Отступ слева от фото */
    font-family: Raleway, sans-serif; /* Шрифт */
    gap: 15px; /* Промежуток между элементами */
    position: relative; /* Для позиционирования кнопки внутри */
    width: 100%; /* Гарантируем, что .car-info не шире карточки */
    box-sizing: border-box; /* Учитываем padding в ширине */
}

/* =========================
   Контейнер для характеристик авто
   ========================= */
.car-info-container{
    display: flex; /* Flex-контейнер для двух колонок */
    justify-content: space-evenly; /* Равномерно между колонками */
    align-items: center; /* Центрируем по вертикали */
    gap: 15px; /* Промежуток между колонками */
}

/* Левая и правая колонки характеристик */
.car-info-left, .car-info-right{
    display: flex; /* Flex-контейнер */
    flex-direction: column; /* Колонка */
    justify-content: space-between; /* Равномерно по высоте */
    align-items: flex-start; /* Выровнять по левому краю */
    margin-bottom: 1%; /* Отступ снизу */
}

/* Заголовок карточки (бренд и модель) */
.car-info h3{
    font-family: Raleway, sans-serif; /* Шрифт */
    font-size: 24px; /* Размер шрифта */
    color: var(--white-color); /* Цвет текста */
    margin: 0; /* Без отступа */
}

/* Обычный текст в карточке */
.car-info p{
    font-family: Raleway, sans-serif; /* Шрифт */
    font-size: 16px; /* Размер шрифта */
    color: var(--white-color); /* Цвет текста */
    margin: 5px 0; /* Отступы сверху и снизу */
}

/* Старый класс для кнопки (не используется, но оставлен для совместимости) */
.car-button {
    margin-top: 15px; /* Отступ сверху */
    text-align: center; /* Центрируем текст */
}

/* =========================
   Контейнер для кнопки "Уточнить детали"
   ========================= */
.car-info-button {
    width: 100%; /* Кнопка занимает всю ширину info */
    display: flex; /* Flex-контейнер */
    justify-content: center; /* Центрируем кнопку по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    margin-top: 0; /* Без отступа сверху */
    margin-bottom: 0; /* Без отступа снизу */
    position: static; /* Обычное позиционирование */
    box-sizing: border-box; /* Учитываем padding в ширине */
    padding-left: 0; /* Без отступа слева */
    padding-right: 0; /* Без отступа справа */
    overflow: visible; /* Показываем всё содержимое */
    max-width: 100%; /* Не шире родителя */
}

/* =========================
   Кнопка "Уточнить детали"
   ========================= */
.details-button {
    display: flex; /* Flex-контейнер */
    padding: 10px 20px; /* Внутренние отступы */
    background-image: url('https://media.istockphoto.com/id/1432615829/ru/%D1%84%D0%BE%D1%82%D0%BE/%D0%B7%D0%BE%D0%BB%D0%BE%D1%82%D0%BE%D0%B9-%D0%B1%D0%BB%D0%B5%D1%81%D1%82%D1%8F%D1%89%D0%B8%D0%B9-%D1%84%D0%BE%D0%BD.jpg?s=612x612&w=0&k=20&c=3eu5OiWApAWf0vbqf2Xx0sxF6b-jA0OVuJTD2hlgWzA='); /* Фон кнопки */
    background-position: center; /* Центрируем фон */
    border: none; /* Без границы */
    border-radius: 8px; /* Скругление углов */
    color: #000; /* Цвет текста */
    font-weight: bold; /* Жирный текст */
    font-size: 16px; /* Размер шрифта */
    text-decoration: none; /* Без подчеркивания */
    cursor: pointer; /* Курсор-рука */
    text-shadow: 1px 1px 1px rgba(255,255,255,0.6); /* Тень текста */
    box-shadow: 0 2px 4px rgba(0,0,0,0.4); /* Тень кнопки */
    transition: transform 0.2s ease; /* Плавное увеличение */
    margin-top: 0; /* Без отступа сверху */
    margin-bottom: 0; /* Без отступа снизу */
    align-self: center; /* Центрируем кнопку внутри flex-контейнера */
    max-width: 100%; /* Не шире контейнера */
    box-sizing: border-box; /* Учитываем padding в ширине */
    white-space: nowrap; /* Не переносить текст */
    overflow: hidden; /* Обрезать если не влезает */
    text-overflow: ellipsis; /* Многоточие если не влезает */
}

/* Эффект наведения на кнопку */
.details-button:hover {
    transform: scale(1.07); /* Увеличиваем кнопку */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Усиливаем тень */
}

/* Цена автомобиля */
#car-price {
  color:#D5D800; /* Цвет цены */
  font-weight: bold; /* Жирный */
  font-size: 24px; /* Размер шрифта */
}

/* =========================
   Адаптивность для планшетов и мобильных
   ========================= */
@media(max-width: 900px){
    .car{
        flex-direction: column; /* В колонку */
        align-items: center; /* Центрируем */
        height: 350px; /* Увеличиваем высоту */
        width: 100%; /* На всю ширину родителя */
        box-sizing: border-box; /* Учитываем padding и border */
        overflow: hidden; /* Скрываем всё, что вылезает */
    }
    .car-image{
        margin-bottom: 15px; /* Отступ снизу */
    }
    .car-info{
        padding-left: 0px; /* Без отступа слева */
        width: 100%; /* На всю ширину */
        box-sizing: border-box; /* Учитываем padding */
        overflow: hidden; /* Скрываем всё, что вылезает */
    }
    .car-info-button {
        width: 100%; /* На всю ширину */
        margin-top: 0;
        margin-bottom: 0;
        box-sizing: border-box;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden; /* Скрываем всё, что вылезает */
    }
    .details-button {
        max-width: 100%; /* Не шире контейнера */
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* =========================
   Адаптивность для мобильных (очень маленькие экраны)
   ========================= */
@media(max-width: 450px){
    .car{
        width: 300px; /* Фиксированная ширина */
        height: 400px; /* Увеличенная высота */
        padding: 20px; /* Внутренний отступ */
        box-sizing: border-box;
        overflow: hidden;
    }
    .car-info{
        padding-left: 0px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .car-info-button {
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
        box-sizing: border-box;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
    }
    .details-button {
        max-width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .car-info-container{
        justify-content: center;
        max-width: 300px;
    }
}