/*==============================================
   KIMST home page: Our Courses carousel
   Native scroll-snap scroller; courses.js adds the arrows + progress bar.
   Uses .kh-reveal from home.css for the scroll reveal.
===============================================*/

.kh-courses {
    --kh-green: #108543;
    --kh-green-700: #0b6a34;
    --kh-green-800: #0a4f29;
    --kh-green-900: #073d20;
    --kh-green-300: #8fe0b0;
    --kh-green-50: #eef7f1;
    --kh-red: #d02010;
    --kh-red-700: #a8180c;
    --kh-ink: #14231a;
    --kh-muted: #5b6b61;
    --kh-line: #e3eae5;
    --kh-ease: cubic-bezier(.22, 1, .36, 1);
    --kh-gap: 24px;

    position: relative;
    overflow: hidden;
    padding: 92px 0 96px;
    font-family: var(--kh-font-ui);
    background: #f3f7f4;
}

/* Soft decorative glows */
.kh-courses::before,
.kh-courses::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.kh-courses::before {
    top: -240px;
    right: -180px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(16, 133, 67, .12), transparent 68%);
}

.kh-courses::after {
    bottom: -260px;
    left: -200px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(208, 32, 16, .06), transparent 68%);
}

.kh-courses .container {
    position: relative;
    z-index: 1;
}

/*---------- Heading + arrows ----------*/

.kh-courses__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 44px;
}

.kh-courses__intro {
    max-width: 640px;
}

.kh-courses .kh-courses__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--kh-red);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.kh-courses__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .55;
}

.kh-courses h2.kh-courses__title {
    margin: 16px 0 12px;
    color: var(--kh-ink);
    font-family: var(--kh-font-ui);
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.kh-courses__title em {
    color: var(--kh-green);
    font-style: normal;
}

.kh-courses p.kh-courses__sub {
    margin: 0;
    color: var(--kh-muted);
    font-family: var(--kh-font-body);
    font-size: 17px;
    line-height: 1.7;
}

.kh-courses__ctrls {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.kh-courses__ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1.5px solid var(--kh-green);
    border-radius: 50%;
    background: #fff;
    color: var(--kh-green-700);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}

.kh-courses__ctrl:hover:not(:disabled) {
    background: var(--kh-green);
    color: #fff;
}

.kh-courses__ctrl:active:not(:disabled) {
    transform: scale(.94);
}

.kh-courses__ctrl:disabled {
    border-color: var(--kh-line);
    color: #9aa8a0;
    cursor: default;
    opacity: .7;
}

/*---------- Scroller ----------*/

/* Negative margin + matching padding gives the lifted cards and their shadows room inside the scroll box */
.kh-courses__scroller {
    margin: -16px -16px -44px;
    padding: 16px 16px 44px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.kh-courses__scroller::-webkit-scrollbar {
    display: none;
}

.kh-courses__list {
    display: flex;
    gap: var(--kh-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: course;
}

/* Trailing space so the last card ends flush with the container, matching the first card at the start.
   (End padding on the scroller is not counted for overflowing flex items.) Net width after the gap = 16px. */
.kh-courses__list::after {
    content: "";
    flex: 0 0 1px;
    margin-left: calc(16px - var(--kh-gap) - 1px);
}

/*---------- Course card ----------*/

.kh-course {
    position: relative;
    flex: 0 0 calc((100% - 2 * var(--kh-gap)) / 3);
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--kh-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(7, 61, 32, .04), 0 14px 34px rgba(7, 61, 32, .07);
    scroll-snap-align: start;
    counter-increment: course;
    transition: transform .35s var(--kh-ease), box-shadow .35s ease, border-color .35s ease;
}

.kh-course:hover,
.kh-course:focus-within {
    transform: translateY(-8px);
    border-color: rgba(16, 133, 67, .4);
    box-shadow: 0 2px 4px rgba(7, 61, 32, .04), 0 30px 60px rgba(7, 61, 32, .16);
}

.kh-course__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--kh-green-800);
}

.kh-course__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    transition: transform .8s var(--kh-ease);
}

.kh-course:hover .kh-course__media img {
    transform: scale(1.07);
}

/* Bottom gradient so the number badge and arrow always read */
.kh-course__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(7, 61, 32, 0) 50%, rgba(7, 61, 32, .5) 100%);
    pointer-events: none;
}

/* 01, 02, 03 ... from a CSS counter, so it follows the data */
.kh-course__media::after {
    content: counter(course, decimal-leading-zero);
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(7, 61, 32, .55);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
}

@supports (backdrop-filter: blur(6px)) {
    .kh-course__media::after {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}

.kh-course__body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 34px 26px 26px;
}

/* Round arrow straddling the image / body edge */
.kh-course__arrow {
    position: absolute;
    top: -26px;
    right: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--kh-green);
    box-shadow: 0 10px 22px rgba(16, 133, 67, .35);
    color: #fff;
    font-size: 16px;
    transition: background .25s ease, transform .35s var(--kh-ease);
}

