/**
 * Program list: a season or year programme as rows of label (month · theme),
 * title, description and time, divided by lines. One row stacks on phones,
 * two columns on tablets, four from 990px. Every row is its own container,
 * so the client adds an event by duplicating a row in the editor.
 * For events that are posts with their own pages use post-list--events.
 *
 * globalClass: program-list   (the list)
 *              program-row    (each row)
 *
 * Structure:
 *   .program-list.gb-container
 *     .program-row.gb-container
 *       p.program-label        "Tammikuu · Growth"
 *       h3.program-title       event name
 *       p.program-text         one line on what happens
 *       p.program-time         "la 30.1. klo 11–13"
 *
 * Tuning: --program-row-padding (20px), --program-line (2px solid border color)
 *
 * Chain animations: the list animates as one block.
 *
 * Hers Klub, 11/2026. Candidate for the base theme.
 */

:root {
    --program-row-padding: 20px;
    --program-line: 2px solid var(--border-clr);
}

.program-list {
    border-bottom: var(--program-line);
}

.program-row,
.program-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: baseline;
    gap: 6px 32px;
}

.program-row {
    padding: var(--program-row-padding) 0;
    border-top: var(--program-line);
}

.program-row > *,
.program-row > .block-editor-inner-blocks > .block-editor-block-list__layout > * {
    margin: 0;
}

.program-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-clr);
}

h3.program-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}

.program-text,
.program-time {
    font-size: 16px;
    line-height: 1.55;
}

.program-time {
    font-weight: 500;
}

@media only screen and (min-width: 768px) {
    .program-row,
    .program-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 990px) {
    .program-row,
    .program-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
        grid-template-columns: repeat(4, 1fr);
    }
}