/* ============================================================
   BEDRIJFSPROCESSEN AUTOMATISEREN — delta styles
   Builds on system.css + pages.css + home.css. Adds the bits
   the shared page system didn't already cover: hero stat-pill,
   hero meta-row, TL;DR block, extended workflow-card meta,
   stack principles, tool-row, cross-link callout.
   ============================================================ */

/* ---- Hero stat-pill (replaces the ai-consultancy '.stat' big number) ---- */
.p-hero-aside .bpa-stat-pill{
  display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
  padding:10px 16px 10px 12px;border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--rule);
  box-shadow:0 12px 36px -14px rgba(73,120,247,.22);
}
.p-hero-aside .bpa-stat-pill b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.p-hero-aside .bpa-stat-pill .sub{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}

/* ---- Hero meta-row under p-hero (mirrors homepage .hero-meta) ---- */
.bpa-meta{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-top:40px;
}
.bpa-meta div{padding:20px 4px 20px 24px;border-right:1px solid var(--rule)}
.bpa-meta div:first-child{padding-left:4px}
.bpa-meta div:last-child{border-right:none}
.bpa-meta .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:4px}
.bpa-meta .val{font-size:14px;font-weight:600;letter-spacing:-.01em}
@media (max-width:880px){
  .bpa-meta{grid-template-columns:repeat(2,1fr)}
  /* Cells in col 1 (odd) lijnen flush-left uit met label "Gevestigd in";
     cells in col 2 (even) houden left-padding voor scheiding van de border. */
  .bpa-meta div:nth-child(odd){padding-left:4px}
  .bpa-meta div:nth-child(even){padding-left:24px;border-right:none}
  .bpa-meta div:nth-child(1), .bpa-meta div:nth-child(2){border-bottom:1px solid var(--rule)}
}

/* ---- Section head under section-label ---- */
.bpa-section-head{margin-bottom:24px;max-width:24ch}
.bpa-section-head h2{max-width:24ch}

/* ---- Section 01 — H2 + lead links, facts-card rechts ---- */
.bpa-section-01{
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;
  align-items:start;margin-bottom:36px;
}
.bpa-section-01-text h2{margin-bottom:22px;max-width:18ch}
.bpa-section-01-text .lead{max-width:48ch}
@media (max-width:1000px){.bpa-section-01{grid-template-columns:1fr;gap:32px}}

