/* =====================================================================
   BROWSING OPEN PLAYS
   =====================================================================
   The public listing and the single-session page behind it.

   These lived in shell.css, which only the signed-in dashboard loads — so
   /open-plays could only be rendered inside the dashboard chrome, even
   though anyone may read it and most people arriving at it are not signed
   in at all. Their own file, loaded by the public layout, is what lets the
   page be what it is.
   ===================================================================== */

/* ---- the page ------------------------------------------------------- */
/* Same width as the site header and footer, so the listing sits in the
   same column as the rest of the public site rather than bleeding to the
   window edge. */
.discover {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px 20px 48px;
}

/* ---- hero ------------------------------------------------------------ */
/* No photograph: the app stores none, and a stock image of somebody
   else's court is a promise this page cannot keep. Court lines drawn in
   CSS over the brand navy give the same banner shape honestly. */
.discover .hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background:
    /* The far end was #123A63 -- a navy left over from the old palette,
       which is why this banner still read blue after the rebrand. The
       logo's third colour is teal, so the light falls to a deep teal and
       the banner joins the rest of the app. */
    linear-gradient(105deg, var(--brand-deep) 0%, var(--brand) 52%, var(--accent) 100%);
  color: var(--on-brand);
  padding: 34px 34px 36px;
}
.discover .hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .17;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), rgba(255,255,255,.9) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255,255,255,.55) 50%, transparent calc(50% + 1px)),
    radial-gradient(circle at 84% 26%, var(--action) 0 9px, transparent 10px);
}
.discover .hero > * { position: relative; z-index: 1; }
.discover .hero h1 { margin: 0; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08; letter-spacing: -.02em; color: var(--on-brand); }
.discover .hero p { margin: 10px 0 0; max-width: 46ch; font-size: 15px; opacity: .82; }

/* ---- filter bar ------------------------------------------------------ */
.discover .filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow);
  padding: 12px; margin: -26px 18px 0; position: relative; z-index: 2;
}
.discover .filters .fld { position: relative; flex: 1 1 190px; min-width: 0; }
.discover .filters select, .discover .filters input {
  width: 100%; appearance: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 30px 10px 34px; font: inherit; font-size: 13.5px; color: var(--text);
}
.discover .filters select:focus, .discover .filters input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.discover .filters .fld > .ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none; display: grid; place-items: center;
}
.discover .filters .clear { background: none; color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 10px 6px; }
.discover .filters .clear:hover { color: var(--text); }

/* ---- section heading ------------------------------------------------- */
.discover .sec-head { display: flex; align-items: baseline; gap: 12px; margin: 26px 2px 14px; }
.discover .sec-head h2 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.discover .sec-head .right { margin-left: auto; font-size: 13px; color: var(--text-muted); }

/* ---- session cards --------------------------------------------------- */
.discover .scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }

.discover .scard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.discover .scard:hover { box-shadow: var(--shadow-lift); }

/* The cover. A photo when the organiser has uploaded one, otherwise a
   court drawn in CSS — tinted per session so a grid of cards does not
   read as one repeated image. */
.discover .cover { position: relative; height: 132px; background: var(--brand); overflow: hidden; }
.discover .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.discover .cover.drawn::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), rgba(255,255,255,.85) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255,255,255,.45) 50%, transparent calc(50% + 1px)),
    linear-gradient(160deg, rgba(255,255,255,.10), transparent 60%);
  opacity: .5;
}
/* A date is not an event. Lime is this app's colour for "happening now",
   and spending it on "22 Sep" left the two badges on a card saying
   different things in the same voice. A date is quiet, on the same dark
   pill the in-play count uses; only a night that has begun gets lime. */
.discover .cover .when {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: rgba(0,0,0,.42); color: #fff; backdrop-filter: blur(3px);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-full);
}
.discover .cover .when-live {
  background: var(--action); color: var(--on-action);
  font-weight: 800; letter-spacing: .06em; backdrop-filter: none;
}
.discover .cover .live-now {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.42); color: #fff; backdrop-filter: blur(3px);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-full);
}
.discover .cover .live-now i { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--action); }

/* The host, as a byline along the bottom of the picture.
   Same dark scrim and blur as the "in play" chip above it, because the
   cover is a photograph the organiser chose and neither white nor dark
   text can be relied on over it. Bottom-left was the one free corner: the
   date sits top-left and the live count top-right. */
