/* VDZ-BRIGADE Content Hub — licht, Primefone-stijl, TT Norms (merkfont) */
@font-face{font-family:"TT Norms";src:url("fonts/TTNorms-Regular.otf");font-weight:400;font-display:swap}
@font-face{font-family:"TT Norms";src:url("fonts/TTNorms-Medium.otf");font-weight:500;font-display:swap}
@font-face{font-family:"TT Norms";src:url("fonts/TTNorms-Bold.otf");font-weight:700;font-display:swap}
@font-face{font-family:"TT Norms";src:url("fonts/TTNorms-ExtraBold.otf");font-weight:800;font-display:swap}
:root{
  --navy:#0A1628; --blue:#1565C0; --blue-light:#1976D2; --orange:#FF6B35;
  --white:#fff; --grey-50:#F8FAFC; --grey-100:#F1F5F9; --grey-200:#E2E8F0;
  --grey-300:#CBD5E1; --grey-400:#94A3B8; --grey-500:#64748B; --grey-600:#475569;
  --green:#059669; --green-bg:#D1FAE5; --red:#DC2626; --red-bg:#FEE2E2; --orange-bg:#FFF7ED;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --pill:9999px;
  --sh-sm:0 1px 3px rgba(10,22,40,.08); --sh-md:0 4px 16px rgba(10,22,40,.10);
  --t:.18s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{max-width:100vw;overflow-x:hidden}
body{font-family:"TT Norms",system-ui,-apple-system,"SF Pro Text",sans-serif;background:var(--grey-50);
  color:var(--navy);min-height:100vh;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* ligatures uit — geen samengevoegde letters (fi/fl/ff e.d.) */
  font-variant-ligatures:none;
  font-feature-settings:"liga" 0,"clig" 0,"dlig" 0,"hlig" 0,"calt" 0;
  text-rendering:geometricPrecision}
*,*::before,*::after{font-variant-ligatures:inherit}

/* ── header (wit) ── */
.check-head{position:sticky;top:0;z-index:100;background:#fff;
  display:flex;align-items:center;gap:1.1rem;height:64px;padding:0 clamp(1rem,4vw,2.5rem);
  border-bottom:1px solid var(--grey-200)}
.brand-logo{height:30px;width:auto;display:block;flex:none}
.phase{font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--grey-500);
  background:var(--grey-100);border-radius:var(--pill);padding:.25rem .7rem}
/* ── view-switch (Content Hub ↔ Best Performance) ── */
.view-switch{display:inline-flex;background:var(--grey-100);border:1px solid var(--grey-200);
  border-radius:var(--pill);padding:4px;gap:2px;position:relative;
  box-shadow:inset 0 1px 2px rgba(10,22,40,.04)}
.view-switch button{display:inline-flex;align-items:center;gap:.55rem;border:none;background:transparent;
  font:inherit;font-weight:700;font-size:.82rem;letter-spacing:.025em;color:var(--grey-500);
  padding:.5rem 1rem;border-radius:var(--pill);cursor:pointer;
  transition:color var(--t),background var(--t),box-shadow var(--t),transform var(--t);
  white-space:nowrap;line-height:1}
.view-switch .vs-ic{flex:none;opacity:.7;transition:opacity var(--t),color var(--t)}
.view-switch button:hover:not(.active){color:var(--navy);background:rgba(255,255,255,.55)}
.view-switch button:hover:not(.active) .vs-ic{opacity:1}
.view-switch button.active{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(10,22,40,.10),0 1px 1px rgba(10,22,40,.06)}
.view-switch button.active .vs-ic{opacity:1;color:var(--green)}
.view-switch button[data-view="winning"].active .vs-ic{color:var(--orange)}
.view-switch button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.view-switch button:active{transform:translateY(.5px)}
.summary{margin-left:auto;color:var(--grey-500);font-size:.82rem}
.summary b{color:var(--navy)}
.summary .rev{color:var(--orange);font-weight:600}

/* ── main ── */
.check-scroll{max-width:1440px;margin:0 auto;padding:clamp(1.25rem,3vw,2rem) clamp(1rem,4vw,2.5rem)}
.hub-empty{color:var(--grey-500);text-align:center;padding:60px 0}

