/* ============================================================
   SNAILER — stat bar s ikonkami (setups / vehicle models / countries)
   Bez závislostí, bez JS (JS je len na voliteľnú reveal animáciu).
   ============================================================ */

.sn-statbar{
  /* ---- ladiace premenné: uprav tu, nikde inde ---- */
  --sn-ink:      #0f172a;   /* text a čísla                */
  --sn-accent:   #000000;   /* koliesko "+7" / "+67"       */
  --sn-muted:    #64748b;   /* popisky pod číslom          */
  --sn-line:     #e2e8f0;   /* rámy a deliace čiary        */
  --sn-radius:   14px;

  --sn-dot:      28px;      /* priemer kolieska            */
  --sn-overlap:  -6px;      /* prekryv (záporné číslo!)    */
  --sn-logo:     16px;      /* veľkosť loga v koliesku     */

  /* Pravidlo: --sn-logo musí byť aspoň o 2×|--sn-overlap| menšie
     než --sn-dot, inak prekryv začne orezávať samotnú značku.
     28 − 2×6 = 16 → presne sedí.                          */

  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:0 0 28px;
  border:1px solid var(--sn-line);
  border-radius:var(--sn-radius);
  background:#fff;
  overflow:hidden;
  pointer-events:auto;
  cursor:pointer;
}

/* ---------- bunka ---------- */
.sn-stat{
  padding:20px 14px 18px;
  border-right:1px solid var(--sn-line);
  text-align:center;
}
.sn-stat:last-child{ border-right:0 }

.sn-stat__n{
  font-size:30px;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1;
  color:var(--sn-ink);
}
.sn-stat__t{
  font-size:12.5px;
  color:var(--sn-muted);
  margin-top:5px;
}

/* ---------- rad koliesok ---------- */
.sn-stack{
  display:flex;
  justify-content:center;
  margin-top:12px;
}
.sn-stack > *{
  flex:0 0 auto;
  margin-left:var(--sn-overlap);
  transition:margin .24s cubic-bezier(.2,.8,.3,1);
}
.sn-stack > *:first-child{ margin-left:0 }

/* rozostúpenie na hover celej bunky */
.sn-stat:hover .sn-stack > *{ margin-left:2px }
.sn-stat:hover .sn-stack > *:first-child{ margin-left:0 }

/* ---------- koliesko ---------- */
.sn-dot{
  width:var(--sn-dot);
  height:var(--sn-dot);
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 1px 3px rgba(15,23,42,.28);
  object-fit:cover;          /* pre <img> fotky a vlajky */
  display:block;
  background:#e2e8f0;        /* podklad kým sa načíta    */
}

/* ------------------------------------------------------------
   Koliesko s ikonou auta — farebné pozadie, biela silueta.
   Farby: paleta "Tonal", 9 odtieňov v rovnakej svetlosti
   a sýtosti. Detaily a alternatívy v PALETTE.md.
   ------------------------------------------------------------ */
.sn-dot--car{
  display:flex;
  align-items:center;
  justify-content:center;
}
.sn-dot--car svg{
  width:var(--sn-logo);
  height:var(--sn-logo);
  display:block;
}

/* Paleta "Tonal" — najhorší kontrast bielej ikony 5,12 : 1
   (WCAG 1.4.11 žiada pre grafické prvky 3 : 1)
   Alternatívne palety sú v PALETTE.md.                         */
.sn-dot--c1{ background:#346ca3 }   /* modrá        */
.sn-dot--c2{ background:#635fa3 }   /* indigová     */
.sn-dot--c3{ background:#83548e }   /* purpurová    */
.sn-dot--c4{ background:#974d6c }   /* malinová     */
.sn-dot--c5{ background:#9c4f44 }   /* tehlová      */
.sn-dot--c6{ background:#8f5d14 }   /* okrová       */
.sn-dot--c7{ background:#6d6e16 }   /* olivová      */
.sn-dot--c8{ background:#2b7a4d }   /* zelená       */
.sn-dot--c9{ background:#007a81 }   /* petrolejová  */

/* koliesko "+67" */
.sn-dot--plus{
  background:var(--sn-accent);
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* klikateľné kolieska */
a.sn-dot{ text-decoration:none }
a.sn-dot:focus-visible{
  outline:2px solid var(--sn-accent);
  outline-offset:2px;
}

/* ============================================================
   DOTYKOVÉ ZARIADENIA
   Bez hoveru sa kolieska nikdy nerozostúpia, tak dáme menší
   prekryv, nech nie je nič trvalo zakryté.
   ============================================================ */
@media (hover:none){
  .sn-statbar{ --sn-overlap:-3px }
}

/* ============================================================
   MOBIL — bunky pod sebou
   ============================================================ */
@media (max-width:900px){
  .sn-statbar{ grid-template-columns:1fr }
  .sn-stat{ border-right:0; border-bottom:1px solid var(--sn-line) }
  .sn-stat:last-child{ border-bottom:0 }
}

@media (max-width:575px){
  .sn-statbar{ margin-left:16px; margin-right:16px }
}

/* ============================================================
   REVEAL ANIMÁCIA (voliteľná)
   Pridaj triedu .sn-reveal na .sn-stack. Kolieska sú skryté,
   kým JS nepridá .is-in (pozri snippet.html).
   Ak JS nepoužiješ, nedávaj .sn-reveal — kolieska budú rovno vidno.
   ============================================================ */
.sn-stack.sn-reveal > *{
  opacity:0;
  transform:translateY(7px) scale(.85);
}
.sn-stack.sn-reveal.is-in > *{
  animation:sn-pop .45s cubic-bezier(.2,.85,.3,1.05) forwards;
}
@keyframes sn-pop{ to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  .sn-stack > *{ transition:none }
  .sn-stack.sn-reveal > *{ opacity:1; transform:none; animation:none }
}