/* =========================================================
   EYOF BRASOV 2027
   COMPETITION & TRAINING MASTER TIMELINE
   ========================================================= */

.ey-master-timeline {
    --ey-label: 310px;
    --ey-grid: var(--grey-300);
    --ey-grid-hour: var(--grey-700);
    --ey-competition: #8FD45A;
    --ey-training: var(--tertiary--300);
    --ey-prep: var(--quaternary--300);
    --ey-flower: #f7b7d8;
    --ey-victory: #f5f542;
    --ey-ceremony: var(--quaternary);
    --ey-tba: var(--primary);
    --ey-ink: var(--dark);
    --ey-muted: var(--grey-1000);

    font-family: inherit;
    color: var(--ey-ink);
    background: var(--light);
    border: 1px solid var(--grey-300);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.ey-master-timeline * {
    box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.ey-master-timeline .eytl-head {
    padding: 22px 24px 15px;
    border-bottom: 1px solid var(--grey-300);
    background: var(--light);
}

.ey-master-timeline .eytl-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--dark);
}

.ey-master-timeline .eytl-status {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grey-1000);
}


/* =========================================================
   DATE SELECTOR
   ========================================================= */

.ey-master-timeline .eytl-dates {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding: 14px 24px 10px;
}

.ey-master-timeline .eytl-date {
    flex: 0 0 auto;
    border: 1px solid var(--grey-500);
    border-radius: var(--border-radius);
    background: var(--light);
    color: var(--dark);
    padding: 8px 12px;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.ey-master-timeline .eytl-date:hover {
    border-color: var(--grey-900);
}

.ey-master-timeline .eytl-date:focus {
    outline: 2px solid var(--quaternary);
    outline-offset: 2px;
}

.ey-master-timeline .eytl-date[aria-selected="true"] {
    background: var(--secondary);
    border-color: #3F7FA8;
    color: var(--light);
}


/* =========================================================
   FILTERS
   ========================================================= */

.ey-master-timeline .eytl-filters {
    display: grid;
    grid-template-columns:
        minmax(180px, .8fr)
        minmax(230px, 1fr)
        minmax(280px, 1.3fr);
    gap: 12px;
    padding: 4px 24px 14px;
}

.ey-master-timeline .eytl-filter {
    min-width: 0;
}

.ey-master-timeline .eytl-filter label {
    display: block;
    margin: 0 0 5px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--grey-1000);
}

.ey-master-timeline .eytl-filter select {
    display: block;
    width: 100%;
    height: 40px;
    border: 1px solid var(--grey-500);
    border-radius: var(--border-radius);
    background-color: var(--light);
    color: var(--dark);
    padding: 0 34px 0 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
}

.ey-master-timeline .eytl-filter select:focus {
    outline: 2px solid var(--quaternary);
    outline-offset: 2px;
}


/* =========================================================
   LEGEND
   ========================================================= */

.ey-master-timeline .eytl-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    padding: 0 24px 8px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--grey-1000);
}

.ey-master-timeline .eytl-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ey-master-timeline .eytl-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 9px;
    border: 1px solid var(--grey-500);
    border-radius: var(--border-radius);
    font-size: 7px;
    line-height: 1;
    font-style: normal;
    font-weight: 800;
    color: var(--dark);
}

.ey-master-timeline .eytl-swatch.competition {
    background: var(--ey-competition);
}

.ey-master-timeline .eytl-swatch.training {
    background: var(--ey-training);
}

.ey-master-timeline .eytl-swatch.prep {
    background: var(--ey-prep);
}

.ey-master-timeline .eytl-swatch.flower_ceremony {
    background: var(--ey-flower);
    border-color: #e9a0c6;
}

.ey-master-timeline .eytl-swatch.victory_ceremony {
    background: var(--ey-victory);
    border-color: #dada32;
}

.ey-master-timeline .eytl-swatch.ceremony {
    background: var(--ey-ceremony);
    border-color: var(--quaternary-200);
}

.ey-master-timeline .eytl-swatch.tba {
    background:
        repeating-linear-gradient(
            135deg,
            var(--ey-tba) 0,
            var(--ey-tba) 5px,
            var(--primary--200) 5px,
            var(--primary--200) 10px
        );
}


/* =========================================================
   ABBREVIATIONS SUBLEGEND
   ========================================================= */

.ey-master-timeline .eytl-sublegend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    padding: 0 24px 14px;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--grey-1000);
}

.ey-master-timeline .eytl-sublegend-title {
    font-weight: 800;
    color: var(--dark);
}

.ey-master-timeline .eytl-sublegend strong {
    font-weight: 800;
    color: var(--dark);
}


/* =========================================================
   BOARD
   ========================================================= */

.ey-master-timeline .eytl-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid var(--grey-300);
}

.ey-master-timeline .eytl-board {
    min-width: 1220px;
}

.ey-master-timeline .eytl-axis,
.ey-master-timeline .eytl-row {
    display: grid;
    grid-template-columns:
        var(--ey-label)
        minmax(900px, 1fr);
}


