/* ==========================================================================
   urb-events.css — programme page + event single (page-sheet slot: loads
   after urb-front, before urb-fixes, programme/single only).
   Owner: the design reviewer. Styles the Phase 5 contract §4.2 (32 classes).
   Specificity rule in force: anything on <a>/<h2>/<h3> that must recolour or
   resize carries the body.theme--urb prefix (base rules are (0,1,1)).
   2026-08-16.
   ========================================================================== */

/* ---- programme: filters ---------------------------------------------------- */
.urb-filters { margin-bottom: 44px; }
.urb-filters__group { margin-bottom: 18px; }
body.theme--urb .urb-filters__label {
  font-family: var(--urb-font-tech);
  font-size: 11.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--urb-grey);
  margin: 0 0 10px;
}
/* prefixed: the base `body.theme--urb ul` rule (0,1,1) beats a bare reset and
   was indenting the chips away from their own label — see urb-components.css */
body.theme--urb .urb-filters__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
/* Bordered stamp boxes (Arnas, 2026-08-16: "better recognised that way",
   after malmodanceweek.se). Replaces the v0.6.3 underline bar — a filter you
   can hit is a control, and a control on this site is a stamp: square, 2px,
   never a hairline. The active chip fills, the way Malmö's does. */
body.theme--urb .urb-filters__link {
  display: inline-block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 12.5px;
  line-height: 1;
  color: var(--urb-ink);
  background: transparent;
  padding: 12px 16px;
  border: var(--urb-border-bold) solid var(--urb-line-strong);
  box-shadow: none;
  transition: background-color .15s, color .15s, border-color .15s, transform .05s;
}
body.theme--urb .urb-filters__link:hover {
  color: var(--urb-purple);
  border-color: var(--urb-purple);
}
body.theme--urb .urb-filters__link:active { transform: translate(1px, 2px); } /* the stamp press */
body.theme--urb .urb-filters__link.is-active,
body.theme--urb .urb-filters__link[aria-current="true"] {
  background: var(--urb-purple);
  border-color: var(--urb-purple);
  color: #fff;
}
body.theme--urb .urb-filters__link.is-active:hover,
body.theme--urb .urb-filters__link[aria-current="true"]:hover {
  background: var(--urb-purple-deep);
  border-color: var(--urb-purple-deep);
  color: #fff;
}

/* ---- client-side filtering (P6.7 progressive enhancement) -------------------
   The JS layer hides rows in place instead of reloading the page. It toggles
   `.is-hidden` — the same convention whatajazz's waj-events.js already uses,
   so the two sites stay readable to the same pair of eyes.
   These selectors are deliberately two- and three-class: `.urb-ev` sets
   `display: grid`, which would beat a bare `.is-hidden` (and would beat the
   `hidden` ATTRIBUTE too — that is why the contract uses a class, not `hidden`).
   Harmless before the JS ships: nothing carries the class yet. */
.urb-prog__list .urb-ev.is-hidden,
.urb-prog__day.is-hidden,
.urb-program .urb-band__empty.is-hidden { display: none; }

/* ---- programme: day groups -------------------------------------------------- */
.urb-prog__day { margin-bottom: 56px; }
.urb-prog__day:last-child { margin-bottom: 0; }
body.theme--urb .urb-prog__day-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--urb-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--urb-purple);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--urb-purple); /* bold line, not hairline */
}
.urb-prog__day-title .urb-bars { flex: none; }
body.theme--urb .urb-prog__list { list-style: none; margin: 0; padding: 0; }

/* ---- one programme row ------------------------------------------------------ */
.urb-ev {
  display: grid;
  grid-template-columns: 128px 1fr auto auto;
  gap: 8px 22px;
  align-items: center;
  background: var(--urb-white);
  border: 1px solid var(--urb-line);
  border-top: none;
  padding: 18px 22px;
  min-width: 0;
}
/* A row with a thumbnail has FIVE children, and four columns silently pushed
   the CTA onto a second implicit row — measured on live v0.6.2: the CTA landed
   at column 1, row height 215px against ~96px for an unthumbed row. The
   template flags the case with .urb-ev--has-thumb so the grid can grow. */
.urb-ev--has-thumb { grid-template-columns: 96px 128px 1fr auto auto; }
.urb-ev__thumb {
  display: block;
  width: 96px; height: 96px;
  overflow: hidden;
  background: var(--urb-paper);
}
/* `body.theme--urb img { height: auto }` is (0,1,1) and beats a bare class —
   the square crop needs the prefix to survive (scar #1). */
body.theme--urb .urb-ev__thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .2s;
}
.urb-ev__thumb:hover .urb-ev__thumb-img { transform: scale(1.04); }

.urb-prog__list .urb-ev:first-child { border-top: 1px solid var(--urb-line); }

