/* ============================================================
   Tixbox O5 — Events Listing skin
   Scoped under .o5-events-list. Pairs with option5.css + oh-overrides.css.
   Keeps legacy JS hooks (#filter-locations, #event-list, #load-more-button…)
   ============================================================ */

.o5-events-list .oevl-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

/* ---------- Title ---------- */
.o5-events-list .oevl-titleblock {
    margin: 8px 0 28px;
}
.o5-events-list .oevl-titleblock .evp-title {
    font-family: var(--o5-display, "Plus Jakarta Sans", sans-serif);
    font-weight: 800;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--o5-ink, #1a1a1a);
}
.o5-events-list .oevl-sub {
    font-family: var(--o5-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 16px;
    color: var(--o5-ink-soft, #6b6b6b);
    margin: 0;
}

/* ---------- Filter bar ---------- */
.o5-events-list .oevl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    background: var(--o5-surface, #fff);
    border: 1px solid var(--o5-border, #ece7df);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 36px;
    box-shadow: 0 6px 24px rgba(30, 20, 10, 0.05);
}
.o5-events-list .oevl-field {
    position: relative;
    flex: 1 1 200px;
    min-width: 180px;
    display: flex;
    align-items: center;
}
.o5-events-list .oevl-field-ico {
    position: absolute;
    left: 14px;
    display: inline-flex;
    color: var(--o5-ink-soft, #9a8f80);
    pointer-events: none;
    z-index: 2;
}
.o5-events-list .oevl-field select,
.o5-events-list .oevl-field input[type="text"] {
    width: 100%;
    height: 48px;
    border: 1px solid var(--o5-border, #ece7df);
    border-radius: 12px;
    background: var(--o5-surface-2, #faf7f2);
    padding: 0 16px 0 40px;
    font-family: var(--o5-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 15px;
    color: var(--o5-ink, #1a1a1a);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.o5-events-list .oevl-field select:focus,
.o5-events-list .oevl-field input[type="text"]:focus {
    outline: none;
    border-color: var(--o5-brand, #d62133);
    box-shadow: 0 0 0 3px rgba(214, 33, 51, 0.12);
}
.o5-events-list .oevl-filter-btn {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 28px;
    border: none;
    border-radius: 12px;
    background: var(--o5-brand, #d62133);
    color: #fff;
    font-family: var(--o5-sans, "Plus Jakarta Sans", sans-serif);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}
.o5-events-list .oevl-filter-btn:hover { background: #b91b2b; }
.o5-events-list .oevl-filter-btn:active { transform: translateY(1px); }

/* Tame select2 to match, if it enhances the selects */
.o5-events-list .select2-container .select2-selection--single {
    height: 48px !important;
    border: 1px solid var(--o5-border, #ece7df) !important;
    border-radius: 12px !important;
    background: var(--o5-surface-2, #faf7f2) !important;
}
.o5-events-list .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 48px !important;
    padding-left: 40px !important;
    color: var(--o5-ink, #1a1a1a) !important;
}
.o5-events-list .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
}

/* ---------- Card grid ---------- */
.o5-events-list .oevl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
.o5-events-list .oevl-card {
    display: flex;
    flex-direction: column;
    background: var(--o5-surface, #fff);
    border: 1px solid var(--o5-border, #ece7df);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.o5-events-list .oevl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(30, 20, 10, 0.12);
    border-color: var(--o5-border-strong, #e0d8cc);
}
.o5-events-list .oevl-card-media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--o5-surface-2, #f2ede5);
}
.o5-events-list .oevl-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.o5-events-list .oevl-card:hover .oevl-card-img { transform: scale(1.04); }
.o5-events-list .oevl-card-cta {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: var(--o5-brand, #d62133);
    color: #fff;
    font-family: var(--o5-sans, "Plus Jakarta Sans", sans-serif);
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
}
.o5-events-list .oevl-card:hover .oevl-card-cta {
    opacity: 1;
    transform: translateY(0);
}
.o5-events-list .oevl-card-body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.o5-events-list .oevl-card-title {
    font-family: var(--o5-display, "Plus Jakarta Sans", sans-serif);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: var(--o5-ink, #1a1a1a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.o5-events-list .oevl-card-date {
    font-family: var(--o5-mono, "JetBrains Mono", monospace);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--o5-brand, #d62133);
}
.o5-events-list .oevl-card-venue {
    font-family: var(--o5-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 13px;
    color: var(--o5-ink-soft, #7a7167);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Empty state ---------- */
.o5-events-list .oevl-empty {
    text-align: center;
    padding: 64px 20px;
    color: var(--o5-ink-soft, #7a7167);
    font-family: var(--o5-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 17px;
}

/* ---------- Load more ---------- */
.o5-events-list .oevl-loadmore {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}
.o5-events-list .oevl-loadmore-btn {
    display: inline-flex;
    align-items: center;
    height: 50px;
    padding: 0 34px;
    border: 1px solid var(--o5-border-strong, #e0d8cc);
    border-radius: 999px;
    background: var(--o5-surface, #fff);
    color: var(--o5-ink, #1a1a1a);
    font-family: var(--o5-sans, "Plus Jakarta Sans", sans-serif);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.o5-events-list .oevl-loadmore-btn:hover {
    background: var(--o5-surface-2, #faf7f2);
    border-color: var(--o5-brand, #d62133);
    color: var(--o5-brand, #d62133);
}

.o5-events-list .hidden { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .o5-events-list .oevl-wrap { padding: 28px 16px 60px; }
    .o5-events-list .oevl-filters { padding: 12px; gap: 10px; }
    .o5-events-list .oevl-field { flex: 1 1 100%; }
    .o5-events-list .oevl-filter-btn { flex: 1 1 100%; }
    .o5-events-list .oevl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
}

/* THE FORM STOPS BEING A CARD.

   .oevl-filters was the old bar: a flex row inside a bordered, shadowed,
   rounded container. That container IS the .oef-bar2 look -- the joined variant
   -- so leaving it would have put the new separate pills inside the very box
   the design replaces. The <form> itself stays, because it carries the action
   and the two hidden <select>s, but it is now just a block wrapper.

   Declared after the original rule rather than editing it, so the old bar's
   styling remains intact and revertable in one block. */
.o5-events-list .oevl-filters {
  display: block;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
}

/* ══════════════ Filter bar — claude/designs/Old Event Page filter.html/.css ══════════════
   The .oef-bar variant: separate centred pills, each with its own popover. NOT
   .oef-bar2, the joined container with the red Filter button -- that is a
   different design in the same file and porting both would leave a dead
   ruleset that reads as live.

   Values are the design's, unchanged. Scoped under .o5-events-list to match the
   convention already in this file; no oef- class existed anywhere in the repo
   before this, so nothing collides. */
/* LEFT, NOT CENTRED. The design centres the bar, but it centres a page whose
   heading is centred too. Here "Upcoming Events" and the card grid are both
   left-aligned to .o5-section-inner, and a centred bar between them reads as
   misaligned rather than as a deliberate contrast. flex-start puts all three
   on the same left edge. */
.o5-events-list .oef-bar {
  display: flex; gap: 14px; justify-content: flex-start;
  margin-bottom: 44px; position: relative;
}
.o5-events-list .oef-filter { position: relative; }
.o5-events-list .oef-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  border: 1px solid var(--o5-line); background: var(--o5-surface);
  font-family: var(--o5-display); font-size: 15px; font-weight: 700;
  color: var(--o5-ink); cursor: pointer;
}
.o5-events-list .oef-trigger svg { flex: none; }
.o5-events-list .oef-trigger .ic { color: var(--o5-ink2); }
.o5-events-list .oef-trigger .caret { color: var(--o5-ink2); transition: transform .18s; }
/* ── A PILL THAT IS FILTERING LOOKS DIFFERENT FROM ONE THAT IS NOT ──

   The design has .is-open, for the moment the popover is showing, and nothing
   for "this filter is applied". So a visitor who chose Doha and got a reloaded
   page had no indication anything was filtering -- the pill still read "All
   Locations" and looked identical to the untouched ones.

   Deliberately quiet: the ink border and weight say "set" without competing
   with the red CTA or turning the bar into four highlighted buttons when
   several filters are on. It reads at a glance next to an inactive pill, which
   is the only comparison that matters here.

   Kept distinct from .is-open's blue, so a pill that is BOTH open and applied
   still shows the open state -- the rule below wins by order. */
.o5-events-list .oef-filter.is-active .oef-trigger {
  border-color: var(--o5-ink);
  color: var(--o5-ink);
  font-weight: 800;
}
.o5-events-list .oef-filter.is-active .oef-trigger .ic { color: var(--o5-ink); }

.o5-events-list .oef-filter.is-open .oef-trigger { border-color: #2f6bff; }
.o5-events-list .oef-filter.is-open .caret { transform: rotate(180deg); }

.o5-events-list .oef-pop {
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 260px; background: var(--o5-surface);
  border-radius: 18px; box-shadow: 0 26px 50px -16px rgba(0,0,0,.3);
  padding: 8px; z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.o5-events-list .oef-filter.is-open .oef-pop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.o5-events-list .oef-pop ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 320px; overflow-y: auto;
}
.o5-events-list .oef-pop li {
  padding: 16px 18px; border-radius: 12px;
  font-family: var(--o5-display); font-size: 16px; font-weight: 700;
  color: var(--o5-ink); cursor: pointer;
  transition: background .12s, color .12s;
}
.o5-events-list .oef-pop li:hover { background: var(--o5-surface-2); }
/* The empty state: a muted, non-clickable line, so the pill explains itself
   rather than opening onto nothing. Adapted from the design's .oef-empty, which
   is sized for an empty card grid rather than a popover. "All Locations" stays
   above it -- it is the current state, and removing it would leave the popover
   with nothing but an apology. */
.o5-events-list .oef-pop li.empty,
.o5-events-list .oef-pop li.empty:hover {
  background: none; color: var(--o5-ink2); cursor: default;
  font-weight: 400; font-size: 14px;
}
.o5-events-list .oef-pop li.is-on { background: var(--o5-ink); color: #fff; }

/* THE LAST PILL OPENS LEFTWARDS -- and today that rule matches nothing, which is
   worth saying rather than leaving it to look active.

   The design pins every popover to left:0 with a 260px minimum, so the rightmost
   one can pass the container edge on a narrow desktop. But the last child of
   .oef-bar is the DATE pill, and the date pill has no popover -- it is the
   picker's own input. The last pill that has one is Category, which was measured
   at 380/720/1024/1440 and clears the viewport at every width.

   Kept because step 3 adds the Sort pill after the date one, and Sort does have
   a popover -- at which point this starts doing the job it is written for. */
.o5-events-list .oef-filter:last-child .oef-pop { left: auto; right: 0; }

/* THE DATE PILL IS THE INPUT ITSELF. jquery.daterangepicker anchors its own
   calendar to the element it is attached to, so replacing #filter-daterange
   with a button would leave the picker nothing to position against. It keeps
   its id, name, value and readonly, and wears the pill instead. The icon and
   caret sit over it, which is why the padding is asymmetric. Step 2 replaces
   the picker with the design's calendar; the input stays either way, because it
   is what carries dateRange to the server. */
/* The date pill is now an ordinary .oef-trigger button like the other two --
   the calendar replaced the input it used to wrap, so the absolute icon/caret
   positioning that input needed is gone with it. */

/* THE NATIVE SELECTS STAY IN THE DOM. events-list.js reads
   $("#filter-locations").find('option:selected').val() directly, and they are
   what the GET carries to the server. The pills write into them; they are not
   replaced by them. Visually hidden rather than display:none, so the value is
   still readable and the control still focusable by assistive tech. */
.o5-events-list .oef-native {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════ Date calendar (step 2) ══════════════
   Ported from the same design file. The design's JS is mock -- hardcoded
   eventDates, a fixed December 2026, and client-side filtering of pre-rendered
   cards -- so only the markup and these rules come across. The behaviour is
   written against the real server-side filter and the new /events/event-days
   endpoint.

   .has-event is the green day. It means "this date will return results under
   the filters currently set", not "some event exists somewhere" -- see
   EventService.getEventDaysInRange. */
.o5-events-list .oef-cal {width:300px;padding:14px}
.o5-events-list .oef-cal-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.o5-events-list .oef-cal-head button {background:none;border:0;cursor:pointer;color:var(--o5-ink2);padding:4px;border-radius:8px}
.o5-events-list .oef-cal-head button:hover {background:var(--o5-surface-2)}
.o5-events-list .oef-cal-head span {font-family:var(--o5-display);font-size:14px;font-weight:800;color:var(--o5-ink)}
.o5-events-list .oef-cal-grid {display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.o5-events-list .oef-cal-grid .dow {font-family:var(--o5-display);font-size:10.5px;font-weight:800;color:var(--o5-ink3);text-align:center;padding:4px 0}
.o5-events-list .oef-cal-grid button {position:relative;aspect-ratio:1;border:0;background:none;border-radius:50%;font-family:var(--o5-display);font-size:13px;font-weight:600;color:var(--o5-ink);cursor:pointer}
.o5-events-list .oef-cal-grid button:disabled {color:var(--o5-ink3);cursor:default}
.o5-events-list .oef-cal-grid button:hover:not(:disabled) {background:var(--o5-surface-2)}
.o5-events-list .oef-cal-foot {margin-top:10px;padding-top:10px;border-top:1px solid var(--o5-line)}
.o5-events-list .oef-cal-foot button {width:100%;padding:10px;border-radius:10px;border:0;background:var(--o5-surface-2);font-family:var(--o5-display);font-size:13.5px;font-weight:800;color:var(--o5-ink);cursor:pointer}
.o5-events-list .oef-cal-foot button:hover {background:var(--o5-line)}
.o5-events-list .oef-cal-grid button.has-event {color:#16a34a;font-weight:800}
.o5-events-list .oef-cal-grid button.is-on {background:var(--o5-red,#d62133);color:#fff}
.o5-events-list .oef-cal-grid button.is-on::after {background:#fff}

/* The picker replaces jquery.daterangepicker, so the popover needs the width
   the calendar grid assumes; .oef-pop's 260px minimum is narrower than the
   design's 300px calendar. */
.o5-events-list .oef-filter-date .oef-pop { min-width: 300px; }

/* WRAP, NEVER SCROLL. Four pills need ~600-700px and a phone has 380. The
   instinctive fix is a horizontally scrolling strip -- and overflow-x:auto
   creates a clipping context, which would clip every popover the moment it
   opened. Two centred rows instead: a declared layout rather than an accident.
   720px matches the breakpoint purchase-o5.css already uses. */
@media (max-width: 720px) {
  /* Wrapped rows stay left-aligned too, so a short second row sits under the
     start of the first rather than floating in the middle of it. */
  .o5-events-list .oef-bar { flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin-bottom: 28px; }
  .o5-events-list .oef-trigger { padding: 12px 18px; font-size: 14px; }
  /* Wrapped rows make "last child" the wrong pill to flip, and a popover that
     is 260px wide on a 380px screen has nowhere useful to go anyway. Centre it
     on the pill and let it use the width it has. */
  .o5-events-list .oef-filter .oef-pop { left: 0; right: auto; min-width: 0; width: max-content; max-width: 86vw; }
  .o5-events-list .oef-filter:last-child .oef-pop { left: auto; right: 0; }
}

/* BELOW 480 THE PILLS GO FULL WIDTH, ONE PER ROW.

   Measured: the three pills are 183, 191 and 247px wide with English labels. Two
   fit per row down to about 440px and no further, so between 440 and 320 the bar
   wraps to THREE rows of three different widths, centred -- ragged rather than
   laid out. Nothing overflows; it just looks unconsidered.

   Full width instead of a tighter breakpoint, because pill width follows the
   TRANSLATED label. "All Dates" is 9 characters and "Ολες οι ημερομηνίες" is 19,
   so any px figure tuned against English is wrong in Greek and Turkish. One
   column has no such dependency: a longer label makes a pill taller at worst,
   never misaligned.

   The 480-720 band keeps the centred two-up wrap. */
@media (max-width: 480px) {
  .o5-events-list .oef-bar { flex-direction: column; align-items: stretch; }
  .o5-events-list .oef-filter,
  .o5-events-list .oef-filter-date { width: 100%; }
  .o5-events-list .oef-trigger { width: 100%; justify-content: flex-start; }
  /* Stacked, every pill is full width, so a popover pinned to either edge is
     the same thing. Left, and let it use the pill's width. */
  .o5-events-list .oef-filter .oef-pop,
  .o5-events-list .oef-filter:last-child .oef-pop { left: 0; right: auto; width: 100%; max-width: none; }
  .o5-events-list .oef-trigger .caret { margin-left: auto; }
}