/* ===== Banner: Eredivisie live op ijshockey.live ===== */
.lb {
  --lb-navy: #0b2a4a;
  --lb-navy-2: #17375e;
  --lb-orange: #f26b1d;
  --lb-orange-2: #ff8a3d;
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .9fr;
  min-height: 230px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--lb-navy);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 24px 50px -24px rgba(11,42,74,.6);
}
/* stippenpatroon + gloed links */
.lb::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 18% 30%, rgba(23,99,180,.55), transparent 55%),
    radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px) 0 0 / 14px 14px,
    linear-gradient(120deg, #0a2340, var(--lb-navy-2));
}

/* ijsbaan-tekening */
.lb__rink { position: absolute; left: 30%; top: -14%; width: 46%; height: 130%; z-index: -1; transform: perspective(700px) rotateY(-18deg) rotateZ(-6deg); opacity: .9; }
.lb__rink rect { fill: rgba(240,246,252,.92); stroke: #fff; stroke-width: 6; }
.lb__rink .r { stroke: #e2283a; stroke-width: 4; fill: none; }
.lb__rink .b { stroke: #2a6fc4; stroke-width: 5; }
.lb__rink .s { fill: rgba(170,190,210,.25); }

/* spelers */
.lb__players { position: relative; height: 100%; min-height: 230px; }
.lb__p { position: absolute; bottom: 0; height: 112%; width: auto; max-width: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); transform-origin: bottom center; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.lb__p:not([src]) { visibility: hidden; }
.lb__p--1 { left: -2%; height: 88%; z-index: 1; }
.lb__p--2 { left: 20%; z-index: 3; height: 100%; }
.lb__p--3 { left: 46%; height: 86%; z-index: 2; }
.lb:hover .lb__p--1 { transform: translateX(-6px) rotate(-1deg); }
.lb:hover .lb__p--2 { transform: scale(1.04); }
.lb:hover .lb__p--3 { transform: translateX(6px) rotate(1deg); }

/* logocirkel op de grens */
.lb__badge {
  position: absolute; z-index: 5; left: 57.5%; top: 50%;
  width: 150px; height: 150px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 8px rgba(255,255,255,.25), 0 12px 30px rgba(0,0,0,.35);
}
.lb__badge img { width: 74px; height: auto; }

/* rechterpaneel */
.lb__panel {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 10px; padding: 24px 32px 24px 110px; text-align: right;
}
.lb__panel::before {
  content: ""; position: absolute; inset: 0; left: -60px; z-index: -1;
  background:
    linear-gradient(115deg, rgba(255,255,255,.14) 0 30%, transparent 30%),
    linear-gradient(135deg, var(--lb-orange-2), var(--lb-orange) 60%, #d9520c);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.lb__title {
  font: italic 900 clamp(30px, 3.6vw, 52px)/.9 var(--heading, "Barlow Condensed", sans-serif);
  text-transform: uppercase; letter-spacing: .01em; margin: 0;
  text-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.lb__sub {
  display: inline-block; background: #fff; color: var(--lb-orange);
  font: italic 900 clamp(18px, 1.9vw, 26px)/1 var(--heading, "Barlow Condensed", sans-serif);
  text-transform: uppercase; padding: 7px 14px 6px; transform: skewX(-8deg);
}
.lb__sub span { display: inline-block; transform: skewX(8deg); }
.lb__next { font-size: 13px; color: rgba(255,255,255,.9); }
.lb__next b { color: #fff; }
.lb__next .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin-right: 6px; vertical-align: 1px; animation: lbPulse 1.4s infinite; }
@keyframes lbPulse { 50% { opacity: .2; } }
.lb__btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
  background: #fff; color: var(--lb-navy);
  border-radius: 999px; padding: 11px 26px;
  font: 700 16px/1 var(--body, "Open Sans", sans-serif);
  transition: background .2s, color .2s, transform .2s;
}
.lb__btn svg { width: 14px; height: 14px; }
.lb:hover .lb__btn { background: var(--lb-navy); color: #fff; transform: translateY(-2px); }

/* --- mobiel: spelers boven, tekst onder --- */
@media (max-width: 760px) {
  .lb { grid-template-columns: 1fr; }
  .lb__players { min-height: 200px; height: 200px; overflow: hidden; }
  .lb__p--1 { left: -6%; }
  .lb__p--2 { left: 22%; }
  .lb__p--3 { left: 52%; }
  .lb__rink { left: 10%; width: 90%; height: 100%; top: 0; }
  .lb__badge { left: auto; right: 16px; top: 200px; width: 96px; height: 96px; box-shadow: 0 0 0 5px rgba(255,255,255,.25), 0 10px 24px rgba(0,0,0,.35); }
  .lb__badge img { width: 48px; }
  .lb__panel { align-items: flex-start; text-align: left; padding: 26px 20px 24px; }
  .lb__panel::before { left: 0; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
  .lb__title { padding-right: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb__p, .lb__btn { transition: none; }
  .lb__next .dot { animation: none; }
}