/* ============================================================
   NOC Event Suite v5 — Agenda & Event Schedule Styles
   Brand palette:
     #00A4A3  light teal
     #256C71  mid green
     #0D3034  dark green
     #275059  less dark
     #EBEFF0  row stripe
   ============================================================ */


/* ── Shared utilities ─────────────────────────────────────── */
.noc-agenda-page {
    max-width: 960px;
    margin: 32px auto;
    padding: 0 16px;
}
.noc-agenda-workshop-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #0D3034;
}
.noc-agenda-empty {
    color: #64748b;
    font-style: italic;
    padding: 14px 0;
}


/* ============================================================
   SESSION BLOCK
   ============================================================ */

.noc-event-agenda { margin: 0 0 48px; }

.noc-agenda-session {
    margin-bottom: 36px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #d4dfe0;
    box-shadow: 0 2px 12px rgba(13,48,52,.07);
}

/* ── Session header ──────────────────────────────────────── */
.noc-agenda-session__head {
    background: linear-gradient(135deg, #00A4A3 0%, #275059 100%);
    padding: 14px 18px 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Top row: title + time pill, moderator wraps below */
.noc-agenda-session__head-top {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.noc-agenda-session__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff;
    letter-spacing: .01em;
    flex: 1 1 100%;   /* force title onto its own line */
}

.noc-agenda-session__time {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.15);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.2);
    align-self: center;
    margin-top: 2px;
}

/* Moderators — sits right below title, no separator */
.noc-agenda-session__mods {
    margin: 0;
    flex: 1 1 100%;    /* full width so it sits below title */
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255,255,255,.72);
    line-height: 1.5;
}
.noc-agenda-session__mods-label {
    font-weight: 700;
    font-size: 0.72rem;
    color: rgba(255,255,255,.72);
}


/* ============================================================
   AGENDA TABLE
   ============================================================ */

/* Scroll wrapper */
.noc-agenda-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}

.noc-agenda {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
    table-layout: fixed;
}

/* ── Thead ───────────────────────────────────────────────── */
.noc-agenda thead th {
    background: #275059;
    color: #ffffff;
    padding: 11px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    white-space: nowrap;
    border: none;
}