/* =========================================================
   AXIS - LEFT COLUMN
   ========================================================= */

.ey-master-timeline .eytl-axis-label {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--grey-1000);
    border-right: 1px solid var(--grey-400);
    background: var(--grey-100);
}


/* =========================================================
   TIME AXIS + 10-MINUTE VISUAL GRID
   ========================================================= */

.ey-master-timeline .eytl-axis-time,
.ey-master-timeline .eytl-track {
    position: relative;

    background-image:
        linear-gradient(
            to right,
            var(--ey-grid-hour) 1px,
            transparent 1px
        ),
        linear-gradient(
            to right,
            var(--ey-grid) 1px,
            transparent 1px
        );

    background-size:
        6.6666667% 100%,
        1.1111111% 100%;

    background-position:
        left top,
        left top;
}

.ey-master-timeline .eytl-axis-time {
    height: 46px;
    background-color: var(--grey-100);
    border-bottom: 1px solid var(--grey-400);
}

.ey-master-timeline .eytl-hour {
    position: absolute;
    top: 14px;
    transform: translateX(-50%);
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    color: var(--dark);
    white-space: nowrap;
}

.ey-master-timeline .eytl-hour.first {
    transform: none;
}

.ey-master-timeline .eytl-hour.last {
    transform: translateX(-100%);
}

/* Minor minute labels are intentionally hidden.
   The 10-minute grid remains visible. */

.ey-master-timeline .eytl-minor {
    display: none !important;
}


/* =========================================================
   ROW
   ========================================================= */

.ey-master-timeline .eytl-row {
    min-height: 70px;
    border-bottom: 1px solid var(--grey-300);
}

.ey-master-timeline .eytl-row:last-child {
    border-bottom: 0;
}


/* =========================================================
   LEFT META COLUMN
   DISCIPLINE / SPORT / VENUE
   ========================================================= */

.ey-master-timeline .eytl-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 7px 15px;
    border-right: 1px solid var(--grey-400);
    background: var(--light);
}

