/* ============================================================
   KARTUL — events-feature block (home page)

   Compact teaser, styled to sit quietly with the manifesto text — NOT the
   events page's poster-yellow/red skin (that lives in events.css, which
   this page never loads). Every rule here is scoped under
   .block-events-feature so it costs nothing elsewhere and can never leak
   into /events.

   The home page's content lives in ONE viewport (.stage is height:100vh,
   overflow:hidden) with no vertical scroll room, so this block must stay
   short: small type, a tight list, and the calendar (when an editor turns
   it on) sized to match — never the full-bleed events-page grid.
   ============================================================ */

.block-events-feature {
    /* ========== TUNE HERE ========================================== */
    --bef-size: var(--measure, 14.5px);  /* list line size — matches body copy */
    --bef-gap: .5em;                     /* space between event lines */
    --bef-heading-size: 1.1em;           /* heading size */
    --bef-cal-size: 11px;                /* calendar text size, when shown */
    --bef-cal-line: currentColor;        /* calendar grid lines */
    --bef-event-bg: var(--forest, #339966); /* a day that has events */
    --bef-event-hover: #e5001c;          /* hover/focus AND the active day */
    --bef-max-height: 46vh;              /* hard cap so it can't blow the viewport */
    /* ================================================================ */

    font-family: "Kommuna", "Courier New", monospace;
    color: var(--ink);
}

.block-events-feature-heading {
    font-size: var(--bef-heading-size);
    font-weight: 700;
    margin: 0 0 .5em;
}

.block-events-feature-empty {
    opacity: .5;
    margin: 0;
}

/* the shared snippet's root: a plain stack, calendar (optional) above list */
.block-events-feature .events-calendar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: var(--bef-max-height);
}

/* ---------- list ---------- */
.block-events-feature .events-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--bef-gap);
    font-size: var(--bef-size);
    line-height: 1.3;
}
.block-events-feature .events-list li { scroll-margin-top: 4px; }

.block-events-feature .events-list li.is-cancelled,
.block-events-feature .events-list li.is-cancelled a {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.block-events-feature .events-list a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.block-events-feature .events-list a:hover,
.block-events-feature .events-list a:focus-visible {
    font-weight: 700;
}

.block-events-feature .event-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.block-events-feature .event-images img {
    display: block;
    height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: cover;
}

/* ---------- calendar (only rendered when the editor turns it on) ---------- */
.block-events-feature .cal {
    font-size: var(--bef-cal-size);
    flex: 0 0 auto;
}
.block-events-feature .cal-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin: 0 0 6px;
}
.block-events-feature .cal-label { text-align: center; }
.block-events-feature .cal-nav {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0 6px;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    line-height: 1;
    cursor: pointer;
}
.block-events-feature .cal-nav:hover,
.block-events-feature .cal-nav:focus-visible { opacity: .6; }

.block-events-feature .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid var(--bef-cal-line);
    border-left: 1px solid var(--bef-cal-line);
}
.block-events-feature .cal-dow,
.block-events-feature .cal-cell {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-right: 1px solid var(--bef-cal-line);
    border-bottom: 1px solid var(--bef-cal-line);
}
.block-events-feature .cal-cell { cursor: default; }
.block-events-feature .cal-cell.is-outside { opacity: .4; }
.block-events-feature .cal-cell[disabled] { opacity: .7; }
.block-events-feature .cal-cell.has-event {
    cursor: pointer;
    opacity: 1;
    background: var(--bef-event-bg);
    color: var(--paper);
}
.block-events-feature .cal-cell.has-event:hover,
.block-events-feature .cal-cell.has-event:focus-visible,
.block-events-feature .cal-cell.is-active {
    background: var(--bef-event-hover);
    color: var(--paper);
}

@media (max-width: 780px) {
    .block-events-feature {
        --bef-max-height: none;
        --bef-gap: .85em;
        margin-top: 0.25em;
        padding-top: 1.25em;
    }
    .block-events-feature .events-calendar {
        max-height: none;
        gap: 1em;
    }
    .block-events-feature .events-list {
        overflow-y: visible;
        gap: var(--bef-gap);
    }
    .block-events-feature-heading {
        margin-bottom: 0.85em;
    }
    .page-home .block-events-feature {
        padding-top: 1.5em;
        margin-top: 0.5em;
        border-top: 1px solid rgba(17, 17, 17, 0.12);
    }
}