/* ============================================================
 * mk-list-term.css — zoznam termínov pre Múdru kartu
 * Šablóna: page-mk-list-term.php. Prefix .mkl-
 * Paleta prevzatá z detail-terminy.css, aby to sedelo so zvyškom webu.
 * ============================================================ */

.mkl-wrap {
    --mkl-d: #f59e0b;      /* denný   — žltá/oranžová */
    --mkl-v: #2196f3;      /* večerný — modrá */
    --mkl-w: #6b7280;      /* víkend  — sivá */
    --mkl-online: #16a34a; /* online  — zelená */
    --mkl-blue: #1d9bf0;   /* CTA modrá */
    --mkl-text: #14202b;
    --mkl-muted: #6b7280;
    --mkl-border: #e6e9ee;
    box-sizing: border-box;
    margin: 18px 0 34px;
    font-size: 15px;
    color: var(--mkl-text);
}
.mkl-wrap *, .mkl-wrap *::before, .mkl-wrap *::after { box-sizing: inherit; }

.mkl-h1 { margin: 0 0 10px; }
.mkl-intro { margin-bottom: 18px; }
.mkl-intro p:last-child { margin-bottom: 0; }

/* ----- beta oznam pod nadpisom ----- */
.mkl-beta {
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fffaf3;
}
.mkl-beta-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}
.mkl-beta-znacka {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: #d97706;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    line-height: 1.5;
}
.mkl-beta-head strong { font-size: 14.5px; font-weight: 700; }
.mkl-beta p {
    margin: 0 0 9px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #7c5514;
}
.mkl-beta ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mkl-beta li {
    position: relative;
    padding-left: 17px;
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 1.55;
    color: #7c5514;
}
.mkl-beta li:last-child { margin-bottom: 0; }
.mkl-beta li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d97706;
}
.mkl-beta strong { color: var(--mkl-text); }
.mkl-beta a { color: #b45309; text-decoration: underline; font-weight: 600; }
.mkl-beta a:hover { color: #7c5514; }

/* ----- hlavička prihlásenej karty ----- */
.mkl-karta {
    border: 1px solid var(--mkl-border);
    border-radius: 14px;
    background: #fdfdfd;
    margin-bottom: 18px;
    overflow: hidden;
}
.mkl-karta-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #1d9bf0 0%, #0d7fc9 100%);
    color: #fff;
}
.mkl-karta-ikona { display: inline-flex; flex: 0 0 auto; opacity: .9; }
.mkl-karta-ikona svg { width: 34px; height: 34px; }
.mkl-karta-hlavne { flex: 1 1 auto; min-width: 0; }
.mkl-karta-typ {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .85;
}
.mkl-karta-cislo { font-size: 12px; font-weight: 600; opacity: .85; margin-left: 8px; }
.mkl-karta-drzitel {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 2px;
}
.mkl-karta-drzitel svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .8; }
.mkl-karta-out {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.mkl-karta-out:hover, .mkl-karta-out:focus {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    text-decoration: none;
}
.mkl-karta-share {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.mkl-karta-share:hover { background: rgba(255, 255, 255, .28); }
.mkl-karta-share svg { width: 15px; height: 15px; }

/* panel s odkazom */
.mkl-share {
    padding: 14px 18px;
    border-bottom: 1px solid var(--mkl-border);
    background: #f7f9fb;
}
.mkl-share[hidden] { display: none !important; }
.mkl-share-popis {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--mkl-muted);
}
.mkl-share-popis strong { color: var(--mkl-text); }
.mkl-share-riadok { display: flex; flex-wrap: wrap; gap: 8px; }
.mkl-share-input {
    flex: 1 1 320px;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #c8d2dc;
    border-radius: 10px;
    background: #fff;
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--mkl-text);
}
.mkl-share-kopiruj { flex: 0 0 auto; width: auto; height: 40px; padding: 0 18px; }
.mkl-share-kopiruj.is-hotovo { background: var(--mkl-online); }
.mkl-share-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 18px;
    border-bottom: 1px solid var(--mkl-border);
    background: #f7f9fb;
    font-size: 12.5px;
    color: var(--mkl-muted);
}
.mkl-share-info svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mkl-share-info strong { color: var(--mkl-text); }

.mkl-karta-firma {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    opacity: .9;
    margin-top: 3px;
}

/* telo: vľavo údaje, vpravo grafika karty + odpočet */
.mkl-karta-telo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 0 22px;
    align-items: start;
}
.mkl-karta-lavo { min-width: 0; }
.mkl-karta-pravo {
    padding: 16px 18px 16px 0;
    text-align: center;
}
.mkl-karta-foto {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(20, 32, 43, .16);
}