/* ── campagne-band: wit met donkere rand voor duidelijke afbakening ── */
.camp-band{background:#fff;border:1.5px solid #94A3B8;border-radius:var(--r-xl);
  padding:1.1rem clamp(.9rem,2.2vw,1.4rem) 1.2rem;
  margin:0 0 1.2rem;position:relative;
  box-shadow:0 1px 3px rgba(10,22,40,.06),0 1px 2px rgba(10,22,40,.04)}
.camp-band .sec-head{margin-bottom:1rem;margin-top:0}
.camp-band .sec-head:not(:first-child){margin-top:0}
.camp-band .cards{background:transparent}
.camp-band .show-more{margin-top:1rem}

/* ── sectiekop ── */
.sec-head{display:flex;align-items:center;gap:.875rem;margin:0 0 1.25rem}
.sec-head:not(:first-child){margin-top:2.5rem}
.sec-dot{width:10px;height:10px;border-radius:50%;flex:none}
.sec-title{font-size:1.05rem;font-weight:800;color:var(--navy)}
.sec-date{font-family:ui-monospace,'SF Mono',monospace;font-size:.68rem;color:var(--grey-500);font-weight:600;
  background:rgba(22,163,74,.10);border-radius:var(--pill);padding:.2rem .55rem;letter-spacing:.02em}
