/* Page-specific styles for /de/flyer/kritis — the "two parallel laws" flyer.
   Builds on flyer-common.css (sheet shell, badges, process/CTA box, footer).
   All colors route through --fp-* tokens from the shared file, plus two
   locally-scoped pillar accent tints (screen + print pairs) defined here.
   Spacing/font-sizes here run tighter than the shared defaults so the page
   (header + 2 pillars + cheatsheet + callout + 9 sector pills + process/CTA)
   fits the one-page print budget. */

.flyer-page {
  /* Pillar 1 "Cyber" tint — reuses the shared accent hue (blue). */
  --fpk-cyber: var(--fp-accent);
  --fpk-cyber-soft: var(--fp-accent-soft);
  --fpk-cyber-border: var(--fp-accent-border);

  /* Pillar 2 "Physisch" tint — a teal/green variant, own local tokens. */
  --fpk-phys: #26a69a;
  --fpk-phys-soft: rgba(38, 166, 154, 0.14);
  --fpk-phys-border: rgba(38, 166, 154, 0.4);
}

@media print {
  .flyer-page {
    --fpk-phys: #00796b;
    --fpk-phys-soft: #e3f3f1;
    --fpk-phys-border: #b9dfda;
  }
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.flyer-page .flyer-subline { margin-bottom: 0.9rem; }
.flyer-page .flyer-badges { margin-bottom: 1.1rem; }

/* ── Pillars ─────────────────────────────────────────────────────────────── */

.flyer-pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 0.85rem;
}

.flyer-pillar {
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  background: var(--fp-surface);
}

.flyer-pillar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--fp-border);
}

.flyer-pillar h2 {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

.flyer-pillar-date {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: 20px;
  padding: 3px 10px;
}

.flyer-pillar--cyber h2 { color: var(--fpk-cyber); }
.flyer-pillar--cyber .flyer-pillar-date { color: var(--fpk-cyber); background: var(--fpk-cyber-soft); border: 1px solid var(--fpk-cyber-border); }
.flyer-pillar--cyber { border-color: var(--fpk-cyber-border); }

.flyer-pillar--phys h2 { color: var(--fpk-phys); }
.flyer-pillar--phys .flyer-pillar-date { color: var(--fpk-phys); background: var(--fpk-phys-soft); border: 1px solid var(--fpk-phys-border); }
.flyer-pillar--phys { border-color: var(--fpk-phys-border); }

.flyer-pillar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.flyer-pillar-list li {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--fp-muted);
  padding-left: 1.1em;
  position: relative;
}

.flyer-pillar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.flyer-pillar--cyber .flyer-pillar-list li::before { background: var(--fpk-cyber); }
.flyer-pillar--phys .flyer-pillar-list li::before { background: var(--fpk-phys); }

/* ── Cheatsheet strip ────────────────────────────────────────────────────── */

.flyer-cheatsheet {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: 0.48rem 0.95rem;
  margin-bottom: 0.8rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--fp-muted);
  letter-spacing: 0.01em;
}

/* ── OT/ICS callout ──────────────────────────────────────────────────────── */

.flyer-callout-box {
  background: var(--fp-accent-soft);
  border: 1px solid var(--fp-accent-border);
  border-radius: 12px;
  padding: 0.65rem 1rem;
  margin-bottom: 0.75rem;
}

.flyer-callout-box h2 {
  font-size: 0.87rem;
  font-weight: 800;
  color: var(--fp-text);
  margin: 0 0 0.45rem;
}

.flyer-callout-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.flyer-callout-list li {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--fp-muted);
  padding-left: 1.1em;
  position: relative;
}

.flyer-callout-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fp-accent);
}

/* ── Sectors ─────────────────────────────────────────────────────────────── */

.flyer-sectors { margin-bottom: 0.75rem; }
.flyer-sectors .flyer-h2 { margin-bottom: 0.5rem; }

.flyer-sector-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.45rem; }

.flyer-sector-pill {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--fp-text);
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 20px;
  padding: 4px 11px;
}

.flyer-sector-note { font-size: 0.69rem; color: var(--fp-muted-2); line-height: 1.45; margin: 0; }

/* ── Bottom: process + CTA side by side ─────────────────────────────────── */

.flyer-bottom { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.75rem; align-items: start; }

@media (max-width: 700px) {
  .flyer-pillar-grid { grid-template-columns: 1fr; }
  .flyer-bottom { grid-template-columns: 1fr; }
}