.pio-course-swiper {
    height: auto;
}

.pio-course-slide {
    max-width: 82vw;
    height: auto;
}

.pio-course-card {
    -\-pio-card-title-lines: 1;
    -\-pio-card-title-lh: 1.8;
    -\-pio-card-desc-lines: 2;
    -\-pio-card-desc-lh: 1.55;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;  
}

    .pio-course-card .card-title {
        -webkit-line-clamp: var(-\-pio-card-title-lines, 2);
        line-height: var(-\-pio-card-title-lh, 1.45);
        min-height: calc(var(-\-pio-card-title-lh, 1.45) * var(-\-pio-card-title-lines, 2) * 1em);
    }

    .pio-course-card .card-body p.pio-fs-7 {
        -webkit-line-clamp: var(-\-pio-card-desc-lines, 2);
        line-height: var(-\-pio-card-desc-lh, 1.55);
        min-height: calc(var(-\-pio-card-desc-lh, 1.55) * var(-\-pio-card-desc-lines, 2) * 1em);
    }

/* Layer the grey format tab over an orange offer tab extending inward. */
.pio-offer-price-banner {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    z-index: 3;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    height: 24px;
    max-width: calc(100% - 24px);
    border-bottom-left-radius: 10px;
    overflow: hidden;
    color: #fff;
    pointer-events: none;
}

body[dir="rtl"] .pio-offer-price-banner {
    flex-direction: row;
}

.pio-offer-price-mode {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 3px 10px;
    border-bottom-left-radius: 10px;
    background: #647587;
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.4;
}

.pio-offer-price-mode svg {
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
}

.pio-offer-price-mode > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pio-offer-banner-discount {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-right: -10px;
    padding: 3px 20px 3px 10px;
    border-bottom-left-radius: 10px;
    background: var(-\-pio-primary-color, #FFA000);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* Availability icons remain grey; the corner badge identifies the active price. */
.pio-course-card .pio-icon-wrap,
.pio-course-card .pio-icon-wrap svg,
.pio-course-card .pio-icon-wrap .pio-sections-count,
.demo-related-item .pio-icon-wrap,
.demo-related-item .pio-icon-wrap .pio-sections-count,
.demo-related-item .demo-related-tag i,
.demo-related-item .demo-related-tag svg {
    color: #808080 !important;
}

/* subject cards: sections count as a corner badge on the interactive icon */
.pio-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.pio-sections-count {
    position: absolute;
    top: -7px;
    inset-inline-start: -9px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: clamp(0.5143rem, calc(0.4973rem + 0.0725vw), 0.5625rem);
    font-weight: 600;
    line-height: 2;
    color: var(-\-pio-primary-color, #F5821F);
    background: #fff;
    border: 1px solid currentColor;
    cursor: help;
}

.pio-icon-wrap[data-pio-tip] {
    cursor: help;
}

.pio-tip-bubble {
    -\-pio-tip-bg: #333;
    -\-pio-tip-fg: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1080;
    width: max-content;
    max-width: calc(100vw - 16px);
    padding: 4px 8px;
    border-radius: 4px;
    background: var(-\-pio-tip-bg);
    color: var(-\-pio-tip-fg);
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    font-weight: 500;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

    .pio-tip-bubble.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .pio-tip-bubble::after {
        content: "";
        position: absolute;
        top: 100%;
        left: var(-\-pio-tip-arrow, 50%);
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: var(-\-pio-tip-bg);
    }

    .pio-tip-bubble.is-below::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent;
        border-bottom-color: var(-\-pio-tip-bg);
    }

.pio-reveal {
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

    .pio-reveal.pio-reveal-below,
    .pio-reveal.pio-reveal-above {
        opacity: 0;
        transition: none;
    }

    .pio-reveal.pio-reveal-below {
        transform: translate3d(0, 48px, 0);
    }

    .pio-reveal.pio-reveal-above {
        transform: translate3d(0, -48px, 0);
    }

@media (prefers-reduced-motion: reduce) {
    .pio-reveal.pio-reveal-below,
    .pio-reveal.pio-reveal-above {
        opacity: 1;
        transform: none;
    }
}

body[data-bs-theme="dark"] .pio-course-card {
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body[data-bs-theme="dark"] .pio-tip-bubble {
    -\-pio-tip-bg: #fff;
    -\-pio-tip-fg: #212529;
}

/* keep the sections-count corner badge in the primary color, bg matches the dark card */
body[data-bs-theme="dark"] .bento-card .pio-sections-count,
body[data-bs-theme="dark"] .pio-sections-count {
    color: var(-\-pio-primary-color) !important;
    background: #111111;
}

.pio-course-card {
    -\-pio-card-lift: 1.025;
    -\-pio-card-hover-bg: #f7f8fa;
    -\-pio-card-hover-muted: #343a40;
    -\-pio-card-hover-shadow: 0 16px 38px rgba(16, 32, 43, 0.2);
}

body[data-bs-theme="dark"] .pio-course-card {
    -\-pio-card-hover-bg: #161616;
    -\-pio-card-hover-muted: #adb5bd;
    -\-pio-card-hover-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
}

.pio-course-swiper .pio-course-card:hover,
.pio-course-swiper .pio-course-card:focus-within,
.pio-offers-grid .pio-course-card:hover,
.pio-offers-grid .pio-course-card:focus-within {
    background-color: var(-\-pio-card-hover-bg);
    box-shadow: var(-\-pio-card-hover-shadow);
}

    .pio-course-swiper .pio-course-card:hover .text-secondary,
    .pio-course-swiper .pio-course-card:focus-within .text-secondary,
    .pio-offers-grid .pio-course-card:hover .text-secondary,
    .pio-offers-grid .pio-course-card:focus-within .text-secondary {
        color: var(-\-pio-card-hover-muted) !important;
    }

.pio-course-swiper::part(container) {
    overflow-x: clip;
    overflow-y: visible;
}

@media (prefers-reduced-motion: no-preference) {
    .pio-course-swiper .pio-course-card,
    .pio-offers-grid .pio-course-card {
        transition: opacity .28s ease, transform .36s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, background-color .2s ease, color .2s ease;
    }

    .pio-course-swiper .pio-course-card:not(.pio-reveal-below):not(.pio-reveal-above):hover,
    .pio-course-swiper .pio-course-card:not(.pio-reveal-below):not(.pio-reveal-above):focus-within,
    .pio-offers-grid .pio-course-card:not(.pio-reveal-below):not(.pio-reveal-above):hover,
    .pio-offers-grid .pio-course-card:not(.pio-reveal-below):not(.pio-reveal-above):focus-within {
        transform: scale(var(-\-pio-card-lift, 1.025));
    }
}