.kh-course:hover .kh-course__arrow,
.kh-course:focus-within .kh-course__arrow {
    background: var(--kh-red);
    box-shadow: 0 10px 22px rgba(208, 32, 16, .35);
    transform: rotate(-45deg);
}

.kh-courses h3.kh-course__title {
    margin: 0 0 14px;
    padding-right: 36px;
    color: var(--kh-ink);
    font-family: var(--kh-font-ui);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    /* two lines, so every card in the row lines up */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    transition: color .2s ease;
}

.kh-course:hover h3.kh-course__title {
    color: var(--kh-green-700);
}

/* The whole card is the click target */
.kh-courses a.kh-course__link {
    color: inherit;
    text-decoration: none;
}

.kh-course__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
}

.kh-course__more {
    margin-top: auto;
    color: var(--kh-red);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.kh-course__more::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-top: 10px;
    border-radius: 3px;
    background: currentColor;
    transition: width .4s var(--kh-ease);
}

.kh-course:hover .kh-course__more::after {
    width: 100%;
}

.kh-courses a.kh-course__link:focus-visible {
    outline: none;
}

.kh-course:has(.kh-course__link:focus-visible) {
    outline: 3px solid var(--kh-green);
    outline-offset: 3px;
}

.kh-courses__scroller:focus-visible,
.kh-courses__ctrl:focus-visible,
.kh-courses a.kh-courses__all:focus-visible {
    outline: 2px solid var(--kh-green);
    outline-offset: 3px;
}

/*---------- Footer: progress + button ----------*/

.kh-courses__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 56px;
}

.kh-courses__progress {
    flex: 1 1 auto;
    max-width: 420px;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(16, 133, 67, .18);
}

.kh-courses__progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--kh-green), #2bb86b);
    transition: width .3s ease;
}

.kh-courses a.kh-courses__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 999px;
    background: var(--kh-red);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(208, 32, 16, .3);
    transition: background .2s ease, transform .2s ease;
}

.kh-courses a.kh-courses__all:hover {
    background: var(--kh-red-700);
    color: #fff;
    transform: translateY(-2px);
}

.kh-courses__all i {
    font-size: 15px;
    transition: transform .25s var(--kh-ease);
}

.kh-courses a.kh-courses__all:hover i {
    transform: translateX(4px);
}

/* Everything fits (few courses / wide screen): no arrows or progress needed */
.kh-courses.is-static .kh-courses__ctrls,
.kh-courses.is-static .kh-courses__progress {
    display: none;
}

.kh-courses.is-static .kh-courses__foot {
    justify-content: center;
}

.kh-courses__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 24px;
    border: 1px dashed rgba(16, 133, 67, .4);
    border-radius: 22px;
    background: #fff;
    color: var(--kh-muted);
    text-align: center;
}

.kh-courses__empty i {
    margin-bottom: 14px;
    color: var(--kh-green);
    font-size: 44px;
    opacity: .5;
}

.kh-courses__empty p {
    margin: 0 0 22px;
    font-family: var(--kh-font-body);
    font-size: 17px;
}

/*---------- Responsive ----------*/

@media (max-width: 1199.98px) {
    .kh-course {
        flex-basis: calc((100% - var(--kh-gap)) / 2);
    }
}

@media (max-width: 991.98px) {
    .kh-courses {
        padding: 64px 0 68px;
    }

    .kh-courses__head {
        margin-bottom: 34px;
    }

    .kh-courses__foot {
        margin-top: 48px;
    }
}

@media (max-width: 767.98px) {
    .kh-courses__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }
}

@media (max-width: 575.98px) {
    .kh-courses {
        --kh-gap: 16px;
        padding: 52px 0 56px;
    }

    .kh-courses p.kh-courses__sub {
        font-size: 16px;
    }

    /* One card with a peek of the next so it reads as swipeable */
    .kh-course {
        flex-basis: 84%;
    }

    .kh-courses__ctrl {
        width: 46px;
        height: 46px;
        font-size: 24px;
    }

    .kh-courses__foot {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 24px;
        margin-top: 40px;
    }

    .kh-courses__progress {
        max-width: none;
    }

    .kh-courses a.kh-courses__all {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kh-course,
    .kh-course__media img,
    .kh-course__arrow,
    .kh-course__more::after,
    .kh-courses__ctrl,
    .kh-courses__progress span,
    .kh-courses a.kh-courses__all,
    .kh-courses__all i {
        transition: none;
    }

    .kh-course:hover,
    .kh-course:focus-within,
    .kh-course:hover .kh-course__media img {
        transform: none;
    }

    .kh-course:hover .kh-course__arrow,
    .kh-course:focus-within .kh-course__arrow {
        transform: none;
    }
}