/*
 * Detailpagina van een afleverpunt.
 */

.dr-punt-detail #elheader{height:auto;min-height:0;background:#fff;border-bottom:none}

.dr-detail{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;
  align-items:start;margin-top:10px}

/* ── gegevens ────────────────────────────────────────────── */
.dr-detail__info{background:var(--surface,#F4F6FB);
  border:1px solid var(--line,rgba(23,40,155,.13));border-radius:16px;
  padding:26px 28px}
.dr-detail .dr-spec{margin:0;display:grid;gap:16px}
.dr-detail .dr-spec div{display:grid;gap:3px}
.dr-detail .dr-spec dt{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#5A607A)}
.dr-detail .dr-spec dd{margin:0;font-size:15.5px;line-height:1.5;
  color:var(--ink,#1A1D2E)}
.dr-detail .dr-spec dd a{color:var(--blue,#17289B);text-decoration:none}
.dr-detail .dr-spec dd a:hover{text-decoration:underline;text-underline-offset:3px}

.dr-detail__knoppen{margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line,rgba(23,40,155,.13))}

/* ── kaart ───────────────────────────────────────────────── */
.dr-detail__kaart{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line,rgba(23,40,155,.13));background:#EEF1FA}
.dr-detail__kaart iframe{display:block;width:100%;height:340px;border:0}
.dr-detail__groter{position:absolute;right:12px;bottom:12px;
  background:#fff;border-radius:8px;padding:7px 13px;font-size:13px;
  color:var(--blue,#17289B);text-decoration:none;
  box-shadow:0 2px 10px rgba(10,16,40,.14)}
.dr-detail__groter:hover{background:#EEF1FA;color:var(--blue,#17289B)}

.dr-detail__tekst{font-size:16px;line-height:1.7;color:var(--ink,#1A1D2E);
  max-width:72ch}

/* ── verzorgingsgebied ───────────────────────────────────── */
/*
   De gemeenten waarvoor dit het dichtstbijzijnde punt is. Kan oplopen tot
   enkele tientallen, vandaar een dicht raster in plaats van een lijst.
*/
.dr-gemeenten{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:2px 18px;margin:8px 0 0;padding:0;list-style:none}
.dr-gemeenten li{display:flex;align-items:baseline;gap:9px;padding:7px 0;
  font-size:15px;color:var(--ink,#1A1D2E);
  border-bottom:1px solid var(--line,rgba(23,40,155,.08))}
.dr-gemeenten__zip{flex:none;font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--blue,#17289B);min-width:38px}
.dr-gemeenten__km{margin-left:auto;font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;color:var(--muted,#5A607A)}

@media (max-width:900px){
  .dr-detail{grid-template-columns:1fr}
  .dr-detail__kaart iframe{height:280px}
}

/* ── de kaart in grijstinten ──────────────────────────────────
   Een iframe van een ander domein kunnen we niet van binnen stylen,
   maar een filter erover werkt wel. Bij aanwijzen komt de kleur terug,
   want dan kijkt iemand werkelijk naar de kaart.
   ───────────────────────────────────────────────────────────── */
.dr-detail__kaart iframe{
    filter: grayscale(100%) contrast(.92) brightness(1.04);
    transition: filter .25s ease;
}
.dr-detail__kaart:hover iframe{
    filter: grayscale(35%) contrast(.98) brightness(1.01);
}