/* ===== Série K: karty – 8 rozložení × 5 témat (k1…k8 + t-*) ===== */
.k .row { background: var(--card); border-radius: var(--cr); box-shadow: var(--shadow); border: var(--bd) solid var(--ink); height: 150px; }
.k .rows { gap: 16px; }
.k .bar { height: 36px; }
.k .pct { justify-self: end; }
.stripe::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: var(--c); border-radius: var(--cr) 0 0 var(--cr); }

/* k1 – pruh pod názvem */
.k1 .row { grid-template-columns: 400px auto 1fr auto; grid-template-rows: 84px 1fr; grid-template-areas: "pct no name votes" "pct bar bar bar"; padding-right: 42px; }
.k1 .row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: var(--c); border-radius: var(--cr) 0 0 var(--cr); }
.k1 .row::after { content: ""; position: absolute; left: 402px; top: 30px; bottom: 30px; width: 2px; background: var(--line); }
.k1 .pct { grid-area: pct; font-size: 88px; margin-right: 46px; }
.k1 .no { grid-area: no; font-size: 34px; margin: 0 16px 0 40px; }
.k1 .name { grid-area: name; font-size: 46px; }
.k1 .votes { grid-area: votes; font-size: 36px; margin-left: 24px; }
.k1 .bar { grid-area: bar; align-self: start; margin: 6px 0 0 40px; }

/* k2 – barevný blok s číslem */
.k2 .row { grid-template-columns: 150px 1fr auto 400px; grid-template-rows: 88px 1fr; grid-template-areas: "no name votes pct" "no bar bar pct"; }
.k2 .no { grid-area: no; height: 100%; display: grid; place-items: center; background: var(--c); color: var(--on); font-size: 64px; font-weight: 700; border-radius: var(--cr) 0 0 var(--cr); }
.k2 .name { grid-area: name; font-size: 46px; padding-left: 42px; }
.k2 .votes { grid-area: votes; font-size: 36px; margin-left: 24px; }
.k2 .bar { grid-area: bar; align-self: start; margin: 2px 0 0 42px; }
.k2 .pct { grid-area: pct; font-size: 88px; margin-right: 44px; }

/* k3 – procento vpravo, pruh přes celou kartu */
.k3 .row { grid-template-columns: 56px 1fr auto 380px; grid-template-rows: 108px 28px; grid-template-areas: "no name votes pct" "bar bar bar bar"; padding: 0 32px; align-content: start; }
.k3 .no { grid-area: no; width: 56px; height: 56px; border-radius: calc(var(--br) * 2); background: var(--c); color: var(--on); display: grid; place-items: center; font-size: 32px; font-weight: 700; }
.k3 .name { grid-area: name; font-size: 48px; padding-left: 24px; }
.k3 .votes { grid-area: votes; font-size: 36px; margin-left: 24px; }
.k3 .pct { grid-area: pct; font-size: 80px; }
.k3 .bar { grid-area: bar; height: 28px; margin-top: -8px; }

/* k4 – pruh jako pozadí karty */
.k4 .rows { gap: 20px; top: 175px; }
.k4 .row { height: 140px; overflow: hidden; grid-template-columns: 400px auto 1fr auto; grid-template-areas: "pct no name votes"; padding-right: 30px; }
.k4 .row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); min-width: 80px; background: color-mix(in srgb, var(--c) var(--tint), transparent); }
.k4 .row::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: var(--c); }
.k4 .row > * { position: relative; z-index: 1; }
.k4 .pct { grid-area: pct; font-size: 80px; margin-right: 50px; }
.k4 .no { grid-area: no; font-size: 34px; margin-right: 16px; }
.k4 .name { grid-area: name; font-size: 48px; }
.k4 .votes { grid-area: votes; font-size: 36px; margin-left: 24px; }
.k4 .bar { display: none; }

