/*
|--------------------------------------------------------------------------
| CyberDojo - Schedule Page
|--------------------------------------------------------------------------
|
| Public weekly training schedule.
|
| Handles:
|
| - Schedule hero
| - Information cards
| - Day filters
| - Weekly schedule cards
| - Today state
| - Session details
| - Empty states
| - Schedule notice
| - CTA
| - Responsive layout
|
*/


/*
|--------------------------------------------------------------------------
| Page Sections
|--------------------------------------------------------------------------
*/

.schedule-hero,
.schedule-section,
.schedule-notice-section,
.schedule-cta {
    position: relative;

    width: 100%;
}


.schedule-hero,
.schedule-section,
.schedule-cta {
    padding:
        var(--space-20)
        0;
}


.schedule-notice-section {
    padding:
        0
        0
        var(--space-16);
}


.schedule-hero,
.schedule-cta {
    background:
        var(--bg-secondary);
}


.schedule-section,
.schedule-notice-section {
    background:
        var(--bg-primary);
}


/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
*/

.schedule-container {
    width:
        min(
            var(--container-width),
            calc(
                100%
                - (
                    var(--container-padding)
                    * 2
                )
            )
        );

    margin:
        0
        auto;
}


/*
|--------------------------------------------------------------------------
| Hero Heading
|--------------------------------------------------------------------------
*/

.schedule-heading {
    max-width: 860px;
}


.schedule-heading h1 {
    margin:
        var(--space-3)
        0
        var(--space-5);

    color:
        var(--text-primary);

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.75rem
        );

    font-weight:
        var(--font-black);

    line-height:
        0.98;

    letter-spacing:
        -0.04em;
}


.schedule-heading h1 span {
    color:
        var(--accent);
}


.schedule-heading p {
    max-width: 820px;

    margin: 0;

    color:
        var(--text-muted);

    font-size:
        var(--text-lg);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Section Eyebrow
|--------------------------------------------------------------------------
*/

.schedule-page
.section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap:
        var(--space-3);

    color:
        var(--accent);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-black);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.schedule-page
.section-eyebrow::before {
    content: "";

    width: 30px;
    height: 3px;

    border-radius:
        var(--radius-pill);

    background:
        var(--accent);
}


/*
|--------------------------------------------------------------------------
| Hero Information Grid
|--------------------------------------------------------------------------
*/

.schedule-info-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        var(--space-4);

    margin-top:
        var(--space-8);
}


/*
|--------------------------------------------------------------------------
| Information Card
|--------------------------------------------------------------------------
*/

.schedule-info-card {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-4);

    min-width: 0;

    padding:
        var(--space-5);

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            var(--bg-card),
            rgba(
                var(--accent-rgb),
                0.025
            )
        );

    box-shadow:
        var(--shadow-sm);

    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


.schedule-info-card:hover {
    border-color:
        var(--border-hover);

    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-accent);
}


.schedule-info-card > i {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    flex:
        0
        0
        42px;

    border-radius:
        var(--radius-md);

    background:
        var(--accent-bg);

    color:
        var(--accent);

    font-size:
        1.1rem;
}


.schedule-info-card strong,
.schedule-info-card span {
    display: block;
}


.schedule-info-card strong {
    color:
        var(--text-primary);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-extrabold);
}


.schedule-info-card span {
    margin-top:
        4px;

    color:
        var(--text-muted);

    font-size:
        var(--text-sm);

    line-height:
        1.5;
}


/*
|--------------------------------------------------------------------------
| Schedule Filters
|--------------------------------------------------------------------------
*/

.schedule-filters {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        var(--space-2);

    margin-top:
        var(--space-8);
}


/*
|--------------------------------------------------------------------------
| Filter Button
|--------------------------------------------------------------------------
*/

.schedule-filter {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap:
        var(--space-2);

    min-height:
        42px;

    padding:
        0
        15px;

    border:
        1px solid
        var(--border-neutral);

    border-radius:
        var(--radius-pill);

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    color:
        var(--text-muted);

    font-size:
        var(--text-xs);

    font-weight:
        var(--font-bold);

    cursor: pointer;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}


.schedule-filter:hover {
    border-color:
        var(--border-hover);

    background:
        var(--accent-bg);

    color:
        var(--accent);
}