/* odpočítavanie platnosti */
.mkl-odpocet {
    --mkl-odp: var(--mkl-online);
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--mkl-border);
    border-radius: 12px;
    background: #f7f9fb;
}
.mkl-odpocet.is-warn      { --mkl-odp: #d97706; border-color: #fed7aa; background: #fff7ed; }
.mkl-odpocet.is-kriticke  { --mkl-odp: #e0354b; border-color: #f6c2cb; background: #fdf1f3; }
.mkl-odpocet-cislo {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: var(--mkl-odp);
}
.mkl-odpocet-popis {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mkl-muted);
    margin-top: 3px;
}
.mkl-odpocet-bar {
    display: block;
    height: 6px;
    margin: 10px 0 6px;
    border-radius: 999px;
    background: #e6e9ee;
    overflow: hidden;
}
.mkl-odpocet-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--mkl-odp);
}
.mkl-odpocet-do { display: block; font-size: 11.5px; color: var(--mkl-muted); }

.mkl-karta-udaje {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 20px;
    margin: 0;
    padding: 16px 18px;
}
.mkl-karta-udaje > div { min-width: 0; }
.mkl-karta-udaje dt {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mkl-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2px;
}
.mkl-karta-udaje dd {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}
.mkl-karta-udaje dd small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--mkl-muted);
    margin-top: 2px;
}
.mkl-karta-osoby {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 18px 16px;
    font-size: 13px;
}
.mkl-karta-osoby-lead { color: var(--mkl-muted); font-size: 12px; font-weight: 600; }
.mkl-osoba {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--mkl-border);
    border-radius: 999px;
    background: #f7f9fb;
    font-weight: 600;
}
.mkl-osoba svg { width: 14px; height: 14px; color: var(--mkl-muted); }
.mkl-karta-pozn {
    margin: 0;
    padding: 0 18px 16px;
    font-size: 12.5px;
    color: var(--mkl-muted);
}

/* ----- chybová hláška ----- */
.mkl-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid #f6c2cb;
    background: #fdf1f3;
    color: #e0354b;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}
.mkl-alert svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ----- záložky ----- */
.mkl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.mkl-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--mkl-border);
    border-radius: 999px;
    background: #fff;
    color: var(--mkl-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.mkl-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef1f5;
    color: var(--mkl-muted);
    font-size: 12px;
    font-weight: 700;
}
.mkl-tab:hover { border-color: #c8d2dc; }
.mkl-tab.is-active { background: var(--mkl-blue); border-color: var(--mkl-blue); color: #fff; }
.mkl-tab.is-active span { background: rgba(255, 255, 255, .25); color: #fff; }

.mkl-panel[hidden] { display: none !important; }

/* ----- kapacitný pruh nad zoznamom (modrá = voľné, sivá = vypredané) ----- */
.mkl-kap {
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--mkl-border);
    border-radius: 12px;
    background: #fdfdfd;
}
.mkl-kap-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}
.mkl-kap-nadpis { font-size: 14px; font-weight: 700; }
.mkl-kap-nadpis small { font-weight: 500; color: var(--mkl-muted); margin-left: 5px; }
.mkl-kap-pct {
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: var(--mkl-blue);
}
.mkl-kap-bar {
    height: 16px;
    border-radius: 999px;
    background: #cfd6de;          /* sivá = vypredané */
    overflow: hidden;
}
.mkl-kap-volne {
    display: block;
    height: 100%;
    border-radius: 999px 0 0 999px;
    background: var(--mkl-blue);  /* modrá = voľné */
}
.mkl-kap-volne[style*="100%"] { border-radius: 999px; }
.mkl-kap-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 13px;
    color: var(--mkl-muted);
}
.mkl-kap-legenda li { display: flex; align-items: center; gap: 7px; }
.mkl-kap-legenda strong { color: var(--mkl-text); font-weight: 700; }
.mkl-kap-bod {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: 0 0 auto;
}
.mkl-kap-bod--volne    { background: var(--mkl-blue); }
.mkl-kap-bod--obsadene { background: #cfd6de; }
.mkl-kap-spolu { margin-left: auto; font-size: 12.5px; }
.mkl-kap-rozpis {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--mkl-border);
    font-size: 12.5px;
    color: var(--mkl-muted);
    line-height: 1.5;
}
.mkl-kap-rozpis strong { color: var(--mkl-text); }

@media (max-width: 680px) {
    .mkl-kap-spolu { margin-left: 0; flex-basis: 100%; }
}

