/* Genieton.nu stadspagina — bovenop /assets/fomo.css */
.city-top { justify-content: space-between; gap: .75rem; }
.city-top .brand img { width: 64px; height: 64px; }
.city-mark { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.25rem; color: var(--purple); letter-spacing: -0.01em; }
.city-mark img { width: 48px; height: auto; aspect-ratio: auto; }
.city-hero { text-align: center; padding: .5rem 0 1rem; }
.eyebrow { margin: 0; color: var(--muted); font-weight: 600; font-size: .95rem; }
.city-hero h1 { margin: .25rem 0 0; font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; }
.card { background: var(--card); border-radius: var(--radius); padding: 1.25rem 1.1rem; margin-bottom: 1.25rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 40px rgba(107,45,155,0.08); }
.card h2, .sec-title { margin: 0 0 .75rem; font-size: 1.1rem; }
.sec-title { margin-top: 1.5rem; }
.tiny { color: var(--muted); font-size: .8rem; margin: .75rem 0 0; }
.wx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.wx-day { background: var(--purple-soft); border-radius: 12px; padding: .7rem .6rem; display: grid; text-align: center; gap: .1rem; }
.wx-name { font-weight: 700; }
.wx-date, .wx-desc { color: var(--muted); font-size: .85rem; }
.wx-ico { font-size: 1.9rem; line-height: 1.2; }
.wx-temp { font-size: 1rem; }
.wx-rain { font-size: .85rem; color: #1d6fa5; }
@media (min-width: 560px) { .wx-list { grid-template-columns: repeat(4, 1fr); } }
.join { margin-bottom: 1.25rem; }
.join .hint { margin: .25rem 0 0; }
.kansen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.kans { background: var(--card); border-radius: var(--radius); padding: 1.1rem 1.1rem 1rem; border-left: 5px solid var(--purple);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 28px rgba(107,45,155,0.07); scroll-margin-top: 1rem; }
.kans-head { display: flex; align-items: center; gap: .5rem; }
.kans-nr { width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--purple); color: #fff; font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.kans-type { text-transform: uppercase; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--purple); background: var(--purple-soft); padding: .15rem .5rem; border-radius: 999px; }
.kans h3 { margin: .5rem 0 .35rem; font-size: 1.12rem; line-height: 1.3; }
.kans p { margin: .2rem 0; }
.kans-when, .kans-place { font-size: .95rem; font-weight: 600; }
.kans-line { color: var(--muted); font-size: .95rem; margin-top: .45rem !important; }
.kans-links, .cal-btns { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.btn-info, .btn-sec { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .9rem; border-radius: 999px; font-weight: 700; font-size: .9rem; text-decoration: none; }
.btn-info { background: var(--purple); color: #fff !important; }
.btn-sec { background: var(--purple-soft); color: var(--purple); border: 1px solid #e8d5f5; }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cal-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem .75rem; padding: .6rem 0; border-bottom: 1px solid #f0e6f8; scroll-margin-top: 1rem; }
.cal-row:last-child { border-bottom: 0; }
.cal-txt { display: grid; }
.cal-txt span { color: var(--muted); font-size: .85rem; }
.cal-btns { margin-top: 0; }
.kaart { height: 360px; border-radius: 12px; overflow: hidden; background: #eee; z-index: 0; }
@media (min-width: 560px) { .kaart { height: 440px; } }
.pin { background: none; border: 0; }
.pin span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--purple); border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35); color: #fff; font-weight: 800; font-size: .85rem; }
.pin i { transform: rotate(45deg); font-style: normal; }
.leaflet-popup-content { font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.leaflet-popup-content a { font-weight: 700; }
.sec-sub { margin: -.5rem 0 .75rem; font-size: .9rem; color: #555; }
.kansen.avond .kans { border-left-color: #2b1840; }
.kansen.avond .kans-nr { background: #2b1840; }
.kans-price { margin: .15rem 0; font-weight: 600; }
.pin-avond span { background: #2b1840 !important; }
/* andere groepen in de buurt */
.nearby { margin-top: .5rem; }
.nearby-title { margin: 0 0 .35rem; font-size: .95rem; font-weight: 600; }
.nearby-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.nearby-list li { display: flex; align-items: center; gap: .55rem; }
.btn-signal.btn-signal-near { min-height: 40px; margin: 0; padding: .5rem 1rem; font-size: .92rem; }
.nearby-page { font-size: .85rem; }