.schedule-filter:active {
    transform:
        scale(0.97);
}


/*
|--------------------------------------------------------------------------
| Active Filter
|--------------------------------------------------------------------------
*/

.schedule-filter.is-active,
.schedule-filter[aria-pressed="true"] {
    border-color:
        var(--accent);

    background:
        var(--accent);

    color:
        var(--text-on-accent);

    box-shadow:
        0
        0
        20px
        rgba(
            var(--accent-rgb),
            0.12
        );
}


/*
|--------------------------------------------------------------------------
| Weekly Schedule
|--------------------------------------------------------------------------
*/

.schedule-week {
    display: grid;

    gap:
        var(--space-5);
}


/*
|--------------------------------------------------------------------------
| Day Card
|--------------------------------------------------------------------------
*/

.schedule-day {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-xl);

    background:
        var(--bg-card);

    box-shadow:
        var(--shadow-sm);

    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


.schedule-day:hover {
    border-color:
        var(--border-hover);

    box-shadow:
        var(--shadow-accent);
}


/*
|--------------------------------------------------------------------------
| Today State
|--------------------------------------------------------------------------
*/

.schedule-day.is-today {
    border-color:
        rgba(
            var(--accent-rgb),
            0.55
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            var(--accent-rgb),
            0.08
        ),
        var(--shadow-accent);
}


.schedule-day.is-today::before {
    content: "Today";

    position: absolute;

    top: 0;
    right: 0;

    z-index: 2;

    padding:
        5px
        11px;

    border-radius:
        0
        0
        0
        var(--radius-md);

    background:
        var(--accent);

    color:
        var(--text-on-accent);

    font-size:
        0.64rem;

    font-weight:
        var(--font-black);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/*
|--------------------------------------------------------------------------
| Hidden Filter State
|--------------------------------------------------------------------------
*/

.schedule-day[hidden] {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| Day Header
|--------------------------------------------------------------------------
*/

.schedule-day-header {
    display: flex;

    align-items: center;

    gap:
        var(--space-4);

    min-width: 0;

    padding:
        var(--space-5);

    border-bottom:
        1px solid
        var(--border-neutral);

    background:
        linear-gradient(
            90deg,
            rgba(
                var(--accent-rgb),
                0.035
            ),
            transparent
        );
}


/*
|--------------------------------------------------------------------------
| Day Number
|--------------------------------------------------------------------------
*/

.schedule-day-number {
    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    flex:
        0
        0
        46px;

    border-radius:
        var(--radius-round);

    background:
        var(--accent);

    color:
        var(--text-on-accent);

    font-weight:
        var(--font-black);

    box-shadow:
        0
        0
        20px
        rgba(
            var(--accent-rgb),
            0.16
        );
}


/*
|--------------------------------------------------------------------------
| Day Title
|--------------------------------------------------------------------------
*/

.schedule-day-title {
    min-width: 0;

    flex: 1;
}


.schedule-day-label {
    display: block;

    color:
        var(--text-subtle);

    font-size:
        var(--text-xs);

    font-weight:
        var(--font-bold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.schedule-day-header h2 {
    margin:
        3px
        0
        0;

    overflow: hidden;

    color:
        var(--text-primary);

    font-size:
        var(--heading-sm);

    font-weight:
        var(--font-black);

    line-height:
        1.15;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/*
|--------------------------------------------------------------------------
| Session Count
|--------------------------------------------------------------------------
*/

.schedule-session-count {
    margin-left:
        auto;

    flex-shrink: 0;

    padding:
        7px
        11px;

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-pill);

    background:
        var(--accent-bg);

    color:
        var(--accent);

    font-size:
        var(--text-xs);

    font-weight:
        var(--font-bold);
}


/*
|--------------------------------------------------------------------------
| Day Content
|--------------------------------------------------------------------------
*/

.schedule-day-content {
    display: grid;

    gap:
        var(--space-4);

    padding:
        var(--space-5);
}


/*
|--------------------------------------------------------------------------
| Session Card
|--------------------------------------------------------------------------
*/

.schedule-session {
    position: relative;

    padding:
        var(--space-5);

    overflow:
        hidden;

    border:
        1px solid
        var(--border-neutral);

    border-radius:
        var(--radius-lg);

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}


.schedule-session:hover {
    border-color:
        var(--border-primary);

    background:
        rgba(
            var(--accent-rgb),
            0.025
        );

    transform:
        translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| Session Top
|--------------------------------------------------------------------------
*/

.schedule-session-top {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-3);
}


/*
|--------------------------------------------------------------------------
| Session Icon
|--------------------------------------------------------------------------
*/

.schedule-session-icon {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    flex:
        0
        0
        42px;

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-md);

    background:
        var(--accent-bg);

    color:
        var(--accent);

    font-size:
        1rem;
}


/*
|--------------------------------------------------------------------------
| Session Title
|--------------------------------------------------------------------------
*/

.schedule-session-title {
    min-width: 0;

    flex: 1;
}


.schedule-session-title h3 {
    margin:
        0
        0
        7px;

    color:
        var(--text-primary);

    font-size:
        var(--text-lg);

    font-weight:
        var(--font-extrabold);

    line-height:
        1.3;
}


/*
|--------------------------------------------------------------------------
| Session Time
|--------------------------------------------------------------------------
*/

.schedule-session-time {
    display: flex;

    align-items: center;

    gap:
        var(--space-2);

    color:
        var(--accent);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-semibold);
}


.schedule-session-time > i {
    flex-shrink: 0;
}


.schedule-session-time time {
    color:
        var(--accent);
}


.schedule-time-divider {
    margin:
        0
        3px;

    color:
        var(--text-subtle);
}


/*
|--------------------------------------------------------------------------
| Session Detail
|--------------------------------------------------------------------------
*/

.schedule-session-detail {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-3);

    margin-top:
        var(--space-4);
}


.schedule-session-detail > i {
    width: 20px;

    flex:
        0
        0
        20px;

    margin-top:
        2px;

    color:
        var(--accent);

    text-align:
        center;
}


.schedule-session-detail div {
    min-width: 0;
}


.schedule-session-detail span,
.schedule-session-detail strong {
    display: block;
}


.schedule-session-detail span {
    color:
        var(--text-subtle);

    font-size:
        var(--text-xs);

    font-weight:
        var(--font-semibold);

    letter-spacing:
        0.03em;

    text-transform:
        uppercase;
}


.schedule-session-detail strong {
    margin-top:
        2px;

    color:
        var(--text-secondary);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-semibold);

    overflow-wrap:
        anywhere;
}


