/* Gemeentes: de kaart, de lijst en de pagina van één gemeente. Alleen tokens uit site.css en partijkleuren. */

/* ---------- overzicht: lijst links, kaart rechts (telefoon: kaart boven) ---------- */
.gm { display: grid; grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); grid-template-areas: 'head map' 'find map' 'side map'; grid-template-rows: auto auto 1fr; gap: 0 var(--g2); align-items: start; }
.gm.no-map { grid-template-columns: minmax(0, 32rem); grid-template-areas: 'head' 'find' 'side'; }
.gm-head { grid-area: head; margin-bottom: 28px; }
.gm-side { grid-area: side; display: flex; flex-direction: column; min-width: 0; }
.gm-sum { margin: 12px 0 0; font: 500 16px/1.4 var(--sans); color: var(--tx3); }
.gm-sum b { font: 650 30px/1 var(--disp); color: var(--tx); margin-right: 4px; }
.gm-find { grid-area: find; margin: 0 0 8px; min-width: 0; }
.gm-skl { width: 60%; height: 18px; margin-top: 16px; }
.gm-list { margin: 0; padding: 0; list-style: none; }
.gl-r { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0 10px; border-top: 1px solid var(--line); color: var(--tx2); text-decoration: none; transition: color 0.15s; }
.gl-n { font: 600 20px/1.15 var(--disp); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.gl-c { flex: none; font: 500 14.5px/1.3 var(--sans); color: var(--tx3); font-variant-numeric: tabular-nums; }
.gl-b { position: absolute; left: 0; bottom: 3px; height: 2px; width: var(--w); min-width: 2px; background: color-mix(in srgb, var(--hit) 55%, var(--bg3)); transition: background-color 0.15s; }
a.gl-r:hover, .gl-r.on { color: var(--tx); }
a.gl-r:hover .gl-b, .gl-r.on .gl-b { background: var(--hit); }
a.gl-r:focus-visible { outline-offset: 2px; }
.gl-off .gl-r { color: var(--tx4); }
.gl-off .gl-b { display: none; }
.gl-none { padding: 12px 0; font: 500 15px/1.4 var(--sans); color: var(--tx3); }
.gm-side .more { margin-top: 14px; align-self: flex-start; }

.gm-map { grid-area: map; position: sticky; top: calc(var(--tbh) + 20px); margin: 0; min-width: 0; }
.gm-map.sk { aspect-ratio: 800 / 946; max-height: calc(100vh - var(--tbh) - 60px); }
.gm-map svg, .gp-loc svg { display: block; width: 100%; height: auto; }
.gm-map svg { max-height: calc(100vh - var(--tbh) - 80px); }
.gm-map path, .gp-loc path { fill: var(--bg3); stroke: var(--bg); stroke-width: 0.6; vector-effect: non-scaling-stroke; transition: fill 0.15s, opacity 0.15s; }
/* meer vergaderingen = lichter geel; het donkerste geel is nog duidelijk anders dan grijs */
.gm-map path.l1 { fill: color-mix(in srgb, var(--hit) 22%, var(--bg3)); }
.gm-map path.l2 { fill: color-mix(in srgb, var(--hit) 38%, var(--bg3)); }
.gm-map path.l3 { fill: color-mix(in srgb, var(--hit) 56%, var(--bg3)); }
.gm-map path.l4 { fill: color-mix(in srgb, var(--hit) 76%, var(--bg3)); }
.gm-map path.l5 { fill: var(--hit); }
.gm-map path[tabindex] { cursor: pointer; }
.gm-map path.on, .gm-map path[tabindex]:focus { fill: var(--tx); outline: none; }
.gm-map path.dim { opacity: 0.25; }
.gm-map path.match { stroke: var(--tx2); stroke-width: 1.4; }
.gm-tip { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; padding: 6px 10px 7px; border-radius: 4px; background: var(--bg2); box-shadow: 0 0 0 1px var(--line2), 0 8px 24px rgba(0, 0, 0, 0.45); transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap; }
.gm-tip b { font: 650 19px/1.1 var(--disp); color: var(--tx); }
.gm-tip span { font: 500 13.5px/1.3 var(--sans); color: var(--tx3); font-variant-numeric: tabular-nums; }
.gm-map figcaption, .gp-loc figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 10px; }
.gm-leg { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); color: var(--tx3); font-variant-numeric: tabular-nums; }
.gm-leg b { font-weight: 500; }
.gm-ramp { width: 96px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--hit) 22%, var(--bg3)), var(--hit)); }
.gm-credit { font: 500 12px/1.3 var(--sans); color: var(--tx4); }

/* ---------- één gemeente ---------- */
.gp-head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 18vw, 240px); gap: 0 var(--g2); align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.gp-t { min-width: 0; }
.gp .eyebrow a { color: inherit; text-decoration: none; }
.gp .eyebrow a:hover { color: var(--tx); text-decoration: underline; text-underline-offset: 4px; }
.gp .h1 { overflow-wrap: anywhere; }
.gp-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 14px 0 0; font: 500 16px/1.4 var(--sans); color: var(--tx3); }
.gp-stats b { margin-right: 6px; font: 650 30px/1 var(--disp); color: var(--tx); font-variant-numeric: tabular-nums; }
.gp-stats span::before { content: '·'; margin: 0 9px; color: var(--tx4); }
.gp-q { margin-top: clamp(20px, 3vw, 32px); max-width: 52rem; }
.gp-q input { height: clamp(48px, 5vw, 64px); font-size: clamp(26px, 3.2vw, 40px); }
.gp-loc { margin: 0; }
.gp-loc path.me { fill: var(--hit); stroke: var(--bg); stroke-width: 1; }
.gp-loc figcaption { justify-content: flex-end; }
.gp-skh { width: 50%; height: 64px; margin-bottom: 18px; }
.gp-skl { width: 30%; height: 20px; }
.gp-skm { width: 8rem; height: 22px; margin-top: 26px; }

