/* ===== Série S: velké typograficky dotažené procento, karty, procento mimo pruh =====
   Hlavička a pozadí beze změny. Typografie: celá část procenta tučně, desetiny menší a lehčí, % malé;
   název 600, hlasy: číslo tučně + „hlasů“ lehce; tabulární číslice. */
.sr { --mute: #4A4643; --vot: #1A1919; }
.sr .rows { top: 178px; gap: 14px; }
.sr .pct { letter-spacing: -.01em; }
.sr .pct .d { font-size: .56em; font-weight: 600; }
.sr .pct .s { font-size: .4em; font-weight: 600; margin-left: .18em; color: var(--mute); }
.sr .votes b { font-weight: 700; }
.sr .no { color: #1A1919; font-weight: 700; }
.sr .bar { border-radius: 999px; } .sr .bar i { border-radius: 999px; }
.sr .row { --dc: color-mix(in srgb, var(--c) 78%, #000); }

/* S01 – karta, velké procento vlevo, tenký pruh */
.s1 .row { height: 160px; background: rgba(255,255,255,.92); border-radius: 18px; box-shadow: 0 8px 22px rgba(20,30,50,.1); padding: 0 34px; grid-template-columns: 410px 1fr auto; grid-template-rows: 1fr 1fr; grid-template-areas: "pct name votes" "pct bar bar"; column-gap: 0; overflow: hidden; }
.s1 .row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--c); }
.s1 .pct { grid-area: pct; font-size: 112px; justify-self: end; margin-right: 44px; } .s1 .no { display: none; }
.s1 .name { grid-area: name; font-size: 58px; align-self: end; } .s1 .votes { grid-area: votes; font-size: 42px; align-self: end; margin-bottom: 4px; }
.s1 .bar { grid-area: bar; height: 22px; align-self: start; margin-top: 16px; }
/* S02 – karta, obří procento vpravo, hlasy pod názvem */
.s2 .row { height: 160px; background: rgba(255,255,255,.92); border-radius: 18px; box-shadow: 0 8px 22px rgba(20,30,50,.1); padding: 0 40px 0 42px; grid-template-columns: 1fr 470px; grid-template-rows: 66px 44px 30px; grid-template-areas: "name pct" "votes pct" "bar bar"; align-content: center; }
.s2 .no { display: none; } .s2 .name { grid-area: name; font-size: 60px; } .s2 .votes { grid-area: votes; font-size: 42px; }
.s2 .pct { grid-area: pct; font-size: 124px; justify-self: end; } .s2 .bar { grid-area: bar; height: 16px; }
/* S03 – tabulka s pořadím */
.s3 .thead { display: grid; position: absolute; left: 48px; right: 48px; top: 172px; height: 40px; grid-template-columns: 96px 1fr 320px 360px 380px; column-gap: 20px; font-size: 24px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #4A4643; align-items: center; padding: 0 26px; }
.s3 .thead span:nth-child(3), .s3 .thead span:nth-child(4) { text-align: right; }
.s3 .rows { top: 216px; gap: 10px; }
.s3 .row { height: 150px; background: rgba(255,255,255,.9); border-radius: 14px; padding: 0 26px; grid-template-columns: 96px 1fr 320px 360px 380px; column-gap: 20px; grid-template-areas: "rank name votes pct bar"; }
.s3 .rank { display: grid; grid-area: rank; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--c); color: var(--on); font-size: 42px; font-weight: 700; }
.s3 .no { display: none; } .s3 .name { grid-area: name; font-size: 54px; } .s3 .votes { grid-area: votes; font-size: 44px; justify-self: end; }
.s3 .pct { grid-area: pct; font-size: 84px; justify-self: end; } .s3 .bar { grid-area: bar; height: 26px; }
/* S04 – procento za pruhem, tmavě */
.s4 .row { height: 160px; background: rgba(255,255,255,.78); border-radius: 12px; padding: 8px 26px 10px; grid-template-columns: 1fr auto; grid-template-rows: 66px 76px; grid-template-areas: "name votes" "bar bar"; }
.s4 .no { display: none; } .s4 .name { grid-area: name; font-size: 60px; } .s4 .votes { grid-area: votes; font-size: 42px; }
.s4 .bar { grid-area: bar; height: 70px; border-radius: 0; background: #E5E8EC; } .s4 .bar i { border-radius: 0; --minw: 30px; }
.s4 .pct { grid-area: bar; z-index: 2; justify-self: start; align-self: center; margin-left: calc(var(--w) + 22px); font-size: 78px; }
.s4 .row:first-child .pct { margin-left: 0; margin-right: 24px; justify-self: end; color: var(--on); } .s4 .row:first-child .pct .s { color: var(--on); }
/* S05 – blok s číslem + obří procento vpravo */
.s5 .row { height: 160px; background: rgba(255,255,255,.92); border-radius: 18px; box-shadow: 0 8px 22px rgba(20,30,50,.1); overflow: hidden; grid-template-columns: 156px 1fr auto 420px; grid-template-rows: 1fr 1fr; grid-template-areas: "no name votes pct" "no bar bar pct"; column-gap: 30px; padding-right: 36px; }
.s5 .no { grid-area: no; height: 100%; display: grid; place-items: center; background: var(--c); color: var(--on); font-size: 72px; font-weight: 700; }
.s5 .name { grid-area: name; font-size: 58px; align-self: end; } .s5 .votes { grid-area: votes; font-size: 42px; align-self: end; margin-bottom: 4px; } .s5 .bar { grid-area: bar; height: 22px; align-self: start; margin-top: 16px; }
.s5 .pct { grid-area: pct; font-size: 108px; justify-self: end; }
/* S06 – tmavý štítek s procentem na pravém konci pruhu */
.s6 .row { height: 158px; background: rgba(255,255,255,.9); border-radius: 12px; padding: 8px 26px 12px; grid-template-columns: 1fr auto 300px; grid-template-rows: 66px 70px; grid-template-areas: "name name votes" "bar bar pct"; }
.s6 .no { display: none; } .s6 .name { grid-area: name; font-size: 60px; } .s6 .votes { grid-area: votes; font-size: 42px; grid-column: 3; justify-self: end; }
.s6 .bar { grid-area: bar; height: 100%; border-radius: 0; background: #E1E5EA; } .s6 .bar i { border-radius: 0; }
.s6 .pct { grid-area: pct; background: #243746; color: #fff; height: 100%; justify-content: center; align-items: center; font-size: 62px; } .s6 .pct .s { color: #fff; }
/* S07 – barevné procento, klidná plocha */
.s7 .row { height: 160px; background: rgba(255,255,255,.85); border-radius: 14px; padding: 0 34px; grid-template-columns: 430px 1fr auto; grid-template-rows: 1fr auto 1fr; grid-template-areas: "pct name votes" "pct bar bar" "pct . ."; }
.s7 .no { display: none; } .s7 .pct { grid-area: pct; font-size: 120px; color: var(--dc); justify-self: end; margin-right: 44px; } .s7 .pct .s { color: var(--dc); }
.s7 .name { grid-area: name; font-size: 58px; align-self: end; } .s7 .votes { grid-area: votes; font-size: 42px; align-self: end; margin-bottom: 4px; }
.s7 .bar { grid-area: bar; height: 14px; margin-top: 14px; }
/* S08 – vítěz nahoře, ostatní 2×2 */
.s8 .rows { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 250px 1fr 1fr; gap: 14px 24px; bottom: 30px; }
.s8 .row { background: rgba(255,255,255,.92); border-radius: 18px; box-shadow: 0 8px 22px rgba(20,30,50,.1); padding: 0 34px; grid-template-columns: 1fr auto; grid-template-rows: 62px 1fr 26px; grid-template-areas: "name votes" "pct pct" "bar bar"; align-content: center; }
.s8 .no { display: none; } .s8 .name { grid-area: name; font-size: 52px; } .s8 .votes { grid-area: votes; font-size: 40px; } .s8 .pct { grid-area: pct; font-size: 104px; justify-self: start; } .s8 .pct .i { width: auto; } .s8 .bar { grid-area: bar; height: 18px; }
.s8 .row:first-child { grid-column: 1 / -1; background: var(--c); color: var(--on); grid-template-columns: 560px 1fr auto; grid-template-rows: 1fr 1fr 34px; grid-template-areas: "pct name votes" "pct . ." "bar bar bar"; padding: 20px 44px 24px; }
.s8 .row:first-child .name { font-size: 76px; align-self: end; } .s8 .row:first-child .votes, .s8 .row:first-child .votes b, .s8 .row:first-child .pct .s { color: var(--on); } .s8 .row:first-child .votes { font-size: 48px; align-self: end; }
.s8 .row:first-child .pct { font-size: 160px; } .s8 .row:first-child .bar { height: 26px; background: rgba(0,0,0,.2); } .s8 .row:first-child .bar i { background: #fff; }
/* S09 – barevná linka nad plochou */
.s9 .row { height: 160px; background: rgba(255,255,255,.88); border-top: 8px solid var(--c); padding: 0 34px; grid-template-columns: 430px 1fr auto; grid-template-rows: 1fr 1fr; grid-template-areas: "pct name votes" "pct bar bar"; }
.s9 .no { display: none; } .s9 .pct { grid-area: pct; font-size: 118px; justify-self: end; margin-right: 44px; } .s9 .name { grid-area: name; font-size: 56px; align-self: end; } .s9 .votes { grid-area: votes; font-size: 42px; align-self: end; margin-bottom: 4px; }
.s9 .bar { grid-area: bar; height: 24px; align-self: start; margin-top: 14px; border-radius: 0; } .s9 .bar i { border-radius: 0; }
/* S10 – dělený pruh (25 dílků po 1 %) */
.s10 .row { height: 160px; background: rgba(255,255,255,.92); border-radius: 18px; box-shadow: 0 8px 22px rgba(20,30,50,.1); padding: 0 40px; grid-template-columns: 1fr auto 430px; grid-template-rows: 70px 52px; grid-template-areas: "name votes pct" "bar bar pct"; align-content: center; column-gap: 28px; }
.s10 .no { display: none; } .s10 .name { grid-area: name; font-size: 56px; } .s10 .votes { grid-area: votes; font-size: 42px; } .s10 .pct { grid-area: pct; font-size: 108px; justify-self: end; }
.s10 .bar { grid-area: bar; height: 46px; border-radius: 0; background: #E1E5EA; -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(4% - 6px), transparent calc(4% - 6px) 4%); mask: repeating-linear-gradient(90deg, #000 0 calc(4% - 6px), transparent calc(4% - 6px) 4%); } .s10 .bar i { border-radius: 0; width: calc(var(--sh) / 25 * 100%); }
/* S11 – redakční: vodicí tečky */
.s11 .rows { gap: 8px; }
.s11 .row { height: 166px; grid-template-columns: auto auto 1fr auto; grid-template-rows: 88px 40px 20px; grid-template-areas: "no name lead pct" "votes votes votes pct" "bar bar bar bar"; align-items: end; column-gap: 0; padding: 0 6px; }
.s11 .row::after { content: ""; grid-area: lead; border-bottom: 5px dotted rgba(0,0,0,.35); margin: 0 26px 22px; }
.s11 .no { grid-area: no; font-size: 38px; margin: 0 20px 16px 0; color: var(--dc); } .s11 .name { grid-area: name; font-size: 66px; font-weight: 600; }
.s11 .votes { grid-area: votes; font-size: 42px; align-self: start; } .s11 .pct { grid-area: pct; font-size: 112px; align-self: center; justify-self: end; }
.s11 .bar { grid-area: bar; height: 10px; border-radius: 5px; } .s11 .bar i { border-radius: 5px; }
/* S12 – procento v pilulce v barvě strany */
.s12 .row { height: 160px; background: rgba(255,255,255,.9); border-radius: 18px; padding: 0 30px 0 40px; grid-template-columns: 1fr 380px; grid-template-rows: 66px 26px 40px; grid-template-areas: "name pct" "bar pct" "votes pct"; align-content: center; column-gap: 30px; }
.s12 .no { display: none; } .s12 .name { grid-area: name; font-size: 60px; } .s12 .bar { grid-area: bar; height: 20px; } .s12 .votes { grid-area: votes; font-size: 42px; }
.s12 .pct { grid-area: pct; background: var(--c); color: var(--on); height: 122px; border-radius: 61px; justify-content: center; align-items: center; font-size: 84px; align-self: center; } .s12 .pct .i { width: auto; } .s12 .pct .s { color: var(--on); }
/* S13 – osa 0–25 % s mřížkou */
.s13 .axis { display: block; position: absolute; left: 48px; right: 48px; top: 172px; height: 40px; font-size: 30px; font-weight: 700; color: #1A1919; white-space: nowrap; }
.s13 .axis span { position: absolute; transform: translateX(-50%); } .s13 .axis span:nth-child(1) { left: 0; transform: none; } .s13 .axis span:nth-child(2) { left: 20%; } .s13 .axis span:nth-child(3) { left: 40%; } .s13 .axis span:nth-child(4) { left: 60%; } .s13 .axis span:nth-child(5) { left: 80%; } .s13 .axis span:nth-child(6) { left: 100%; transform: translateX(-100%); }
.s13 .rows { top: 218px; gap: 6px; }
.s13 .row { height: 154px; grid-template-columns: auto 1fr auto; grid-template-rows: 62px 84px; grid-template-areas: "no name votes" "bar bar bar"; column-gap: 16px; }
.s13 .no { grid-area: no; font-size: 46px; } .s13 .name { grid-area: name; font-size: 56px; } .s13 .votes { grid-area: votes; font-size: 42px; }
.s13 .bar { grid-area: bar; height: 84px; border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 3px), rgba(0,0,0,.28) calc(20% - 3px) 20%), rgba(255,255,255,.75); } .s13 .bar i { border-radius: 0; width: calc(var(--sh) / 25 * 100%); }
.s13 .pct { grid-area: bar; z-index: 2; justify-self: start; align-self: center; margin-left: calc(var(--sh) / 25 * 100% + 22px); font-size: 74px; } .s13 .pct .i { width: auto; }
.s13 .row:first-child .pct { margin-left: 0; margin-right: 24px; justify-self: end; color: var(--on); } .s13 .row:first-child .pct .s { color: var(--on); }
/* S14 – svislé sloupce v kartách */
.s14 .rows { flex-direction: row; left: 48px; right: 48px; top: 190px; bottom: 30px; gap: 22px; }
.s14 .row { flex: 1; min-width: 0; background: rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 8px 22px rgba(20,30,50,.1); padding: 26px 20px 20px; grid-template-rows: 116px 1fr auto auto; grid-template-areas: "pct" "bar" "name" "votes"; justify-items: center; text-align: center; align-items: stretch; }
.s14 .no { display: none; } .s14 .pct { grid-area: pct; font-size: 78px; justify-self: center; align-self: start; } .s14 .pct .i { width: auto; }
.s14 .bar { grid-area: bar; width: 150px; border-radius: 0; position: relative; background: #E5E8EC; margin: 8px 0 14px; } .s14 .bar i { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--sh) / 25 * 100%); border-radius: 0; }
.s14 .name { grid-area: name; white-space: normal; text-align: center; font-size: 44px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 3.45em; overflow: hidden; }
.s14 .votes { grid-area: votes; font-size: 40px; margin-top: 8px; }
/* S15 – kruh s číslem + velké procento vpravo */
.s15 .row { height: 160px; background: rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 8px 22px rgba(20,30,50,.1); padding: 0 40px 0 24px; grid-template-columns: 170px 1fr 470px; grid-template-rows: 1fr 1fr; grid-template-areas: "ring name pct" "ring votes pct"; column-gap: 24px; }
.s15 .bar { grid-area: ring; width: 128px; height: 128px; border-radius: 50%; justify-self: center; align-self: center; position: relative; background: conic-gradient(var(--c) var(--w), #E1E5EA 0); overflow: visible; } .s15 .bar i { display: none; }
.s15 .bar::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #fff; }
.s15 .no { grid-area: ring; z-index: 2; justify-self: center; align-self: center; font-size: 46px; } .s15 .name { grid-area: name; font-size: 60px; align-self: end; } .s15 .votes { grid-area: votes; font-size: 44px; align-self: start; }
.s15 .pct { grid-area: pct; font-size: 118px; justify-self: end; }