/* ==========================================================================
   „Živě z komunity" – úzký pruh na hlavní stránce (achievement, rekord RZ,
   penalizace, nový jezdec). Na desktopu jeden řádek, na tabletu 2×2,
   na mobilu jedna karta na šířku, které se samy střídají (posun prstem jde vždy).
   ========================================================================== */
.zv{--zv-ach:#e0a300;--zv-rek:#b46cff;--zv-pen:var(--red2,#ff2438);--zv-reg:#3fa9ff;
  display:flex;align-items:stretch;gap:0;margin-top:12px;position:relative;
  background:linear-gradient(160deg,var(--card,#12141a),var(--card2,#0d0f14));border:1px solid var(--line,rgba(255,255,255,.1));
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.zv-hd{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;
  padding:8px 18px 8px 16px;border-right:1px solid var(--line2,rgba(255,255,255,.06));
  background:linear-gradient(90deg,rgba(239,0,28,.16),transparent);position:relative}
.zv-hd b{font-family:var(--cond);font-weight:900;font-style:italic;text-transform:uppercase;font-size:19px;letter-spacing:.06em;color:var(--head,#fff);line-height:1}
.zv-hd span:last-child{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--mut,#7e8089);white-space:nowrap}
.zv-tecka{position:absolute;top:10px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--red,#ef001c);box-shadow:0 0 0 0 rgba(239,0,28,.6)}

.zv-list{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.zv-it{--c:var(--zv-ach);display:flex;gap:10px;align-items:center;min-width:0;padding:9px 14px;position:relative;
  border-left:1px solid var(--line2,rgba(255,255,255,.06))}
.zv-it:first-child{border-left:0}
.zv-rek{--c:var(--zv-rek)}.zv-pen{--c:var(--zv-pen)}.zv-reg{--c:var(--zv-reg)}
.zv-it::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c);opacity:.55;transform-origin:left;scale:.18 1}
.zv-ic{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;color:var(--c);position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--c) 14%,transparent);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.zv-ic svg{width:19px;height:19px}
.zv-ic img{position:absolute;inset:2px;width:30px;height:30px;object-fit:contain;background:var(--card,#12141a)}
.zv-tx{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.25}
.zv-l{display:flex;align-items:baseline;gap:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--c);white-space:nowrap}
.zv-kdy{margin-left:auto;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--mut,#7e8089);font-size:11px}
.zv-kdo{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;font-weight:700;color:var(--head,#fff)}
.zv-kdo .hr-driver,.zv-kdo .name{display:inline-flex;align-items:center;gap:6px;max-width:100%;color:inherit;text-decoration:none}
.zv-kdo .dn{overflow:hidden;text-overflow:ellipsis}
.zv-kdo .hr-driver:hover{color:var(--red2,#ff2438)}
.zv-co{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--txt2,#b1b2b7);text-decoration:none}
a.zv-co:hover{color:var(--head,#fff)}
.zv-co b{font-weight:700;color:var(--txt,#f3f4f6);font-variant-numeric:tabular-nums}
.zv-co i{font-style:normal}
.zv-co b+i::before{content:" · ";color:var(--mut,#7e8089)}
.zv-nic{color:var(--mut,#7e8089);font-style:italic}
.zv-prazdno .zv-ic{filter:grayscale(1);opacity:.55}

/* nová událost: krátce se rozsvítí a dostane štítek */
.zv-nove{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%)}
.zv-nove .zv-l::after{content:"Nové";order:2;padding:1px 5px;font-size:9px;letter-spacing:.1em;color:#0b0c10;background:var(--c);border-radius:2px}
.zv-nove .zv-kdy{order:3}

.zv-teckyM{display:none}

/* ---------------------------------------------------------------- tablet */
@media(max-width:1180px){
  .zv-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zv-it:nth-child(3){border-left:0}
  .zv-it:nth-child(n+3){border-top:1px solid var(--line2,rgba(255,255,255,.06))}
}

/* ---------------------------------------------------------------- mobil */
@media(max-width:700px){
  .zv{flex-direction:column}
  .zv-hd{flex-direction:row;align-items:center;gap:8px;padding:7px 12px;border-right:0;border-bottom:1px solid var(--line2,rgba(255,255,255,.06))}
  .zv-hd b{font-size:16px}
  .zv-tecka{position:static;order:-1;flex:0 0 8px}
  .zv-teckyM{display:flex;gap:5px;margin-left:auto}
  .zv-teckyM button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--ov18,rgba(255,255,255,.18));cursor:pointer}
  .zv-teckyM button[aria-current="true"]{background:var(--red,#ef001c);width:16px;border-radius:4px}
  .zv-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .zv-list::-webkit-scrollbar{display:none}
  .zv-it{flex:0 0 100%;scroll-snap-align:start;border:0!important;padding:10px 12px}
}

/* ---------------------------------------------------------------- pohyb (jen když ho web má zapnutý) */
.hr-pohyb .zv-tecka{animation:zv-tep 1.8s ease-out infinite}
@keyframes zv-tep{0%{box-shadow:0 0 0 0 rgba(239,0,28,.65)}70%{box-shadow:0 0 0 9px rgba(239,0,28,0)}100%{box-shadow:0 0 0 0 rgba(239,0,28,0)}}

.hr-pohyb .zv-it{opacity:0;translate:0 8px;transition:opacity .45s ease,translate .45s cubic-bezier(.2,.8,.2,1)}
.hr-pohyb .zv.zv-vidim .zv-it{opacity:1;translate:0 0}
.hr-pohyb .zv.zv-vidim .zv-it:nth-child(2){transition-delay:.08s}
.hr-pohyb .zv.zv-vidim .zv-it:nth-child(3){transition-delay:.16s}
.hr-pohyb .zv.zv-vidim .zv-it:nth-child(4){transition-delay:.24s}
.hr-pohyb .zv-it::before{transition:scale .5s ease}
.hr-pohyb .zv-it:hover::before{scale:1 1}

/* odlesk přes ikonu, každá v jiný čas, ať pruh „dýchá" */
.hr-pohyb .zv-ic::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  translate:-120% 0;animation:zv-odlesk 6s ease-in-out infinite}
.hr-pohyb .zv-rek .zv-ic::after{animation-delay:1.5s}
.hr-pohyb .zv-pen .zv-ic::after{animation-delay:3s}
.hr-pohyb .zv-reg .zv-ic::after{animation-delay:4.5s}
@keyframes zv-odlesk{0%,70%{translate:-120% 0}85%,100%{translate:120% 0}}

.hr-pohyb .zv-nove{animation:zv-blik 1.2s ease-out 2}
@keyframes zv-blik{0%{box-shadow:inset 0 0 0 1px var(--c)}100%{box-shadow:inset 0 0 0 1px transparent}}
.hr-pohyb .zv-nove .zv-ic{animation:zv-hop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes zv-hop{0%{scale:.6}100%{scale:1}}

/* kdo nechce pohyb, ten ho nedostane */
@media(prefers-reduced-motion:reduce){
  .zv *,.zv *::before,.zv *::after{animation:none!important;transition:none!important}
  .hr-pohyb .zv-it{opacity:1;translate:0 0}
}