/* ============================================================
   PME Highlights — full-bleed image carousel with overlay.
   Background image (or striped placeholder), foreground name/
   date/location, peeking neighbours, drag/scroll + auto-rotate.
   Editorial Pride Zine vocabulary.
   ============================================================ */

.pme-highlights {
    --pme-paper:    #FAF6EC;
    --pme-ink:      #1A0F1F;
    --pme-magenta:  #FF2D7E;
    --pme-cobalt:   #0040FF;
    --pme-lime:     #B8FF00;
    --pme-tangerine:#FF6B35;

    --pme-slide-radius: 0;
    --pme-gap: 1.25rem;

    position: relative;
    box-sizing: border-box;
    /* Stay within the host container (Divi column/row, sidebar, etc.) instead
       of assuming a full-bleed context. */
    width: 100%;
    max-width: 100%;
    /* Allow shrinking when placed inside a flex parent (Divi rows are flex). */
    min-width: 0;
    font-family: "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif;
    color: #fff;
    -webkit-font-smoothing: antialiased;
}

.pme-highlights *,
.pme-highlights *::before,
.pme-highlights *::after {
    box-sizing: border-box;
}

/* ----- Viewport: native horizontal scroll (trackpad/touch) ------- */

.pme-highlights-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;                      /* shrink inside flex containers */
    max-width: 100%;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;          /* old Edge */
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    outline: none;
}
.pme-highlights-viewport::-webkit-scrollbar { display: none; }
.pme-highlights-viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.pme-highlights-viewport:focus-visible { outline: 2px solid var(--pme-magenta); outline-offset: 3px; }

/* ----- Track ----------------------------------------------------- */

.pme-highlights-track {
    display: flex;
    gap: var(--pme-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pme-highlights-slide-wrapper {
    /* Peeking: a slide is narrower than the viewport so the next one
       is always partially visible (incl. the wrap-around first slide). */
    flex: 0 0 82%;
    margin: 0;
}

@media (min-width: 640px) {
    .pme-highlights-slide-wrapper { flex-basis: 58%; }
}
@media (min-width: 1024px) {
    .pme-highlights-slide-wrapper { flex-basis: 40%; }
}

/* ----- Slide ----------------------------------------------------- */

.pme-highlight-slide {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 3 / 4;
    max-height: 30rem;
    min-height: 18rem;
    border: 1.5px solid var(--pme-ink);
    border-radius: var(--pme-slide-radius);
    background-color: var(--pme-paper);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 4px 4px 0 0 var(--pme-ink);
    transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms cubic-bezier(.2,.7,.2,1);
}

@media (min-width: 640px) {
    .pme-highlight-slide { aspect-ratio: 4 / 3; }
}

.pme-highlight-slide:hover,
.pme-highlight-slide:focus-visible {
    transform: translate(-3px, -4px);
    box-shadow: 8px 8px 0 0 var(--pme-ink);
    outline: none;
}

/* Striped poster placeholder when no image — accent rotates per slide. */
.pme-highlights-slide-wrapper:nth-child(4n+1) .pme-highlight-slide--placeholder { --pme-accent: var(--pme-magenta); }
.pme-highlights-slide-wrapper:nth-child(4n+2) .pme-highlight-slide--placeholder { --pme-accent: var(--pme-cobalt); }
.pme-highlights-slide-wrapper:nth-child(4n+3) .pme-highlight-slide--placeholder { --pme-accent: var(--pme-lime); }
.pme-highlights-slide-wrapper:nth-child(4n+4) .pme-highlight-slide--placeholder { --pme-accent: var(--pme-tangerine); }

.pme-highlight-slide--placeholder {
    background-image:
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 16px,
            var(--pme-accent, var(--pme-magenta)) 16px,
            var(--pme-accent, var(--pme-magenta)) 18px
        );
}

/* ----- Scrim: keeps overlay text legible over any image ---------- */

.pme-highlight-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(26, 15, 31, 0.88) 0%,
        rgba(26, 15, 31, 0.55) 32%,
        rgba(26, 15, 31, 0.10) 62%,
        rgba(26, 15, 31, 0) 100%
    );
    pointer-events: none;
}

/* ----- Foreground overlay (name / date / location) -------------- */

.pme-highlight-overlay {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.25rem 1.4rem 1.4rem;
    width: 100%;
}

.pme-highlight-title {
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 40;
    font-weight: 600;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: #fff;
    text-wrap: balance;
    /* Clamp to keep tall titles from swallowing the slide */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pme-highlight-date,
.pme-highlight-location {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.pme-highlight-date::before {
    content: "";
    flex: 0 0 auto;
    width: 0.7rem;
    height: 2px;
    background: var(--pme-magenta);
    transform: translateY(-0.18rem);
}
.pme-highlight-location::before {
    content: "";
    flex: 0 0 auto;
    width: 0.7rem;
    height: 2px;
    background: var(--pme-lime);
    transform: translateY(-0.18rem);
}

/* ----- Arrows ---------------------------------------------------- */

.pme-highlights-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1.5px solid var(--pme-ink);
    background: var(--pme-paper);
    color: var(--pme-ink);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 3px 3px 0 0 var(--pme-ink);
    transition: transform 140ms ease, background-color 140ms ease, color 140ms ease;
}

/* Arrows overlay the slide edges (non-negative offsets) so a host container
   with overflow:hidden — like a Divi column — never clips them. */
.pme-highlights-arrow--prev { left: 0.5rem; }
.pme-highlights-arrow--next { right: 0.5rem; }

.pme-highlights-arrow:hover,
.pme-highlights-arrow:focus-visible {
    background: var(--pme-magenta);
    color: #fff;
    outline: none;
    transform: translateY(-50%) translate(-1px, -1px);
}

@media (min-width: 1024px) {
    .pme-highlights-arrow--prev { left: 0.75rem; }
    .pme-highlights-arrow--next { right: 0.75rem; }
}

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

.pme-highlights-empty {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    color: var(--pme-ink);
}

/* ----- Reduced motion: no transform animation -------------------- */

@media (prefers-reduced-motion: reduce) {
    .pme-highlight-slide,
    .pme-highlights-arrow {
        transition: none !important;
    }
    .pme-highlight-slide:hover { transform: none; }
}