.discover .cover .hostby {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: calc(100% - 24px);
  background: rgba(0,0,0,.42); color: #fff; backdrop-filter: blur(3px);
  padding: 3px 11px 3px 3px; border-radius: var(--r-full);
}
/* Sized here rather than with avatar-xs, which lives in board.css and is
   not loaded on the public pages. */
.discover .cover .hostby .avatar {
  width: 22px; height: 22px; font-size: 9px;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.35);
}
.discover .cover .hostby b {
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The byline is an anchor now -- it opens the organiser's page -- so it
   needs the underline taken off and something to say it is clickable. */
a.hostby { text-decoration: none; transition: background .15s ease; }
a.hostby:hover { background: rgba(0,0,0,.62); }

.discover .scard-body { padding: 14px 16px 0; flex: 1; }
.discover .scard-body h3 { margin: 0 0 7px; font-size: 16.5px; letter-spacing: -.01em; }
.discover .place { display: flex; gap: 7px; font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.discover .place .ico { color: var(--text-faint); flex: none; margin-top: 1px; }
.discover .place b { display: block; font-weight: 600; color: var(--text); }

.discover .facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 14px; }
.discover .fact { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.discover .fact .ico { color: var(--text-faint); flex: none; }
.discover .fact b { color: var(--text); font-weight: 600; }

.discover .scard-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 14px; border-top: 1px solid var(--border);
}

/* ---- skill badge ----------------------------------------------------- */
.discover .skill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-full);
}
.discover .skill-all { background: var(--skill-all-soft);  color: var(--skill-all-ink); }
.discover .skill-beginner { background: var(--skill-beg-soft);  color: var(--skill-beg-ink); }
.discover .skill-intermediate { background: var(--skill-int-soft);  color: var(--skill-int-ink); }
.discover .skill-advanced { background: var(--skill-adv-soft);  color: var(--skill-adv-ink); }

/* ---- the card's call to action --------------------------------------- */
.discover .join {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: var(--on-brand);
  border-radius: var(--r-sm); padding: 9px 14px;
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.discover .join:hover { background: var(--brand-deep); }
.discover .join svg { transition: transform .15s ease; }
.discover .join:hover svg { transform: translateX(2px); }

/* ---- empty state ----------------------------------------------------- */
.discover .nothing {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 56px 24px; text-align: center;
}
.discover .nothing .art { color: var(--border-strong); margin-bottom: 14px; }
.discover .nothing h3 { margin: 0 0 6px; font-size: 17px; }
.discover .nothing p { margin: 0 auto 18px; max-width: 40ch; color: var(--text-muted); font-size: 14px; }

/* ---- one session, before you commit to it ---------------------------- */
.discover .back {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-muted); text-decoration: none;
  font-size: 13.5px; font-weight: 600; margin-bottom: 14px;
}
.discover .back:hover { color: var(--text); }

.discover .detail {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow);
}
.discover .detail-cover { height: 260px; }

/* Description left, decision right — and the decision stays put while the
   house rules are read. */
.discover .detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; padding: 24px 26px 28px; }
.discover .detail-main h1 { margin: 0 0 12px; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; }

.discover .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.discover .about { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 18px; }
.discover .about h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: 15px; letter-spacing: .01em;
}
.discover .about p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }

.discover .detail-cta { position: sticky; top: 20px; }
.discover .cta-card {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px;
}
.discover .cta-note { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.discover .cta-note:last-of-type { margin: 12px 0 0; }
.discover .btn-block { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; }
.discover .join-big { background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-size: 14.5px; padding: 13px 18px; }
.discover .join-big:hover { background: var(--brand-deep); border-color: var(--brand-deep); }

.discover .cta-code {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 10px;
}
.discover .cta-code span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.discover .cta-code b { margin-left: auto; font-family: var(--mono); font-size: 16px; letter-spacing: .22em; }

@media (max-width: 900px) {
  .discover .detail-cover { height: 180px; }
  .discover .detail-body { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px 18px 24px; }
  .discover .detail-cta { position: static; }
}


/* Narrow screens: the two rules the rail block was carrying. */
@media (max-width: 900px) {
  .discover .filters { margin: -18px 8px 0; }
  .discover .hero { padding: 26px 22px 30px; }
}

/* ---- an organiser's own page ---------------------------------------- */
/* One card carries the banner, the person and their record, so the page
   opens with a single object instead of three stacked strips. */
.discover .org-head {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow);
  margin-bottom: 22px;
}