.sec-camp{font-size:.95rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.sec-head .cname{background:transparent;border:1.5px solid transparent;color:var(--navy);
  font:inherit;font-weight:800;font-size:1.05rem;border-radius:var(--r-sm);padding:.2rem .5rem;outline:none;max-width:420px}
.sec-head .cname:hover{border-color:var(--grey-200)}
.sec-head .cname:focus{border-color:var(--blue);background:#fff}
.sec-count{font-size:.74rem;color:var(--grey-500);font-weight:600;background:var(--grey-100);
  padding:.15rem .6rem;border-radius:var(--pill)}
.sec-sub{font-size:.76rem;color:var(--grey-400);font-weight:600}
.sec-line{flex:1;height:1px;background:var(--grey-200)}

/* ── kaarten ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;min-width:0}
.cards > *{min-width:0}
.rcard{background:#fff;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);
  border:1.5px solid var(--grey-200);display:flex;flex-direction:column;transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
.rcard:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.rcard.has-feedback{border-color:var(--red);box-shadow:0 0 0 2px rgba(220,38,38,.18),0 4px 12px rgba(220,38,38,.18)}
.rcard.has-feedback:hover{box-shadow:0 0 0 2px rgba(220,38,38,.22),0 8px 20px rgba(220,38,38,.22)}
.shot-wrap{position:relative;aspect-ratio:4/5;background:var(--grey-100);overflow:hidden}
.shot{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.rcard:hover .shot{transform:scale(1.04)}
.launch-badge{position:absolute;top:.625rem;left:.625rem;background:var(--green);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.03em;padding:.2rem .6rem;border-radius:var(--pill)}
.rbody{padding:.875rem 1rem 1rem;flex:1;display:flex;flex-direction:column;gap:.55rem}
.metrics{font-size:.78rem;color:var(--grey-600);font-weight:500}
.metrics b{color:var(--green);font-weight:800}
.metrics.big{font-size:.95rem;background:var(--grey-50);border:1px solid var(--grey-200);border-radius:var(--r-md);padding:.6rem .8rem}
.copy2{font-size:.82rem;color:var(--navy);line-height:1.5;white-space:pre-wrap}

/* actie-iconen */
.iconrow{display:flex;align-items:center;gap:.4rem}
.cic{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;font-size:1rem;transition:all var(--t);text-decoration:none}
.cic.chat{background:var(--orange-bg);color:var(--orange)}
.cic.chat:hover,.cic.chat.on{background:var(--orange);color:#fff}
.cic.remove{margin-left:auto;background:var(--grey-100);color:var(--grey-400);font-size:1.3rem;line-height:1}
.cic.remove:hover{background:var(--red-bg);color:var(--red)}

.fbfield{padding-top:.2rem}
.fbfield.hidden{display:none}
.fb2{width:100%;border:1.5px solid var(--grey-200);border-radius:var(--r-sm);padding:.5rem .625rem;
  font-family:inherit;font-size:.8rem;color:var(--navy);resize:vertical;min-height:64px;outline:none;background:var(--grey-50)}
.fb2:focus{border-color:var(--orange);background:#fff}
.fb2::placeholder{color:var(--grey-400)}
.saved{font-size:.72rem;color:var(--green);font-weight:600;margin-top:.3rem;min-height:14px}

/* ── detail-modal (licht) ── */
.modal-ov{position:fixed;inset:0;background:rgba(10,22,40,.55);z-index:200;display:flex;
  align-items:center;justify-content:center;padding:30px;backdrop-filter:blur(3px)}
.modal{position:relative;display:flex;max-width:980px;width:100%;max-height:90vh;background:#fff;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)}
.modal-x{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(10,22,40,.55);color:#fff;font-size:20px;cursor:pointer;line-height:1}
.modal-x:hover{background:var(--red)}
.modal-img{flex:0 0 46%;background:var(--grey-100);display:flex;align-items:center;justify-content:center}
.modal-img img,.modal-img video{max-width:100%;max-height:90vh;object-fit:contain;display:block}
.modal-side{flex:1;padding:24px;overflow-y:auto}
.modal-side .hook{font-family:ui-monospace,monospace;font-size:.7rem;letter-spacing:.08em;color:var(--orange);font-weight:700}
.modal-side h3{margin:.25rem 0 .75rem;font-size:1.25rem;font-weight:800;color:var(--navy)}
.block{margin-top:1rem}
.block .lbl{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--grey-400);margin-bottom:.35rem}
.block p{font-size:.84rem;color:var(--grey-600);line-height:1.55}
.block p.rec{background:var(--grey-50);border:1px solid var(--grey-200);border-radius:var(--r-md);padding:.6rem .8rem;color:var(--navy);white-space:pre-wrap}
.block ul{margin:.25rem 0 0;padding-left:1.1rem;font-size:.84rem;color:var(--grey-600);line-height:1.7}
.mininote{font-size:.72rem;color:var(--grey-400);margin-top:.5rem;line-height:1.4}
.copybtn{margin-top:.5rem;background:var(--grey-100);border:none;color:var(--grey-600);border-radius:var(--pill);
  padding:.4rem .9rem;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
.copybtn:hover{background:var(--grey-200)}
.dlbtn{display:inline-block;margin-top:1.1rem;background:var(--blue);color:#fff;border:none;
  border-radius:var(--pill);padding:.6rem 1.2rem;text-decoration:none;font-size:.82rem;font-weight:600;cursor:pointer}
.dlbtn:hover{background:var(--blue-light)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--grey-300);border-radius:6px;border:2px solid var(--grey-50)}

/* ── kaart-acties: × op beeld, chat links, download rechts ── */
.card-x{position:absolute;top:.5rem;right:.5rem;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;z-index:2;
  background:rgba(10,22,40,.5);backdrop-filter:blur(4px);color:rgba(255,255,255,.9);
  font-size:18px;line-height:1;opacity:0;transition:opacity var(--t),background var(--t)}
.rcard:hover .card-x{opacity:1}
.card-x:hover{background:var(--red);color:#fff;opacity:1}
.cic svg{display:block}
.cic.dl-img{margin-left:auto;background:rgba(5,150,105,.10);color:var(--green)}
.cic.dl-img:hover{background:var(--green);color:#fff}
.cic.dl{background:rgba(21,101,192,.1);color:var(--blue)}
.cic.dl:hover{background:var(--blue);color:#fff}
/* download-campagne knop in sectiekop */
.sec-dl{flex:none;display:inline-flex;align-items:center;gap:.4rem;background:#fff;
  border:1.5px solid var(--grey-200);color:var(--grey-500);border-radius:var(--pill);
  padding:.35rem .8rem;font:inherit;font-size:.74rem;font-weight:600;cursor:pointer}
.sec-dl:hover{border-color:var(--blue);color:var(--blue)}
.sec-dl svg{width:14px;height:14px}

/* ── copy direct bewerkbaar ── */
.copy-edit{width:100%;border:1.5px solid transparent;border-radius:var(--r-sm);background:transparent;
  font-family:inherit;font-size:.82rem;color:var(--navy);line-height:1.5;resize:none;outline:none;
  padding:.4rem .5rem;overflow:hidden;transition:border-color var(--t),background var(--t);cursor:text}
.copy-edit:hover{border-color:var(--grey-200)}
.copy-edit:focus{border-color:var(--blue);background:var(--grey-50)}

/* ── campagnenaam duidelijk bewerkbaar ── */
.sec-head .cname{background:var(--grey-50);border-color:var(--grey-200)}
.sec-head .cname:hover{border-color:var(--grey-300)}
.sec-head .cname:focus{border-color:var(--blue);background:#fff}
.cname-edit{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:var(--r-sm);border:none;background:transparent;color:var(--grey-400);cursor:pointer;transition:all var(--t)}
.cname-edit:hover{background:var(--grey-100);color:var(--blue)}

/* ── herschrijf-wieltje ── */
.cic.rewrite{background:var(--grey-100);color:var(--grey-500)}
.cic.rewrite:hover{background:var(--blue);color:#fff}
.cic.rewrite.spin svg{animation:spin .45s ease}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ── show-more chevron (4 + uitvouwen) ── */
.show-more{display:inline-flex;align-items:center;gap:.5rem;margin:1.1rem auto 0;
  background:#fff;border:1.5px solid var(--grey-200);color:var(--grey-600);
  border-radius:var(--pill);padding:.55rem 1.15rem;font:inherit;font-weight:700;font-size:.78rem;
  cursor:pointer;transition:all var(--t);display:flex}
.show-more svg{transition:transform var(--t)}
.show-more:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.show-more.open svg{transform:rotate(180deg)}
/* center the show-more under the cards grid */
.check-scroll > .show-more{align-self:center;margin-left:auto;margin-right:auto;width:max-content}

/* ── i-knop linksboven (uitleg keuzes) ── */
.card-i{position:absolute;top:.5rem;left:.5rem;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;z-index:2;
  background:rgba(10,22,40,.5);backdrop-filter:blur(4px);color:#fff;font-family:Georgia,serif;
  font-style:italic;font-weight:700;font-size:14px;line-height:1;transition:background var(--t)}
.card-i:hover{background:var(--blue)}

/* ── Best Performance: refresh-bar + live stempel ── */
.refresh-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:0 0 1.5rem}
.refresh-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--navy);color:#fff;
  border:none;border-radius:var(--pill);padding:.55rem 1.1rem;font:inherit;font-weight:700;
  font-size:.78rem;cursor:pointer;transition:background var(--t),transform var(--t)}
.refresh-btn:hover{background:var(--blue-light)}
.refresh-btn:active{transform:translateY(1px)}
.refresh-btn.spinning svg{animation:rspin .9s linear infinite}
@keyframes rspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.refresh-status{font-size:.78rem;color:var(--grey-500);font-weight:600}
.summary .upd{color:var(--green);font-weight:600;margin-left:.25rem}

/* ── mobiel: column-layout, geen sidescroll, 1 kaart per rij, ruime tap targets ── */
@media (max-width:640px){
  /* HEADER stack: logo bovenin, switch full-width eronder, summary eronder klein */
  .check-head{flex-direction:column;align-items:stretch;gap:.55rem;
    padding:.7rem .9rem;height:auto;min-height:0}
  .brand-logo{height:26px;align-self:flex-start}
  .view-switch{display:flex;width:100%;gap:3px;padding:4px;box-sizing:border-box;max-width:100%}
  .view-switch button{flex:1 1 0;width:0;min-width:0;min-height:44px;padding:.55rem .5rem;
    font-size:.78rem;letter-spacing:.03em;justify-content:center;box-sizing:border-box;gap:.5rem}
  .view-switch .vs-ic{width:15px;height:15px}
  .summary{margin-left:0;width:100%;font-size:.74rem;text-align:left}

  /* MAIN — geen overflow, kompactere paddings */
  .check-scroll{padding:1.1rem .85rem 2.4rem;max-width:100%;overflow:hidden}
  .cards{grid-template-columns:1fr;gap:1rem}
  .rcard{border-radius:var(--r-lg)}

  /* SECTION HEAD — netjes op één regel, download-knop = icoon */
  .sec-head{flex-wrap:wrap;gap:.5rem;margin-bottom:.85rem;align-items:center}
  .sec-head:not(:first-child){margin-top:1.8rem}
  .sec-head .cname{max-width:100%;flex:1 1 0;min-width:140px;font-size:.95rem;padding:.18rem .4rem}
  .sec-head .sec-date{font-size:.72rem}
  .sec-head .sec-count{font-size:.7rem}
  .sec-dl span{display:none}
  .sec-dl{padding:.45rem .6rem;min-width:36px;min-height:36px;justify-content:center}
  .sec-line{display:none}
  .cname-edit{width:30px;height:30px}

  /* CARD — grotere tap-zones, ruimere copy */
  .shot-wrap{aspect-ratio:4/5}
  .card-x,.card-i{opacity:1;width:32px;height:32px;font-size:18px}
  .rbody{padding:.95rem 1rem 1.05rem;gap:.65rem}
  .copy-edit{font-size:.88rem;padding:.5rem .55rem;line-height:1.55}
  .iconrow{flex-wrap:wrap;gap:.5rem}
  .cic{width:40px;height:40px}
  .fb2{font-size:.88rem;min-height:80px}

  /* TOON MEER — full-width, dik tappable */
  .show-more{width:100%;justify-content:center;margin-top:1rem;padding:.85rem 1.1rem;font-size:.85rem;min-height:48px}

  /* BEST PERFORMANCE — refresh-bar staat verticaal */
  .refresh-bar{flex-direction:column;align-items:stretch;gap:.55rem;margin-bottom:1.1rem}
  .refresh-btn{justify-content:center;padding:.85rem 1.1rem;min-height:48px;font-size:.85rem}
  .refresh-status{text-align:center}

  /* MODAL — full-screen, scrollable side, dichtknop groot */
  .modal-ov{padding:0;align-items:stretch;backdrop-filter:none}
  .modal{flex-direction:column;width:100%;height:100vh;max-width:none;max-height:100vh;border-radius:0}
  .modal-img{flex:0 0 auto;max-height:42vh}
  .modal-img img,.modal-img video{max-height:42vh}
  .modal-side{flex:1 1 auto;max-height:none;padding:18px 18px 28px}
  .modal-side h3{font-size:1.1rem}
  .modal-x{top:8px;right:8px;width:38px;height:38px;font-size:22px}
  .dlbtn{display:block;text-align:center;padding:.85rem 1.2rem;min-height:48px;font-size:.9rem}

  /* meta-stats blokjes iets ruimer */
  .metrics{font-size:.82rem}
}
.camp-note{margin:2px 0 14px;color:#64748b;font-size:13.5px;line-height:1.5;max-width:780px}


/* bandheader nieuw */
.sec-head-date{align-items:baseline;gap:.6rem;margin-bottom:1.4rem}
.sec-date-big{font-size:1.15rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.sec-camp-mini{font-size:.78rem;font-weight:600;color:var(--grey-500);letter-spacing:.01em;text-transform:uppercase}

/* groep-koppen */
.group-head{display:flex;align-items:center;gap:.55rem;margin:1.4rem 0 .85rem;padding-top:.2rem}
.group-head:first-of-type{margin-top:.4rem}
.group-head .grp-dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--grey-400)}
.group-head .grp-name{font-size:.92rem;font-weight:700;color:var(--navy);letter-spacing:-.005em}
.group-head .grp-count{font-size:.7rem;color:var(--grey-500);font-weight:600;background:var(--grey-100);padding:.12rem .5rem;border-radius:var(--pill);min-width:1.4rem;text-align:center}