/* =============================================================================
   Stavanger Open – Programvisning (offentlig frontend)
   Shortcode: [so_program_2026]
   ============================================================================= */

.so-prog-wrapper {
    max-width:   860px;
    margin:      0 auto;
    padding:     1rem;
    font-family: inherit;
}

/* ── Filter ───────────────────────────────────────────────────────────────── */

.so-prog-filters {
    display:       flex;
    gap:           1rem;
    flex-wrap:     wrap;
    margin-bottom: 1.25rem;
    align-items:   flex-end;
}

.so-prog-filter-group {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.so-prog-filter-label {
    font-size:      0.78rem;
    font-weight:    600;
    color:          #50575e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.so-prog-select {
    font-size:     0.9rem;
    padding:       0.3rem 0.5rem;
    border:        1px solid #c3c4c7;
    border-radius: 3px;
    background:    #fff;
    min-width:     150px;
    height:        auto;
    line-height:   normal;
}

/* ── Stemmebar ────────────────────────────────────────────────────────────── */

.so-audience-bar {
    background:    #fff5f5;
    border:        1px solid #fed7d7;
    border-radius: 6px;
    padding:       0.6rem 1rem;
    margin-bottom: 1rem;
    font-size:     0.9rem;
    color:         #742a2a;
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
}

/* ── Liste ────────────────────────────────────────────────────────────────── */

.so-prog-list {
    display:        flex;
    flex-direction: column;
    border-top:     1px solid #e0e0e0;
}

.so-prog-empty {
    color:      #787c82;
    font-style: italic;
    padding:    1rem 0;
}

/* ── Item ─────────────────────────────────────────────────────────────────── */

.so-prog-item {
    border-bottom: 1px solid #e0e0e0;
    margin:        0;
    padding:       0;
}

/* ── Rad ──────────────────────────────────────────────────────────────────── */

.so-prog-row {
    display:     grid;
    align-items: center;
    gap:         0.5rem;
    width:       100%;
    padding:     0.55rem 0.5rem;
    margin:      0;
    background:  transparent;
    border:      none;
    border-radius: 0;
    box-shadow:  none;
    text-align:  left;
    font-size:   0.92rem;
    font-family: inherit;
    color:       #1d2327;
    line-height: 1.3;
    cursor:      default;

    /* Kolonneoppsett: tid | navn | sal | divisjon | hjerte | ikon */
    grid-template-columns: 52px 1fr 90px 150px 28px 20px;
}

.so-prog-row--clickable {
    cursor: pointer;
}

.so-prog-row--clickable:hover {
    background: #f6f7f7;
    color:      #1d2327;
}

.so-prog-row--clickable:hover .so-prog-time {
    color: #2271b1;
}

.so-prog-row--clickable:hover .so-prog-name,
.so-prog-row--clickable:hover .so-prog-hall,
.so-prog-row--clickable:hover .so-prog-division {
    color: inherit;
}

.so-prog-item--open > .so-prog-row {
    background: #f0f6fc;
    color:      #1d2327;
}

/* Nøytraliser temaets rød/rosa :active-farge på button */
.so-prog-row:active,
.so-prog-row:focus,
.so-prog-row:visited {
    background: inherit;
    color:      #1d2327;
    outline:    none;
}

.so-prog-item--open > .so-prog-row:active,
.so-prog-item--open > .so-prog-row:focus {
    background: #f0f6fc;
    color:      #1d2327;
}

/* Pause: smalere grid – ingen hjerte-kolonne */
.so-prog-item--pause .so-prog-row {
    grid-template-columns: 52px 1fr 20px;
    color:      #787c82;
    font-style: italic;
}

.so-prog-item--pause .so-prog-row:hover,
.so-prog-item--pause .so-prog-row:focus,
.so-prog-item--pause .so-prog-row:active {
    background: transparent;
    color:      #50575e;
}

/* ── Feltene i raden ──────────────────────────────────────────────────────── */

.so-prog-time {
    font-variant-numeric: tabular-nums;
    font-weight:          700;
    font-size:            0.88rem;
    color:                #1d2327;
    white-space:          nowrap;
}

.so-prog-name {
    font-weight: 500;
    min-width:   0;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.so-prog-name--pause {
    font-weight: 400;
}

.so-prog-hall,
.so-prog-division {
    font-size:     0.82rem;
    color:         #50575e;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.so-prog-expand-icon {
    font-size:    1rem;
    font-weight:  400;
    color:        #a0a5aa;
    text-align:   right;
    line-height:  1;
    justify-self: end;
    user-select:  none;
}

.so-prog-item--open .so-prog-expand-icon {
    color: #2271b1;
}

/* ── Detaljpanel (accordion) ──────────────────────────────────────────────── */

.so-prog-detail {
    padding:    0.75rem 0.5rem 1rem 52px;
    background: #f9f9f9;
    border-top: 1px solid #e8e8e8;
}

.so-prog-detail-corps {
    /* ingen ekstra padding */
}

.so-prog-detail-name {
    font-size:   1.15rem;
    font-weight: 700;
    margin:      0 0 0.6rem;
    color:       #1d2327;
    line-height: 1.2;
}

/* Metadata */
.so-prog-detail-meta {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    margin:         0 0 0.75rem;
    padding:        0;
}

.so-prog-detail-meta-row {
    display:   flex;
    gap:       0.5rem;
    font-size: 0.88rem;
}

.so-prog-detail-meta-row dt {
    color:       #50575e;
    min-width:   100px;
    flex-shrink: 0;
}

.so-prog-detail-meta-row dd {
    margin: 0;
    color:  #1d2327;
}

/* Program */
.so-prog-detail-program {
    margin-top: 0.6rem;
}

.so-prog-detail-program-title {
    font-weight: 600;
    font-size:   0.88rem;
    color:       #1d2327;
    margin:      0 0 0.4rem;
}

.so-prog-detail-pieces {
    margin:         0;
    padding:        0 0 0 1.1rem;
    display:        flex;
    flex-direction: column;
    gap:            0.45rem;
}

.so-prog-detail-piece {
    font-size:   0.88rem;
    color:       #1d2327;
    line-height: 1.4;
}

.so-prog-piece-title {
    font-weight: 600;
}

.so-prog-piece-composer {
    color: #50575e;
}

.so-prog-piece-duration {
    color:     #787c82;
    font-size: 0.82em;
}

.so-prog-piece-soloists {
    margin:     0.25rem 0 0 1rem;
    padding:    0;
    list-style: disc;
    font-size:  0.85rem;
    color:      #1d2327;
}

/* Notat */
.so-prog-detail-notes {
    margin-top:    0.6rem;
    padding:       0.5rem 0.6rem;
    background:    #fff;
    border-left:   3px solid #2271b1;
    border-radius: 2px;
    font-size:     0.88rem;
    color:         #1d2327;
    line-height:   1.5;
}

/* ── Responsiv ────────────────────────────────────────────────────────────── */

@media ( max-width: 640px ) {
    .so-prog-row {
        /* tid | navn | hjerte | ikon */
        grid-template-columns: 50px 1fr 28px 20px;
    }

    .so-prog-hall,
    .so-prog-division {
        display: none;
    }

    .so-prog-item--pause .so-prog-row {
        grid-template-columns: 50px 1fr 20px;
    }

    .so-prog-detail {
        padding-left: 0.5rem;
    }

    .so-prog-detail-name {
        font-size: 1rem;
    }

    .so-prog-filters {
        flex-direction: row;
        flex-wrap:      wrap;
        justify-content: center;
        gap:            0.75rem;
    }

    .so-prog-filter-group {
        flex: 1;
        min-width: 130px;
    }

    .so-prog-select {
        width: 100%;
    }
}

/* =============================================================================
   Dommerseksjon i programvisning
   ============================================================================= */

.so-prog-judges {
    margin-top:    2rem;
    padding-top:   1.5rem;
    border-top:    1px solid #e0e0e0;
}

.so-prog-judges__title {
    font-size:      1.15rem;
    font-weight:    700;
    margin:         0 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom:  3px solid #2271b1;
    color:          #2271b1;
}

.so-prog-judges__list {
    display:   flex;
    flex-wrap: wrap;
    gap:       1.5rem;
    margin:    0;
    padding:   0;
    list-style: none;
}

.so-prog-judges__list li {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.4rem;
    font-size:      0.9rem;
    color:          #1d2327;
    text-align:     center;
}

.so-prog-judges__list .so-judge-profile-btn {
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    gap:             0.4rem !important;
    text-decoration: none !important;
    color:           #1d2327 !important;
    background:      none !important;
    border:          none !important;
    box-shadow:      none !important;
    border-radius:   0 !important;
    padding:         0 !important;
}

.so-prog-judges__list .so-judge-profile-btn:hover,
.so-prog-judges__list .so-judge-profile-btn:focus,
.so-prog-judges__list .so-judge-profile-btn:active {
    background: none !important;
    box-shadow: none !important;
    color:      #1d2327 !important;
}

.so-prog-judges__list .so-judge-profile-btn:hover span {
    text-decoration: underline;
    color:           #2271b1;
}

.so-prog-judges__photo {
    width:         72px;
    height:        72px;
    border-radius: 50%;
    object-fit:    cover;
    display:       block;
}
/* ── Kafemeny i pauser ───────────────────────────────────────────────────── */
.so-cafe-menu {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.so-cafe-menu__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    margin: 0 0 0.75rem;
}

.so-cafe-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.so-cafe-menu__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px 12px;
    min-width: 180px;
    flex: 1;
}

.so-cafe-menu__img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.so-cafe-menu__info {
    flex: 1;
}

.so-cafe-menu__name {
    font-weight: 600;
    font-size: 0.95rem;
}

.so-cafe-menu__price {
    font-size: 0.85rem;
    color: #2271b1;
    font-weight: 600;
    margin-left: 6px;
}

.so-cafe-menu__desc {
    font-size: 0.82rem;
    color: #666;
    margin: 4px 0 0;
}

.so-cafe-menu__info {
    font-size: 0.9rem;
    color: #444;
    margin: 0 0 0.75rem;
    font-style: italic;
}

/* ── Nettsted-knapp ──────────────────────────────────────────────────────── */
.so-website-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    opacity: 0.6;
    vertical-align: middle;
    line-height: 1;
}
.so-website-btn:hover { opacity: 1; }