.courses {
    padding: 80px 0;
    background: var(--color-grey-light-1);
}
.courses__tabs {
    display: flex; gap: 40px; align-items: center;
    margin-bottom: 40px;
    overflow-x: auto;
}
.courses__tab {
    font-size: 20px; line-height: 32px; font-weight: 600;
    color: var(--color-black);
    padding-bottom: 8px;
    position: relative;
    flex-shrink: 0;
    outline: none;
}
.courses__tab:focus-visible { outline: none; }
.courses__tab:focus-visible::after,
.courses__tab.is-active::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 100%;
    height: 3px; background: var(--color-black); border-radius: 2px;
}

.courses__carousel {
    position: relative;
    overflow: hidden;
    --courses-pad: var(--container-pad);
    --courses-card: calc((100vw - var(--courses-pad) * 2 - 72px) / 4);
}
@media (min-width: 1280px) {
    .courses__carousel {
        --courses-pad: max(80px, calc((100vw - 1600px) / 2 + 80px));
        --courses-card: calc((min(100vw, 1600px) - 160px - 72px) / 4);
    }
}
@media (min-width: 1920px) {
    .courses__carousel {
        --courses-pad: calc((100vw - 1920px) / 2 + 320px);
        --courses-card: calc((1280px - 72px) / 4);
    }
}
.courses__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--courses-card);
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 0;
    margin-left: var(--courses-pad);
    width: calc(100% - var(--courses-pad));
    scrollbar-width: none;
}
.courses__track::-webkit-scrollbar { display: none; }

.courses__nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}
.courses__arrow {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-black);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.courses__arrow:hover { background: var(--color-black); color: var(--color-white); }
.courses__arrow:disabled { opacity: 0.4; cursor: default; }
.courses__arrow:disabled:hover { background: var(--color-white); color: var(--color-black); }

@media (max-width: 1199px) {
    .courses__track {
        /* definite column width so the track overflows and scrolls;
           minmax(0, x) lets grid share the container width -> cards collapse */
        grid-auto-columns: calc((100% - 24px) / 2);
    }
}

@media (max-width: 767px) {
    .courses { padding: 48px 0; }
    .courses__tabs { gap: 24px; margin-bottom: 28px; }
    .courses__track {
        grid-auto-columns: 85%;
        gap: 16px;
    }
    .courses__nav { margin-top: 24px; }
}