/* ==========================================================
   prikbord.css — alleen PRIKBORD
========================================================== */

/* ----------------------------------------------------------
   Routed prikbord (?page=prikbord) zit in <main class="container">
   → maak alleen op prikbord die container breder
---------------------------------------------------------- */
.page-prikbord main.container{
  max-width: clamp(1100px, 92vw, 1680px);
}

/* ----------------------------------------------------------
   MOBILE DEFAULT: stacked
---------------------------------------------------------- */
.page{
  display: block;
}

.board.board-prikbord,
.board__section--meldingen{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.board.board-prikbord > h2,
.board__section--meldingen > h2{
  margin: 0 0 10px;
}

.board.board-prikbord .desc{
  margin: 0 0 14px;
  color: var(--muted);
}

/* meldingen onder waterstanden op mobiel */
.board__section--meldingen{
  margin-top: 14px;
  width: 100%;
}

@media (max-width: 699px){
  .board.board-prikbord,
  .board__section--meldingen{
    padding: 16px;
  }
}

/* ----------------------------------------------------------
   DESKTOP GRID: water links, meldingen rechts
   (fluid breedte, geschikt voor verschillende resoluties)
---------------------------------------------------------- */
@media (min-width: 1000px){
  .page-prikbord .page{
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(560px, 1.25fr);
    gap: clamp(12px, 1.2vw, 22px);
    align-items: start;
  }

  .page-prikbord .page > h1{
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .page-prikbord .board.board-prikbord{
    grid-column: 1 / 2;
  }

  .page-prikbord .board__section--meldingen{
    grid-column: 2 / 3;
    margin-top: 0;
  }
}

/* ----------------------------------------------------------
   WATER TILES
   - mobiel: 1 kolom
   - >= 900px: NDSM + Suriname naast elkaar, IJmuiden full width eronder
---------------------------------------------------------- */
.board.board-prikbord ul.tiles{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tile frame zodat embeds niet “tegen elkaar” plakken */
.board.board-prikbord ul.tiles > li.pb-tile{
  padding: 10px;
  border-radius: var(--r3);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);

  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Tablet/PC: 2 kolommen + placement */
@media (min-width: 900px){
  .board.board-prikbord ul.tiles{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .board.board-prikbord .tile-ndsm{ grid-column: 1 / 2; }
  .board.board-prikbord .tile-suriname{ grid-column: 2 / 3; }
  .board.board-prikbord .tile-ijmuiden{ grid-column: 1 / -1; }
}

/* ----------------------------------------------------------
   IJMUIDEN HERO STYLING
---------------------------------------------------------- */
.board.board-prikbord .tile-ijmuiden{
  background:
    radial-gradient(900px 220px at 30% 0%, rgba(127,199,255,.10), transparent 55%),
    rgba(255,255,255,.04);
  border-color: rgba(127,199,255,.22);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  position: relative;
}

@media (min-width: 900px){
  .board.board-prikbord .tile-ijmuiden{
    padding: 14px;
  }
}

/* ----------------------------------------------------------
   EMBED OVERFLOW FIXES (grafiek binnen tile)
---------------------------------------------------------- */
.board.board-prikbord ul.tiles > li.pb-tile img,
.board.board-prikbord ul.tiles > li.pb-tile svg,
.board.board-prikbord ul.tiles > li.pb-tile canvas,
.board.board-prikbord ul.tiles > li.pb-tile video{
  max-width: 100% !important;
  height: auto;
}

.board.board-prikbord ul.tiles > li.pb-tile table{
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

.board.board-prikbord ul.tiles > li.pb-tile *{
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 699px){
  .board.board-prikbord ul.tiles > li.pb-tile *{
    flex-wrap: wrap;
  }
}

/* ----------------------------------------------------------
   MELDINGEN (publiek) — pb-* scoped op meldingenkolom
---------------------------------------------------------- */
.board__section--meldingen .board-meldingen{ margin-top: 0; }

.board__section--meldingen .pb-h3{
  margin: 14px 0 10px;
  font-size: 1.05rem;
}

.board__section--meldingen .pb-empty{
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  border: 1px dashed rgba(255,255,255,.18);
}

.board__section--meldingen .pb-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* 2 kolommen pas op echte desktop */
@media (min-width: 1200px){
  .board__section--meldingen .pb-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* 3 kolommen alleen op hele grote schermen */
@media (min-width: 1700px){
  .board__section--meldingen .pb-grid{ grid-template-columns: repeat(3, 1fr); }
}

.board__section--meldingen .pb-card{
  width: 100%;
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
}

.board__section--meldingen .pb-badges{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
}

.board__section--meldingen .pb-badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

.board__section--meldingen .pb-badge.cause{
  background: rgba(127,199,255,.10);
  border-color: rgba(127,199,255,.20);
}
.board__section--meldingen .pb-badge.impact-closed{
  background: rgba(255,90,90,.12);
  border-color: rgba(255,90,90,.25);
}
.board__section--meldingen .pb-badge.impact-traffic{
  background: rgba(255,200,0,.12);
  border-color: rgba(255,200,0,.25);
}
.board__section--meldingen .pb-badge.impact-narrow{
  background: rgba(255,165,0,.12);
  border-color: rgba(255,165,0,.25);
}
.board__section--meldingen .pb-badge.impact-alert{
  background: rgba(180,180,255,.10);
  border-color: rgba(180,180,255,.22);
}
.board__section--meldingen .pb-badge.impact-delay{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

.board__section--meldingen .pb-title{
  font-size: 1.05rem;
  font-weight: 650;
  margin-top: 10px;
}

.board__section--meldingen .pb-where{
  opacity: .9;
  margin-top: 4px;
}

.board__section--meldingen .pb-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 8px;
  opacity: .9;
  font-size: .92rem;
}

.board__section--meldingen .pb-note{
  margin-top: 8px;
  opacity: .9;
  font-style: italic;
}

.board__section--meldingen .pb-msg{
  margin-top: 10px;
  line-height: 1.35;
}


/* ----------------------------------------------------------
   MELDINGEN PAGER (PC/TV)
   - mobiel: blijft scrollen (alles zichtbaar)
   - >= 1000px: actueel/aankomend rouleren + pagineren via JS
---------------------------------------------------------- */

.board__section--meldingen .pb-topbar{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.board__section--meldingen .pb-indicator{
  display: none; /* pas zichtbaar in pager mode */
  align-items: center;
  gap: 10px;
  opacity: .9;
}

.board__section--meldingen .pb-tag{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .85rem;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  white-space: nowrap;
}

.board__section--meldingen .pb-dots{
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.board__section--meldingen .pb-dots i{
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  display: inline-block;
  background: rgba(255,255,255,.25);
}
.board__section--meldingen .pb-dots i.is-on{
  background: rgba(127,199,255,.95);
}

@media (min-width: 1000px){
  /* panels overlappen niet; JS kiest actieve panel */
  .board__section--meldingen .pb-panel{ display: none; }
  .board__section--meldingen .pb-panel.is-active{ display: block; }

  /* cards pagineren: default alles uit; JS zet .is-visible */
  .board__section--meldingen .pb-panel .pb-card{ display: none; }
  .board__section--meldingen .pb-panel .pb-card.is-visible{ display: block; }

  /* indicator zichtbaar in pager mode */
  .board__section--meldingen .pb-indicator{ display: inline-flex; }

  /* h3’s mogen blijven (handig als JS uit staat), maar in pager is tag genoeg */
  .board__section--meldingen .pb-panel.is-active .pb-h3{
    margin-top: 0;
    opacity: .85;
  }
}

/* respecteer reduced motion */
@media (prefers-reduced-motion: reduce){
  .board__section--meldingen .pb-dots i{ transition: none; }
}

/* ----------------------------------------------------------
   TV MODE: grotere elementen (leesbaar op afstand)
---------------------------------------------------------- */
@media (min-width: 1200px){
  .page-prikbord{
    font-size: 18px;
  }

  .page-prikbord .board.board-prikbord,
  .page-prikbord .board__section--meldingen{
    padding: 22px;
  }

  .page-prikbord .board.board-prikbord ul.tiles{
    gap: 20px;
  }

  .page-prikbord .board__section--meldingen .pb-card{
    padding: 14px;
  }

  .page-prikbord .board__section--meldingen .pb-badge{
    font-size: .85rem;
    padding: 5px 10px;
  }
}

@media (min-width: 1600px){
  .page-prikbord{ font-size: 19px; }
}


/* ==========================================================
   IJmuiden embed styling (responsive + mooi)
========================================================== */

.board.board-prikbord .tile-ijmuiden .live-tile{
  /* zorg dat ijmuiden-tile niet “ingekapseld” voelt */
  background: transparent;
  border: 0;
  padding: 0;
}

.board.board-prikbord .tile-ijmuiden::before{ content:none; }


/*
.board.board-prikbord .tile-ijmuiden::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(77,208,200,.8), rgba(127,199,255,.6));
  opacity: .7;
/

/* 2 kolommen op breed scherm, stack op mobiel */
.board.board-prikbord .tile-ijmuiden .ijm-cols{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}

@media (min-width: 900px){
  .board.board-prikbord .tile-ijmuiden .ijm-cols{
    grid-template-columns: 1fr 1fr;
  }
}

.board.board-prikbord .tile-ijmuiden .ijm-col{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
}

/* Responsive grafiek: vult de volledige breedte */
.board.board-prikbord .tile-ijmuiden .ijm-chart{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 10px;
  color: rgba(120,180,255,.95); /* “Buiten” lijnkleur via currentColor */
}

.board.board-prikbord .tile-ijmuiden .ijm-chart .ijm-spark{
  display: block;
  width: 100%;
  height: auto;
  /* Als je een vaste hoogte wil (TV), zet height via media query */
}

/* TV: geef de grafiek een vaste hoogte voor consistent dashboard */
@media (min-width: 1200px){
  .board.board-prikbord .tile-ijmuiden .ijm-chart .ijm-spark{
    height: 120px;
  }
}