/* ===== Série L: v duchu upravené verze od webařů =====
   Struktura zůstává (jméno nahoře · hlasy vpravo · pruh s procentem uvnitř · fotka pozadí · sečteno 57,45 %),
   písmo je výrazně větší a procenta se čtou na jakémkoli pruhu (tmavý text místo bílého na oranžové/šedé). */
.photo-mid { background: linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.58)), url(bg.jpg) center / cover no-repeat, #fff; }
.pb { display: none; }

.l .rows { top: 222px; gap: 14px; }
.l .row { height: 156px; align-content: start; column-gap: 24px; grid-template-columns: 1fr; grid-template-rows: 64px 92px; grid-template-areas: "name" "bar"; }
.l .no { display: none; }
.l .name { grid-area: name; font-size: 62px; font-weight: 600; }
/* nová struktura od webařů: hlasy uvnitř pruhu vpravo */
.l .votes { grid-area: bar; z-index: 2; justify-self: end; align-self: center; margin-right: 26px; font-size: 46px; color: var(--ink); }
.l .votes b { color: var(--ink); font-weight: 700; }
/* alternativa: hlasy nahoře vpravo u jména */
.ltop .row { grid-template-columns: 1fr auto; grid-template-areas: "name votes" "bar bar"; }
.ltop .votes { grid-area: votes; justify-self: auto; align-self: center; margin: 0; color: var(--mute); } .ltop .votes b { color: var(--vot); }
.l .bar { grid-area: bar; height: 92px; background: #fff; border-radius: 0; } .l .bar i { border-radius: 0; --minw: 360px; }
.l .pct { grid-area: bar; z-index: 2; justify-self: start; align-self: center; margin-left: 24px; font-size: 64px; color: var(--on); }
.l .pct .i { width: auto; } .l .pct .s { color: var(--on); font-size: .68em; }

/* L02 – větší procenta, hlasy tučně */
.l2 .votes b { font-weight: 700; } .l2 .pct { font-size: 74px; } .l2 .name { font-size: 64px; }
/* L03 – procento na konci výplně (uvnitř) */
.l3 .pct { margin-left: var(--w); transform: translateX(calc(-100% - 26px)); }
/* L04 – procento za koncem výplně, tmavě na bílém */
.l4 .pct { margin-left: calc(var(--w) + 24px); color: var(--ink); font-size: 74px; } .l4 .pct .s { color: #2B2B2B; }
.l4 .row:first-child .pct { margin-left: 0; margin-right: 26px; justify-self: end; color: var(--on); } .l4 .row:first-child .pct .s { color: var(--on); }
.l4 .bar i { --minw: 60px; }
/* L05 – obří procento vlevo */
.l5 .row { grid-template-columns: 560px 1fr auto; grid-template-rows: 80px 76px; grid-template-areas: "pct name votes" "pct bar bar"; }
.l5 .pct { grid-area: pct; justify-self: start; margin-left: 20px; font-size: 128px; color: var(--ink); } .l5 .pct .i { width: 1.4em; } .l5 .pct .s { color: #2B2B2B; }
.l5 .bar { height: 60px; align-self: start; margin-top: 6px; } .l5 .name { font-size: 64px; }
/* L06 – bílý štítek s procentem na konci výplně */
.l6 .pct { margin-left: var(--w); transform: translateX(calc(-100% - 16px)); background: #fff; color: #000; border: 4px solid #000; border-radius: 999px; padding: 4px 26px 8px; font-size: 60px; } .l6 .pct .s { color: #000; }
/* L07 – matné plochy pod řádky */
.l7 .row { background: rgba(255,255,255,.82); border-radius: 18px; padding: 0 26px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.l7 .rows { gap: 12px; } .l7 .bar { background: #EDEDED; }
/* L08 – obrys pruhu */
.l8 .bar { box-shadow: inset 0 0 0 4px #000; } .l8 .bar i { box-shadow: inset 0 0 0 4px #000; }
/* L09 – pruhování řádků */
.l9 .row:nth-child(odd) { background: rgba(255,255,255,.8); padding: 0 26px; } .l9 .row:nth-child(even) { padding: 0 26px; } .l9 .rows { gap: 0; top: 226px; } .l9 .row { height: 158px; }
/* L10 – sloupec procent vpravo */
.l10 .row { grid-template-columns: 1fr auto 400px; grid-template-rows: 64px 92px; grid-template-areas: "name votes pct" "bar bar pct"; }
.l10 .pct { grid-area: pct; margin: 0; justify-self: end; color: var(--ink); font-size: 108px; } .l10 .pct .s { color: #2B2B2B; }
.l10 .bar { margin-right: 4px; }
/* L11 – hlavička s průběhovými pruhy místo půlkruhů */
.l11 .gauge { display: none; } .l11 .stat { flex-direction: column; align-items: stretch; gap: 6px; min-width: 380px; }
.l11 .stat .l { font-size: 44px; } .l11 .stat .v { font-size: 80px; } .l11 .pb { display: block; height: 22px; background: #fff; border: 4px solid #000; } .l11 .pb i { display: block; height: 100%; background: #6E6E6E; width: calc(var(--f) * 100%); }
.l11 header { height: 210px; } .l11 .rows { top: 232px; gap: 10px; } .l11 .row { height: 152px; grid-template-rows: 62px 90px; } .l11 .bar { height: 90px; }
.l11 .stats { top: 14px; }
/* L12 – linky mezi řádky, bílé pozadí */
.l12 .row { border-bottom: 4px solid #000; height: 158px; } .l12 .rows { gap: 8px; }
/* L13 – barevný čtvereček před jménem */
.l13 .row::before { content: ""; position: absolute; left: 0; top: 14px; width: 40px; height: 40px; background: var(--c); border: 4px solid #000; }
.l13 .name { padding-left: 58px; }
/* L14 – maximální pruh a procento */
.l14 .rows { top: 214px; gap: 6px; }
.l14 .row { height: 166px; grid-template-rows: 62px 104px; } .l14 .name { font-size: 52px; } .l14 .votes { font-size: 44px; } .l14 .bar { height: 104px; } .l14 .pct { font-size: 88px; }
/* L15 – řádek jako pruh, procento vpravo */
.l15 .row { grid-template-columns: 1fr auto 420px; grid-template-rows: 156px; grid-template-areas: "name votes pct"; overflow: hidden; border: 4px solid #000; background: rgba(255,255,255,.7); padding-right: 30px; }
.l15 .row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); min-width: 160px; background: color-mix(in srgb, var(--c) 62%, white); }
.l15 .row > * { position: relative; z-index: 1; } .l15 .name { padding-left: 34px; font-size: 66px; } .l15 .bar { display: none; }
.l15 .pct { grid-area: pct; margin: 0; justify-self: end; color: var(--ink); font-size: 96px; } .l15 .pct .s { color: #2B2B2B; } .l15 .votes { margin-right: 20px; }
/* L16 – vpravo procento nad hlasy */
.l16 .row { grid-template-columns: 1fr 440px; grid-template-rows: 72px 84px; grid-template-areas: "name pct" "bar votes"; column-gap: 26px; }
.l16 .bar { height: 84px; margin-right: 0; } .l16 .pct { grid-area: pct; margin: 0; justify-self: end; color: var(--ink); font-size: 84px; align-self: center; } .l16 .pct .s { color: #2B2B2B; }
.l16 .votes { justify-self: end; align-self: center; }
/* L17 – hierarchie: první tři větší */
.l17 .rows { gap: 10px; }
.l17 .row:nth-child(-n+3) { height: 180px; grid-template-rows: 72px 108px; } .l17 .row:nth-child(-n+3) .name { font-size: 68px; } .l17 .row:nth-child(-n+3) .bar { height: 108px; } .l17 .row:nth-child(-n+3) .pct { font-size: 78px; }
.l17 .row:nth-child(n+4) { height: 128px; grid-template-rows: 58px 70px; } .l17 .row:nth-child(n+4) .name { font-size: 50px; } .l17 .row:nth-child(n+4) .votes { font-size: 44px; } .l17 .row:nth-child(n+4) .bar { height: 70px; } .l17 .row:nth-child(n+4) .pct { font-size: 54px; }
/* L18 – hlasy jako hlavní údaj */
.l18 .row { grid-template-rows: 76px 80px; height: 156px; } .l18 .name { font-size: 60px; } .l18 .votes { font-size: 44px; } .l18 .votes b { font-size: 84px; font-weight: 700; } .l18 .bar { height: 80px; } .l18 .pct { font-size: 58px; }
/* L19 – jejich „sčítání“: velké jméno, klidný pruh */
.l19 .row { grid-template-rows: 82px 72px; height: 156px; } .l19 .name { font-size: 78px; font-weight: 700; align-self: end; } .l19 .votes { font-size: 54px; align-self: end; }
.l19 .bar { height: 72px; } .l19 .pct { font-size: 58px; }
/* L20 – hlavička jen s čísly */
.l20 .gauge { display: none; } .l20 .stat .v { font-size: 116px; } .l20 .stat .v small { font-size: 70px; } .l20 .stat .l { font-size: 50px; } .l20 header { height: 210px; } .l20 h1 { font-size: 130px; } .l20 .stats { top: 16px; gap: 90px; }
.l20 .rows { top: 236px; gap: 10px; } .l20 .row { height: 150px; grid-template-rows: 62px 88px; } .l20 .bar { height: 88px; }