/* ----- riadok termínu ----- */
.mkl-item {
    display: grid;
    grid-template-columns: 54px 104px minmax(0, 1.5fr) 140px 150px 96px 200px;
    gap: 14px;
    align-items: center;
    background: #fdfdfd;
    border: 1px solid var(--mkl-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.mkl-item.is-blok { background: #f7f9fb; }
.mkl-item--reg { grid-template-columns: 54px 104px minmax(0, 1.5fr) 140px 150px 150px 190px; }
.mkl-col { min-width: 0; }

.mkl-ikona {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    object-fit: cover;
    background: #eef1f5;
}

/* dátum */
.mkl-datum-big { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; }
.mkl-datum-sub { display: block; font-size: 12.5px; color: var(--mkl-muted); margin-top: 1px; }

/* kurz */
.mkl-nazov {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mkl-text);
}
.mkl-nazov:hover { color: var(--mkl-blue); text-decoration: underline; }
.mkl-kat { display: block; font-size: 12.5px; color: var(--mkl-muted); margin-top: 3px; }

/* typ */
.mkl-typ-ikona { display: inline-flex; vertical-align: middle; }
.mkl-typ-ikona svg { width: 20px; height: 20px; }
.mkl-typ-txt { font-size: 13.5px; font-weight: 700; margin-left: 5px; vertical-align: middle; }
.mkl-typ.is-d .mkl-typ-ikona, .mkl-typ.is-d .mkl-typ-txt { color: var(--mkl-d); }
.mkl-typ.is-v .mkl-typ-ikona, .mkl-typ.is-v .mkl-typ-txt { color: var(--mkl-v); }
.mkl-typ.is-w .mkl-typ-ikona, .mkl-typ.is-w .mkl-typ-txt { color: var(--mkl-w); }
.mkl-forma {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--mkl-muted);
    margin-top: 4px;
}
.mkl-forma svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* lektor */
.mkl-lektor { display: flex; align-items: center; gap: 9px; }
.mkl-lektor-foto {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #eef1f5;
}
.mkl-lektor-meno { font-size: 13px; font-weight: 600; color: var(--mkl-text); line-height: 1.25; }
.mkl-lektor-meno:hover { color: var(--mkl-blue); text-decoration: underline; }
.mkl-lektor-meno--empty { color: var(--mkl-muted); font-weight: 500; font-style: italic; }

/* voľné miesta na MK */
.mkl-miesta { text-align: center; }
.mkl-miesta strong {
    display: block;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--mkl-online);
}
.mkl-miesta span { display: block; font-size: 11.5px; color: var(--mkl-muted); margin-top: 3px; line-height: 1.3; }
.mkl-miesta.is-nula strong { color: #6b7280; }

/* účastník (záložky 2 a 3) */
.mkl-ucastnik strong { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.mkl-ucastnik span { display: block; font-size: 11.5px; color: var(--mkl-muted); margin-top: 2px; }

/* akcia */
.mkl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--mkl-blue);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
.mkl-btn:hover, .mkl-btn:focus { background: #1483d4; color: #fff; text-decoration: none; }
.mkl-btn--sek {
    margin-top: 7px;
    padding: 9px 12px;
    border: 1px solid #c8d2dc;
    background: #fff;
    color: var(--mkl-text);
    font-size: 12.5px;
    font-weight: 600;
}
.mkl-btn--sek:hover, .mkl-btn--sek:focus {
    background: #f7f9fb;
    border-color: var(--mkl-blue);
    color: var(--mkl-blue);
}
.mkl-btn--sek svg { width: 15px; height: 15px; }
.mkl-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.mkl-stav {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    padding: 9px 11px;
    border-radius: 10px;
}
.mkl-stav svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mkl-stav--busy { color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; }
.mkl-stav--mam  { color: var(--mkl-online); background: #f1faf4; border: 1px solid #bbeccb; }
.mkl-stav--reg  { color: var(--mkl-online); background: transparent; padding: 0; }
.mkl-stav--sold { color: #6b7280; background: #f1f3f5; border: 1px solid #cfd6de; }
.mkl-stav--plan {
    align-items: flex-start;
    color: var(--mkl-v);
    background: #eef7fe;
    border: 1px dashed #a8d4f5;
}
.mkl-stav--plan svg { margin-top: 1px; }
.mkl-stav--plan strong { display: block; font-weight: 700; }
.mkl-stav--plan small {
    display: block;
    font-weight: 500;
    font-size: 11.5px;
    color: var(--mkl-muted);
    margin-top: 2px;
}

/* plánovaný termín — vizuálne tlmenejší, nie je objednateľný */
.mkl-item.is-plan { background: #fbfcfd; border-style: dashed; }
.mkl-item.is-plan .mkl-miesta strong { color: var(--mkl-v); }
.mkl-link { display: inline-block; font-size: 12.5px; margin-top: 6px; color: var(--mkl-blue); }
.mkl-link:hover { text-decoration: underline; }

/* ----- prázdny stav / hint ----- */
.mkl-empty {
    padding: 26px 20px;
    border: 1px dashed var(--mkl-border);
    border-radius: 12px;
    background: #f7f9fb;
    color: var(--mkl-muted);
    text-align: center;
    font-size: 14.5px;
    line-height: 1.55;
}
.mkl-hint {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--mkl-border);
    border-radius: 10px;
    background: #f7f9fb;
    color: var(--mkl-muted);
    font-size: 13px;
}
.mkl-hint svg { width: 17px; height: 17px; flex: 0 0 auto; }
.mkl-hint strong { color: var(--mkl-text); }

/* ----- prihlasovací formulár ----- */
.mkl-login {
    max-width: 620px;
    margin: 0 auto;
    padding: 26px 24px;
    border: 1px solid var(--mkl-border);
    border-radius: 14px;
    background: #fdfdfd;
    text-align: center;
}
.mkl-login-ikona { display: inline-flex; color: var(--mkl-blue); }
.mkl-login-ikona svg { width: 30px; height: 30px; }
.mkl-login-h2 { margin: 8px 0 6px; font-size: 20px; font-weight: 700; }
.mkl-login-p { margin: 0 auto 18px; max-width: 460px; font-size: 13.5px; color: var(--mkl-muted); line-height: 1.55; }
.mkl-login-polia {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
}
.mkl-login-polia label { display: block; text-align: left; }
.mkl-login-polia label span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--mkl-muted);
    margin-bottom: 4px;
}
.mkl-login-polia input {
    width: 150px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #c8d2dc;
    border-radius: 10px;
    font-size: 15px;
    letter-spacing: .06em;
}
.mkl-login-polia input:focus { outline: 0; border-color: var(--mkl-blue); }
.mkl-login-polia .mkl-btn { width: auto; height: 42px; padding: 0 22px; }
.mkl-login-co {
    list-style: none;
    margin: 20px auto 0;
    padding: 16px 0 0;
    max-width: 420px;
    border-top: 1px solid var(--mkl-border);
    text-align: left;
}
.mkl-login-co li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--mkl-muted);
    padding: 4px 0;
}
.mkl-login-co svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--mkl-online); }
.mkl-login-note { margin: 16px 0 0; font-size: 12.5px; color: var(--mkl-muted); }

