/* openbaab.com/events: upcoming events at masjids on Baab, near you.
   site.css carries the tokens, the bar, type and the footer; this file adds
   the finder (search, near me, a city) and the event rows. Spacing stays on
   site.css's 8px scale; the list band is --alt, so the page changes ground
   instead of drawing a hairline. */

[hidden] { display: none !important; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Hero and finder ──────────────────────────────────────────────── */
.ev-hero { padding-top: var(--s3); padding-bottom: var(--s6); }
@media (min-width: 720px) { .ev-hero { padding-top: var(--s8); padding-bottom: var(--s8); } }
.ev-hero h1 { font-size: clamp(36px, 24px + 4vw, 60px); max-width: 16ch; }
.ev-hero .lede { margin-top: var(--s2); max-width: 40ch; }

.finder { margin-top: var(--s4); max-width: 640px; }
.finder-row { position: relative; }
.finder-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.finder input {
  display: block; width: 100%; height: 52px; padding: 0 16px 0 44px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--card); color: var(--ink);
  font: inherit; font-size: 17px;
  -webkit-appearance: none; appearance: none;
}
.finder input::placeholder { color: var(--ink-soft); opacity: 1; }
.finder input:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.finder input::-webkit-search-cancel-button { -webkit-appearance: none; }

.finder-places { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.place-btn {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--chip); color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.place-btn svg { color: var(--teal); flex: none; }
.place-btn[aria-pressed="true"] { background: var(--teal); color: var(--on-teal); }
.place-btn[aria-pressed="true"] svg { color: currentColor; }
.place-btn:disabled { opacity: 0.6; cursor: default; }
@media (hover: hover) { .place-btn:hover { background: var(--raised); } .place-btn[aria-pressed="true"]:hover { background: var(--teal-hover); } }
.city {
  -webkit-appearance: none; appearance: none;
  max-width: 100%; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234B6B70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.city.on { background-color: var(--teal); color: var(--on-teal); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .city:not(.on) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A9C3C7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
.city.on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.finder-note { margin-top: var(--s1); font-size: 15px; color: var(--ink-soft); }

/* ── The list band ────────────────────────────────────────────────── */
.ev-band { background: var(--alt); padding: var(--section) 0; min-height: 360px; }
.list-head { display: grid; gap: 4px; }
.list-head h2 { font-size: clamp(26px, 20px + 1.8vw, 34px); }
.list-sub { font-size: 15px; color: var(--ink-soft); }
.list-status { margin-top: var(--s3); font-size: 16px; color: var(--ink-soft); }

.ev-list { list-style: none; display: grid; gap: var(--s2); margin-top: var(--s3); }
@media (min-width: 760px) { .ev-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ev-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ev {
  display: flex; gap: var(--s2); height: 100%;
  padding: var(--s2); border-radius: 20px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 160ms ease;
}
.ev:hover { text-decoration: none; }
@media (hover: hover) { .ev:hover { border-color: var(--line-strong); } }
.ev:focus-visible { outline-offset: 2px; border-radius: 20px; }

/* The flyer, as posted (4:5), or the date on a teal wash when there is none. */
.ev-art {
  flex: none; position: relative; width: 84px; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 12px; background: var(--teal-wash);
}
@media (min-width: 400px) { .ev-art { width: 96px; } }
.ev-art img { width: 100%; height: 100%; object-fit: cover; }
.ev-day {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--teal); font-family: var(--round); line-height: 1;
}
.ev-day b { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ev-day span { margin-top: 6px; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.ev-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ev-when { font-size: 14px; font-weight: 650; color: var(--teal); font-variant-numeric: tabular-nums; }
.ev-title {
  margin-top: 4px; font-family: var(--round); font-size: 19px; font-weight: 700; line-height: 1.22;
  letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: balance;
}
.ev-where, .ev-venue { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
.ev-venue { margin-top: 0; }
.ev-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) 12px; margin-top: auto; padding-top: 12px; }
.pill {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--teal-wash); color: var(--teal); font-size: 14px; font-weight: 650; white-space: nowrap;
}
.pill.muted { background: var(--chip); color: var(--ink-soft); }
.few { font-size: 14px; font-weight: 650; color: var(--warn); font-variant-numeric: tabular-nums; }
:root { --warn: #8F5400; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warn: #E8A33D; } }
:root[data-theme="dark"] { --warn: #E8A33D; }

/* ── Empty, further away, more ────────────────────────────────────── */
.ev-empty { margin-top: var(--s3); max-width: 52ch; }
.ev-empty-line { font-family: var(--round); font-size: var(--fs-lead); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.ev-empty-sub { margin-top: var(--s1); font-size: 16px; color: var(--ink-soft); }
.further-title { margin-top: var(--s5); font-size: 20px; }
.further-title + .ev-list { margin-top: var(--s2); }
.more-row { margin-top: var(--s4); display: flex; justify-content: center; }
.more-row .button, .retry { white-space: nowrap; }
.retry { margin-top: var(--s2); }

/* The bar's Events link, on its own page. */
.top-link[aria-current="page"] { text-decoration: none; }
.foot-links a[aria-current="page"] { color: var(--ink); }