/* ---- Facts-card (rechter kolom sectie 01) ---- */
.bpa-facts-card{
  border:1px solid var(--rule);
  border-radius:var(--r-xl);
  background:var(--paper);
  padding:28px 32px;
  display:flex;flex-direction:column;gap:22px;
  box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;
}
.bpa-facts-card::before{
  content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border-radius:999px;
  background:radial-gradient(circle, rgba(73,120,247,.18), transparent 65%);
  filter:blur(20px);pointer-events:none;
}
.bpa-facts-head{position:relative;z-index:1}
.bpa-facts-head .lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal-deep);
  display:inline-flex;align-items:center;gap:10px;
}
.bpa-facts-stat{position:relative;z-index:1}
.bpa-facts-stat .num{
  font-size:clamp(48px,5vw,72px);line-height:.95;letter-spacing:-.03em;font-weight:600;
  color:var(--signal);font-feature-settings:"tnum" 1;
  margin-bottom:12px;
}
.bpa-facts-stat p{font-size:14px;line-height:1.55;color:var(--ink-2);max-width:34ch;margin-bottom:12px}
.bpa-facts-stat p em{font-family:var(--serif);font-style:italic;color:var(--signal);font-weight:400}
.bpa-facts-stat .src{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.bpa-facts-sep{height:1px;background:var(--rule);position:relative;z-index:1}
.bpa-facts-anchor{
  font-size:13px;line-height:1.55;color:var(--ink-2);max-width:34ch;
  position:relative;z-index:1;
}
.bpa-facts-anchor strong{color:var(--ink);font-weight:600}
.bpa-facts-anchor em{font-family:var(--serif);font-style:italic;color:var(--signal);font-weight:400}
.bpa-facts-list{
  list-style:none;display:flex;flex-direction:column;gap:12px;padding:0;margin:0;
  position:relative;z-index:1;
}
.bpa-facts-list li{
  display:grid;grid-template-columns:20px 1fr;gap:12px;
  font-size:14px;line-height:1.5;color:var(--ink-2);
}
.bpa-facts-list .check{color:var(--signal);font-weight:700;line-height:1.5}
.bpa-facts-list strong{color:var(--ink);font-weight:600}
@media (max-width:680px){
  .bpa-facts-card{padding:24px 22px}
}

/* ---- Team-grid override — voorkomt pages.css repeat(3,1fr) conflict ---- */
.team-strip .team-grid{grid-template-columns:1fr 2fr;gap:64px;align-items:end}
@media (max-width:1000px){.team-strip .team-grid{grid-template-columns:1fr;gap:40px}}

/* Op mobiel staan de drie portretten boven elkaar (single column) ipv 2+1
   grid uit home.css — alle drie ondernemers volledig zichtbaar zonder
   uitknijpen of dubbelspan. */
@media (max-width:680px){
  .team-strip .team-cards{grid-template-columns:1fr;gap:24px}
  .team-strip .team-cards .team-card:nth-child(3){grid-column:auto}
}

/* ============================================================
   MOBILE RESPONSIVE REFINEMENTS
   ============================================================ */

/* TL;DR label position:relative op mobile (gefixt direct in de bron-rule
   hierboven) — zorgt dat de dashed ring (::before met inset:-6px) lokaal
   blijft. Anders zou hij terugvallen naar .bpa-tldr en het hele card een
   dashed border-overflow geven. */

/* Hero H1: zekerheid voor heel smal — long words breken indien nodig.
   "Bedrijfsprocessen" past op 40px font-size in 335px wel, maar hyphens
   maakt het foolproof voor kleinere viewports of accessibility-zoom. */
@media (max-width:520px){
  .p-hero h1{overflow-wrap:break-word;hyphens:auto}
  .p-hero-aside .bpa-stat-pill{flex-wrap:wrap;gap:8px;padding:8px 14px 8px 10px}
  .p-hero-aside .bpa-stat-pill .sub{font-size:9px}
}

/* Card-paddings + heading-sizes tighter op kleinste viewport (≤480px) */
@media (max-width:480px){
  /* Pull-quote */
  .bpa-quote-card{padding:24px 22px 20px}
  .bpa-quote-card .bpa-quote-mark{font-size:120px;top:-12px;right:14px}
  .bpa-quote-card blockquote p{font-size:18px;line-height:1.4}

  /* Facts-card */
  .bpa-facts-card{padding:22px 18px;gap:18px}
  .bpa-facts-stat .num{font-size:44px;margin-bottom:10px}
  .bpa-facts-list li{font-size:13px}

  /* TL;DR */
  .bpa-tldr{padding:24px 20px}
  .bpa-tldr p{font-size:17px;line-height:1.5}

  /* Section 01 H2 tighter */
  .bpa-section-01-text h2{margin-bottom:16px}

  /* Stack principles tighter */
  .bpa-principle{padding:24px;gap:10px}
  .bpa-principle h4{font-size:18px}

  /* Crosslinks tighter */
  .bpa-crosslinks a{padding:20px 22px}
  .bpa-crosslinks a b{font-size:17px}

  /* Workflow card tighter */
  .bpa-wf{padding:22px;min-height:0}
}

/* ---- TL;DR card (GEO direct-answer block) ---- */
.bpa-tldr{
  position:relative;
  border:1px solid var(--rule);
  border-radius:var(--r-xl);
  background:linear-gradient(135deg, var(--mint) 0%, rgba(207,227,203,.45) 100%);
  padding:32px 36px 32px 110px;
  margin:8px 0 36px;
  box-shadow:var(--shadow-card);
  color:var(--mint-deep);
}
.bpa-tldr .bpa-tldr-label{
  position:absolute;top:24px;left:24px;
  width:64px;height:64px;border-radius:999px;
  background:var(--signal);color:#fff;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
}
.bpa-tldr .bpa-tldr-label::before{
  content:"";position:absolute;inset:-6px;border-radius:999px;border:1px dashed var(--signal);opacity:.4;
}
.bpa-tldr p{
  font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);line-height:1.45;
  letter-spacing:-.005em;color:var(--mint-deep);
}
@media (max-width:680px){
  .bpa-tldr{padding:28px 24px;}
  .bpa-tldr .bpa-tldr-label{position:relative;margin-bottom:16px}
}

/* ---- Explainer-sectie: paragrafen links, pull-quote rechts ---- */
.bpa-explain{
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;
  align-items:start;margin-bottom:48px;
}
.bpa-explain-text{max-width:60ch}
.bpa-explain-text p{margin-bottom:18px;color:var(--ink-2);font-size:17px;line-height:1.6}
.bpa-explain-text p:last-child{margin-bottom:0}
@media (max-width:1000px){
  .bpa-explain{grid-template-columns:1fr;gap:32px}
  .bpa-explain-text{max-width:none}
}

