/* ============================================================
   Love Fest Core — Conference Schedule
   .lfe-schedule
   ============================================================
   Color tokens are defined here as CSS custom properties.
   They reference Divi 5 Global Color Palette variables first,
   falling back to sensible defaults if Divi is not present.
   To override any color without editing this file, redefine
   the relevant --lfe-* variable on .lfe-schedule in
   Divi → Theme Customizer → Additional CSS.

   Divi 5 palette order (inspect :root to confirm your values):
     --et-global-color-0  primary/accent
     --et-global-color-1  secondary accent
     --et-global-color-2  tertiary
     --et-global-color-3  fourth
     --et-global-color-4  body text
     --et-global-color-5  light accent / border
     --et-global-color-6  light background
     --et-global-color-7  white / base
   ============================================================ */

.lfe-schedule {
    font-family: inherit;
    max-width: 100%;

    /* ── Color tokens ─────────────────────────────────────── */
    --lfe-time-col:        5rem;
    --lfe-primary:         var(--gcid-primary-color, #f175ad);
    --lfe-secondary:       var(--gcid-secondary-color, #eb5027);
    --lfe-accent:          var(--gcid-f746bc25-5390-4070-85df-f3b88b4ea792,  #4e295c);
    --lfe-accessory:       var(--gcid-5694e10c-4775-480f-b0ef-00e040bc5941, #ff3dcf);
    --lfe-card-bg:         var(--et-global-color-7,  #ffffff);
    --lfe-card-border:     var(--et-global-color-5,  #666666);
    --lfe-tag-level-bg:    var(--et-global-color-6,  #f0f0f0);
    --lfe-tag-level-color: var(--et-global-color-4,  #444444);
    --lfe-tag-ce-bg:       var(--et-global-color-2,  #e6f4ea);
    --lfe-tag-ce-color:    var(--et-global-color-1,  #1e6b36);
}

/* ── Day heading ─────────────────────────────────────────── */

.lfe-schedule-day {
    margin-bottom: 3rem;
}

.lfe-schedule-day-heading {
    font-size: 1.5rem;
    font-weight: 700;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--lfe-primary, currentColor);
    margin-bottom: 1.5rem;
}

/* ── Room column headers ─────────────────────────────────── */

/* grid-template-columns is set via inline style to match the time blocks */
.lfe-room-headers {
    display: grid;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.lfe-room-header-spacer {
    font-size: 1.1rem;
    padding-top: .3rem;
    font-weight: 600;
}

.lfe-room-header {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 1.1rem;
    background: var(--lfe-accessory);
    color: #fff;
    border-radius: 4px 4px 0 0;
    text-align: center;
}

/* ── Time block row ──────────────────────────────────────── */

.lfe-time-block {
    display: grid;
    grid-template-columns: var(--lfe-time-col) 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: start;
}

/* Room-column variant: grid-template-columns set via inline style */
.lfe-time-block--rooms {
    margin-bottom: 0.75rem;
    align-items: stretch;
}

/* ── Room cells (children of .lfe-time-block--rooms) ─────── */

.lfe-room-cell {
    min-height: 3rem;
    display: flex;
    flex-direction: column;
}

/* Cards inside a room cell fill the full column width and height */
.lfe-room-cell .lfe-session-card {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

.lfe-time-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.75rem;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
}

.lfe-time-start,
.lfe-time-end {
    display: block;
}

.lfe-time-end {
    opacity: 0.65;
}

/* ── Full-width spanning sessions ───────────────────────── */

/* Spans all room columns (everything after the time label column) */
.lfe-full-width-cell {
    grid-column: 2 / -1;
}

/* When a time block contains BOTH a spanning session and regular room sessions,
   the time label needs to span both grid rows so it stays aligned with all content. */
.lfe-time-block--mixed > .lfe-time-label {
    grid-row: span 2;
}

/* Visual treatment for spanning session cards */
.lfe-session-card--full-width {
    background: var(--lfe-tag-level-bg, #f0f0f0);
    border-color: transparent;
    text-align: center;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lfe-session-card--full-width .lfe-session-title {
    margin: 0;
}

.lfe-session-card--full-width .lfe-session-tags {
    margin-top: 0;
    padding-top: 0;
    justify-content: center;
}

/* ── Sessions row (cards side by side within a time slot) ── */

.lfe-sessions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ── Individual session card ─────────────────────────────── */

.lfe-session-card {
    flex: 1 1 240px;
    min-width: 0;
    border: 1px solid var(--lfe-card-border);
    border-radius: 6px;
    padding: 1rem 1.1rem;
    background: var(--lfe-card-bg);
    display: flex;
    flex-direction: column;
}

.lfe-session-room {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.65;
    padding-bottom: 0;
}

.lfe-session-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
    line-height: 1.35;
    color: var(--lfe-accent);
    margin-bottom: 0;
    padding-bottom: 0;
}

.lfe-session-title a {
    text-decoration: none;
    color: inherit;
}

.lfe-session-title a:hover {
    text-decoration: underline;
}

.lfe-session-presenters {
    font-size: 0.875rem;
    margin: 0 0 0.6rem;
    opacity: 0.8;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lfe-presenter-name {
    display: block;
}

/* ── Tags (level, CE) ────────────────────────────────────── */

.lfe-session-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.75rem;
}

.lfe-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2em 0.55em;
    border-radius: 3px;
    line-height: 1.4;
}

.lfe-tag-level {
    background: var(--lfe-tag-level-bg);
    color: var(--lfe-tag-level-color);
}

.lfe-tag-ce {
    background: var(--lfe-tag-ce-bg);
    color: var(--lfe-tag-ce-color);
}

/* ── Notices ─────────────────────────────────────────────── */

.lfe-schedule-notice {
    padding: 1rem;
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    font-size: 0.9rem;
}

/* ── Tablet: scroll room-column grid horizontally ───────────
   Preserves the room/column context but prevents cards from
   getting too narrow to read. The --lfe-min-card-width token
   controls when scrolling kicks in — override in Divi's
   Additional CSS if your cards need more or less room.       */

.lfe-schedule {
    --lfe-min-card-width: 200px;
}

@media ( min-width: 601px ) and ( max-width: 960px ) {
    .lfe-schedule-day {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Enforce a minimum total width so cards don't collapse below
       --lfe-min-card-width. calc() uses the same time column width
       and gap values as the grid so the scroll threshold is accurate. */
    .lfe-room-headers,
    .lfe-time-block--rooms {
        min-width: calc( var(--lfe-time-col) + 3 * var(--lfe-min-card-width) + 4 * 1rem );
    }
}

/* ── Responsive: stack everything on small screens ───────── */

@media ( max-width: 600px ) {
    /* Flat layout: stack time label above cards */
    .lfe-time-block {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .lfe-time-label {
        padding-top: 0;
        border-bottom: 1px solid var(--lfe-card-border);
        padding-bottom: 0.4rem;
    }

    .lfe-session-card {
        flex: 1 1 100%;
    }

    /* Room-column layout: collapse to a single column, hide room headers,
       and show the room name as a label on each card instead */
    .lfe-room-headers {
        display: none;
    }

    .lfe-time-block--rooms {
        grid-template-columns: 1fr !important;
    }

    .lfe-room-cell {
        border-left: 3px solid var(--lfe-accent);
        padding-left: 0.75rem;
        margin-bottom: 0.5rem;
    }

    /* Show the room name as a small label above the card on mobile */
    .lfe-room-cell:not(.lfe-room-cell--empty)::before {
        content: attr(data-room);
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--lfe-accent);
        margin-bottom: 0.35rem;
    }

    .lfe-room-cell--empty {
        display: none;
    }

    /* Full-width cell collapses to a single column like everything else */
    .lfe-full-width-cell {
        grid-column: 1;
    }

    /* Time label no longer needs to span rows on mobile since layout is stacked */
    .lfe-time-block--mixed > .lfe-time-label {
        grid-row: auto;
    }
}