/* ── Zebra rows — must target td, not tr (tr bg doesn't show through td) ── */
.noc-agenda__row--odd  td { background: #ffffff; }
.noc-agenda__row--even td { background: #EBEFF0; }
.noc-agenda__row--odd:hover  td { background: #f0fafa; }
.noc-agenda__row--even:hover td { background: #dce7e8; }

/* Break row overrides zebra */
.noc-agenda__row--break td,
.noc-agenda__row--break.noc-agenda__row--odd  td,
.noc-agenda__row--break.noc-agenda__row--even td {
    background: #f0f4f5 !important;
    color: #64748b;
    font-style: italic;
}
.noc-agenda__row--break:hover td { background: #e4ecee !important; }

/* ── TD base ─────────────────────────────────────────────── */
.noc-agenda td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #d4dfe0;
}
.noc-agenda tbody tr:last-child td { border-bottom: none; }

/* ── Time column ─────────────────────────────────────────── */
.noc-agenda__time {
    white-space: nowrap;
    font-weight: 800;
    font-size: 13px;
    color: #0D3034;
}
.noc-agenda__end {
    display: block;
    font-weight: 500;
    color: #256C71;
    font-size: 12px;
    margin-top: 2px;
}

/* ── Type badge ──────────────────────────────────────────── */
.noc-agenda__type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Brand-tinted type colours */
.noc-agenda__type--keynote  { background: rgba(0,164,163,.15);  color: #0D3034; border-color: rgba(0,164,163,.4);  }
.noc-agenda__type--talk     { background: rgba(37,108,113,.12); color: #256C71; border-color: rgba(37,108,113,.35); }
.noc-agenda__type--panel    { background: rgba(39,80,89,.12);   color: #275059; border-color: rgba(39,80,89,.3);    }
.noc-agenda__type--workshop { background: rgba(0,164,163,.12);  color: #0D3034; border-color: rgba(0,164,163,.32);  }
.noc-agenda__type--q\&a     { background: rgba(13,48,52,.1);    color: #275059; border-color: rgba(13,48,52,.28);   }
.noc-agenda__type--break    { background: #edf1f2;              color: #64748b; border-color: #c8d4d6;               }
.noc-agenda__type--activity { background: rgba(0,164,163,.1);   color: #256C71; border-color: rgba(0,164,163,.28);  }
.noc-agenda__type--other    { background: #edf1f2;              color: #475569; border-color: #c8d4d6;               }

/* ── Topic column ────────────────────────────────────────── */
.noc-agenda__topic strong {
    color: #0D3034;
    font-size: 13.5px;
    font-weight: 700;
}
.noc-agenda__notes {
    margin-top: 5px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}
.noc-agenda__empty-cell { color: #94a3b8; }

/* ── Speaker column ──────────────────────────────────────── */
.noc-agenda__people-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.noc-agenda__speaker-card {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Circular image */
.noc-agenda__speaker-img {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    flex-shrink: 0;
    display: block;
    border: 2px solid rgba(0,164,163,.3);
    background: #EBEFF0;
}
.noc-agenda__speaker-name {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    color: #0D3034;
}
.noc-agenda__speaker-role {
    font-size: 11px;
    color: #256C71;
    margin-top: 2px;
    line-height: 1.3;
}


/* ============================================================
   MOBILE  ≤ 680 px
   Each <tr> becomes a card.
   The TIME cell becomes a full-width teal header bar.
   Remaining cells use a 2-column grid: label | value.
   ============================================================ */
@media (max-width: 680px) {

    /* Kill horizontal scroll — cards are full-width */
    .noc-agenda-wrap {
        overflow-x: visible;
        border: none;
    }

    /* Hide desktop thead */
    .noc-agenda thead { display: none; }

    /* Make table / rows / cells block */
    .noc-agenda,
    .noc-agenda tbody,
    .noc-agenda tr,
    .noc-agenda td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Card divider */
    .noc-agenda tr {
        border-bottom: 2px solid #d4dfe0;
        padding: 0;
    }
    .noc-agenda tr:last-child { border-bottom: none; }

    /* Zebra on card level — target td */
    .noc-agenda__row--odd  td { background: #ffffff; }
    .noc-agenda__row--even td { background: #EBEFF0; }

    /* ── TIME cell: full-width accent bar ── */
    .noc-agenda td.noc-agenda__time {
        background: #275059;
        color: #ffffff;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 0;
        border-bottom: none;
        white-space: nowrap;
    }
    /* "TIME" micro label */
    .noc-agenda td.noc-agenda__time::before {
        content: attr(data-label);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: rgba(255,255,255,.55);
        margin-right: 10px;
        flex-shrink: 0;
    }
    /* Start time — large */
    .noc-agenda td.noc-agenda__time {
        font-size: 15px;
        font-weight: 800;
    }
    /* End time — inline, muted */
    .noc-agenda td.noc-agenda__time .noc-agenda__end {
        display: inline;
        font-size: 13px;
        font-weight: 500;
        color: rgba(255,255,255,.65);
        margin: 0 0 0 8px;
    }
    /* Suppress the <br> between start & end on mobile */
    .noc-agenda td.noc-agenda__time br { display: none; }

    /* ── All other cells: label | value grid ── */
    .noc-agenda td:not(.noc-agenda__time) {
        display: grid;
        grid-template-columns: 90px 1fr;
        align-items: start;
        column-gap: 10px;
        padding: 9px 16px;
        border-bottom: 1px solid rgba(0,0,0,.05);
    }
    .noc-agenda td:last-child { border-bottom: none; }

    /* Label from data-label */
    .noc-agenda td:not(.noc-agenda__time)::before {
        content: attr(data-label);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #00A4A3;
        padding-top: 4px;
        line-height: 1.4;
    }

    /* Compact speaker image on mobile */
    .noc-agenda__speaker-img {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    /* Type badge slightly smaller */
    .noc-agenda__type-badge {
        font-size: 11.5px;
        padding: 3px 10px;
    }

    /* Session head responsive */
    .noc-agenda-session__head-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}


/* ============================================================
   EVENT SCHEDULE ACCORDION  ([noc_event_schedule])
   ============================================================ */

.noc-event-schedule {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 960px;
    margin: 0 auto;
}

.noc-schedule-card {
    border: 1px solid #d4dfe0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(13,48,52,.05);
    transition: box-shadow .2s;
}
.noc-schedule-card:hover {
    box-shadow: 0 4px 18px rgba(13,48,52,.1);
}

.noc-schedule-card__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #00A4A3 0%, #256C71 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: filter .15s;
}
.noc-schedule-card__header:hover,
.noc-schedule-card__header[aria-expanded="true"] {
    filter: brightness(1.08);
}
.noc-schedule-card__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.noc-schedule-card__title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}
.noc-schedule-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.noc-meta-item {
    font-size: 12px;
    opacity: .82;
    white-space: nowrap;
}
.noc-seats {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    font-size: 12px;
    opacity: 1;
}
.noc-seats--low  { background: rgba(251,191,36,.25); color: #fde68a; }
.noc-seats--full { background: rgba(239,68,68,.25);  color: #fca5a5; }

.noc-schedule-card__chevron {
    font-size: 18px;
    flex-shrink: 0;
    transition: transform .25s;
}
.noc-schedule-card__header[aria-expanded="true"] .noc-schedule-card__chevron {
    transform: rotate(180deg);
}

.noc-schedule-card__body { padding: 16px 20px; }
.noc-schedule-card__body[hidden] { display: none; }

.noc-schedule-card__permalink { margin-top: 12px; font-size: 13px; }
.noc-schedule-card__permalink a {
    color: #00A4A3;
    text-decoration: none;
    font-weight: 600;
}
.noc-schedule-card__permalink a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .noc-schedule-card__header { padding: 12px 14px; }
    .noc-schedule-card__body  { padding: 12px 14px; }
}