/* Карточки направлений в стиле админки */
.direction-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    background-color: #ffffff;
    height: 100%;
}

/* Тело карточки – вертикальный флекс, чтобы кнопка была снизу */
.direction-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem 1.75rem;
}

/* Аватар направления – один фиксированный размер */
.field-avatar {
    width: 150px;
    height: 150px;
    background: #f3f6f9;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}

/* Картинка внутри аватара – вписывается в круг */
.field-avatar img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Статус и подпись */
.field-status {
    font-size: 0.75rem;
    color: #98a6ad;
}

.field-subtitle {
    font-size: 0.8rem;
    color: #98a6ad;
}

.page-title-box .page-title {
    line-height: 30px;
}

/* === ПУБЛИЧНЫЕ КАРТОЧКИ ДЛЯ ЛЕНДИНГА (НАПРАВЛЕНИЯ + КУРСЫ) === */

.public-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.public-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

/* Область контента – флекс-колонка, чтобы кнопка прижималась вниз */
.public-card-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 1.75rem;
}

/* Блок с кнопкой/бейджем внизу карточки */
.public-card-footer {
    margin-top: auto;
}

/* Небольшой тюнинг для крупных экранов */
@media (min-width: 1200px) {
    .public-card-img {
        height: 240px;
    }
}

.hero_title h1{
    color: #f3f6f9;
    opacity: 0,85;
    font-size: 2.5rem;
}

.card {
    background-image: url(assets/images/pattern-bg.svg);
    background-position: right bottom;
    background-repeat: no-repeat;
}