/* ============================================================
   Di4 Summit Schedule – Stylesheet
   ============================================================ */

/* -- Tokens ------------------------------------------------- */
:root {
    --di4-black:      #000000;
    --di4-white:      #ffffff;
    --di4-gray-100:   #f5f5f5;
    --di4-gray-200:   #e8e8e8;
    --di4-gray-400:   #a0a0a0;
    --di4-gray-600:   #555555;
    --di4-radius:     6px;
    --di4-radius-sm:  4px;
}

/* -- Wrapper ------------------------------------------------ */
.di4-summit-schedule {
    font-family: inherit;
    color: var(--di4-black);
    line-height: 1.5;
}

/* -- Day Grid ----------------------------------------------- */
.di4-schedule-grid {
    display: grid;
    gap: 20px;
    align-items: start;
}

.di4-days-2 { grid-template-columns: repeat(2, 1fr); }
.di4-days-1 { grid-template-columns: 1fr; }
.di4-days-3 { grid-template-columns: repeat(3, 1fr); }

/* -- Day Column --------------------------------------------- */
.di4-day-column {
    border: 1px solid var(--di4-black);
    border-radius: var(--di4-radius);
    overflow: hidden;
}

/* -- Day Header --------------------------------------------- */
.di4-day-header {
    background: var(--di4-black);
    color: var(--di4-white);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.di4-day-weekday {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
}

.di4-day-date {
    font-size: 1.15rem;
    font-weight: 700;
}

/* -- Events List -------------------------------------------- */
.di4-events-list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: var(--di4-gray-100);
}

/* -- Time Slot ---------------------------------------------- */
.di4-time-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid var(--di4-gray-200);
}

.di4-time-slot:last-child {
    border-bottom: none;
    padding-bottom: 2px;
}

/* -- Time Label --------------------------------------------- */
.di4-time-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.di4-time-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--di4-gray-200);
}

.di4-time-label time {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--di4-gray-600);
    white-space: nowrap;
    flex-shrink: 0;
}

/* -- Parallel Events ---------------------------------------- */
.di4-slot-events {
    flex: 1;
    display: grid;
    gap: 8px;
    min-width: 0;
}

.di4-parallel-1 { grid-template-columns: 1fr; }
.di4-parallel-2 { grid-template-columns: repeat(2, 1fr); }
.di4-parallel-3 { grid-template-columns: repeat(3, 1fr); }
.di4-parallel-4 { grid-template-columns: repeat(2, 1fr); }

/* -- Event Card --------------------------------------------- */
.di4-event-card {
    position: relative;
    overflow: hidden;
    background: var(--di4-white);
    border: 1px solid var(--di4-gray-200);
    border-radius: var(--di4-radius-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    transition: border-color 0.15s;
}

.di4-event-card:hover {
    border-color: var(--di4-black);
}

/* -- Innovation Stage Ribbon -------------------------------- */
.di4-ribbon {
    position: absolute;
    top: 14px;
    right: -26px;
    width: 110px;
    background: var(--di4-black);
    color: var(--di4-white);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 4px 0;
    transform: rotate(45deg);
    transform-origin: center;
    pointer-events: none;
    user-select: none;
}

/* -- Event Title -------------------------------------------- */
.di4-event-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    /* leave room so the ribbon doesn't overlap the title */
    padding-right: 28px;
}

.di4-event-title a {
    color: var(--di4-black);
    text-decoration: none;
}

.di4-event-title a:hover {
    text-decoration: underline;
}

/* -- Meta Rows ---------------------------------------------- */
.di4-event-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.di4-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--di4-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.di4-meta-time {
    color: var(--di4-black);
    font-weight: 600;
}

.di4-meta-speaker {
    font-style: italic;
}

/* -- SVG Icons ---------------------------------------------- */
.di4-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.5;
}

/* -- Description Excerpt ------------------------------------ */
.di4-event-excerpt {
    margin: 0;
    font-size: 0.78rem;
    color: var(--di4-gray-600);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Empty State -------------------------------------------- */
.di4-no-events {
    padding: 24px;
    text-align: center;
    color: var(--di4-gray-600);
    background: var(--di4-gray-100);
    border: 1px dashed var(--di4-gray-400);
    border-radius: var(--di4-radius);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
    .di4-days-2,
    .di4-days-3 { grid-template-columns: 1fr; }

    .di4-parallel-2,
    .di4-parallel-3,
    .di4-parallel-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .di4-time-label time { font-size: 0.65rem; }
    .di4-event-card { padding: 10px; }
    .di4-event-title { font-size: 0.83rem; }
}