/* ─────────────────────────────────────────────────────────────────────────
   ProgramBoard – Programm & Wochenübersicht
   ───────────────────────────────────────────────────────────────────────── */

.program-board {
    --rb-accent: #6E368C;
    --rb-fg: #2B2E36;
    --rb-white: #FFFFFF;
    --rb-yellow: #FFDC44;
    color: var(--rb-fg);
}

/* ── Program card (shared) ─────────────────────────────────────────────── */

.program-board__program {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--rb-yellow);
    border-radius: 5px;
    overflow: hidden;
    container-type: inline-size;
    container-name: program-board-card;
}

.program-board__host-image-wrapper {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.program-board__host-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.program-board__program-body {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.5rem;
    row-gap: 0;
    align-items: baseline;
    padding: 1rem;
}

.program-board__program-meta {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.program-board__time {
    font-size: 1.25rem;
    line-height: 1.5em;
    font-weight: bolder;
    color: var(--rb-fg);
    letter-spacing: 0.01rem;
	min-width: 150px;
    white-space: nowrap;
}

.program-board__live-badge {
    display: inline-block;
    background: var(--rb-accent);
    color: var(--rb-white);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    padding: 2px 8px;
    border-radius: 999px;
}

.program-board__program-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.25rem !important;
    font-weight: bolder;
    line-height: 1.5em !important;
    margin: 0;
}

.program-board__hosts {
    grid-column: 2;
    grid-row: 2;
    font-size: 1rem;
	line-height: 1.4em;
    color: var(--rb-fg);
    margin: 0;
}

/* Below this width, the two-column layout (time | name, hosts under name)
   gets too cramped — collapse to a single column: time on its own line,
   then name, then hosts. Measured against the card's own width via a
   container query, not the viewport — this triggers correctly whether the
   card sits at full width, in a narrow sidebar, or in the mobile dropdown
   panel, regardless of overall page width. */
@container program-board-card (max-width: 480px) {
    .program-board__program-body {
        grid-template-columns: 1fr;
    }

    .program-board__program-meta,
    .program-board__program-name,
    .program-board__hosts {
        grid-column: 1;
    }

    .program-board__program-meta, {
        grid-row: 1;
    }

    .program-board__program-name {
        grid-row: 2;
    }

    .program-board__hosts {
        grid-row: 3;
    }
}

/* ── Homepage list ─────────────────────────────────────────────────────── */

.program-board--programs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

/* ── Week overview ─────────────────────────────────────────────────────── */

.program-board--week {
    display: flex;
    flex-direction: column;
}

/* ── Desktop / Tablet: tab bar (≥ 768px) ──────────────────────────────────
   Hidden below 768px — the custom dropdown takes over instead. */

.program-board__tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid var(--rb-fg);
    margin-bottom: 2rem;
}

.program-board__tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.5rem 0.9rem;
    background-color: var(--rb-fg) !important;
    border: none;
    border-bottom: 3px solid transparent;
	border-radius: 5px 5px 0px 0px !important;
    margin-bottom: -2px; /* overlap the tab-bar border-bottom */
    cursor: pointer;
    color: var(--rb-white) !important;
    font-family: inherit;
    transition: all 0.2s;
}

.program-board__tab:hover {
    color: var(--rb-white) !important;
    background-color: var(--rb-accent) !important;
    border-bottom-color: var(--rb-accent);
}

.program-board__tab--active {
    color: var(--rb-fg) !important;
    background-color: var(--rb-yellow) !important;
    border-bottom-color: var(--rb-yellow);
}

.program-board__tab-weekday {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.program-board__tab-date {
    font-size: 1rem;
    line-height: 1.4;
	font-weight: 400;
}

/* ── Mobile: custom dropdown (< 768px) ────────────────────────────────────
   Hidden at 768px and above — the tab bar takes over instead.
   None of this uses a native <select>; every piece below is a plain
   button/ul/li, so it is fully restyleable. */

.program-board__dropdown {
    display: none; /* shown only below the breakpoint, see media query below */
    position: relative;
    margin-bottom: 1.5rem;
}

.program-board__dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--rb-fg) !important;
    border: none;
    border-radius: 5px;
    color: var(--rb-white) !important;
    font-family: inherit;
    cursor: pointer;
}

.program-board__dropdown-trigger:hover {
    color: var(--rb-fg) !important;
	background: var(--rb-yellow) !important;
}

.program-board__dropdown-trigger--open {
    color: var(--rb-fg) !important;
    background: var(--rb-yellow) !important;
    border-radius: 5px 5px 0 0 !important;
}

.program-board__dropdown-trigger-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.program-board__dropdown-weekday {
    font-size: 1.3rem;
    font-weight: bolder;
    line-height: 1.5;
}

.program-board__dropdown-date {
    font-size: 1.1rem;
    line-height: 1.3;
	font-weight: 400;
}

.program-board__dropdown-chevron {
    flex: 0 0 auto;
    font-size: 1.3rem;
    transition: transform 0.2s;
}

.program-board__dropdown-trigger--open .program-board__dropdown-chevron {
    transform: rotate(180deg);
}

.program-board__dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--rb-yellow);
    border: none;
    border-radius: 0 0 5px 5px;
    max-height: 60vh;
    overflow-y: auto;
}

.program-board__dropdown-option {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 5px;
    cursor: pointer;
}

.program-board__dropdown-option:hover,
.program-board__dropdown-option--focused {
    background: rgba(0, 0, 0, 0.06);
}

.program-board__dropdown-option--active {
    font-weight: 700;
}

.program-board__dropdown-option-weekday {
    font-size: 1.1rem;
	font-weight: bolder;
}

.program-board__dropdown-option-date {
    font-size: 1.1rem;
}

/* Panels (shared by both controllers) */

.program-board__day {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.program-board__day-programs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.program-board__day-empty {
    color: var(--rb-fg);
    margin: 0;
}

/* ── States ────────────────────────────────────────────────────────────── */

.program-board--empty {
    color: var(--rb-fg);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Controller switch: tab bar ≥ 1201px, custom dropdown < 1201px.
   This is the ONLY place that decides which controller is visible —
   ProgramBoard.js keeps both wired up regardless, so this query is safe
   to adjust (or remove in favour of a different breakpoint) on its own. */

@media (max-width: 1200px) {
    .program-board__tab-bar {
        display: none;
    }

    .program-board__dropdown {
        display: block;
    }
	
	.program-board__day-header {
		display: none;
	}
}

@media (max-width: 1800px) {
	.program-board__time,
	.program-board__program-name {
		font-size: 1.1rem !important;
	}
}