/*
|--------------------------------------------------------------------------
| Session Description
|--------------------------------------------------------------------------
*/

.schedule-session-description {
    margin:
        var(--space-4)
        0
        0;

    padding-top:
        var(--space-4);

    border-top:
        1px solid
        var(--border-neutral);

    color:
        var(--text-muted);

    font-size:
        var(--text-sm);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Empty Day
|--------------------------------------------------------------------------
*/

.schedule-empty {
    display: grid;

    place-items: center;

    gap:
        var(--space-2);

    min-height:
        120px;

    padding:
        var(--space-6);

    text-align:
        center;

    color:
        var(--text-subtle);
}


.schedule-empty i {
    color:
        var(--text-disabled);

    font-size:
        1.5rem;
}


/*
|--------------------------------------------------------------------------
| Filter Empty State
|--------------------------------------------------------------------------
*/

.schedule-filter-empty {
    margin-top:
        var(--space-6);

    padding:
        var(--space-8);

    border:
        1px dashed
        var(--border-neutral);

    border-radius:
        var(--radius-xl);

    background:
        var(--bg-card);

    text-align:
        center;
}


.schedule-filter-empty[hidden] {
    display: none !important;
}


.schedule-filter-empty i {
    display: block;

    margin-bottom:
        var(--space-3);

    color:
        var(--accent);

    font-size:
        2rem;
}


.schedule-filter-empty strong {
    display: block;

    color:
        var(--text-primary);

    font-size:
        var(--text-lg);
}


.schedule-filter-empty p {
    max-width:
        520px;

    margin:
        var(--space-2)
        auto
        0;

    color:
        var(--text-muted);

    font-size:
        var(--text-sm);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| Schedule Notice
|--------------------------------------------------------------------------
*/

.schedule-notice {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-4);

    padding:
        var(--space-5);

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            var(--accent-bg-soft),
            transparent
        );
}