.ey-master-timeline .eytl-discipline {
    display: block;
    margin: 0 0 2px;
    font-size: 17px;
    line-height: 1.08;
    font-weight: 800;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ey-master-timeline .eytl-variant {
    font-weight: 700;
}

.ey-master-timeline .eytl-sport {
    display: block;
    margin: 0 0 2px;
    font-size: 14px;
    line-height: 1.08;
    font-weight: 800;
    color: var(--grey-1000);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ey-master-timeline .eytl-venue {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.08;
    font-weight: 700;
    color: var(--secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   TRACK
   ========================================================= */

.ey-master-timeline .eytl-track {
    min-height: 70px;
    background-color: var(--light);
}


/* =========================================================
   ACTIVITY BARS
   ========================================================= */

.ey-master-timeline .eytl-bar {
    position: absolute;
    top: 12px;
    height: 46px;
    min-width: 4px;
    padding: 6px 9px;
    overflow: hidden;
    border: 1px solid var(--grey-600);
    border-radius: var(--border-radius);
    color: var(--dark);
    box-shadow: 0 2px 5px var(--dark-rgba-10);
}

/*
 * JS controls the normal stacking hierarchy.
 * On hover, the current bar is temporarily brought
 * above all the others.
 */

.ey-master-timeline .eytl-bar:hover {
    z-index: 100 !important;
}

.ey-master-timeline .eytl-bar.competition {
    background: var(--ey-competition);
}

.ey-master-timeline .eytl-bar.training {
    background: var(--ey-training);
}

.ey-master-timeline .eytl-bar.prep {
    background: var(--ey-prep);
}


/* =========================================================
   FLOWER / VICTORY CEREMONIES
   ========================================================= */

.ey-master-timeline .eytl-bar.flower_ceremony {
    background: var(--ey-flower);
    border-color: #e9a0c6;
    color: var(--dark);
}

.ey-master-timeline .eytl-bar.victory_ceremony {
    background: var(--ey-victory);
    border-color: #dada32;
    color: var(--dark);
}

/*
 * F / V markers.
 *
 * IMPORTANT:
 * No z-index is defined here.
 * Layering is controlled exclusively by JS.
 */

.ey-master-timeline .eytl-bar.eytl-ceremony {
    padding: 0;
    overflow: visible;
}

.ey-master-timeline .eytl-bar.eytl-ceremony .eytl-bar-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    color: var(--dark);
    text-align: center;
}

.ey-master-timeline .eytl-bar.eytl-ceremony .eytl-bar-time {
    display: none;
}


/* =========================================================
   OPENING / CLOSING CEREMONIES
   ========================================================= */

.ey-master-timeline .eytl-bar.ceremony {
    background: var(--ey-ceremony);
    border-color: var(--primary-200);
    color: var(--light);
}

.ey-master-timeline .eytl-bar.ceremony .eytl-bar-label,
.ey-master-timeline .eytl-bar.ceremony .eytl-bar-time {
    color: var(--light);
}


/* =========================================================
   TBA
   ========================================================= */

/*
 * TBA is a TIME STATE, not an activity type.
 *
 * .tba
 *     The start time is unknown.
 *     Example: TBA -> TBA.
 *
 * .tba-open
 *     The start time is known but the end is unknown.
 *     Example: 15:50 -> TBA.
 *
 * IMPORTANT:
 * left and width are NOT defined here.
 * JavaScript controls temporal positioning.
 */

.ey-master-timeline .eytl-bar.tba,
.ey-master-timeline .eytl-bar.tba-open {
    background:
        repeating-linear-gradient(
            135deg,
            var(--ey-tba) 0,
            var(--ey-tba) 7px,
            var(--primary--200) 7px,
            var(--primary--200) 14px
        );
    border-color: var(--primary-200);
    color: var(--dark);
}

/*
 * TBA keeps the activity category identifiable
 * through its border.
 */

.ey-master-timeline .eytl-bar.flower_ceremony.tba,
.ey-master-timeline .eytl-bar.flower_ceremony.tba-open {
    border: 2px solid var(--ey-flower);
}

.ey-master-timeline .eytl-bar.victory_ceremony.tba,
.ey-master-timeline .eytl-bar.victory_ceremony.tba-open {
    border: 2px solid var(--ey-victory);
}

.ey-master-timeline .eytl-bar.ceremony.tba,
.ey-master-timeline .eytl-bar.ceremony.tba-open {
    border: 2px solid var(--quaternary);
}


/* =========================================================
   ACTIVITY TEXT
   ========================================================= */

.ey-master-timeline .eytl-bar-label {
    display: block;
    font-size: 11px;
    line-height: 1.05;
    font-weight: 800;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ey-master-timeline .eytl-bar-time {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    color: inherit;
    white-space: nowrap;
}


/* =========================================================
   SHORT NON-CEREMONY SLOTS
   ========================================================= */

.ey-master-timeline .eytl-bar.eytl-short {
    padding-left: 3px;
    padding-right: 3px;
}

.ey-master-timeline .eytl-bar.eytl-short .eytl-bar-label {
    font-size: 10px;
    line-height: 1;
}

.ey-master-timeline .eytl-bar.eytl-short .eytl-bar-time {
    font-size: 9px;
    line-height: 1;
}


/* =========================================================
   DAYS / FILTERING
   ========================================================= */

.ey-master-timeline .eytl-day {
    display: none;
}

.ey-master-timeline .eytl-day.active {
    display: block;
}

.ey-master-timeline .eytl-row.eytl-hidden {
    display: none;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.ey-master-timeline .eytl-empty {
    display: none;
    padding: 22px;
    text-align: center;
    color: var(--grey-1000);
    font-size: 12px;
    line-height: 1.4;
}

.ey-master-timeline .eytl-empty.visible {
    display: block;
}


/* =========================================================
   FOOTER
   ========================================================= */

.ey-master-timeline .eytl-foot {
    padding: 11px 24px 14px;
    font-size: 10px;
    line-height: 1.4;
    color: var(--grey-1000);
    background: var(--grey-100);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .ey-master-timeline .eytl-filters {
        grid-template-columns:
            minmax(180px, 1fr)
            minmax(220px, 1fr);
    }

    .ey-master-timeline .eytl-filter:last-child {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .ey-master-timeline {
        --ey-label: 250px;
    }

    .ey-master-timeline .eytl-head {
        padding: 17px 16px 12px;
    }

    .ey-master-timeline .eytl-title {
        font-size: 18px;
    }

    .ey-master-timeline .eytl-status {
        font-size: 10px;
    }

    .ey-master-timeline .eytl-dates,
    .ey-master-timeline .eytl-filters,
    .ey-master-timeline .eytl-legend,
    .ey-master-timeline .eytl-sublegend {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ey-master-timeline .eytl-filters {
        grid-template-columns: 1fr;
    }

    .ey-master-timeline .eytl-filter:last-child {
        grid-column: auto;
    }

    .ey-master-timeline .eytl-board {
        min-width: 1150px;
    }

    .ey-master-timeline .eytl-discipline {
        font-size: 15px;
    }

    .ey-master-timeline .eytl-sport {
        font-size: 13px;
    }

    .ey-master-timeline .eytl-venue {
        font-size: 12px;
    }

    .ey-master-timeline .eytl-hour {
        font-size: 13px;
    }

    .ey-master-timeline .eytl-bar-label {
        font-size: 11px;
    }

    .ey-master-timeline .eytl-bar-time {
        font-size: 10px;
    }

    .ey-master-timeline .eytl-bar.eytl-short .eytl-bar-label {
        font-size: 10px;
    }

    .ey-master-timeline .eytl-bar.eytl-short .eytl-bar-time {
        font-size: 9px;
    }

    .ey-master-timeline .eytl-bar.eytl-ceremony .eytl-bar-label {
        font-size: 11px;
    }

    .ey-master-timeline .eytl-sublegend {
        font-size: 10px;
    }

    .ey-master-timeline .eytl-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

}