/* ============================================================
   PME Calendar — Editorial Pride Zine, monthly grid
   Same aesthetic vocabulary as the event list:
   warm paper, brutalist borders, chromatic accent rotation.
   ============================================================ */

.pme-calendar {
    --pme-paper:        #FAF6EC;
    --pme-card:         #FFFEFA;
    --pme-card-muted:   #F1ECDE;
    --pme-ink:          #1A0F1F;
    --pme-ink-soft:     rgba(26, 15, 31, 0.62);
    --pme-ink-faint:    rgba(26, 15, 31, 0.28);
    --pme-line:         rgba(26, 15, 31, 0.18);

    --pme-magenta:      #FF2D7E;
    --pme-cobalt:       #0040FF;
    --pme-lime:         #B8FF00;
    --pme-tangerine:    #FF6B35;

    --pme-shadow-rest:  3px 3px 0 0 var(--pme-ink);

    font-family: "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif;
    color: var(--pme-ink);
    -webkit-font-smoothing: antialiased;
}

/* ----- Header --------------------------------------------- */

.pme-calendar-header {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1.25rem;
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1.5px solid var(--pme-ink);
    flex-wrap: wrap;
}

.pme-calendar-title {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 30;
    font-weight: 600;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.015em;
    text-align: center;
    text-transform: capitalize;
}

.pme-calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1.5px solid var(--pme-ink);
    background: var(--pme-card);
    color: var(--pme-ink);
    text-decoration: none;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
    box-shadow: 0 0 0 0 var(--pme-ink);
}

.pme-calendar-nav:hover,
.pme-calendar-nav:focus-visible {
    background: var(--pme-ink);
    color: var(--pme-card);
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 0 var(--pme-ink);
    outline: none;
}

/* ----- Category filter (reuses list styling vocabulary) --- */

.pme-calendar .pme-category-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0.85rem 0;
    border-top: 1.5px solid var(--pme-ink);
    border-bottom: 1.5px solid var(--pme-ink);
}

.pme-calendar .pme-category-filter-label {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pme-ink-soft);
    margin-right: 0.5rem;
    padding-right: 0.75rem;
    border-right: 1px solid var(--pme-line);
}

.pme-calendar .pme-category-pill {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    color: var(--pme-ink);
    border: 1.5px solid var(--pme-ink);
    border-radius: 0;
    padding: 0.42rem 0.95rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    line-height: 1;
    cursor: pointer;
    transition: all 140ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pme-calendar .pme-category-pill-swatch {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    border: 1px solid var(--pme-ink);
    flex: 0 0 auto;
}

.pme-calendar .pme-category-pill.is-active .pme-category-pill-swatch,
.pme-calendar .pme-category-pill:hover .pme-category-pill-swatch {
    border-color: #fff;
    box-shadow: 0 0 0 1px var(--pme-ink);
}

.pme-calendar .pme-category-pill:hover {
    background: var(--pme-ink);
    color: var(--pme-card);
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 0 var(--pme-ink);
}

.pme-calendar .pme-category-pill.is-active {
    background: var(--pme-magenta);
    color: #fff;
    box-shadow: 2px 2px 0 0 var(--pme-ink);
    transform: translate(-1px, -1px);
}

/* ----- Weekday headers ----------------------------------- */

.pme-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1.5px solid var(--pme-ink);
    border-bottom: none;
    background: var(--pme-ink);
}

.pme-calendar-weekday {
    padding: 0.5rem 0.4rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--pme-card);
    text-align: center;
    border-right: 1px solid rgba(255, 254, 250, 0.16);
}
.pme-calendar-weekday:last-child {
    border-right: none;
}

/* ----- Grid ---------------------------------------------- */

.pme-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1.5px solid var(--pme-ink);
    background: var(--pme-ink); /* 1px gap reveals through */
    gap: 1px;
    box-shadow: var(--pme-shadow-rest);
}

/* ----- Day cell ------------------------------------------ */

.pme-calendar-day {
    background: var(--pme-card);
    min-height: 7.5rem;
    padding: 0.5rem 0.5rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
}

.pme-calendar-day--out-of-month {
    background: var(--pme-card-muted);
    color: var(--pme-ink-faint);
}

.pme-calendar-day--out-of-month .pme-calendar-day-number {
    color: var(--pme-ink-faint);
}

.pme-calendar-day--today {
    background:
        linear-gradient(135deg, transparent 78%, var(--pme-magenta) 78%, var(--pme-magenta) 80%, transparent 80%) top right / 18px 18px no-repeat,
        var(--pme-card);
}

.pme-calendar-day--today .pme-calendar-day-number {
    color: var(--pme-magenta);
    font-weight: 700;
}

.pme-calendar-day-number {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pme-ink);
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 0.15rem;
}

/* ----- Events inside a cell ----------------------------- */

.pme-calendar-events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pme-calendar-event-wrapper {
    margin: 0;
}

/* Accent rotation: cycle chromatic colors per event position
   across the entire calendar (this works visually even without
   knowing the originating day). */
