/* ===== Série J: 20 nejlepších – studiové měřítko (text min. 44 px, světlé pozadí) =====
   J01–J08 drží strukturu jejich slidu (ikona · číslo · název · hlasy · pruh s procentem),
   J09–J20 jsou nové nápady. */

/* ---------- společný základ J01–J08 (facelift ve studiovém měřítku) ---------- */
.jf .rows { top: 226px; gap: 14px; }
.jf .row { height: 156px; align-content: start; row-gap: 4px; column-gap: 16px; grid-template-columns: auto auto 1fr auto; grid-template-rows: 64px 88px; grid-template-areas: "ico no name votes" "bar bar bar bar"; }
.jf .ico { display: block; grid-area: ico; width: 52px; height: 52px; align-self: center; color: #000; }
.jf .no { grid-area: no; font-size: 60px; } .jf .name { grid-area: name; font-size: 60px; font-weight: 600; } .jf .votes { grid-area: votes; font-size: 50px; }
.jf .bar { height: 88px; } .jf .bar i { --minw: 420px; } .jf .pct { font-size: 68px; }
.jf.jf-y .rows { top: 230px; }

/* J02 – zaoblený pruh + barevný štítek */
.j2 .ico { display: none; } .j2 .no { min-width: 78px; height: 62px; padding: 0 12px; display: grid; place-items: center; background: var(--c); color: var(--on); border: 4px solid #000; border-radius: 14px; font-size: 40px; align-self: center; }
.j2 .bar, .j2 .bar i { border-radius: 999px; } .j2 .bar { border: 4px solid #000; } .j2 .pct { margin-left: 34px; }
/* J03 – zebra + obrys */
.j3 .row:nth-child(odd)::before { content: ""; position: absolute; left: -48px; right: -48px; top: -6px; bottom: -6px; background: rgba(0,0,0,.06); z-index: -1; }
.j3 .bar { box-shadow: inset 0 0 0 4px #000; } .j3 .bar i { box-shadow: inset 0 0 0 4px #000; }
/* J04 – „Celkem … hlasů“ pod názvem */
.j4 .row { height: 160px; grid-template-columns: auto auto 1fr; grid-template-rows: 62px 44px 60px; grid-template-areas: "ico no name" "ico no votes" "bar bar bar"; row-gap: 0; }
.j4 .ico { grid-row: 1 / 3; } .j4 .votes { justify-self: start; font-size: 44px; } .j4 .cl { display: inline; } .j4 .bar { height: 60px; } .j4 .pct { font-size: 50px; } .j4 .rows { gap: 8px; }
/* J05 – jemná fotka pozadí (jejich pozadí, silně zesvětlené) */
.j5 .rows { top: 226px; }
/* J06 – procenta ve vlastním sloupci vpravo */
.j6 .row { grid-template-columns: auto auto 1fr auto; grid-template-rows: 64px 88px; grid-template-areas: "ico no name votes" "bar bar bar pct"; }
.j6 .bar { grid-area: bar; margin-right: 10px; } .j6 .pct { grid-area: pct; width: 420px; justify-self: end; justify-content: flex-end; align-self: center; margin: 0; font-size: 100px; color: #000; } .j6 .pct .s { color: #2B2B2B; font-size: .5em; }
.j6 .pct .i { width: 1.4em; }
.j6 { --gap-pct: 420px; } .j6 .row { grid-template-columns: auto auto 1fr auto; } .j6 .row { column-gap: 16px; }
.j6 .bar { width: calc(100% - 0px); }
/* J07 – velký blok s číslem */
.j7 .row { grid-template-columns: 150px 1fr auto; grid-template-rows: 68px 88px; grid-template-areas: "no name votes" "no bar bar"; column-gap: 22px; row-gap: 0; }
.j7 .ico { display: none; } .j7 .no { height: 100%; display: grid; place-items: center; background: var(--c); color: var(--on); border: 4px solid #000; font-size: 72px; }
.j7 .name { align-self: end; } .j7 .votes { align-self: end; } .j7 .bar { align-self: end; }
/* J08 – zvýrazněný vítěz */
.j8 .row:first-child { background: color-mix(in srgb, var(--c) 30%, white); border: 4px solid #000; padding: 4px 18px 0; height: 172px; }
.j8 .row:first-child .name { font-size: 68px; }

/* ---------- J09 – dráhy: kroužek s pořadím na konci pruhu ---------- */
.j9 .rows { gap: 0; top: 226px; }
.j9 .row { height: 166px; border-top: 4px solid #000; grid-template-columns: 1fr auto 420px; grid-template-rows: 70px 1fr; grid-template-areas: "name votes pct" "bar bar pct"; column-gap: 24px; }
.j9 .row:last-child { border-bottom: 4px solid #000; } .j9 .row:nth-child(odd) { background: #F1F1F1; }
.j9 .no { display: none; } .j9 .name { grid-area: name; font-size: 60px; } .j9 .votes { grid-area: votes; font-size: 48px; }
.j9 .bar { grid-area: bar; height: 22px; overflow: visible; margin: 8px 70px 0 0; align-self: start; background: repeating-linear-gradient(90deg, #8A8A8A 0 22px, transparent 22px 40px); }
.j9 .bar i { }
.j9 .rank { display: grid; grid-area: bar; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: var(--c); color: var(--on); border: 6px solid #000; font-size: 56px; font-weight: 700; z-index: 2; justify-self: start; align-self: start; margin-top: -26px; margin-left: calc((100% - 70px) * var(--wn) - 50px); }
.j9 .pct { grid-area: pct; font-size: 108px; justify-self: end; align-self: center; }

/* ---------- J10 – obří pořadí za řádkem ---------- */
.j10 .rank { display: block; position: absolute; left: 4px; top: -30px; font-size: 250px; font-weight: 700; color: rgba(0,0,0,.09); line-height: 1; z-index: 0; }
.j10 .row { height: 156px; padding-left: 150px; grid-template-columns: auto 1fr auto; grid-template-rows: 66px 86px; grid-template-areas: "no name votes" "bar bar bar"; column-gap: 16px; }
.j10 .row > *:not(.rank) { position: relative; z-index: 1; }
.j10 .no { grid-area: no; font-size: 56px; } .j10 .name { grid-area: name; font-size: 60px; } .j10 .votes { grid-area: votes; font-size: 50px; }
.j10 .bar { height: 86px; } .j10 .bar i { --minw: 420px; } .j10 .pct { font-size: 70px; }

/* ---------- J11 – medaile ---------- */
.j11 .row { height: 156px; grid-template-columns: 116px 1fr auto; grid-template-rows: 66px 84px; grid-template-areas: "rank name votes" "rank bar bar"; column-gap: 24px; }
.j11 .rank { grid-area: rank; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; border: 5px solid #000; color: #000; font-size: 64px; font-weight: 700; background: #fff; }
.j11 .row:nth-child(1) .rank { background: #F2C230; } .j11 .row:nth-child(2) .rank { background: #CDD0D5; } .j11 .row:nth-child(3) .rank { background: #CF8A4A; }
.j11 .no { display: none; } .j11 .name { grid-area: name; font-size: 60px; } .j11 .votes { grid-area: votes; font-size: 50px; }
.j11 .bar { height: 78px; align-self: end; } .j11 .bar i { --minw: 400px; } .j11 .pct { font-size: 62px; }

/* ---------- J12 – odstup od vítěze ---------- */
.j12 .rows { top: 226px; }
.j12 .row { height: 156px; grid-template-columns: 420px 1fr auto; grid-template-rows: 62px 46px 40px; grid-template-areas: "pct name diff" "pct votes diff" "pct bar bar"; row-gap: 2px; align-content: start; }
.j12 .row::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 16px; background: var(--c); }
.j12 .pct { grid-area: pct; font-size: 104px; margin-left: 44px; align-self: center; } .j12 .no { display: none; }
.j12 .name { grid-area: name; font-size: 58px; } .j12 .votes { grid-area: votes; font-size: 44px; }
.j12 .diff { display: block; grid-area: diff; font-size: 54px; font-weight: 700; align-self: center; margin-left: 20px; }
.j12 .bar { grid-area: bar; height: 40px; }
.j12 .row:first-child .diff { background: #000; color: #fff; padding: 4px 26px; border-radius: 40px; font-size: 48px; }

/* ---------- J13 – tři úrovně ---------- */
.j13 .rows { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; top: 226px; }
.j13 .row { background: #fff; border: 4px solid #000; border-radius: 16px; padding: 0 30px; }
.j13 .no { display: none; } .j13 .pct { grid-area: pct; } .j13 .name { grid-area: name; } .j13 .votes { grid-area: votes; } .j13 .bar { grid-area: bar; }
.j13 .row:first-child { grid-column: 1 / -1; height: 290px; background: var(--c); grid-template-columns: 640px 1fr auto; grid-template-rows: 130px 60px 1fr; grid-template-areas: "pct name votes" "pct . ." "bar bar bar"; }
.j13 .row:first-child .pct { font-size: 160px; margin-left: 0; } .j13 .row:first-child .name { font-size: 88px; } .j13 .row:first-child .votes, .j13 .row:first-child .votes b, .j13 .row:first-child .pct .s { color: var(--on); } .j13 .row:first-child .votes { font-size: 56px; }
.j13 .row:first-child .bar { height: 60px; background: rgba(0,0,0,.25); align-self: end; margin-bottom: 26px; } .j13 .row:first-child .bar i { background: #fff; }
.j13 .row:nth-child(2), .j13 .row:nth-child(3) { height: 252px; grid-template-columns: 1fr auto; grid-template-rows: 116px 64px 44px; grid-template-areas: "pct pct" "name votes" "bar bar"; align-content: center; row-gap: 6px; }
.j13 .row:nth-child(2) .pct, .j13 .row:nth-child(3) .pct { font-size: 104px; justify-self: start; } .j13 .row:nth-child(2) .pct .i, .j13 .row:nth-child(3) .pct .i { width: auto; }
.j13 .row:nth-child(2) .name, .j13 .row:nth-child(3) .name { font-size: 50px; } .j13 .row:nth-child(2) .votes, .j13 .row:nth-child(3) .votes { font-size: 46px; margin-left: 16px; }
.j13 .row:nth-child(n+4) { height: 210px; grid-template-columns: 330px 1fr; grid-template-rows: 62px 50px 44px; grid-template-areas: "pct name" "pct votes" "pct bar"; align-content: center; column-gap: 20px; }
.j13 .row:nth-child(n+4) .pct { font-size: 76px; } .j13 .row:nth-child(n+4) .name { font-size: 46px; } .j13 .row:nth-child(n+4) .votes { font-size: 44px; } .j13 .row:nth-child(n+4) .bar { height: 30px; }

/* ---------- J14 – pásy, výška = podíl ---------- */
.j14 .rows { gap: 0; top: 226px; }
.j14 .row { height: calc(var(--sh) * 11.65px); background: var(--c); color: var(--on); border-bottom: 4px solid #000; grid-template-columns: 110px 1fr auto 460px; grid-template-areas: "no name votes pct"; padding-right: 30px; }
.j14 .row:first-child { border-top: 4px solid #000; }
.j14 .no { grid-area: no; justify-self: center; color: var(--on); font-size: 52px; } .j14 .name { grid-area: name; font-size: clamp(44px, calc(var(--sh) * 3px), 84px); }
.j14 .votes, .j14 .votes b, .j14 .pct .s { color: var(--on); } .j14 .votes { grid-area: votes; font-size: clamp(44px, calc(var(--sh) * 2.2px), 56px); margin-right: 24px; }
.j14 .pct { grid-area: pct; justify-self: end; font-size: clamp(50px, calc(var(--sh) * 5px), 118px); } .j14 .pct .i { width: auto; } .j14 .bar { display: none; }

/* ---------- J15 – pictogram (čtvereček = 2 000 hlasů) ---------- */
.j15 .rows { top: 226px; gap: 8px; }
.j15 .row { height: 138px; grid-template-columns: auto 1fr auto 460px; grid-template-rows: 64px 50px; grid-template-areas: "no name votes pct" "bar bar bar pct"; column-gap: 16px; }
.j15 .no { grid-area: no; font-size: 52px; } .j15 .name { grid-area: name; font-size: 56px; } .j15 .votes { grid-area: votes; font-size: 46px; }
.j15 .bar { grid-area: bar; background: none; height: 40px; overflow: visible; align-self: start; margin-top: 6px; }
.j15 .bar i { width: round(nearest, calc(var(--sq) * 40px), 40px); border-radius: 0; height: 40px; background: linear-gradient(90deg, var(--c) 34px, transparent 0) 0 0 / 40px 40px repeat-x; box-shadow: none; }
.j15 .pct { grid-area: pct; font-size: 100px; justify-self: end; align-self: center; }
.j15 .rows::after { content: "1 čtvereček = 2 000 hlasů"; position: absolute; right: 0; bottom: -46px; font-size: 40px; font-weight: 600; color: #2B2B2B; }

/* ---------- J16 – prstenec XL + legenda ---------- */
.j16 .donut { display: grid; position: absolute; left: 50px; top: 246px; width: 740px; height: 740px; border-radius: 50%; background: conic-gradient(var(--c1) 0 23.71%, var(--c2) 0 41.79%, var(--c3) 0 54.24%, var(--c4) 0 65.42%, #6E6E6E 0 71.31%, #DAD7D4 0 100%); -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 58.4%); mask: radial-gradient(circle, transparent 0 58%, #000 58.4%); }
.j16 .donut-c { display: grid; position: absolute; left: 50px; top: 246px; width: 740px; height: 740px; place-content: center; text-align: center; }
.j16 .donut-c b { font-size: 110px; } .j16 .donut-c span { font-size: 40px; color: #2B2B2B; }
.j16 .rows { left: 850px; top: 234px; gap: 8px; }
.j16 .row { height: 150px; grid-template-columns: 60px 1fr auto; grid-template-rows: 70px 60px; grid-template-areas: "no name pct" "no votes pct"; column-gap: 20px; border-bottom: 3px solid #000; }
.j16 .row:last-child { border-bottom: 0; } .j16 .row:nth-child(5) { --c: #6E6E6E; }
.j16 .no { grid-area: no; width: 56px; height: 56px; background: var(--c); border: 4px solid #000; font-size: 0; align-self: start; margin-top: 8px; }
.j16 .name { grid-area: name; font-size: 56px; } .j16 .votes { grid-area: votes; font-size: 46px; } .j16 .pct { grid-area: pct; font-size: 88px; justify-self: end; } .j16 .bar { display: none; }

/* ---------- J17 – černý štítek s procentem na konci pruhu ---------- */
.j17 .rows { top: 226px; gap: 10px; }
.j17 .row { height: 158px; grid-template-columns: auto 1fr auto; grid-template-rows: 58px 62px 38px; grid-template-areas: "no name votes" "pct pct pct" "bar bar bar"; column-gap: 16px; }
.j17 .no { grid-area: no; font-size: 50px; } .j17 .name { grid-area: name; font-size: 56px; } .j17 .votes { grid-area: votes; font-size: 48px; }
.j17 .bar { grid-area: bar; height: 38px; }
.j17 .pct { grid-area: pct; justify-self: start; align-self: end; margin-left: var(--w); transform: translateX(-100%); background: #000; color: #fff; font-size: 52px; padding: 5px 20px 7px; border-radius: 12px; position: relative; margin-bottom: 10px; z-index: 2; }
.j17 .pct::after { content: ""; position: absolute; right: 24px; bottom: -10px; border: 10px solid transparent; border-top-color: #000; border-bottom: 0; }
.j17 .pct .i { width: auto; } .j17 .pct .s { color: #fff; }

/* ---------- J18 – hlasy jako hlavní údaj ---------- */
.j18 .rows { top: 226px; gap: 14px; }
.j18 .row { height: 156px; grid-template-columns: auto 1fr auto; grid-template-rows: 84px 72px; grid-template-areas: "no name votes" "bar bar bar"; column-gap: 18px; }
.j18 .no { grid-area: no; font-size: 56px; } .j18 .name { grid-area: name; font-size: 60px; }
.j18 .votes { grid-area: votes; font-size: 46px; color: #2B2B2B; } .j18 .votes b { font-size: 88px; font-weight: 700; color: #000; }
.j18 .bar { height: 72px; } .j18 .bar i { --minw: 340px; } .j18 .pct { font-size: 54px; }

/* ---------- J19 – okno jako na mapě ---------- */
.j19 .rows { left: 150px; right: 150px; top: 232px; gap: 0; border: 6px solid #000; border-radius: 24px; background: #fff; padding: 20px 46px; }
.j19 .row { height: 156px; grid-template-columns: 1fr 440px; grid-template-rows: 62px 78px; grid-template-areas: "name pct" "bar pct"; border-bottom: 2px solid #CFCFCF; }
.j19 .row:last-of-type { border-bottom: 0; }
.j19 .no { display: none; } .j19 .name { grid-area: name; font-size: 50px; text-transform: uppercase; letter-spacing: .01em; }
.j19 .bar { grid-area: bar; height: 70px; align-self: start; } .j19 .bar i { --minw: 460px; }
.j19 .votes { grid-area: bar; z-index: 2; justify-self: start; align-self: center; margin-top: -8px; margin-left: 22px; font-size: 44px; color: var(--on); } .j19 .votes b { color: var(--on); font-weight: 700; }
.j19 .pct { grid-area: pct; font-size: 92px; justify-self: end; }

/* ---------- J20 – dva sloupce karet ---------- */
.j20 .rows { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 1fr); grid-template-columns: 1fr 1fr; gap: 16px 24px; top: 226px; bottom: 30px; }
.j20 .row { border: 4px solid #000; border-radius: 16px; background: #fff; padding: 0 26px 0 0; grid-template-columns: 350px 1fr; grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "pct ." "pct name" "pct votes" "pct bar" "pct ."; row-gap: 4px; overflow: hidden; }
.j20 .row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: var(--c); }
.j20 .no { display: none; } .j20 .pct { grid-area: pct; font-size: 92px; justify-self: end; margin-right: 28px; } .j20 .name { grid-area: name; font-size: 52px; } .j20 .votes { grid-area: votes; font-size: 46px; }
.j20 .bar { grid-area: bar; height: 44px; margin-top: 6px; }
.j20 .restcard { display: grid; place-content: center; text-align: center; border: 4px dashed #000; border-radius: 16px; color: #2B2B2B; font-size: 44px; } .j20 .restcard b { font-size: 92px; color: #000; }
.photo-soft { background: linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)), url(bg.jpg) center / cover no-repeat, #fff; }

/* ---- opravy po kontrole ---- */
.jf .rows { gap: 10px; }
.j6 .pct { font-size: 84px; }
.j9 .row { grid-template-rows: 62px 1fr; }
.j9 .bar { margin-top: 40px; }
.j9 .rank { margin-top: 2px; }
.j12 .row { grid-template-columns: 440px 1fr auto; } .j12 .pct { font-size: 92px; margin-left: 40px; }
.j15 .rows::after { content: "1 čtvereček = 3 000 hlasů"; }
.j16 .donut-c span { max-width: 430px; margin: 0 auto; }
.j17 .row { height: 162px; grid-template-rows: 56px 70px 36px; } .j17 .rows { gap: 6px; } .j17 .pct { font-size: 46px; margin-bottom: 8px; }
.j20 .row { grid-template-columns: 390px 1fr; } .j20 .pct { font-size: 78px; margin-right: 24px; }