.schedule-notice > i {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    border-radius:
        var(--radius-md);

    background:
        var(--accent-bg);

    color:
        var(--accent);
}


.schedule-notice strong {
    display: block;

    color:
        var(--text-primary);

    font-size:
        var(--text-sm);

    font-weight:
        var(--font-extrabold);
}


.schedule-notice p {
    margin:
        4px
        0
        0;

    color:
        var(--text-muted);

    font-size:
        var(--text-sm);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| CTA Card
|--------------------------------------------------------------------------
*/

.schedule-cta-card {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        var(--space-8);

    padding:
        var(--space-8);

    border:
        1px solid
        var(--border-primary);

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            var(--bg-card),
            rgba(
                var(--accent-rgb),
                0.035
            )
        );

    box-shadow:
        var(--shadow-md);
}


/*
|--------------------------------------------------------------------------
| CTA Heading
|--------------------------------------------------------------------------
*/

.schedule-cta h2 {
    margin:
        var(--space-3)
        0
        var(--space-4);

    color:
        var(--text-primary);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:
        var(--font-black);

    line-height:
        1.08;
}


.schedule-cta h2 span {
    color:
        var(--accent);
}


.schedule-cta p {
    max-width:
        650px;

    margin:
        0;

    color:
        var(--text-muted);

    line-height:
        var(--leading-relaxed);
}


/*
|--------------------------------------------------------------------------
| CTA Actions
|--------------------------------------------------------------------------
*/

.schedule-cta-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap:
        var(--space-3);

    flex-wrap: wrap;

    flex-shrink: 0;
}


/*
|--------------------------------------------------------------------------
| Page Ready State
|--------------------------------------------------------------------------
*/

.schedule-page-ready
.schedule-day {
    visibility:
        visible;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .schedule-hero,
    .schedule-section,
    .schedule-cta {
        padding:
            var(--space-16)
            0;
    }


    .schedule-info-grid {
        grid-template-columns:
            1fr;
    }


    .schedule-cta-card {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .schedule-cta-actions {
        justify-content:
            flex-start;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .schedule-hero,
    .schedule-section,
    .schedule-cta {
        padding:
            var(--space-12)
            0;
    }


    .schedule-notice-section {
        padding-bottom:
            var(--space-12);
    }


    .schedule-heading h1 {
        font-size:
            clamp(
                2.25rem,
                12vw,
                3.25rem
            );
    }


    .schedule-heading p {
        font-size:
            var(--text-base);
    }


    .schedule-filters {
        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding-bottom:
            5px;

        scrollbar-width:
            thin;
    }


    .schedule-filter {
        flex:
            0
            0
            auto;
    }


    .schedule-day-header {
        align-items:
            flex-start;

        padding:
            var(--space-4);
    }


    .schedule-day-number {
        width: 42px;
        height: 42px;

        flex-basis:
            42px;
    }


    .schedule-day-header h2 {
        font-size:
            var(--text-xl);
    }


    .schedule-session-count {
        padding:
            6px
            8px;

        font-size:
            0.68rem;
    }


    .schedule-day-content {
        padding:
            var(--space-4);
    }


    .schedule-session {
        padding:
            var(--space-4);
    }


    .schedule-session-title h3 {
        font-size:
            var(--text-base);
    }


    .schedule-cta-card {
        padding:
            var(--space-5);
    }


    .schedule-cta-actions {
        width: 100%;
    }


    .schedule-cta-actions
    .btn-primary,
    .schedule-cta-actions
    .btn-secondary {
        width: 100%;
    }

}


/*
|--------------------------------------------------------------------------
| Very Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {

    .schedule-info-card {
        padding:
            var(--space-4);
    }


    .schedule-day-header {
        gap:
            var(--space-3);
    }


    .schedule-session-count {
        display: none;
    }


    .schedule-session-top {
        align-items:
            flex-start;
    }


    .schedule-session-icon {
        width: 38px;
        height: 38px;

        flex-basis:
            38px;
    }


    .schedule-notice {
        padding:
            var(--space-4);
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .schedule-info-card,
    .schedule-filter,
    .schedule-day,
    .schedule-session {
        transition:
            none;
    }

}