/* 4U Bezpieczna szkoła – baner · © 2026 Komputerowka.pl · Arnold Basiński */
.bs4u{
  --bg:#0b1220;--panel:#121c2e;--ink:#eef3fb;--muted:#9fb0c8;--line:#26354f;--acc:#ffd23f;--ok:#3ddc97;
  container-type:inline-size;position:relative;isolation:isolate;box-sizing:border-box;
  margin:28px 0;border-radius:22px;overflow:hidden;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  box-shadow:0 18px 50px -18px rgba(5,10,25,.55);
}
.bs4u__in{display:grid;grid-template-columns:1fr;border-radius:inherit;overflow:hidden}
.bs4u *,.bs4u *::before,.bs4u *::after{box-sizing:border-box}
.bs4u::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--bs4u-a,0deg),#ffd23f,#3ddc97,#5aa9ff,#ff7a59,#ffd23f);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;animation:bs4u-spin 8s linear infinite}
@property --bs4u-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes bs4u-spin{to{--bs4u-a:360deg}}

/* scena */
.bs4u__stage{position:relative;aspect-ratio:16/10;min-height:200px;background:radial-gradient(120% 90% at 30% 20%,#18253b 0,#0b1220 70%)}
.bs4u__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.bs4u__steps{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.bs4u__step{font:800 11px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--c);
  padding:6px 9px;border-radius:999px;background:rgba(8,13,24,.72);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(4px);opacity:.45;transform:translateY(0);transition:opacity .4s,transform .4s,border-color .4s,box-shadow .4s}
.bs4u__step.is-on{opacity:1;transform:translateY(-3px);border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}

/* treść */
.bs4u__body{position:relative;padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px}
.bs4u .bs4u__kicker{margin:0;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bs4u__dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:bs4u-ping 2s infinite}
@keyframes bs4u-ping{70%{box-shadow:0 0 0 9px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.bs4u .bs4u__title{margin:0;padding:0;border:0;color:var(--ink);font:800 clamp(26px,5.2cqi,40px)/1.02 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:-.01em;text-transform:uppercase}
.bs4u .bs4u__title b{color:var(--acc);font-weight:900}
.bs4u .bs4u__text{margin:0;color:var(--muted);font-size:15.5px;max-width:58ch}
.bs4u .bs4u__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bs4u .bs4u__chips li{margin:0;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:12.5px;font-weight:600;color:var(--ink)}
.bs4u .bs4u__chips li::before,.bs4u .bs4u__chips li::marker{content:none}
.bs4u__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.bs4u a.bs4u__btn{display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--panel);color:var(--ink);font-weight:800;font-size:15px;text-decoration:none;line-height:1.1;
  transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.bs4u a.bs4u__btn:hover,.bs4u a.bs4u__btn:focus-visible{transform:translateY(-2px);border-color:var(--acc);color:var(--ink)}
.bs4u a.bs4u__btn--go{background:var(--acc);border-color:var(--acc);color:#0b1220;box-shadow:0 8px 24px -8px rgba(255,210,63,.65)}
.bs4u a.bs4u__btn--go:hover,.bs4u a.bs4u__btn--go:focus-visible{color:#0b1220;background:#ffe06e;box-shadow:0 12px 28px -8px rgba(255,210,63,.8)}
.bs4u a.bs4u__uk{color:var(--muted);font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px dashed rgba(159,176,200,.5)}
.bs4u a.bs4u__uk:hover,.bs4u a.bs4u__uk:focus-visible{color:var(--ink)}
.bs4u a:focus-visible{outline:3px solid #5aa9ff;outline-offset:3px}

/* baner: obok siebie na szerokich kontenerach */
@container (min-width:680px){
  .bs4u--banner .bs4u__in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .bs4u--banner .bs4u__stage{aspect-ratio:auto;min-height:320px}
  .bs4u--banner .bs4u__body{padding:30px 30px 30px 26px;justify-content:center}
}
.bs4u--card .bs4u__stage{min-height:0}
.bs4u--card .bs4u__body{padding:18px 18px 20px}
.bs4u--card .bs4u__title{font-size:26px}
.bs4u--card .bs4u__text{font-size:14.5px}

/* awaryjnie bez container queries */
@supports not (container-type:inline-size){
  @media (min-width:900px){.bs4u--banner .bs4u__in{grid-template-columns:1.05fr 1fr}}
}
@media (prefers-reduced-motion:reduce){
  .bs4u::before,.bs4u__dot{animation:none}
  .bs4u__step{transition:none}
}
.bs4u--card .bs4u__steps{left:8px;right:8px;bottom:8px;gap:4px}
.bs4u--card .bs4u__step{font-size:9.5px;padding:5px 7px;letter-spacing:.08em}