/* Shorter than it was. A banner earns its height when it is a photograph
   of the place; at 168px of flat colour it was just a gap with a gradient
   in it. */
.discover .org-cover { height: 150px; background: var(--brand); position: relative; overflow: hidden; }
.discover .org-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.discover .org-cover.drawn::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), rgba(255,255,255,.85) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255,255,255,.45) 50%, transparent calc(50% + 1px)),
    linear-gradient(to right, transparent calc(18% - 1px), rgba(255,255,255,.30) 18%, transparent calc(18% + 1px)),
    linear-gradient(to right, transparent calc(82% - 1px), rgba(255,255,255,.30) 82%, transparent calc(82% + 1px)),
    linear-gradient(160deg, rgba(255,255,255,.12), transparent 62%);
  opacity: .6;
}

/* position + z-index is not decoration here: without a stacking context
   the banner painted over the top third of the face, which is why the
   disc looked sliced off. */
.discover .org-id {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 0 22px 16px; margin-top: -15px;
}
.discover .org-face {
  width: 84px; height: 84px; font-size: 29px; flex: none;
  box-shadow: 0 0 0 4px var(--surface);
}
.discover .org-who { min-width: 0; flex: 1 1 240px; padding-bottom: 2px; }
.discover .org-who h1 { margin: 0; font-size: clamp(23px, 3vw, 31px); letter-spacing: -.022em; }
.discover .org-since { margin: 3px 0 0; font-size: 13.5px; color: var(--text-muted); }

/* Beside the name rather than adrift on the page below it. */
.discover .org-contact { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 2px; }
.discover .org-link {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 7px 13px; font-size: 13px; font-weight: 600;
  color: var(--text); text-decoration: none; max-width: 260px;
}
.discover .org-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discover .org-link:hover { border-color: var(--border-strong); background: var(--surface-alt); }
.discover .org-link .ico { color: var(--text-faint); flex: none; }

/* The record. Divided rather than boxed: four separate tiles inside a
   card is a box in a box, which is the thing this page had too much of. */
.discover .org-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--border); background: var(--surface-alt);
}
.discover .org-stat { padding: 14px 22px; border-left: 1px solid var(--border); }
.discover .org-stat:first-child { border-left: 0; }
.discover .org-stat .n {
  font-family: var(--display); font-weight: 800; font-size: 26px;
  letter-spacing: -.03em; line-height: 1; display: block;
}
.discover .org-stat .k { font-size: 13px; font-weight: 700; display: block; margin-top: 3px; }
.discover .org-stat .h { font-size: 12px; color: var(--text-muted); display: block; }

/* Sessions take the room; the venue list rides alongside on a wide
   screen and drops underneath on a narrow one. */
.discover .org-cols { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .discover .org-cols { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; }
}
/* Narrower than the browse grid because it shares the row with the panel:
   330px cards would force a single column and waste the width. */
.discover .org-scards { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

.discover .org-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow); padding: 16px 18px;
}
.discover .org-panel h2 { font-size: 15px; margin: 0 0 12px; letter-spacing: -.01em; }
.discover .org-venues { list-style: none; margin: 0; padding: 0; }
.discover .org-venues li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--border); font-size: 13.5px;
}
.discover .org-venues li:first-child { border-top: 0; padding-top: 0; }
.discover .org-venues .ico { color: var(--text-faint); flex: none; margin-top: 2px; }
.discover .org-venue { flex: 1; min-width: 0; color: var(--text-muted); line-height: 1.35; }
.discover .org-venue b { display: block; color: var(--text); font-weight: 600; }
/* How often, in the smallest thing that can say it. */
.discover .org-times {
  flex: none; font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  background: var(--surface-alt); border-radius: var(--r-sm); padding: 2px 7px;
}

@media (max-width: 640px) {
  .discover .org-cover { height: 96px; }
  .discover .org-id { padding: 0 16px 14px; gap: 12px; }
  .discover .org-face { width: 66px; height: 66px; font-size: 23px; }
  .discover .org-stat { padding: 12px 16px; }
}