/* =========================================
   EVENTS — SHARED BUTTONS
   Used by the archive pagination button and the link to the archive.
   ========================================= */

.gs-button {
    display: block;
    width: fit-content;
    box-sizing: border-box;
    margin: 2rem auto;
    padding: .75rem 1.5rem;
    border: 1px solid currentColor;
    border-radius: .35rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;

    &:hover {
        background: #246;
        color: #fff;
    }

    &:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 3px;
    }

    /* display:block would otherwise override the browser's [hidden] rule. */
    &[hidden] {
        display: none;
    }
}

/* Links can inherit strong global link styling. These rules keep the
   archive link visually consistent with the actual <button> element. */
.events-section a.gs-button,
.events-section a.gs-button:visited {
    color: inherit;
    text-decoration: none;

    &:hover {
        color: #fff;
    }
}


/* =========================================
   EVENTS — DATE GROUPS AND EVENT ROWS
   ========================================= */

#events-list {
    background:#fff; 
    margin:2rem auto;
    padding-top:.5rem;
    padding-bottom:.5rem;
    border-radius:.5rem;
}

.event-date-group {
    font-family:var(--casual);
    margin: 1.5rem 0;

    .event-date-heading {
        font-size:1rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        border-bottom: 2px solid var(--primary-medium);
        text-transform: uppercase; /* Visual only: JS keeps normal date text. */
    }
}

.event-row {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--primary-bright);

    .event-time {
        flex: 0 0 110px;
    }

    .event-content {
        flex: 1;
        min-width: 0; /* Allows long titles to wrap inside a flex item. */
    }

    .event-title {
        margin-bottom:.5rem;
    }

    &.event-row-past {
        padding: .75rem 0;

        .event-title {
            font-size: 1rem;
            margin-bottom:.5rem;
        }
    }
}


/* =========================================
   EVENTS — UPCOMING FACILITATORS
   Portraits appear only when the event data supplies an image.
   ========================================= */

.event-hosts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    margin-top: .5rem;

    .event-host {
        display: flex;
        align-items: center;
        gap: .5rem;

        .event-portrait {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .event-host-info {
            min-width: 0;
            font-size: .85rem;

            .event-host-name {
                font-weight: 500;
            }

            .event-host-organization {
                font-size: .8rem;
                opacity: .8;
            }
        }
    }
}


/* =========================================
   EVENTS — HISTORICAL FACILITATOR CREDITS
   Text-only recognition on both the events page and archive.
   ========================================= */

.event-past-hosts {
    margin-top: .5rem;
    font-size: .85rem;
    line-height: 1.5;

    .event-past-hosts-label {
        display: block;
        font-weight: 600;
    }

    .event-past-host {
        display: block; /* One facilitator and organization per line. */
        margin-top: .25rem;
    }
}


/* =========================================
   EVENTS — EXPANDABLE DETAILS
   ========================================= */

.event-details {
    margin-top: 1rem;

    .event-details-toggle {
        display: list-item;
        width: fit-content;
        cursor: pointer;
        font-size: .9rem;
        font-weight: 500;

        &:hover {
            text-decoration: underline;
        }

        &:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 4px;
        }
    }

    .event-details-content {
        margin-top: 1rem;
        line-height: 1.6;

        > :first-child {
            margin-top: 0;
        }

        img {
            display: block;
            max-width: 300px;
            height: auto;
            cursor:zoom-in;
        }

        a {
            text-decoration: underline;
        }
    }
}


/* =========================================
   EVENTS — COLLAPSIBLE RECENT HISTORY
   ========================================= */

.events-past-section {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #ccc;

    .events-past-toggle {
        cursor: pointer;
        font-size: 1.1rem;
        font-weight: 600;

        &:hover {
            text-decoration: underline;
        }

        &:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 4px;
        }
    }

    .events-past-content {
        margin-top: 1.5rem;
    }
}


/* =========================================
   EVENTS — TWO-MONTH CALENDAR
   ========================================= */

.events-calendars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin: 1rem 0 2rem;

    .calendar {
        min-width: 0;
        background:#fff;
        padding:.5rem;
        border-radius:.5rem;
        color:var(--primary-medium);
        overflow:hidden;
        box-shadow:1px 1px 16px rgba(0 0 100 /.2);

        .calendar-title {
            margin: -.5rem -.5rem .75rem;
            padding:.5rem;
            text-align: center;
            font-size: 1.2rem;
            background:var(--primary-medium);
            color:var(--white);
            text-transform: uppercase;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 4px;
            padding: 1rem;
            text-align: center;

            > span,
            > a {
                min-width: 0;
                width: 100%;
                box-sizing: border-box;
                aspect-ratio: 1.75 / 1;
                display: grid;
                place-items: center;
                border-radius: .5rem;
            }

            .calendar-weekday {
                font-weight: 600;
                color:var(--primary-dark);
            }

            .calendar-date {
                font-size: .9rem;

                &.calendar-upcoming {
                    background: var(--primary-highlight);
                    color: #fff;
                    text-decoration: none;
                    font-weight: 600;

                    &:hover {
                        background:var(--primary-contrast);
                        color:var(--primary-dark);
                    }

                    &:focus-visible {
                        outline: 2px solid currentColor;
                        outline-offset: 2px;
                    }
                }

                &.calendar-past {
                    background: oklch(from var(--primary-dark) l c h / .5);
                    color: #fff;
                }

                &.today {
                    text-decoration:underline;
                    text-decoration-thickness:2.5px;
                    text-underline-offset:5px;
                }
            }
        }
    }

    /* Only event-date links should be white, not unrelated links. */
    a.calendar-upcoming:visited {
        color: #fff;
    }
}


/* =========================================
   EVENTS — FULL HISTORICAL ARCHIVE
   ========================================= */

.events-archive-list {
    margin-top: 2rem;
}


/* =========================================
   EVENTS — RESPONSIVE LAYOUT
   ========================================= */

@media (max-width: 700px) {
    .event-hosts {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;

        .event-host {
            width: 100%;
        }
    }
}

@media (max-width: 600px) {
    .events-calendars {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .event-row {
        flex-direction: column;
        gap: .5rem;

        .event-time {
            flex-basis: auto;
        }
    }
}

.event-logistics { margin:.6rem 0; font-size:.88rem; line-height:1.6; overflow-wrap:anywhere; }
.event-logistic strong { margin-right:.25rem; }

/* Event refinements: time range, program and rich-content separation. */
.event-row {
    .event-time {
        .event-time-start, .event-time-end { display: block; }
        .event-time-end { margin-top: .15rem; }
    }
    .event-program { margin: .35rem 0; font-size: .8rem; color:var(--primary-highlight);}
    .event-details { border-top: 1px solid var(--secondary-bright); padding-top: 1rem; }
}