/*
 * Program 2026 (Film + Forum) — page-program-2026.php
 * Tab-switched single-page program. Uses theme tokens for color/type/spacing.
 */

[x-cloak] { display: none !important; }

.program26 {
    padding: var(--sf-space-12) 0 var(--sf-space-20);
    font-family: var(--sf-font-body);
    color: var(--sf-color-text);
}

/* ---------- Tabs ---------- */

.program26__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2);
    margin-bottom: var(--sf-space-10);
    border-bottom: 2px solid var(--sf-color-text);
}

.program26__tabs button {
    appearance: none;
    background: transparent;
    border: 0;
    padding: var(--sf-space-4) var(--sf-space-6);
    cursor: pointer;
    font-family: var(--sf-font-display);
    font-size: var(--sf-text-lg);
    line-height: 1.1;
    letter-spacing: 0.04em;
    color: var(--sf-color-text);
    text-align: left;
    transition: all var(--sf-duration-fast) var(--sf-ease);
    border-bottom: 4px solid transparent;
    margin-bottom: -2px;
}

.program26__tabs button:hover {
    color: var(--sf-color-accent);
}

.program26__tabs button.active {
    color: var(--sf-color-accent);
    border-bottom-color: var(--sf-color-accent);
}

.program26__tab-dates {
    display: block;
    font-family: var(--sf-font-body);
    font-size: var(--sf-text-sm);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--sf-color-text-muted);
    margin-top: var(--sf-space-1);
}

/* ---------- Panel header ---------- */

.program26__head {
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-2);
    margin-bottom: var(--sf-space-8);
    padding-bottom: var(--sf-space-6);
    border-bottom: 1px solid var(--sf-color-border);
}

.program26__edition {
    margin: 0;
    font-family: var(--sf-font-display);
    font-size: var(--sf-text-md);
    color: var(--sf-color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.program26__heading {
    margin: 0;
    font-family: var(--sf-font-display);
    font-size: var(--sf-text-3xl);
    line-height: var(--sf-leading-tight);
    color: var(--sf-color-text);
}

.program26__where {
    margin: 0;
    color: var(--sf-color-text-muted);
    font-size: var(--sf-text-md);
}

.program26__pdf {
    align-self: flex-start;
    margin-top: var(--sf-space-3);
    padding: var(--sf-space-3) var(--sf-space-5);
    background: var(--sf-color-accent);
    color: var(--sf-color-text-inverse);
    text-decoration: none;
    font-family: var(--sf-font-display);
    font-size: var(--sf-text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--sf-radius-sm);
    transition: background var(--sf-duration-fast) var(--sf-ease);
}

.program26__pdf:hover {
    background: var(--sf-color-accent-deep);
    color: var(--sf-color-text-inverse);
}

/* ---------- Legend ---------- */

.program26__legend {
    list-style: none;
    margin: 0 0 var(--sf-space-8);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-3);
}

.program26__legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-2);
    font-size: var(--sf-text-sm);
    color: var(--sf-color-text);
}

.program26__legend li::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--track, var(--sf-color-text-muted));
}