/* k5 – procento v pilulce */
.k5 .row { grid-template-columns: 300px auto 1fr 430px; grid-template-rows: 1fr 1fr; grid-template-areas: "pct no name bar" "pct votes votes bar"; column-gap: 24px; padding: 0 42px 0 24px; }
.k5 .pct { grid-area: pct; justify-self: stretch; height: 90px; align-self: center; background: var(--c); color: var(--on); border-radius: var(--pill); justify-content: center; align-items: center; font-size: 64px; }
.k5 .pct .s { color: inherit; } .k5 .pct .i { width: auto; }
.k5 .no { grid-area: no; font-size: 34px; align-self: end; margin-bottom: 4px; }
.k5 .name { grid-area: name; font-size: 46px; align-self: end; }
.k5 .votes { grid-area: votes; font-size: 36px; align-self: start; justify-self: start; }
.k5 .bar { grid-area: bar; align-self: center; }

/* k6 – vítěz zvýrazněný */
.k6 .row { height: 136px; grid-template-columns: 400px auto 1fr auto; grid-template-rows: 72px 1fr; grid-template-areas: "pct no name votes" "pct bar bar bar"; padding-right: 42px; }
.k6 .row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: var(--c); border-radius: var(--cr) 0 0 var(--cr); }
.k6 .row::after { content: ""; position: absolute; left: 402px; top: 26px; bottom: 26px; width: 2px; background: var(--line); }
.k6 .pct { grid-area: pct; font-size: 72px; margin-right: 46px; }
.k6 .no { grid-area: no; font-size: 32px; margin: 0 16px 0 40px; }
.k6 .name { grid-area: name; font-size: 44px; }
.k6 .votes { grid-area: votes; font-size: 34px; margin-left: 24px; }
.k6 .bar { grid-area: bar; height: 32px; align-self: start; margin: 4px 0 0 40px; }
.k6 .row:first-child { height: 220px; background: var(--c); color: var(--on); grid-template-columns: 560px auto 1fr auto; grid-template-rows: 110px 1fr; padding-right: 42px; }
.k6 .row:first-child::before, .k6 .row:first-child::after { display: none; }
.k6 .row:first-child .pct { font-size: 104px; margin-right: 60px; }
.k6 .row:first-child .no, .k6 .row:first-child .name, .k6 .row:first-child .votes, .k6 .row:first-child .votes b, .k6 .row:first-child .pct .s { color: var(--on); }
.k6 .row:first-child .no { font-size: 40px; margin-left: 0; }
.k6 .row:first-child .name { font-size: 68px; }
.k6 .row:first-child .votes { font-size: 44px; }
.k6 .row:first-child .bar { height: 44px; background: rgba(0,0,0,.22); margin: 10px 0 0 0; border-radius: var(--br); }
.k6 .row:first-child .bar i { background: rgba(255,255,255,.92); }

/* k7 – tlustý pruh s procentem uvnitř */
.k7 .row { grid-template-columns: auto 1fr auto; grid-template-rows: 68px 64px; grid-template-areas: "no name votes" "bar bar bar"; padding: 0 32px; align-content: center; }
.k7 .no { grid-area: no; font-size: 34px; margin-right: 16px; }
.k7 .name { grid-area: name; font-size: 46px; }
.k7 .votes { grid-area: votes; font-size: 36px; margin-left: 24px; }
.k7 .bar { grid-area: bar; height: 64px; border-radius: min(var(--br), 32px); }
.k7 .bar i { --minw: 300px; border-radius: min(var(--br), 32px); }
.k7 .pct { grid-area: bar; z-index: 2; align-self: center; justify-self: start; margin-left: 24px; font-size: 52px; color: var(--on); }
.k7 .pct .s { color: var(--on); font-size: .65em; } .k7 .pct .i { width: auto; }

/* k8 – pořadí a mini pruh */
.k8 .row { grid-template-columns: 76px auto 1fr 470px 340px; grid-template-rows: 1fr 1fr; grid-template-areas: "rank no name bar pct" "rank votes votes bar pct"; column-gap: 18px; padding: 0 42px 0 28px; }
.k8 .rank { grid-area: rank; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--c); color: var(--on); font-size: 40px; font-weight: 700; }
.k8 .no { grid-area: no; font-size: 34px; align-self: end; margin-bottom: 4px; }
.k8 .name { grid-area: name; font-size: 46px; align-self: end; }
.k8 .votes { grid-area: votes; font-size: 36px; align-self: start; justify-self: start; }
.k8 .bar { grid-area: bar; height: 28px; }
.k8 .pct { grid-area: pct; font-size: 84px; }

.k .name { padding-right: 16px; }