/* ===== Série E: přídavek – další nápady (bez mandátů) ===== */

/* e1 – pět kruhů v řadě */
.e1 .rows { flex-direction: row; left: 48px; right: 48px; top: 200px; gap: 30px; }
.e1 .row { width: 340px; grid-template-rows: 330px auto auto auto; grid-template-areas: "pct" "no" "name" "votes"; justify-items: center; text-align: center; align-content: start; }
.e1 .pct { grid-area: pct; width: 310px; height: 310px; border-radius: 50%; background: conic-gradient(var(--c) var(--w), var(--track) 0); display: grid; place-content: center; position: relative; font-size: 62px; }
.e1 .pct::before { content: ""; position: absolute; inset: 36px; border-radius: 50%; background: var(--bg); }
.e1 .pct > * { position: relative; } .e1 .pct .i { width: auto; } .e1 .pct { display: inline-flex; justify-content: center; align-items: center; }
.e1 .no { grid-area: no; font-size: 32px; } .e1 .name { grid-area: name; font-size: 40px; white-space: normal; overflow: visible; text-align: center; line-height: 1.2; }
.e1 .votes { grid-area: votes; font-size: 34px; margin-top: 8px; } .e1 .bar { display: none; }

/* e2 – dlaždice 3 + 2 */
.e2 .rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; top: 176px; }
.e2 .row { height: 400px; background: var(--c); color: var(--on); border-radius: var(--cr); padding: 34px 40px; align-content: start; align-items: start; grid-template-rows: 44px 190px auto auto; grid-template-areas: "no" "pct" "name" "votes"; }
.e2 .no, .e2 .votes, .e2 .votes b, .e2 .pct .s { color: var(--on); } .e2 .no { grid-area: no; font-size: 36px; }
.e2 .pct { grid-area: pct; font-size: 150px; align-self: center; } .e2 .pct .i { width: auto; }
.e2 .name { grid-area: name; font-size: 42px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; } .e2 .votes { grid-area: votes; font-size: 36px; margin-top: 10px; }
.e2 .bar { display: none; }
.e2 .restcard { display: grid; place-content: center; height: 400px; text-align: center; border: 4px dashed var(--line); border-radius: var(--cr); color: var(--mute); font-size: 36px; }
.e2 .restcard b { font-size: 90px; color: var(--ink); }

/* e3 – redakční styl s tečkovanými linkami */
.e3 .rows { gap: 8px; top: 180px; }
.e3 .row { height: 158px; grid-template-columns: auto auto 1fr auto; grid-template-rows: 82px 34px 14px; grid-template-areas: "no name lead pct" "votes votes votes pct" "bar bar bar bar"; align-items: end; }
.e3 .row::after { content: ""; grid-area: lead; border-bottom: 5px dotted var(--mute); opacity: .55; margin: 0 26px 20px; }
.e3 .no { grid-area: no; font-size: 36px; margin: 0 20px 14px 0; } .e3 .name { grid-area: name; font-size: 60px; font-weight: 600; }
.e3 .votes { grid-area: votes; font-size: 34px; align-self: start; } .e3 .pct { grid-area: pct; font-size: 104px; align-self: center; justify-self: end; }
.e3 .bar { grid-area: bar; height: 12px; border-radius: 6px; } .e3 .bar i { border-radius: 6px; }

/* e4 – lízátka */
.e4 .rows { gap: 0; top: 176px; }
.e4 .row { height: 168px; grid-template-columns: 420px auto 1fr auto; grid-template-rows: 88px 1fr; grid-template-areas: "pct no name votes" "pct bar bar bar"; border-bottom: 2px solid var(--line); padding-right: 50px; }
.e4 .pct { grid-area: pct; font-size: 92px; justify-self: end; margin-right: 44px; } .e4 .no { grid-area: no; font-size: 34px; margin-right: 16px; }
.e4 .name { grid-area: name; font-size: 48px; } .e4 .votes { grid-area: votes; font-size: 36px; margin-left: 24px; }
.e4 .bar { grid-area: bar; height: 10px; overflow: visible; margin-top: 12px; align-self: start; border-radius: 5px; } .e4 .bar i { border-radius: 5px; }
.e4 .bar::after { content: ""; position: absolute; left: var(--w); top: 5px; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 9px var(--bg); }

