/*
    pio-schedules-v2demo.css
    Demo-only card for the training schedule: a horizontal split card laid out
    two per row, replacing the vertical four-up card of pio-schedules.css.

    Scoped entirely under .pio-sched2-* so the live /{lang}/TrainingSchedule
    page is untouched. Loaded after pio-schedules.css in the templateV2/main
    bundle, which is what lets the few overrides below win without !important.
*/

.pio-sched2-grid {
    --pio-sched2-media: 38%;
    --pio-sched2-radius: 1rem;
}

/* pio-schedules.css caps every grid card at 300px and centres it - the split
   card needs the full column width instead. */
.pio-sched2-grid > [class*="col-"] {
    justify-content: stretch;
}

.pio-sched2-grid .pio-course-card.pio-sched2-card {
    max-width: none;
}

/* ---------- card shell ---------- */

.pio-sched2-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .pio-sched2-card {
        transition: box-shadow .2s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
    }

    .pio-sched2-card:hover,
    .pio-sched2-card:focus-within {
        transform: translateY(-2px);
        box-shadow: var(--pio-card-hover-shadow, 0 16px 38px rgba(16, 32, 43, .2));
    }
}

/* ---------- media panel ---------- */

.pio-sched2-media {
    flex: 0 0 auto;
    background: rgba(0, 0, 0, .04);
    overflow: hidden;
}

body[data-bs-theme="dark"] .pio-sched2-media {
    background: rgba(255, 255, 255, .05);
}

.pio-sched2-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- body ---------- */

.pio-sched2-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 1.125rem 1.125rem;
}

.pio-sched2-title-link {
    color: inherit;
}

.pio-sched2-title {
    margin-bottom: .5rem;
    font-weight: 700;
    line-height: 1.45;
    /* pio-course-card.css reserves two title lines via min-height; the split
       card is wider, so let a one-line title sit tight instead. */
    min-height: 0;
}

/* ---------- date / time meta ---------- */

.pio-sched2-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-bottom: .5rem;
}

.pio-sched2-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
    font-size: .75rem;
    line-height: 1.6;
    opacity: .85;
}

.pio-sched2-meta-item i {
    flex: 0 0 auto;
    color: var(--pio-primary-color, #F5821F);
    opacity: .9;
}

.pio-sched2-rel {
    align-self: flex-start;
    margin-bottom: .5rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--pio-primary-color, #F5821F);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.pio-sched2-rel.is-soon {
    background: #D7263D;
}

.pio-sched2-days,
.pio-sched2-tags {
    margin-bottom: .5rem;
}

/* ---------- actions ---------- */

.pio-sched2-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: .625rem;
    padding-top: .5rem;
}

.pio-sched2-buttons {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.pio-sched2-details {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.pio-sched2-cart {
    flex: 0 0 44px;
}

.pio-sched2-price {
    min-width: 0;
    white-space: nowrap;
    font-size: 1.05rem;
    font-weight: 700;
}

/* ---------- >= 576px: card turns horizontal ---------- */

@media (min-width: 576px) {
    .pio-sched2-card {
        flex-direction: row;
        align-items: stretch;
    }

    .pio-sched2-media {
        flex: 0 0 var(--pio-sched2-media);
        max-width: var(--pio-sched2-media);
    }
}

/*
    >= 992px the grid is two per row, so each card is roughly half the
    container. Buttons and price still do not share a line at that width -
    and letting them wrap makes neighbouring cards disagree depending on
    price length - so the stacked actions above stay in force. The price
    reads first, the action row sits beneath it.
*/

/* ---------- >= 1400px: room for the mock's single action line ---------- */

@media (min-width: 1400px) {
    .pio-sched2-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
    }

    .pio-sched2-buttons {
        flex: 0 1 auto;
    }

    .pio-sched2-details {
        flex: 0 0 auto;
    }

    .pio-sched2-price {
        margin-inline-start: auto;
    }
}

/* ---------- < 576px: phones, card is stacked ---------- */

@media (max-width: 575.98px) {
    .pio-sched2-media {
        height: 160px;
    }

    .pio-sched2-body {
        padding: .875rem 1rem 1rem;
    }

    .pio-sched2-meta {
        gap: .25rem .75rem;
    }

    .pio-sched2-meta-item {
        font-size: .7rem;
    }
}