/* ----- responzív ----- */
@media (max-width: 1100px) {
    .mkl-item, .mkl-item--reg {
        grid-template-columns: 54px minmax(0, 1fr) 150px 190px;
        grid-template-areas:
            "ikona kurz   kurz  kurz"
            "ikona datum  typ   lektor"
            "ikona miesta akcia akcia";
        row-gap: 12px;
        align-items: start;
    }
    .mkl-ikona  { grid-area: ikona; align-self: start; }
    .mkl-kurz   { grid-area: kurz; }
    .mkl-datum  { grid-area: datum; }
    .mkl-typ    { grid-area: typ; }
    .mkl-lektor { grid-area: lektor; }
    .mkl-miesta, .mkl-ucastnik { grid-area: miesta; text-align: left; }
    .mkl-akcia  { grid-area: akcia; align-self: center; }
}
@media (max-width: 680px) {
    .mkl-item, .mkl-item--reg {
        grid-template-columns: 54px minmax(0, 1fr);
        grid-template-areas:
            "ikona  kurz"
            "datum  datum"
            "typ    typ"
            "lektor lektor"
            "miesta miesta"
            "akcia  akcia";
        gap: 10px 12px;
    }
    .mkl-miesta strong { display: inline; font-size: 18px; margin-right: 5px; }
    .mkl-miesta span   { display: inline; }
    .mkl-miesta span br { display: none; }
    .mkl-login-polia label    { width: 100%; }
    .mkl-login-polia input    { width: 100%; }
    .mkl-login-polia .mkl-btn { width: 100%; }

    .mkl-karta-head { flex-wrap: wrap; }
    .mkl-karta-hlavne { flex: 1 1 100%; order: 2; }
    .mkl-karta-out { order: 3; margin-left: auto; }
    .mkl-karta-drzitel { font-size: 17px; }
    .mkl-karta-udaje { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* grafika karty pod údaje, keď už vedľa nich nie je miesto */
@media (max-width: 900px) {
    .mkl-karta-telo { grid-template-columns: minmax(0, 1fr); }
    .mkl-karta-pravo {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 0 18px 16px;
        text-align: left;
    }
    .mkl-karta-foto { max-width: 240px; margin: 0; }
    .mkl-odpocet { flex: 1 1 auto; margin-top: 0; }
}
@media (max-width: 560px) {
    .mkl-karta-pravo { flex-direction: column; align-items: stretch; text-align: center; }
    .mkl-karta-foto { max-width: 280px; margin: 0 auto; }
    .mkl-odpocet { margin-top: 14px; }
}