/* ═══ EVENT INFO PAGE, SECTION 5: DATES & SHOW TIMES (window 14) ═══════════════
   The table's base rules (.evp-shows, -head, -row, -date, -dow, -time,
   -status) are already in event-page.css, which is the design's own
   event-page.css. This file adds what the prototype's oep.css layers on top of
   them for this section (oep.css 23, 49-51, 93, 100, 112, 115, 145-146), scoped
   to #dates so nothing else on the site moves.

   Ported as drawn, with these changes only:
     - logical properties: the date's bold day keeps its 4px gap on the END
       side, so Arabic mirrors without a second rule;
     - [hidden] restated, because .evp-shows-row's display:grid beats the
       user agent's display:none for the attribute;
     - a row that is a link shows a pointer and a focus ring. The prototype's
       rows are not clickable (cursor: default, no hover fill); Mac's ruling of
       2026-10-12 makes them pick the show, and a link that looks inert is the
       one a visitor never finds. The hover fill stays off, as drawn.
   ═══════════════════════════════════════════════════════════════════════════ */

#dates .evp-shows { margin-top: 0; }
#dates .evp-shows-row[hidden] { display: none; }

#dates .oep-row { cursor: default; }
/* A link keeps the row's own ink: Bootstrap colours every anchor and
   underlines it on hover. Scoped to the ANCHOR, so the sold-out row keeps the
   design's grey (event-page.css .evp-shows-row.is-sold), which a rule on
   every row here would outrank. */
#dates a.oep-row, #dates a.oep-row:hover, #dates a.oep-row:focus { color: var(--eip-ink); text-decoration: none; cursor: pointer; }
#dates a.oep-row:focus { outline: none; }
#dates a.oep-row:focus-visible { outline: 2px solid var(--eip-ink); outline-offset: -2px; }
#dates .oep-row.is-sold { pointer-events: none; }

#dates .evp-shows-date b { margin: 0; margin-inline-end: 4px; }
#dates .evp-shows-status { display: flex; align-items: center; gap: 6px; }
/* "On sale soon" (window 0's ruling, 2026-10-13): oep.css 51 and 100, as
   drawn. The row itself takes the sold-out row's grey, as the prototype gives
   every row that cannot be booked. */
#dates .evp-shows-status.is-soon { color: var(--o5-ink2); }
#dates .evp-shows-status.is-soon .dot { background: var(--o5-ink3); }

/* "Show all N" (oep.css 23, 115 and 145, in that order of precedence) */
#dates .oep-more { display: inline-flex; align-items: center; gap: 6px; height: 44px; margin-top: 20px;
  padding: 0 20px; border: 0; border-radius: var(--eip-r-pill); background: var(--eip-surface-2);
  font-family: var(--o5-display); font-size: 14px; font-weight: 600; line-height: normal;
  color: var(--eip-ink); text-decoration: none; cursor: pointer; }
#dates .oep-more:hover { background: var(--eip-line); }
#dates .oep-more:focus-visible { outline: 2px solid var(--eip-ink); outline-offset: 2px; }
#dates .oep-more .oi { flex: none; display: inline-block; vertical-align: middle; transition: transform .2s; }
#dates .oep-more[aria-expanded="true"] .oi { transform: rotate(180deg); }

@media (max-width: 760px) {
  #dates .evp-shows-head, #dates .evp-shows-row { grid-template-columns: 1.2fr .9fr .8fr 1.3fr;
    gap: 8px; padding: 12px 14px; font-size: 13px; }
}

/* Arabic and Persian lose the head's uppercase tracking (Bible §18). */
[dir="rtl"] #dates .evp-shows-head { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  #dates .oep-more .oi { transition: none; }
}