/* Plaatspagina — maandgrafiek, dagstrip, maatschappijen, wijken, dagtrips. */

/* ---------- maandgrafiek ---------- */
.mchart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:20px 22px 14px}
.mrow{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.mb{display:grid;grid-template-rows:17px 190px 17px;gap:6px;text-align:center;background:none;border:0;font-family:inherit;padding:0;cursor:pointer}
.mb .p{font-size:13.5px;font-weight:800;letter-spacing:-.025em;color:var(--ink-2)}
.mb .tk{display:flex;align-items:flex-end}
.mb .bar{width:100%;border-radius:6px 6px 3px 3px;border:1.4px solid transparent;transition:filter .12s}
.mb:hover .bar{filter:brightness(.94)}
.mb.on .bar{border-color:var(--ink)}
.mb .m{font-size:12.5px;font-weight:700;color:var(--ink-3);text-transform:capitalize}
.mb.on .m,.mb.on .p{color:var(--ink)}
.mnote{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-3)}
.mnote b{color:var(--ink)}

/* ---------- dagstrip ---------- */
.dows{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.dw{background:var(--surface);border:1.4px solid var(--line);border-radius:var(--r-m);padding:12px 10px;text-align:center}
.dw .d{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.dw .p{font-size:21.5px;font-weight:800;letter-spacing:-.03em;margin-top:5px}
.dw .x{font-size:12.5px;font-weight:700;margin-top:3px}
.dw.best{background:var(--cheap-bg);border-color:var(--cheap-ink)}

/* ---------- maatschappijen ---------- */
.carr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.carr .hr,.carr .rw{display:grid;grid-template-columns:190px 92px 116px 1fr 86px;align-items:center;gap:14px;padding:13px 18px}
.carr .hr{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.carr .rw{border-bottom:1px solid var(--line);font-size:15.5px}
.carr .rw:last-child{border-bottom:0}
.carr .rw:hover{background:var(--surface-2)}
.carr .nm{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.018em}
.carr .mono{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:var(--surface-3);border:1px solid var(--line);display:grid;place-items:center;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--ink-2)}
.carr .pp{font-size:18px;font-weight:800;letter-spacing:-.028em}
.carr .fq{font-size:14px;font-weight:600;color:var(--ink-3)}
.carr .bg{font-size:14px;color:var(--ink-3);font-weight:600;line-height:1.45}
.carr .bt{text-align:right}
.carr .bt .btn{height:32px;padding:0 13px;font-size:14px}

/* ---------- dagtrips ---------- */
.trips{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.tp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;display:flex;gap:12px;align-items:baseline}
.tp .l{flex:1}
.tp .t{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.tp .s{display:block;font-size:14px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.tp .d{font-size:12.5px;font-weight:700;color:var(--brand);white-space:nowrap}

/* ---------- naar de stad ---------- */
.transit{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
/* Een rasterkolom is standaard minstens zo breed als zijn langste inhoud, en
   1fr houdt hem niet tegen. Bij Lissabon staat op het bovenste kaartje de
   maat "Koffer max 50 x 40 x 20 cm"; die duwde de kolom op 375px vijf pixels
   buiten het scherm en liet de hele pagina zijwaarts schuiven. min-width:0
   geeft de kolom weer een ondergrens, overflow-wrap breekt wat dan nog te
   lang is. */
.transit>*{min-width:0}
.tcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:15px 16px;overflow-wrap:break-word}
.tcard .k{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.tcard .v{font-size:22.5px;font-weight:800;letter-spacing:-.032em;margin-top:6px}
.tcard .s{font-size:14px;color:var(--ink-3);margin-top:5px;line-height:1.5}

@media(max-width:1140px){
  .mb{grid-template-rows:16px 155px 16px;gap:4px}
  .mb .p{font-size:12.5px}
  .mb .m{font-size:12.5px}
  .carr .hr{display:none}
  .carr .rw{grid-template-columns:1fr auto;gap:6px 12px;padding:14px 15px}
  .carr .bg,.carr .fq{grid-column:1/-1}
  .carr .bt{grid-column:1/-1;text-align:left;margin-top:4px}
  .trips{grid-template-columns:1fr 1fr}
  .transit{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .mchart{padding:16px 14px 12px}
  .mrow{gap:3px}
  .mb{grid-template-rows:0 130px 15px}
  .mb .p{display:none}
  .dows{grid-template-columns:repeat(4,1fr)}
  .trips{grid-template-columns:1fr}
  .transit{grid-template-columns:1fr}
}