/* ---- Pull-quote-card naast explainer ---- */
.bpa-quote-card{
  position:relative;
  background:var(--paper-2);
  border-left:3px solid var(--signal);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:32px 32px 24px;
  display:flex;flex-direction:column;gap:20px;
  overflow:hidden;
}
.bpa-quote-card .bpa-quote-mark{
  position:absolute;top:-18px;right:18px;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:160px;line-height:1;
  color:var(--signal);opacity:.14;
  pointer-events:none;user-select:none;
}
.bpa-quote-card blockquote{position:relative;z-index:1;margin:0}
.bpa-quote-card blockquote p{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.7vw,23px);line-height:1.45;letter-spacing:-.005em;
  color:var(--ink);max-width:none;margin:0;
}
.bpa-quote-card figcaption{
  display:flex;flex-direction:column;gap:4px;position:relative;z-index:1;
  padding-top:14px;border-top:1px solid var(--rule);
}
.bpa-quote-card figcaption b{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.bpa-quote-card figcaption span{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);
}

/* ---- Team-card overrides: voorkom pages.css overflow:hidden + border-radius
       clipping op captions (Lex's tweede regel "ONDERNEMERSCHAP" viel achter de
       afgeronde hoek) ---- */
.team-strip .team-card{
  border:none;border-radius:0;background:transparent;
  overflow:visible;padding:0;
}
.team-strip .team-card:hover{transform:none;border-color:transparent}

/* ---- Comparison title above the compare table on this page ---- */
.bpa-compare-title{
  font-size:22px;font-weight:600;letter-spacing:-.01em;margin-bottom:18px;
}
.bpa-compare{margin-bottom:18px}
.bpa-compare-note{
  font-size:14px;line-height:1.55;color:var(--ink-2);max-width:70ch;
  font-style:italic;
}

/* ---- Workflow cards — extended with tijdwinst pill + meta dl ---- */
.bpa-wf-grid{gap:20px}
.bpa-wf{min-height:360px;gap:14px}
.bpa-wf .top{justify-content:space-between}
.bpa-wf .num{
  background:var(--signal-tint);color:var(--signal-deep);
  padding:5px 12px;
}
.bpa-wf .savings{
  align-self:flex-start;
  margin-top:-4px;margin-bottom:4px;
  padding:6px 12px;border-radius:999px;
  background:var(--mint);color:var(--mint-deep);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border-top:none;
}
.bpa-wf p{flex:0 0 auto}
.bpa-wf-meta{
  display:flex;flex-direction:column;gap:8px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);
}
.bpa-wf-meta > div{display:grid;grid-template-columns:90px 1fr;gap:12px;align-items:baseline}
.bpa-wf-meta dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.bpa-wf-meta dd{font-size:13px;line-height:1.4;color:var(--ink-2)}
@media (max-width:520px){
  .bpa-wf-meta > div{grid-template-columns:1fr;gap:2px}
}

/* ---- Stack section ---- */
.bpa-stack{padding:80px 0}
.bpa-principles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px;
}
.bpa-principle{
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);
  padding:32px;display:flex;flex-direction:column;gap:14px;
  transition:transform .35s ease, border-color .35s ease;
}
.bpa-principle:hover{transform:translateY(-4px);border-color:var(--signal)}
.bpa-principle .ix{
  font-family:var(--serif);font-style:italic;color:var(--signal);
  font-size:42px;font-weight:400;line-height:1;
}
.bpa-principle h4{font-size:20px;font-weight:600;letter-spacing:-.01em}
.bpa-principle p{font-size:14px;line-height:1.55;color:var(--ink-2)}
@media (max-width:880px){.bpa-principles{grid-template-columns:1fr}}

/* ---- Tool-row ---- */
.bpa-tools{
  border:1px solid var(--rule);border-radius:var(--r-xl);background:var(--paper-2);
  padding:24px 32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.bpa-tools-lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);
  flex:none;
}
.bpa-tools-list{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;
}
.bpa-tools-list li{
  padding:8px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--rule);
  font-size:13px;font-weight:500;color:var(--ink);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.bpa-tools-list li:hover{border-color:var(--signal);background:var(--signal-tint);transform:translateY(-2px)}
@media (max-width:680px){
  .bpa-tools{padding:20px 22px;flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---- Cross-link callout (above footer) ---- */
.bpa-crosslinks{padding:0 0 80px}
.bpa-crosslinks .wrap > h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:20px;
}
.bpa-crosslinks ul{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0;margin:0;
}
.bpa-crosslinks li{display:block}
.bpa-crosslinks a{
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);
  padding:24px 26px;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.bpa-crosslinks a:hover{border-color:var(--signal);transform:translateX(4px);background:var(--paper-2)}
.bpa-crosslinks a b{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.bpa-crosslinks a span{font-size:14px;line-height:1.4;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.bpa-crosslinks a .arrow{color:var(--signal);transition:transform .25s ease}
.bpa-crosslinks a:hover .arrow{transform:translateX(4px)}
@media (max-width:880px){.bpa-crosslinks ul{grid-template-columns:1fr}}