/* e5 – vítěz a rozdíl ostatních */
.e5 .rows { top: 172px; }
.e5 .row { height: 150px; background: var(--card); border-radius: var(--cr); grid-template-columns: 420px auto 1fr auto; grid-template-rows: 84px 1fr; grid-template-areas: "pct no name votes" "pct bar bar diff"; padding-right: 36px; }
.e5 .pct { grid-area: pct; font-size: 88px; justify-self: end; margin-right: 44px; } .e5 .no { grid-area: no; font-size: 34px; margin-right: 16px; }
.e5 .name { grid-area: name; font-size: 46px; } .e5 .votes { grid-area: votes; font-size: 36px; margin-left: 24px; }
.e5 .bar { grid-area: bar; height: 36px; align-self: start; margin-top: 6px; } .e5 .diff { display: block; grid-area: diff; align-self: start; margin: 6px 0 0 24px; font-size: 32px; font-weight: 600; color: var(--mute); }
.e5 .row:first-child { background: var(--c); color: var(--on); } .e5 .row:first-child .no, .e5 .row:first-child .votes, .e5 .row:first-child .votes b, .e5 .row:first-child .pct .s, .e5 .row:first-child .diff { color: var(--on); }
.e5 .row:first-child .bar { background: rgba(0,0,0,.2); } .e5 .row:first-child .bar i { background: rgba(255,255,255,.92); }

/* e6 – popisek procenta nad koncem pruhu */
.e6 .rows { top: 176px; gap: 14px; }
.e6 .row { height: 150px; grid-template-columns: auto 1fr auto; grid-template-rows: 52px 58px 40px; grid-template-areas: "no name votes" "pct pct pct" "bar bar bar"; }
.e6 .no { grid-area: no; font-size: 36px; margin-right: 16px; } .e6 .name { grid-area: name; font-size: 46px; } .e6 .votes { grid-area: votes; font-size: 36px; }
.e6 .pct { grid-area: pct; justify-self: start; margin-left: var(--w); transform: translateX(-100%); font-size: 56px; align-self: end; } .e6 .pct .i { width: auto; }
.e6 .bar { grid-area: bar; height: 40px; }

/* e7 – tři úrovně důležitosti */
.e7 .rows { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; top: 172px; }
.e7 .row { background: var(--card); border-radius: var(--cr); box-shadow: var(--shadow); padding: 0 34px; }
.e7 .row:first-child { grid-column: 1 / -1; height: 270px; grid-template-columns: 600px auto 1fr auto; grid-template-rows: 130px 1fr; grid-template-areas: "pct no name votes" "pct bar bar bar"; }
.e7 .row:first-child .pct { font-size: 140px; justify-self: start; margin-left: 10px; } .e7 .row:first-child .name { font-size: 64px; } .e7 .row:first-child .no { font-size: 40px; margin-right: 16px; } .e7 .row:first-child .votes { font-size: 44px; } .e7 .row:first-child .bar { height: 48px; align-self: start; margin-top: 4px; }
.e7 .row:nth-child(2), .e7 .row:nth-child(3) { height: 250px; grid-template-columns: auto 1fr auto; grid-template-rows: 70px 110px 40px; grid-template-areas: "no name votes" "pct pct pct" "bar bar bar"; align-content: center; }
.e7 .row:nth-child(2) .name, .e7 .row:nth-child(3) .name { font-size: 40px; padding-left: 14px; } .e7 .row:nth-child(2) .no, .e7 .row:nth-child(3) .no { font-size: 32px; }
.e7 .row:nth-child(2) .pct, .e7 .row:nth-child(3) .pct { font-size: 96px; justify-self: start; } .e7 .row:nth-child(2) .pct .i, .e7 .row:nth-child(3) .pct .i { width: auto; }
.e7 .row:nth-child(2) .votes, .e7 .row:nth-child(3) .votes { font-size: 34px; }
.e7 .row:nth-child(n+4) { height: 210px; grid-template-columns: 240px auto 1fr auto; grid-template-rows: 90px 1fr; grid-template-areas: "pct no name votes" "pct bar bar bar"; padding: 0 30px; }
.e7 .row:nth-child(n+4) .pct { font-size: 60px; } .e7 .row:nth-child(n+4) .no { font-size: 28px; margin-right: 10px; } .e7 .row:nth-child(n+4) .name { font-size: 36px; } .e7 .row:nth-child(n+4) .votes { font-size: 30px; margin-left: 14px; }
.e7 .row:nth-child(n+4) .bar { height: 30px; align-self: start; margin-top: 4px; }
.e7 .pct { grid-area: pct; } .e7 .no { grid-area: no; } .e7 .name { grid-area: name; } .e7 .votes { grid-area: votes; } .e7 .bar { grid-area: bar; margin-left: 0; }

