/* ==========================================================================
   hero-brands.css — Homepage "Alles onder Het Portaal" umbrella hero
   Scoped body.hetportaal. Reuses --hp-* tokens (modern.css) + navbar colours.
   Loads after homepage.css (hp-home dep). No new tokens; fallbacks inline.
   Two parts: (1) categorized clickable brand grid, (2) auto-scroll logo ribbon.
   ========================================================================== */

/* ---- Band -------------------------------------------------------------- */
body.hetportaal .hp-hero-brands{
  background:var(--hp-bg-subtle,#f6f7f9);
  padding:var(--hp-space-8,56px) 0;
  margin-bottom:var(--hp-space-7,44px);
}
body.hetportaal .hp-hb-inner{
  max-width:var(--hp-container,1240px);
  margin:0 auto;
  padding:0 var(--hp-space-4,20px);
}

/* ---- Head -------------------------------------------------------------- */
body.hetportaal .hp-hb-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-bottom:var(--hp-space-6,32px);
}
body.hetportaal .hp-hb-head-main{ min-width:0; }
body.hetportaal .hp-hb-trust{
  display:inline-flex; align-items:center; gap:12px; flex:none;
  padding:8px 18px 8px 10px;
  background:#fff;
  border:1px solid var(--hp-border,#e6e8eb);
  border-radius:var(--hp-radius-pill,999px);
  box-shadow:var(--hp-shadow-sm,0 1px 3px rgba(20,24,31,.06));
}
body.hetportaal .hp-hb-trust-badge{ width:56px; height:56px; object-fit:contain; display:block; }
body.hetportaal .hp-hb-trust-text{
  display:flex; flex-direction:column;
  font-size:12px; color:#5b6471; line-height:1.3;
}
body.hetportaal .hp-hb-trust-text strong{ font-size:13.5px; color:#14181f; }
body.hetportaal .hp-hb-eyebrow{
  margin:0 0 6px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hp-nav-accent,#3f8fd0);
}
body.hetportaal .hp-hb-title{
  margin:0;
  font-size:clamp(22px,2.4vw,30px); font-weight:800; line-height:1.2;
  color:#14181f;
}

/* ---- Brand-finder: live search + categorie-pills ------------------------ */
body.hetportaal .hp-hb-finder{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  margin-top:var(--hp-space-5,24px);
}
body.hetportaal .hp-hb-finder-search{
  display:flex; align-items:center; gap:10px;
  flex:1 1 260px; min-width:220px; max-width:420px;
  padding:11px 16px;
  background:#fff;
  border:1px solid var(--hp-border,#e6e8eb);
  border-radius:var(--hp-radius-pill,999px);
  box-shadow:var(--hp-shadow-sm,0 1px 3px rgba(20,24,31,.06));
  transition:border-color var(--hp-dur,.18s) var(--hp-ease,ease), box-shadow var(--hp-dur,.18s) var(--hp-ease,ease);
}
body.hetportaal .hp-hb-finder-search:focus-within{
  border-color:var(--hp-nav-accent,#3f8fd0);
  box-shadow:0 0 0 3px rgba(63,143,208,.18);
}
body.hetportaal .hp-hb-finder-search svg{ flex:none; color:#7a8290; }
body.hetportaal .hp-hb-finder-input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-size:14px; color:#14181f;
}
body.hetportaal .hp-hb-finder-input::placeholder{ color:#9aa2ad; }
body.hetportaal .hp-hb-finder-pills{ display:flex; flex-wrap:wrap; gap:8px; }
body.hetportaal .hp-hb-finder-pill{
  padding:7px 16px;
  border-radius:var(--hp-radius-pill,999px);
  border:1px solid var(--hp-border,#e6e8eb);
  background:#fff;
  font-size:13px; font-weight:600; line-height:1.2;
  color:#5b6471; cursor:pointer;
  transition:all var(--hp-dur,.18s) var(--hp-ease,ease);
}
body.hetportaal .hp-hb-finder-pill:hover{
  border-color:#b8d0e3; color:#1f5c8c; background:#eef3f8;
}
body.hetportaal .hp-hb-finder-pill.is-active{
  background:#3f8fd0; border-color:#3f8fd0; color:#fff;
}
body.hetportaal .hp-hb-finder-pill:focus-visible,
body.hetportaal .hp-hb-finder-input:focus-visible{
  outline:2px solid var(--hp-nav-accent,#3f8fd0); outline-offset:2px;
}
body.hetportaal .hp-hb-finder-empty{
  flex-basis:100%; margin:4px 0 0;
  font-size:13.5px; color:#7a8290;
}
body.hetportaal .hp-hb-card.is-hidden,
body.hetportaal .hp-hb-group.is-empty{ display:none; }

/* ---- UITGELICHT showcase: live scaled-iframe preview cards -------------- */
body.hetportaal .hp-hb-showcase{
  display:grid; grid-template-columns:1fr; gap:20px;
  margin-top:var(--hp-space-6,32px);
}
body.hetportaal .hp-hb-showcase-label{
  grid-column:1/-1;
  margin:0;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#7a8290;
}
body.hetportaal .hp-hb-show{
  display:grid; grid-template-columns:var(--fw,460px) 1fr; gap:28px; align-items:center;
  background:#fff;
  border:1px solid var(--hp-border,#e6e8eb);
  border-radius:var(--hp-radius-lg,18px);
  box-shadow:var(--hp-shadow-sm,0 1px 3px rgba(20,24,31,.06));
  padding:var(--hp-space-4,20px);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  /* frame width (--fw) MUST equal 1280 * --fs so the scaled iframe fills the tile exactly */
  --fw:220px; --fh:165px; --fs:0.171875;
}
body.hetportaal .hp-hb-show:hover{
  transform:translateY(-4px);
  box-shadow:var(--hp-shadow-md,0 12px 28px -12px rgba(20,24,31,.22));
  border-color:#d6dde5;
}

/* Preview tile — the clickable frame that crops a scaled 1280px live render. */
body.hetportaal .hp-hb-show-frame{
  position:relative; display:block;
  width:var(--fw,460px); height:var(--fh,345px);
  border-radius:var(--hp-radius-md,10px);
  overflow:hidden;
  background:#f3efe7;
  box-shadow:inset 0 0 0 1px rgba(20,24,31,.06);
  text-decoration:none;
}
body.hetportaal .hp-hb-show-scale{ position:absolute; inset:0; }
body.hetportaal .hp-hb-show-frame iframe{
  /* !important defeats the theme's global `img,iframe{max-width:100%}` which would
     otherwise clamp the iframe to its 460px box and break the 1280px->scale math. */
  width:1280px !important; height:960px !important; max-width:none !important; min-width:1280px;
  border:0;
  transform:scale(var(--fs,0.359375)); transform-origin:0 0;
  pointer-events:none; /* preview only — the frame anchor handles the click */
}
body.hetportaal .hp-hb-show-live{
  position:absolute; top:10px; left:10px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  background:rgba(20,24,31,.72); color:#fff;
  border-radius:var(--hp-radius-pill,999px);
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
body.hetportaal .hp-hb-show-dot{
  width:7px; height:7px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:hp-hb-pulse 2s infinite;
}
@keyframes hp-hb-pulse{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,.6); }
  70%{ box-shadow:0 0 0 6px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}
body.hetportaal .hp-hb-show-frame:focus-visible{
  outline:2px solid var(--hp-nav-accent,#3f8fd0); outline-offset:3px;
}

/* Text column beside the preview. */
body.hetportaal .hp-hb-show-body{ min-width:0; }
body.hetportaal .hp-hb-show-title{ margin:0; font-size:20px; font-weight:800; color:#14181f; }
body.hetportaal .hp-hb-show-desc{ margin:8px 0 16px; font-size:14px; color:#5b6471; line-height:1.5; }
body.hetportaal .hp-hb-show-cta{ display:flex; flex-wrap:wrap; gap:10px; }
body.hetportaal .hp-hb-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:var(--hp-radius-pill,999px);
  font-size:14px; font-weight:700; text-decoration:none;
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
body.hetportaal .hp-hb-btn svg{ transition:transform .18s ease; }
body.hetportaal .hp-hb-btn-primary{ background:var(--hp-nav-accent,#3f8fd0); color:#fff; }
body.hetportaal .hp-hb-btn-primary:hover{ background:var(--hp-nav-accent-strong,#2f74b0); }
body.hetportaal .hp-hb-btn-primary:hover svg{ transform:translateX(3px) translateY(-3px); }
body.hetportaal .hp-hb-btn-ghost{
  background:#fff; color:var(--hp-nav-accent,#3f8fd0); border-color:var(--hp-border,#e6e8eb);
}
body.hetportaal .hp-hb-btn-ghost:hover{ border-color:var(--hp-nav-accent,#3f8fd0); background:var(--hp-nav-hover,#eef3f8); }
body.hetportaal .hp-hb-btn:focus-visible{ outline:2px solid var(--hp-nav-accent,#3f8fd0); outline-offset:2px; }

/* Stack preview above text on narrow viewports; use a smaller matched scale. */
@media (max-width:820px){
  body.hetportaal .hp-hb-show{
    grid-template-columns:1fr;
    --fw:200px; --fh:150px; --fs:0.15625;
  }
  body.hetportaal .hp-hb-show-frame{ justify-self:center; }
}

/* Side-by-side on desktop (3 cols); each card stacks image-over-text
   internally so text isn't squeezed next to a 220px preview in a ~380px
   column. Breakpoint at 900px keeps the fixed 220px frame (--fw default
   above) clear of the ~233px min column width at that size. */
@media (min-width:900px){
  body.hetportaal .hp-hb-showcase{ grid-template-columns:repeat(3,1fr); align-items:start; }
  body.hetportaal .hp-hb-show{ grid-template-columns:1fr; }
  body.hetportaal .hp-hb-show-frame{ justify-self:center; }
}

/* ---- Collapsible toggle (native <details>/<summary>) ------------------- */
body.hetportaal .hp-hb-collapse{ margin-top:var(--hp-space-5,24px); }
body.hetportaal .hp-hb-toggle{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px;
  background:#fff;
  border:1px solid var(--hp-border,#e6e8eb);
  border-radius:var(--hp-radius-pill,999px);
  box-shadow:var(--hp-shadow-sm,0 1px 3px rgba(20,24,31,.06));
  font-size:14px; font-weight:700; color:#14181f;
  cursor:pointer; user-select:none;
  list-style:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.hetportaal .hp-hb-toggle::-webkit-details-marker{ display:none; }
body.hetportaal .hp-hb-toggle:hover{
  border-color:#d6dde5; background:var(--hp-nav-hover,#eef3f8);
}
body.hetportaal .hp-hb-collapse .hp-hb-toggle-less{ display:none; }
body.hetportaal .hp-hb-collapse[open] .hp-hb-toggle-more{ display:none; }
body.hetportaal .hp-hb-collapse[open] .hp-hb-toggle-less{ display:inline; }
body.hetportaal .hp-hb-toggle-ico{
  color:var(--hp-nav-accent,#3f8fd0);
  transition:transform .2s ease;
}
body.hetportaal .hp-hb-collapse[open] .hp-hb-toggle-ico{ transform:rotate(180deg); }
body.hetportaal .hp-hb-toggle:focus-visible{
  outline:2px solid var(--hp-nav-accent,#3f8fd0); outline-offset:2px;
}
body.hetportaal .hp-hb-groups{ margin-top:var(--hp-space-4,20px); }

/* ---- Group + section label (mirrors .hp-mm-list-title) ------------------ */
body.hetportaal .hp-hb-group{ margin-top:var(--hp-space-6,32px); }
body.hetportaal .hp-hb-group:first-of-type{ margin-top:var(--hp-space-5,24px); }
body.hetportaal .hp-hb-group-title{
  margin:0 0 14px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#7a8290;
  padding-bottom:8px;
  border-bottom:1px dashed rgba(20,24,31,.08);
}

/* ---- Grid -------------------------------------------------------------- */
body.hetportaal .hp-hb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--hp-gutter,16px);
}

/* ---- Card -------------------------------------------------------------- */
body.hetportaal .hp-hb-card{
  display:flex; align-items:center; gap:14px;
  background:#fff;
  border:1px solid var(--hp-border,#e6e8eb);
  border-radius:var(--hp-radius-lg,18px);
  box-shadow:var(--hp-shadow-sm,0 1px 3px rgba(20,24,31,.06));
  padding:var(--hp-space-4,20px);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.hetportaal .hp-hb-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--hp-shadow-md,0 12px 28px -12px rgba(20,24,31,.22));
  border-color:#d6dde5;
}

body.hetportaal .hp-hb-logo{
  flex:none;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--hp-radius-md,10px);
  background:#f3efe7;
  overflow:hidden;
}
body.hetportaal .hp-hb-logo img{
  width:100%; height:100%; object-fit:contain; display:block;
}
body.hetportaal .hp-hb-mono{
  font-size:18px; font-weight:800; line-height:1;
  color:var(--hp-nav-accent,#3f8fd0);
}

body.hetportaal .hp-hb-meta{ display:flex; flex-direction:column; min-width:0; }
body.hetportaal .hp-hb-name{
  font-size:15px; font-weight:700; color:#14181f;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.hetportaal .hp-hb-desc{
  font-size:12.5px; color:#5b6471; line-height:1.35; margin-top:2px;
}

body.hetportaal .hp-hb-arrow{
  margin-left:auto;
  font-size:18px; line-height:1; color:var(--hp-nav-accent,#3f8fd0);
  transition:transform .18s ease;
}
body.hetportaal .hp-hb-card:hover .hp-hb-arrow{ transform:translateX(4px); }

/* ---- Marquee (pure CSS, the "scrolling thing") ------------------------- */
body.hetportaal .hp-hb-marquee{
  overflow:hidden;
  margin-top:var(--hp-space-7,44px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
body.hetportaal .hp-hb-track{
  display:flex; gap:var(--hp-space-5,24px);
  width:max-content;
  animation:hp-hb-scroll 60s linear infinite;
}
@keyframes hp-hb-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
body.hetportaal .hp-hb-marquee:hover .hp-hb-track{ animation-play-state:paused; }

body.hetportaal .hp-hb-chip{
  flex:none;
  display:flex; align-items:center; gap:10px;
  padding:8px 16px 8px 8px;
  background:#fff;
  border:1px solid var(--hp-border,#e6e8eb);
  border-radius:var(--hp-radius-pill,999px);
  text-decoration:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
body.hetportaal .hp-hb-chip:hover{
  border-color:#d6dde5;
  box-shadow:var(--hp-shadow-sm,0 1px 3px rgba(20,24,31,.06));
}
body.hetportaal .hp-hb-chip .hp-hb-logo{ width:34px; height:34px; }
body.hetportaal .hp-hb-chip .hp-hb-mono{ font-size:15px; }
body.hetportaal .hp-hb-chip-name{
  font-size:13.5px; font-weight:600; color:#2b2b2b; white-space:nowrap;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width:575px){
  body.hetportaal .hp-hb-grid{ grid-template-columns:1fr; }
  body.hetportaal .hp-hero-brands{ padding:36px 0; }
}

/* ---- Focus visible ----------------------------------------------------- */
body.hetportaal .hp-hb-card:focus-visible,
body.hetportaal .hp-hb-chip:focus-visible{
  outline:2px solid var(--hp-nav-accent,#3f8fd0);
  outline-offset:2px;
}

/* ---- Reduced motion: stop animation, ribbon becomes swipeable strip ---- */
@media (prefers-reduced-motion:reduce){
  body.hetportaal .hp-hb-track{ animation:none; transform:none; }
  body.hetportaal .hp-hb-marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.hetportaal .hp-hb-card,
  body.hetportaal .hp-hb-arrow{ transition:none; }
}