/* ============================================================
   Course Thumbnail Card
   교육 썸네일 카드 (배경 SVG + 텍스트 레이어)
   ============================================================ */

/* ---- 색상 변수 (업체별 theme color 주입 가능) ----
   상단은 밝은 블루로 사진을 완전히 덮고, 하단으로 갈수록 투명해져서
   사진이 드러나는 구조. 업체별로 --thumb-overlay-color 만 바꿔주면 된다. */
.course-thumb-card {
    --thumb-overlay-color: 21, 41, 166; /* #152ba6 (RGB 값만) */

    position: relative;
    width: 100%;
    /* 원본 이미지의 자연 비율(575:450 ≒ 23:18) 유지 */
    aspect-ratio: 575 / 450;
    overflow: hidden;
    background-image:
        linear-gradient(
            to bottom,
            rgba(var(--thumb-overlay-color), 1)    0%,
            rgba(var(--thumb-overlay-color), 0.92) 35%,
            rgba(var(--thumb-overlay-color), 0.55) 60%,
            rgba(var(--thumb-overlay-color), 0.15) 100%
        ),
        url('../img/course/course_thumb_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 좌측 상단 뱃지 그룹 (날짜 + 장소가 나란히) */
.course-thumb-card__badges {
    position: absolute;
    top: 16px;
    left: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

/* 날짜 — 짙은 남색 사각 뱃지 + 흰색 텍스트 */
.course-thumb-card__date-badge {
    background: #071452;
    color: #ffffff;
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    padding: 7px 11px;
    border-radius: 4px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}

/* 장소 — 흰색 사각 뱃지 + 파랑 텍스트 */
.course-thumb-card__place-badge {
    background: #ffffff;
    color: #0c4da2;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

/* 제목/부제 영역 — 좌측 정렬, 뱃지 그룹 아래 */
.course-thumb-card__text {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 38%;
    text-align: left;
    z-index: 2;
}

.course-thumb-card__title {
    color: #ffffff;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -1px;
    margin: 0 0 6px 0;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-thumb-card__subtitle {
    display: block;
    color: #fdff93;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 반응형 — 좁은 화면에서 글자 축소 */
@media (max-width: 575.98px) {
    .course-thumb-card__title {
        font-size: 22px;
    }
    .course-thumb-card__subtitle {
        font-size: 14px;
    }
    .course-thumb-card__date-badge {
        font-size: 16px;
        padding: 6px 10px;
    }
    .course-thumb-card__place-badge {
        font-size: 12px;
        padding: 6px 10px;
    }
}