/* ==========================================================================
   NACS Show 2026 - Full Schedule
   Tokens: NACSShow2026Tokens.css
   Layout: one column per day. Each column ships both shapes (a collapsed
   blue tab and an expanded white panel); --is-active picks which one
   shows, so day switching is a pure class swap (no server round-trip).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section Container
   -------------------------------------------------------------------------- */
.full-sched {
    background-color: var(--nacs-color-sand, #F1F1F1);
    padding: 80px 80px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.full-sched__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.full-sched__header-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

/* Eyebrow */
.full-sched__eyebrow {
    display: flex;
    gap: 10px;
    align-items: center;
}

.full-sched__eyebrow-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--nacs-color-green, #00A82D);
}

.full-sched__eyebrow-text {
    font-family: var(--nacs-font-gotham);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nacs-color-navy, #00205B);
}

/* Heading - "Daily Schedule" or HeadingPrefix */
.full-sched__heading {
    font-family: var(--nacs-font-gotham);
    font-weight: 700;
    font-size: 64px;
    line-height: 72px;
    letter-spacing: 0;
    color: var(--nacs-color-navy, #00205B);
    margin: 0;
    text-transform: capitalize;
}

/* CTA Button - yellow pill with arrow */
.full-sched__btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background-color: var(--nacs-color-yellow, #FAE100);
    border-radius: 360px;
    padding: 16px 32px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.full-sched__btn:hover {
    transform: scale(1.03);
    text-decoration: none;
}

.full-sched__btn span {
    font-family: var(--nacs-font-gotham);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nacs-color-navy, #00205B);
}

.full-sched__btn--mobile {
    display: none; /* shown via mobile media query */
    align-self: center;
}

/* --------------------------------------------------------------------------
   Shell - horizontal flex of day columns
   -------------------------------------------------------------------------- */
.full-sched__shell {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
    min-height: 602px;
}

/* When there's only one day there's nothing to switch between - let it fill. */
.full-sched__shell--single .full-sched__day-col {
    flex: 1 1 0;
}

/* --------------------------------------------------------------------------
   Day Column - holds both shapes (collapsed tab + expanded panel)
   -------------------------------------------------------------------------- */
.full-sched__day-col {
    flex: 0 0 88px;
    min-width: 0;
    position: relative;
    border-radius: 4px;
    transition: flex-basis 0.3s ease;
}

.full-sched__day-col--is-active {
    flex: 1 1 0;
}

/* Hide the wrong shape per state. The collapsed tab is the "default" surface
   for an inactive column; the expanded panel only appears when --is-active. */
.full-sched__day-col--is-active .full-sched__day-col-tab {
    display: none;
}

.full-sched__day-col:not(.full-sched__day-col--is-active) .full-sched__day-col-panel {
    display: none;
}

/* --- Collapsed shape: full-height blue gradient tab, click anywhere to expand --- */
.full-sched__day-col-tab {
    width: 100%;
    height: 100%;
    min-height: 602px;
    background: linear-gradient(180deg, #00205B 0%, #0044C1 100%);
    border: none;
    border-radius: 4px;
    padding: 32px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.full-sched__day-col-tab:hover {
    filter: brightness(1.05);
}

.full-sched__day-col-name {
    font-family: var(--nacs-font-gotham);
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0;
    color: #FBFBFB;
    text-transform: capitalize;
    text-align: center;
    white-space: nowrap;
}

/* Yellow circle nav button at the bottom of each collapsed tab */
.full-sched__day-col-nav {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--nacs-color-yellow, #FAE100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Expanded shape: white panel with hour timeline --- */
.full-sched__day-col-panel {
    background-color: #FFFFFF;
    border: 1px solid #DBDBDB;
    border-radius: 4px;
    padding: 32px 24px 32px 32px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Day name heading inside the active panel ("Saturday") */
.full-sched__day-heading {
    font-family: var(--nacs-font-gotham);
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0;
    color: var(--nacs-color-blue, #004C97);
    margin: 0;
    text-transform: capitalize;
}

.full-sched__empty {
    padding: 40px;
    text-align: center;
    color: var(--nacs-color-grey-dark, #425563);
    font-family: var(--nacs-font-gotham);
    width: 100%;
}

/* --------------------------------------------------------------------------
   Calendar (inside the active panel)
   -------------------------------------------------------------------------- */
.full-sched__calendar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Time tick header - N+1 labels for N hour intervals.
   Each tick is a zero-width point centered on its hour line. */
.full-sched__times {
    position: relative;
    height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.full-sched__time-tick {
    width: 0;
    flex: 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    font-family: var(--nacs-font-gotham);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1px;
    color: #000000;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Lanes container - stacks lanes vertically with grid lines layered behind */
.full-sched__lanes {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Vertical hour grid lines (dashed) span all lanes */
.full-sched__grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed rgba(0, 32, 91, 0.25);
    pointer-events: none;
    z-index: 0;
}

/* Lane: an absolutely-positioned strip where event chips live */
.full-sched__lane {
    position: relative;
    height: 56px;
    width: 100%;
}

/* Event chip on the timeline - cursor is pointer because it opens a popover */
.full-sched__event {
    position: absolute;
    top: 0;
    height: 56px;
    border: none;
    border-radius: 2px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
    min-width: 0;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    transition: filter 0.15s ease;
    color: var(--nacs-color-navy, #00205B);
    z-index: 1;
}

.full-sched__event:hover,
.full-sched__event[aria-expanded="true"] {
    filter: brightness(0.96);
}

.full-sched__event-title {
    font-family: var(--nacs-font-gotham);
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

.full-sched__event-time {
    font-family: var(--nacs-font-gotham);
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

/* Location appears under the time inside each event card */
.full-sched__event-location {
    font-family: var(--nacs-font-gotham);
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    opacity: 0.85;
}

/* Color variants - 25% opacity fills with navy text (Figma tokens) */
.full-sched__event--green  { background-color: rgba(0, 168, 45, 0.25); }   /* #00A82D */
.full-sched__event--teal   { background-color: rgba(0, 186, 179, 0.25); }  /* #00BAB3 */
.full-sched__event--blue   { background-color: rgba(0, 159, 223, 0.25); }  /* #009FDF */
.full-sched__event--yellow { background-color: rgba(255, 184, 28, 0.25); } /* #FFB81C */
.full-sched__event--olive  { background-color: rgba(196, 214, 0, 0.25); }  /* #C4D600 */
.full-sched__event--lime   { background-color: rgba(120, 190, 32, 0.25); } /* #78BE20 */
/* Legacy variant kept so older content doesn't blank out */
.full-sched__event--navy   { background-color: rgba(0, 32, 91, 0.18); }

/* --------------------------------------------------------------------------
   Event Popover
   -------------------------------------------------------------------------- */
.full-sched__popover {
    position: absolute;
    width: 328px;
    max-width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #DBDBDB;
    border-radius: 4px;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 16px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    z-index: 20;
    box-sizing: border-box;
}

.full-sched__popover[hidden] {
    display: none;
}

/* Pointer is a 16px square rotated 45° with two of its borders hidden by the
   popover edge - gives us a true bordered triangle without clip-path tricks. */
.full-sched__popover-pointer {
    position: absolute;
    top: var(--fs-pointer-y, 50%);
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border: 1px solid #DBDBDB;
    pointer-events: none;
    /* Default placement: pointer on the LEFT side (popover sits to the right of trigger) */
    left: -8px;
    transform: translateY(-50%) rotate(45deg);
    border-top: none;
    border-right: none;
}

.full-sched__popover--left .full-sched__popover-pointer {
    left: -8px;
    right: auto;
    transform: translateY(-50%) rotate(45deg);
    border-top: none;
    border-right: none;
    border-bottom: 1px solid #DBDBDB;
    border-left: 1px solid #DBDBDB;
}

/* Right-pointer (popover sits to the LEFT of the trigger) */
.full-sched__popover--right .full-sched__popover-pointer {
    left: auto;
    right: -8px;
    transform: translateY(-50%) rotate(45deg);
    border-top: 1px solid #DBDBDB;
    border-right: 1px solid #DBDBDB;
    border-bottom: none;
    border-left: none;
}

.full-sched__popover-close {
    position: absolute;
    top: 7px;
    right: 6px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.full-sched__popover-title {
    margin: 0;
    font-family: var(--nacs-font-gotham);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var(--nacs-color-navy, #00205B);
    padding-right: 32px; /* keep clear of close button */
}

.full-sched__popover-meta {
    margin: 0;
    font-family: var(--nacs-font-gotham);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}

.full-sched__popover-desc {
    margin: 0;
    font-family: var(--nacs-font-gotham);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}

.full-sched__popover-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    align-self: flex-start;
}

.full-sched__popover-link:hover {
    text-decoration: none;
    opacity: 0.85;
}

.full-sched__popover-link span {
    font-family: var(--nacs-font-gotham);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1px;
    color: var(--nacs-color-blue, #004C97);
    text-transform: uppercase;
}

/* ==========================================================================
   MOBILE ACCORDION
   ========================================================================== */
.full-sched__mobile {
    display: none; /* shown via mobile media query */
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.full-sched__m-day {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Day header - navy gradient bar with chevron */
.full-sched__m-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--nacs-color-navy, #00205B) 0%, var(--nacs-color-blue, #004C97) 100%);
    color: var(--nacs-color-white, #FFFFFF);
    width: 100%;
    text-align: left;
}

.full-sched__m-header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.full-sched__m-day-name {
    font-family: var(--nacs-font-gotham);
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: var(--nacs-color-white, #FFFFFF);
}

.full-sched__m-day-date {
    font-family: var(--nacs-font-gotham);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--nacs-color-white, #FFFFFF);
    opacity: 0.9;
}

/* Yellow circle chevron */
.full-sched__m-chevron {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--nacs-color-yellow, #FAE100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

.full-sched__m-day--open .full-sched__m-chevron {
    transform: rotate(180deg);
}

/* Body (cards) - collapsed by default */
.full-sched__m-body {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.full-sched__m-day--open .full-sched__m-body {
    display: flex;
}

/* Event card - white bg with colored border + colored arrow icon */
.full-sched__m-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px;
    border-radius: 4px;
    background-color: var(--nacs-color-white, #FFFFFF);
    border: 1px solid #DBDBDB;
    min-height: 88px;
}

.full-sched__m-card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.full-sched__m-card-title {
    margin: 0;
    font-family: var(--nacs-font-gotham);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var(--nacs-color-navy, #00205B);
}

.full-sched__m-card-time {
    margin: 0;
    font-family: var(--nacs-font-gotham);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--nacs-color-navy, #00205B);
}

.full-sched__m-card-location {
    margin: 0;
    font-family: var(--nacs-font-gotham);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--nacs-color-grey-dark, #425563);
}

/* Circular arrow icon */
.full-sched__m-card-arrow {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.full-sched__m-card-arrow:hover {
    transform: scale(1.08);
    text-decoration: none;
}

/* Mobile card border + arrow colors per variant */
.full-sched__m-card--green  { border-color: #00A82D; }
.full-sched__m-card--green  .full-sched__m-card-arrow { color: #00A82D; }
.full-sched__m-card--teal   { border-color: #00BAB3; }
.full-sched__m-card--teal   .full-sched__m-card-arrow { color: #00BAB3; }
.full-sched__m-card--blue   { border-color: #009FDF; }
.full-sched__m-card--blue   .full-sched__m-card-arrow { color: #009FDF; }
.full-sched__m-card--yellow { border-color: #FFB81C; }
.full-sched__m-card--yellow .full-sched__m-card-arrow { color: #FFB81C; }
.full-sched__m-card--olive  { border-color: #C4D600; }
.full-sched__m-card--olive  .full-sched__m-card-arrow { color: #C4D600; }
.full-sched__m-card--lime   { border-color: #78BE20; }
.full-sched__m-card--lime   .full-sched__m-card-arrow { color: #78BE20; }
.full-sched__m-card--navy   { border-color: var(--nacs-color-navy, #00205B); }
.full-sched__m-card--navy   .full-sched__m-card-arrow { color: var(--nacs-color-navy, #00205B); }

/* --------------------------------------------------------------------------
   Responsive breakpoints
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .full-sched {
        padding: 56px 40px;
    }

    .full-sched__heading {
        font-size: 48px;
        line-height: 56px;
    }

    .full-sched__day-col {
        flex: 0 0 72px;
    }

    .full-sched__day-col-tab {
        padding: 24px 8px;
    }

    .full-sched__day-col-name {
        font-size: 24px;
        line-height: 32px;
    }

    .full-sched__day-heading {
        font-size: 32px;
        line-height: 40px;
    }
}

/* Mobile: hide desktop timeline, show accordion */
@media screen and (max-width: 768px) {
    .full-sched {
        background-color: var(--nacs-color-white, #FFFFFF);
        padding: 24px 16px;
        gap: 16px;
    }

    .full-sched__header,
    .full-sched__shell {
        display: none;
    }

    .full-sched__mobile {
        display: flex;
    }

    .full-sched__btn--mobile {
        display: inline-flex;
        margin-top: 8px;
    }
}