body.theme--urb .urb-ev__time {
  font-family: var(--urb-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .02em;
  color: var(--urb-purple);
  text-transform: none;
  margin: 0;
}
.urb-ev__body { min-width: 0; }
.urb-ev__title { font-size: 17px; margin: 0 0 3px; line-height: 1.25; }
body.theme--urb .urb-ev__title a { color: var(--urb-ink); }
body.theme--urb .urb-ev__title a:hover { color: var(--urb-purple); }
.urb-ev__meta { margin: 0; }

.urb-ev__type {
  font-family: var(--urb-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10.5px;
  color: var(--urb-purple);
  background: rgba(102, 43, 130, .08);
  border: 1px solid var(--urb-line-p, rgba(102, 43, 130, .28));
  padding: 5px 10px;
  margin: 0;
  white-space: nowrap;
}
.urb-ev__cta { margin: 0; white-space: nowrap; }

/* rows stack on narrow screens */
@media (max-width: 760px) {
  .urb-ev {
    grid-template-columns: 1fr auto;
    grid-template-areas: "time type" "body body" "cta cta";
    row-gap: 6px;
  }
  .urb-ev__time { grid-area: time; }
  .urb-ev__type { grid-area: type; justify-self: end; }
  .urb-ev__body { grid-area: body; }
  .urb-ev__cta { grid-area: cta; }

  /* the thumb keeps its own column and the text wraps beside it; the CTA runs
     full width underneath, where a thumb-sized indent would just look broken */
  .urb-ev--has-thumb {
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "thumb time type"
      "thumb body body"
      "cta   cta  cta";
    column-gap: 16px;
  }
  .urb-ev--has-thumb .urb-ev__thumb {
    grid-area: thumb;
    align-self: start;
    width: 64px; height: 64px;
  }
}

/* subscribe + optional prose below the listing */
.urb-program__subscribe { margin-top: 44px; }
.urb-program__prose { margin-top: 44px; max-width: 72ch; }

/* ---- event single ----------------------------------------------------------- */
.urb-event__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  gap: 22px 48px;
  margin: 0 0 34px;
  padding: 22px 24px;
  background: var(--urb-white);
  border: 1px solid var(--urb-line);
}
.urb-event__fact { min-width: 0; }
.urb-event__fact-label {
  font-family: var(--urb-font-tech);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--urb-grey);
  margin: 0 0 4px;
}
.urb-event__fact-value {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--urb-ink);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--urb-font-ui);
}
.urb-event__body { max-width: 72ch; }
.urb-event__actions {
  display: flex; align-items: center; gap: 20px 30px; flex-wrap: wrap;
  margin: 40px 0 0;
}

/* PREFIXED — and this is why. `.urb-event__back` is a <p>, so the bare class at
   (0,1,0) lost its margin-top to urb-main.css's `body.theme--urb p { margin: 0 0 1em }`
   at (0,1,1). The 34px never applied; the link sat 1em under the calendar button's
   own 12px padding, which is exactly the crowding Arnas reported (2026-08-20).
   Seventh instance of this scar. */
body.theme--urb .urb-event__back { margin: 44px 0 0; }

/* Phone: one control per row, and the primary CTA full width — three targets
   side by side at 390px leaves nothing a thumb can hit confidently. */
@media (max-width: 640px) {
  .urb-event__actions { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 34px; }
  .urb-event__actions > .urb-btn { width: 100%; text-align: center; }
  body.theme--urb .urb-event__back { margin-top: 34px; }
}

/* ---- add to calendar (a <details>, zero JS) --------------------------------- */
.urb-cal { position: relative; display: inline-block; }
.urb-cal__btn {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 13px;
  color: var(--urb-purple);
  padding: 12px 0;
  list-style: none; /* kill the disclosure triangle… */
}
.urb-cal__btn::-webkit-details-marker { display: none; } /* …and in WebKit */
.urb-cal__icon { width: 20px; height: 20px; flex: none; }
.urb-cal[open] .urb-cal__btn { color: var(--urb-purple-deep); }
.urb-cal__menu {
  position: absolute; z-index: 20; top: 100%; left: 0;
  min-width: 240px;
  background: var(--urb-white);
  border: 2px solid var(--urb-purple); /* bold border — stamp voice */
  padding: 6px 0;
}
body.theme--urb .urb-cal__item {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--urb-ink);
  padding: 10px 16px;
}
body.theme--urb .urb-cal__item:hover { background: var(--urb-purple); color: #fff; }

/* the programme's subscribe variant opens upward-safe: keep menu in flow */
.urb-cal--subscribe .urb-cal__menu { position: static; display: inline-block; margin-top: 4px; }

/* landscape phones: rows compact (gate on height, never width alone) */
@media (max-width: 960px) and (max-height: 520px) {
  .urb-ev { padding: 12px 16px; }
  body.theme--urb .urb-ev__time { font-size: 18px; }
  body.theme--urb .urb-prog__day-title { font-size: 20px; }
  /* chips shrink but keep a 44px-ish hit target height on a short screen */
  body.theme--urb .urb-filters__link { padding: 10px 13px; font-size: 11.5px; }
  .urb-filters { margin-bottom: 28px; }
  .urb-filters__group { margin-bottom: 12px; }
}
/* …and only where the row is still a single line. Below 761px the stacked
   area map above owns the layout, and re-declaring columns here would fight
   grid-template-areas on a small landscape phone (667×375 is the real case). */
@media (min-width: 761px) and (max-width: 960px) and (max-height: 520px) {
  .urb-ev--has-thumb { grid-template-columns: 72px 96px 1fr auto auto; column-gap: 16px; }
  .urb-ev--has-thumb .urb-ev__thumb { width: 72px; height: 72px; }
}