/**
 * Seefeed structure – layout only for event list markup (.eventlist / .event / …).
 * Hosts load this file; skin/theme comes from the host or from seefeed.theme.css.
 *
 * @file        core/css/seefeed.css
 * @project     Seefeed
 * @author      Seefeed
 * @version     0.1.0
 * @since       2026-09
 * @see         core/css/seefeed.theme.css
 * @see         core/templates/
 */

.eventlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.event {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    grid-template-areas:
        "dates title"
        "dates categories"
        "dates location"
        "dates address"
        "dates url"
        "dates description"
        "dates image";
    column-gap: 1rem;
    align-items: start;

    .event-title {
        grid-area: title;
    }

    .event-dates {
        grid-area: dates;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        margin: 0;
        text-align: center;

        & > [hidden] {
            display: none;
        }

        .event-date-sep:not([hidden]) {
            display: block;
        }
    }

    :is(.event-date, .event-time) {
        display: block;

        &:empty {
            display: none;
        }
    }

    .event-categories {
        grid-area: categories;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        padding: 0;
        list-style: none;
    }

    .event-location {
        grid-area: location;
    }

    .event-address {
        grid-area: address;
    }

    .event-url {
        grid-area: url;
    }

    .event-description {
        grid-area: description;
    }

    .event-image {
        grid-area: image;

        img {
            display: block;
            max-width: 100%;
            height: auto;
        }
    }

    :is(
        .event-categories,
        .event-address,
        .event-url,
        .event-description,
        .event-image
    ):empty {
        display: none;
    }
}