/* Track colors — single brand-aligned scale built around accent red */
.program26__legend li[data-track="fiction"]    { --track: var(--sf-red); }
.program26__legend li[data-track="doc"]        { --track: #d97706; }
.program26__legend li[data-track="special"]    { --track: var(--sf-cherry); }
.program26__legend li[data-track="symposium"]  { --track: #0f766e; }
.program26__legend li[data-track="retro"]      { --track: #6b21a8; }
.program26__legend li[data-track="cinema"]     { --track: #ca8a04; }
.program26__legend li[data-track="inhuman"]    { --track: #1e3a8a; }
.program26__legend li[data-track="political"]  { --track: #0f766e; }
.program26__legend li[data-track="palestine"]  { --track: var(--sf-red); }

/* ---------- Note / info banner ---------- */

.program26__note {
    margin: 0 0 var(--sf-space-8);
    padding: var(--sf-space-4) var(--sf-space-5);
    background: var(--sf-color-bg-muted);
    border-left: 3px solid var(--sf-color-accent);
    font-size: var(--sf-text-sm);
    line-height: var(--sf-leading-normal);
}

.program26__note a {
    color: var(--sf-color-accent);
}

.program26__note--small {
    margin-top: calc(-1 * var(--sf-space-4));
    margin-bottom: var(--sf-space-6);
    padding: var(--sf-space-2) 0;
    background: transparent;
    border-left: 0;
    color: var(--sf-color-text-muted);
    font-style: italic;
}

/* ---------- Phase divider (Forum / Seminar) ---------- */

.program26__phase {
    margin: var(--sf-space-12) 0 var(--sf-space-6);
    padding: var(--sf-space-3) 0;
    font-family: var(--sf-font-display);
    font-size: var(--sf-text-xl);
    color: var(--sf-color-text-inverse);
    background: var(--sf-color-bg-inverse);
    padding-left: var(--sf-space-5);
    padding-right: var(--sf-space-5);
    line-height: 1.2;
}

/* ---------- Week grid (PDF-style poster layout) ---------- */

.program26__week {
    display: grid;
    grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr));
    gap: 1px;
    background: var(--sf-color-border);
    border: 1px solid var(--sf-color-border);
    margin-bottom: var(--sf-space-10);
}

.program26__week[data-cols="1"] { --cols: 1; }
.program26__week[data-cols="2"] { --cols: 2; }
.program26__week[data-cols="3"] { --cols: 3; }
.program26__week[data-cols="4"] { --cols: 4; }
.program26__week[data-cols="5"] { --cols: 5; }
.program26__week[data-cols="6"] { --cols: 6; }
.program26__week[data-cols="7"] { --cols: 7; }

/* ---------- Day column ---------- */

.program26__day {
    background: var(--sf-color-bg);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.program26__day-title {
    margin: 0;
    padding: var(--sf-space-4) var(--sf-space-3) var(--sf-space-3);
    background: var(--sf-color-bg-inverse);
    color: var(--sf-color-text-inverse);
    font-family: var(--sf-font-display);
    font-size: var(--sf-text-md);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

.program26__day-title span {
    display: block;
    margin: var(--sf-space-1) 0 0;
    font-family: var(--sf-font-body);
    font-size: var(--sf-text-xs);
    font-weight: 400;
    color: var(--sf-color-text-inverse);
    opacity: 0.7;
    letter-spacing: 0;
}

/* ---------- Events list ---------- */

.program26__events {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.program26__event {
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-2);
    padding: var(--sf-space-4) var(--sf-space-3);
    border-top: 1px solid var(--sf-color-border);
    background: var(--track-bg, transparent);
    transition: background var(--sf-duration-fast) var(--sf-ease);
}

.program26__event:first-child {
    border-top: 0;
}

.program26__event:hover {
    background: var(--sf-color-bg-muted);
}

.program26__time {
    font-family: var(--sf-font-display);
    font-size: var(--sf-text-lg);
    line-height: 1;
    color: var(--sf-color-accent);
    letter-spacing: 0.02em;
}

.program26__body {
    position: relative;
    padding-left: var(--sf-space-3);
    border-left: 3px solid var(--track, var(--sf-color-border));
}

.program26__event[data-track="fiction"]    .program26__body { --track: var(--sf-red); }
.program26__event[data-track="doc"]        .program26__body { --track: #d97706; }
.program26__event[data-track="special"]    .program26__body { --track: var(--sf-cherry); }
.program26__event[data-track="symposium"]  .program26__body { --track: #0f766e; }
.program26__event[data-track="retro"]      .program26__body { --track: #6b21a8; }
.program26__event[data-track="cinema"]     .program26__body { --track: #ca8a04; }
.program26__event[data-track="inhuman"]    .program26__body { --track: #1e3a8a; }
.program26__event[data-track="political"]  .program26__body { --track: #0f766e; }
.program26__event[data-track="palestine"]  .program26__body { --track: var(--sf-red); }

.program26__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2);
    margin-bottom: var(--sf-space-2);
    font-size: var(--sf-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.program26__venue,
.program26__kind,
.program26__qa,
.program26__lang {
    display: inline-block;
    padding: 2px var(--sf-space-2);
    border-radius: var(--sf-radius-sm);
    line-height: 1.4;
}

.program26__venue {
    background: var(--sf-color-bg-inverse);
    color: var(--sf-color-text-inverse);
}

.program26__kind {
    background: var(--sf-color-bg-muted);
    color: var(--sf-color-text-muted);
    border: 1px solid var(--sf-color-border);
}

.program26__qa {
    background: var(--sf-color-accent);
    color: var(--sf-color-text-inverse);
}

.program26__lang {
    background: #fff4e0;
    color: var(--sf-color-accent-deep);
    border: 1px solid #f0d9a8;
}

.program26__title {
    margin: 0 0 var(--sf-space-1);
    font-family: var(--sf-font-display);
    font-size: var(--sf-text-base);
    line-height: var(--sf-leading-tight);
    color: var(--sf-color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.program26__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition:
        background-size var(--sf-duration-normal) var(--sf-ease),
        color var(--sf-duration-fast) var(--sf-ease);
}

.program26__title a:hover,
.program26__title a:focus-visible {
    color: var(--sf-color-accent);
    background-size: 100% 2px;
}

.program26__meta {
    margin: 0;
    color: var(--sf-color-text-muted);
    font-size: var(--sf-text-xs);
    line-height: 1.4;
}

.program26__tags {
    font-size: 0.7rem;
}

/* ---------- Aside (exhibitions) ---------- */

.program26__aside {
    margin-top: var(--sf-space-12);
    padding: var(--sf-space-6);
    background: var(--sf-color-bg-muted);
    border-left: 4px solid var(--sf-color-accent);
}

.program26__aside h3 {
    margin: 0 0 var(--sf-space-4);
    font-family: var(--sf-font-display);
    font-size: var(--sf-text-xl);
    color: var(--sf-color-text);
}

.program26__aside p {
    margin: 0 0 var(--sf-space-3);
    font-size: var(--sf-text-sm);
    line-height: var(--sf-leading-normal);
}

.program26__aside p:last-child {
    margin-bottom: 0;
}

/* ---------- Responsive ---------- */

/* ---------- Responsive grid breakdown ---------- */

/* Tablet wide — 7 cols cramped. Allow horizontal scroll. */
@media (max-width: 1280px) {
    .program26__week {
        overflow-x: auto;
        grid-template-columns: repeat(var(--cols, 7), minmax(180px, 1fr));
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .program26__day {
        scroll-snap-align: start;
    }
}

/* Tablet narrow — 3 col stack with horizontal scroll */
@media (max-width: 900px) {
    .program26__week {
        grid-template-columns: repeat(var(--cols, 7), minmax(220px, 1fr));
    }
}

/* Mobile — single column, days stacked vertically (back to readable list) */
@media (max-width: 600px) {
    .program26__week {
        display: block;
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .program26__day {
        margin-bottom: var(--sf-space-6);
        border: 1px solid var(--sf-color-border);
    }

    .program26__day-title {
        position: static;
        text-align: left;
        font-size: var(--sf-text-lg);
        padding: var(--sf-space-3) var(--sf-space-4);
    }

    .program26__day-title span {
        display: inline-block;
        margin-left: var(--sf-space-2);
    }

    .program26__event {
        padding: var(--sf-space-4);
    }

    .program26__time {
        font-size: var(--sf-text-md);
    }

    .program26__title {
        font-size: var(--sf-text-md);
    }

    .program26__heading {
        font-size: var(--sf-text-2xl);
    }

    .program26__tabs button {
        padding: var(--sf-space-3) var(--sf-space-4);
        font-size: var(--sf-text-md);
    }
}