/* courses-overview-styles.css */

#courses-hero {
    background: linear-gradient(rgba(0, 60, 140, 0.85), rgba(0, 40, 100, 0.9)); /* Синий градиент */
    color: white;
    padding: 50px 20px;
    text-align: center;
    margin-bottom: 0; /* Убираем нижний отступ у секции hero */
    border-radius: 0; /* Убираем скругление, если было у секций */
    box-shadow: none; /* Убираем тень, если была у секций */
    width: 100%; /* Секция hero на всю ширину */
    max-width: none; /* Снимаем ограничение */
}

#courses-hero .hero-content h1 {
    font-size: 2.6em;
    margin-bottom: 15px;
    color: #f0a500; /* Оранжевый акцент */
}

#courses-hero .hero-content p {
    font-size: 1.15em;
    max-width: 750px;
    margin: 0 auto 15px auto;
    line-height: 1.6;
}

/* Секция со списком курсов */
#courses-list {
    padding-top: 40px;
    padding-bottom: 50px;
    background-color: #f8f9fa; /* Очень светлый фон */
}

#courses-list h2 {
    margin-bottom: 35px;
    font-size: 2em;
    color: #333;
    text-align: center;
}

.course-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.course-overview-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 6px solid transparent; /* Для тематического цвета */
}

.course-overview-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Тематические цвета для левой рамки и иконки */
.course-overview-card.theme-business { border-left-color: #2c3e50; }
.course-overview-card.theme-business .card-icon { color: #2c3e50; }

.course-overview-card.theme-travel { border-left-color: #2980b9; }
.course-overview-card.theme-travel .card-icon { color: #2980b9; }

.course-overview-card.theme-beginner { border-left-color: #27ae60; }
.course-overview-card.theme-beginner .card-icon { color: #27ae60; }

.course-overview-card.theme-presentations { border-left-color: #8e44ad; /* Фиолетовый */ }
.course-overview-card.theme-presentations .card-icon { color: #8e44ad; }

.course-overview-card.theme-advanced { border-left-color: #d35400; /* Тыквенный */ }
.course-overview-card.theme-advanced .card-icon { color: #d35400; }

.course-overview-card.theme-levels { border-left-color: #7f8c8d; /* Серый */ }
.course-overview-card.theme-levels .card-icon { color: #7f8c8d; }

.course-overview-card.theme-professional { border-left-color: #16a085; /* Бирюзовый */ }
.course-overview-card.theme-professional .card-icon { color: #16a085; }

.course-overview-card.theme-kids { border-left-color: #f39c12; /* Оранжевый */ }
.course-overview-card.theme-kids .card-icon { color: #f39c12; }

.course-overview-card.theme-ielts { border-left-color: #c0392b; /* Красный */ }
.course-overview-card.theme-ielts .card-icon { color: #c0392b; }

.course-overview-card.theme-cv { border-left-color: #34495e; /* Темно-синий */ }
.course-overview-card.theme-cv .card-icon { color: #34495e; }

.course-overview-card.theme-essay { border-left-color: #9b59b6; /* Аметист */ }
.course-overview-card.theme-essay .card-icon { color: #9b59b6; }

.course-overview-card.theme-speaking { border-left-color: #e67e22; /* Морковный */ }
.course-overview-card.theme-speaking .card-icon { color: #e67e22; }

.course-overview-card.theme-foreign { border-left-color: #bdc3c7; /* Серебряный */ }
.course-overview-card.theme-foreign .card-icon { color: #7f8c8d; } /* Можно другой цвет для иконки */


.course-overview-card .card-icon {
    font-size: 2.8em;
    margin-bottom: 15px;
}

.course-overview-card h3 {
    font-size: 1.5em;
    margin-bottom: 8px;
    color: #333;
}
.course-overview-card .card-subtitle {
    font-size: 0.95em;
    color: #777;
    margin-bottom: 15px;
    font-style: italic;
}

.course-overview-card .card-description {
    font-size: 0.95em;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1; /* Чтобы описание занимало место, если высота карточек разная */
}

.course-overview-button {
    display: inline-block;
    padding: 10px 22px;
    font-size: 0.95em;
    font-weight: bold;
    color: #fff; /* Белый текст по умолчанию */
    background-color: #0056b3; /* Синий фон для кнопки */
    text-decoration: none;
    border-radius: 25px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    align-self: center; /* Центрируем кнопку */
    margin-top: auto; /* Прижимаем кнопку к низу карточки */
}

.course-overview-button:hover {
    background-color: #00428a; /* Темнее при наведении */
    transform: scale(1.03);
}


/* Адаптивность */
@media (max-width: 768px) {
    #courses-hero .hero-content h1 {
        font-size: 2em;
    }
    #courses-hero .hero-content p {
        font-size: 1.05em;
    }
    .course-cards-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .course-overview-card h3 {
        font-size: 1.3em;
    }
}