/* e8 – dotyková verze: hodně místa, měřítko, tlusté pruhy */
.e8 .rows { gap: 0; top: 172px; }
.e8 .row { height: 172px; grid-template-columns: auto 1fr auto 380px; grid-template-rows: 62px 1fr; grid-template-areas: "no name votes pct" "bar bar bar pct"; column-gap: 20px; }
.e8 .no { grid-area: no; font-size: 40px; } .e8 .name { grid-area: name; font-size: 50px; } .e8 .votes { grid-area: votes; font-size: 38px; }
.e8 .pct { grid-area: pct; font-size: 100px; justify-self: end; align-self: center; margin-right: 6px; }
.e8 .bar { grid-area: bar; height: 100px; align-self: start; margin-top: 6px; border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 3px), rgba(0,0,0,.14) calc(25% - 3px) 25%), var(--track); } .e8 .bar i { border-radius: 0; }

/* e9 – dvě pilulky (hlasy + procenta) */
.e9 .rows { top: 172px; }
.e9 .row { height: 150px; background: var(--card); border-radius: var(--cr); box-shadow: var(--shadow); grid-template-columns: auto 1fr auto auto; grid-template-rows: 82px 1fr; grid-template-areas: "no name votes pct" "bar bar bar pct"; padding: 0 30px 0 34px; column-gap: 22px; }
.e9 .no { grid-area: no; font-size: 36px; } .e9 .name { grid-area: name; font-size: 46px; }
.e9 .votes { grid-area: votes; font-size: 34px; border: 3px solid var(--ink); border-radius: 999px; padding: 4px 24px; color: var(--vot); } .e9 .votes b { color: var(--vot); }
.e9 .pct { grid-area: pct; background: var(--c); color: var(--on); border-radius: 999px; padding: 18px 36px; font-size: 56px; align-self: center; } .e9 .pct .i { width: auto; } .e9 .pct .s { color: var(--on); }
.e9 .bar { grid-area: bar; height: 28px; align-self: start; border-radius: 999px; } .e9 .bar i { border-radius: 999px; --minw: 28px; }

/* e10 – „heatmapa“: sytost řádku podle podílu */
.e10 .rows { top: 172px; }
.e10 .row { height: 150px; background: color-mix(in srgb, var(--c) calc(var(--sh) * 3%), var(--card)); border-radius: var(--cr); grid-template-columns: 150px 1fr auto 400px; grid-template-areas: "no name votes pct"; padding-right: 40px; }
.e10 .no { grid-area: no; justify-self: center; font-size: 56px; font-weight: 700; color: var(--ink); } .e10 .name { grid-area: name; font-size: 50px; } .e10 .votes { grid-area: votes; font-size: 38px; margin-right: 30px; }
.e10 .votes, .e10 .pct .s { color: var(--ink); opacity: .8; }
.e10 .pct { grid-area: pct; font-size: 92px; justify-self: end; } .e10 .bar { display: none; }
.e2 .name { height: 2.4em; overflow: hidden; }
.e7 .row:nth-child(2) .votes, .e7 .row:nth-child(3) .votes, .e7 .row:nth-child(n+4) .votes { margin-left: 22px; }