.pme-calendar-event                       { --pme-accent: var(--pme-magenta); }
.pme-calendar-event:nth-of-type(4n+2)     { --pme-accent: var(--pme-cobalt); }
.pme-calendar-event:nth-of-type(4n+3)     { --pme-accent: var(--pme-lime); }
.pme-calendar-event:nth-of-type(4n+4)     { --pme-accent: var(--pme-tangerine); }

.pme-calendar-event-link {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--pme-ink);
    background: var(--pme-paper);
    /* Stripe rendered via ::before so a multi-stop gradient (one segment per
       category) doesn't fight the link background. Default position is left
       (legacy look); switches to top when the wrapper carries
       data-stripe-position="top" (= categories hidden). */
    padding: 0.32rem 0.45rem 0.38rem;
    padding-left: calc(0.45rem + 3px);
    transition: transform 140ms ease, background-color 140ms ease;
}

.pme-calendar-event-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    /* --pme-stripe is set inline per event when categories are assigned;
       falls back to the rotating --pme-accent for uncategorised events. */
    background: var(--pme-stripe, var(--pme-accent));
    pointer-events: none;
}

/* Top-stripe layout: when category labels are hidden, the colour cue moves
   to a horizontal bar at the top of each entry. Padding mirrors: the
   left-padding compensation disappears, replaced by top-padding to clear
   the 3px bar. */
.pme-calendar[data-stripe-position="top"] .pme-calendar-event-link {
    padding-left: 0.45rem;
    padding-top: calc(0.32rem + 3px);
}

.pme-calendar[data-stripe-position="top"] .pme-calendar-event-link::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 3px;
    /* Multi-category gradient is vertical by default — rotate to horizontal
       for the top bar so each segment is a full-width slice. */
    background: var(--pme-stripe-horizontal, var(--pme-stripe, var(--pme-accent)));
}

.pme-calendar-event-link:hover,
.pme-calendar-event-link:focus-visible {
    background: var(--pme-ink);
    color: var(--pme-card);
    transform: translateX(2px);
    outline: none;
}

.pme-calendar-event-link:hover .pme-calendar-event-category,
.pme-calendar-event-link:focus-visible .pme-calendar-event-category {
    background: rgba(255, 254, 250, 0.12);
    color: var(--pme-card);
    border-color: rgba(255, 254, 250, 0.3);
}

.pme-calendar-event-title {
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 30;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 0.18rem;
    /* truncate within tight cells */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pme-calendar-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    color: var(--pme-ink-soft);
    line-height: 1.25;
}

.pme-calendar-event-link:hover .pme-calendar-event-meta,
.pme-calendar-event-link:focus-visible .pme-calendar-event-meta {
    color: rgba(255, 254, 250, 0.7);
}

.pme-calendar-event-time {
    font-weight: 600;
    color: var(--pme-accent);
}

.pme-calendar-event-link:hover .pme-calendar-event-time {
    color: var(--pme-accent);
}

.pme-calendar-event-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.28rem;
}

.pme-calendar-event-category {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.56rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.12rem 0.32rem;
    background: var(--pme-card);
    color: var(--pme-ink);
    border: 1px solid var(--pme-line);
    line-height: 1;
}

/* Client-side category filter — events whose data-categories
   doesn't include the active slug get hidden. */
.pme-calendar.is-filtering .pme-calendar-event-wrapper:not(.is-match) {
    display: none;
}

/* ----- Responsive: mobile agenda mode -------------------- */

@media (max-width: 639px) {
    .pme-calendar-weekdays {
        display: none;
    }

    .pme-calendar-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .pme-calendar-day {
        display: none;
        border: 1.5px solid var(--pme-ink);
        margin-bottom: 1rem;
        padding: 0.8rem 0.9rem;
        min-height: 0;
        background: var(--pme-card);
        box-shadow: var(--pme-shadow-rest);
    }

    .pme-calendar-day--has-events {
        display: flex;
    }

    .pme-calendar-day--has-events::before {
        content: attr(data-date);
        position: absolute;
        top: 0.6rem;
        right: 0.8rem;
        font-family: "JetBrains Mono", ui-monospace, monospace;
        font-size: 0.62rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--pme-ink-soft);
    }

    .pme-calendar-day-number {
        font-family: "Fraunces", Georgia, serif;
        font-variation-settings: "opsz" 96, "wght" 700, "SOFT" 30;
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        line-height: 1;
    }

    .pme-calendar-event-title {
        font-size: 1rem;
        -webkit-line-clamp: 3;
    }

    .pme-calendar-event-meta {
        font-size: 0.72rem;
    }
}

/* Empty-month note shown when the user navigated to a month with no events.
   Rendered as a transparent overlay on the grid, no DOM change required. */
.pme-calendar:has(.pme-calendar-day--has-events) ~ .pme-calendar-empty,
.pme-calendar-empty { display: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pme-calendar-nav,
    .pme-calendar-event-link,
    .pme-calendar .pme-category-pill {
        transition: none !important;
    }
    .pme-calendar-nav:hover,
    .pme-calendar-event-link:hover {
        transform: none;
    }
}