/* ============================================================
   PME Event List — Editorial Pride Zine
   Warm paper, brutalist editorial. Hard borders & shadows,
   chromatic accents that rotate per card position.
   ============================================================ */

:where(.pme-event-list, .pme-category-filter, .pme-event-list-empty) {
    --pme-paper:        #FAF6EC;
    --pme-card:         #FFFEFA;
    --pme-ink:          #1A0F1F;
    --pme-ink-soft:     rgba(26, 15, 31, 0.62);
    --pme-line:         rgba(26, 15, 31, 0.18);
    --pme-line-dashed:  rgba(26, 15, 31, 0.22);

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

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

    --pme-radius:       0;

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

/* ----- Category filter -------------------------------------- */

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

.pme-category-filter-label {
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, 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-category-pill {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    color: var(--pme-ink);
    border: 1.5px solid var(--pme-ink);
    border-radius: var(--pme-radius);
    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: transform 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    box-shadow: 0 0 0 0 var(--pme-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

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

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

.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-category-pill:focus-visible {
    outline: 2px solid var(--pme-magenta);
    outline-offset: 2px;
}

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

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

.pme-event-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
}

@media (min-width: 640px) {
    .pme-event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
}

@media (min-width: 1024px) {
    .pme-event-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

/* ----- Card -------------------------------------------------- */

.pme-event-item {
    position: relative;
    background: var(--pme-card);
    border: 1.5px solid var(--pme-ink);
    border-radius: var(--pme-radius);
    box-shadow: var(--pme-shadow-rest);
    transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms cubic-bezier(.2,.7,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pme-event-item:hover {
    transform: translate(-3px, -4px);
    box-shadow: var(--pme-shadow-hover);
}

.pme-event-item:focus-within {
    outline: 2px solid var(--pme-magenta);
    outline-offset: 3px;
}

/* Rotate the chromatic accent so a grid of cards reads like a poster wall */
.pme-event-item                       { --pme-accent: var(--pme-magenta); }
.pme-event-item:nth-child(4n+2)       { --pme-accent: var(--pme-cobalt); }
.pme-event-item:nth-child(4n+3)       { --pme-accent: var(--pme-lime); }
.pme-event-item:nth-child(4n+4)       { --pme-accent: var(--pme-tangerine); }

/* ----- Date badge — overlapping the image, clipped corner --- */

.pme-event-date-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    min-width: 4.5rem;
    padding: 0.55rem 1.1rem 0.6rem 0.85rem;
    background: var(--pme-ink);
    color: var(--pme-card);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 0.9;
    /* Diagonal cut on the bottom-right corner */
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.pme-event-date-day {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-variation-settings: "opsz" 144, "wght" 700, "SOFT" 50;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 0.82;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum" 1;
}

.pme-event-date-month {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-top: 0.42rem;
    color: var(--pme-accent);
}

.pme-event-date-range {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-top: 0.22rem;
    color: rgba(255, 254, 250, 0.6);
}

/* ----- Image / Poster Placeholder ---------------------------- */

.pme-event-image,
.pme-event-poster-placeholder {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-bottom: 1.5px solid var(--pme-ink);
    background: var(--pme-paper);
}

.pme-event-image a { display: block; height: 100%; }

.pme-event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms cubic-bezier(.2,.7,.2,1), filter 350ms ease;
}

.pme-event-item:hover .pme-event-image img {
    transform: scale(1.045);
}

/* Poster placeholder when no image — striped pattern in the accent color */
.pme-event-poster-placeholder {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 12px,
            var(--pme-accent) 12px,
            var(--pme-accent) 13px
        ),
        var(--pme-card);
    opacity: 1;
}

/* ----- Content ---------------------------------------------- */

.pme-event-content {
    padding: 1.25rem 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex: 1;
}

.pme-event-content h3,
.pme-event-content .pme-event-title {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "opsz" 96, "wght" 600, "SOFT" 30;
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1.06;
    letter-spacing: -0.015em;
    word-break: break-word;
    hyphens: auto;
}

@media (min-width: 1024px) {
    .pme-event-content h3 { font-size: 1.6rem; }
}

.pme-event-content h3 a {
    color: var(--pme-ink);
    text-decoration: none;
    background-image: linear-gradient(var(--pme-accent), var(--pme-accent));
    background-size: 0 2px;
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 2px);
    padding-bottom: 2px;
    transition: background-size 280ms cubic-bezier(.2,.7,.2,1);
}

.pme-event-content h3 a:hover {
    background-size: 100% 2px;
}

/* ----- Meta lines (mono, ticker style) ----------------------- */

.pme-event-meta {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    line-height: 1.38;
    color: var(--pme-ink-soft);
}

.pme-event-meta p {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.pme-event-meta p::before {
    content: "";
    flex-shrink: 0;
    display: inline-block;
    width: 0.65rem;
    height: 2px;
    background: var(--pme-accent);
    transform: translateY(-0.18rem);
}

.pme-event-meta .pme-event-location {
    color: var(--pme-ink);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.pme-event-meta .pme-event-price {
    font-style: italic;
    font-variation-settings: "slnt" -10;
}

/* ----- Category chips ---------------------------------------- */

.pme-event-content .pme-event-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--pme-line-dashed);
}

.pme-event-content .pme-event-category {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 0.25rem 0.55rem;
    background: var(--pme-paper);
    color: var(--pme-ink);
    border: 1px solid var(--pme-line);
    line-height: 1;
}

/* ----- Empty state ------------------------------------------- */

.pme-event-list-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 80;
    font-weight: 400;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--pme-ink-soft);
    border: 1.5px dashed var(--pme-line-dashed);
    background: var(--pme-card);
    margin: 0;
}

/* ----- Reduced motion --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pme-event-item,
    .pme-event-image img,
    .pme-event-content h3 a,
    .pme-category-pill {
        transition: none !important;
    }
    .pme-event-item:hover {
        transform: none;
    }
    .pme-event-item:hover .pme-event-image img {
        transform: none;
    }
}