.gp-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px var(--g2); align-items: start; }
.gp-sec { min-width: 0; }
.gp-sec .sec-k { margin-bottom: 12px; }
.gp .row.gp-row { grid-template-columns: 6.4rem minmax(0, 1fr) 5.6rem; }
.gp-row .t { font-size: clamp(20px, 1.9vw, 24px); }

/* wie het langst sprak: naam, partij, een streep zo lang als de spreektijd */
.gp-spk { margin: 0; padding: 0; list-style: none; }
.gp-spk li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; padding: 9px 0 13px; border-top: 1px solid var(--line); }
.gp-spk .n { font: 600 20px/1.15 var(--disp); letter-spacing: 0.01em; color: var(--tx); overflow-wrap: anywhere; }
.gp-spk .p { grid-row: 2; font: 500 13.5px/1.3 var(--sans); color: var(--tx3); }
.gp-spk .m { grid-column: 2; grid-row: 1; font: 500 14.5px/1.3 var(--sans); color: var(--tx3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-spk i { position: absolute; left: 0; bottom: 4px; height: 3px; width: var(--w); min-width: 3px; border-radius: 1px; background: var(--pc, var(--tx4)); opacity: 0.85; }

/* bestuur en raad */
.gp-raad { margin-top: clamp(48px, 6vw, 80px); }
.gp-gov { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px var(--g2); align-items: start; }
.gp-bm { display: flex; align-items: flex-end; gap: 18px; }
.gp-fig { flex: none; margin: 0; width: clamp(110px, 11vw, 150px); }
.gp-fig .gp-face { width: 100%; }
.gp-fig figcaption { margin-top: 6px; }
.gp-bm:has(.gp-fig) { align-items: flex-start; }
.gp-bm:has(.gp-fig) > div { padding-top: 8px; }
.gp-face { position: relative; flex: none; display: block; width: clamp(110px, 11vw, 150px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--bg2); }
.gp-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.gp-ini { display: grid; place-items: center; }
.gp-ini b { font: 700 clamp(40px, 4vw, 56px)/1 var(--disp); letter-spacing: 0.03em; color: var(--tx4); }
.gp-role { display: block; margin: 0 0 6px; font: 600 12px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx4); }
.gp-role b { font: 650 26px/1 var(--disp); letter-spacing: 0; color: var(--tx); text-transform: none; margin-right: 4px; }
.gp-of { margin-left: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--tx3); }
.gp-bmn { display: block; font: 650 clamp(26px, 2.4vw, 34px)/1.05 var(--disp); color: var(--tx); }
.gp-pl { margin: 0; padding: 0; list-style: none; }
.gp-weth .gp-pl { columns: 14rem auto; column-gap: 32px; }
.gp-weth .gp-p { flex-direction: column; gap: 2px; }
.gp-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 4px 0 4px 10px; border-left: 3px solid var(--pc, var(--tx4)); margin: 0 0 6px; break-inside: avoid; }
.gp-pn { font: 600 18px/1.2 var(--disp); letter-spacing: 0.01em; color: var(--tx2); }
.gp-pp { font: 500 13.5px/1.3 var(--sans); color: var(--tx3); }
.gp-council { margin-top: 36px; }
.gp-council > .gp-role + .gp-parties { margin-top: 18px; }
.gp-seats { display: flex; gap: 2px; height: 10px; margin: 4px 0 24px; }
.gp-seats i { flex: 0 0 auto; width: calc(var(--w) - 2px); min-width: 3px; border-radius: 1px; background: var(--pc, var(--tx4)); }
.gp-parties { columns: 15rem auto; column-gap: var(--g2); }
.gp-party { break-inside: avoid; margin: 0 0 22px; }
.gp-party h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--pc, var(--tx4)); font: 650 21px/1.1 var(--disp); color: var(--tx); }
.gp-party h3 b { font: 500 14.5px/1 var(--sans); color: var(--tx3); font-variant-numeric: tabular-nums; }
.gp-party .gp-p { border-left: 0; padding-left: 0; margin: 0; }
.gp-src { margin: 8px 0 0; font: 500 13px/1.4 var(--sans); color: var(--tx4); }

@media (max-width: 960px) {
  .gp-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .gm, .gm.no-map { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'find' 'map' 'side'; gap: 0; }
  .gm-find { margin-bottom: 16px; }
  .gm-head { margin-bottom: 16px; }
  .gm-map { position: relative; top: auto; margin-bottom: 24px; }
  .gm-map svg { max-height: 72vh; }
}
@media (max-width: 640px) {
  .gp-head { grid-template-columns: minmax(0, 1fr); }
  .gp-loc { display: none; } /* te klein om iets te zeggen; de kaart staat op het overzicht */
  .gp-parties { columns: 2; column-gap: 20px; }
  .gp-party h3 { font-size: 19px; }
  .gp-q .go { display: none; }
  .gp-q input { font-size: 24px; }
  .gp .row.gp-row { grid-template-columns: 5.4rem minmax(0, 1fr); }
  .gp .row.gp-row .t { grid-column: 2; }
  .gp .row.gp-row .m { grid-column: 2; margin-top: 4px; text-align: left; font-size: 14px; }
  .gp .row.gp-row .d { grid-row: auto; }
  .gp-gov { grid-template-columns: minmax(0, 1fr); }
  .gp-face, .gp-fig { width: 96px; }
  .gp-bmn { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-map path, .gl-r, .gl-b { transition: none; }
}