/* ==========================================================================
   Modely modlitby — prehled na strance Vnitrni modlitba ([mh_modely_prehled]) a graf na strance
   /modely-modlitby/ ([mh_modely]). Markup: models/ModelyModlitbyObsah.php, chovani: assets/js/mh-modely.js.
   Assets je nacita jen na techto dvou strankach.

   JEDEN RADEK = MODEL JEDNOHO AUTORA, JEDEN VALECEK = JEDNA FAZE MODLITBY. Valecky jsou v plne barve (bez
   pruhlednosti), oddelene mezerou; barva = DRUH faze, takze stejne faze ruznych autoru jsou videt na prvni pohled.
   Barvy druhu (--f) jsou promenne na .mh-mod a maji vlastni stupne pro tmavy rezim; nazev faze stoji NAD valeckem
   v barve textu (identita nikdy nestoji jen na barve).

   PALETA JE PROMERENA na dvojicich druhu, ktere v radcich opravdu sousedi (26 dvojic): rozdil barev dE (OKLab × 100)
   pri beznem videni ≥ 15 a pri protanopii / deuteranopii ≥ 8. Svetly rezim: nejmensi 18,2 / 9,2; tmavy 17,7 / 10,0.
   Proto NEJSOU barvy presne ty z infografik webu: modra #0672f7 (ne #1659D8 — ta pri deuteranopii splyvala s fialovou),
   zelena #187e66 (ne #0F7345 — splyvala s cervenou), hneda a svetle fialova maji vlastni stupne. Cervena a fialova
   jsou barvy webu beze zmeny. Pri zmene barvy nebo pridani druhu dvojice znovu promerit.
   Druh "do dne" (predsevzeti, kyticka) NEMA barvu: je to DUTY valecek s obrysem. Devata barva by uz sla rozlisit
   jen tezko — a odnest si neco do dne je jina vec nez faze modlitby.
   Kit .elementor-kit-6 nacita button/p/a pozdeji a vyhrava remizy — pravidla pro ne nesou tridu i znacku.
   ========================================================================== */

.mh-mod {
    --mod-papir: #ffffff;
    --mod-ink: #161513;
    --mod-text: #33312d;
    --mod-sedy: #6f6b64;
    --mod-linka: #e3ded6;
    /* druhy fazi — svetly rezim */
    --f-priprava: #161513;
    --f-slovo: #d9294c;
    --f-rozjimani: #0672f7;
    --f-diky: #187e66;
    --f-vyznani: #7e3902;
    --f-prosba: #e0a526;
    --f-rozhovor: #aa87e5;
    --f-ticho: #7527c9;
    --f-den: transparent;
    /* podklad pod fazemi vnitrni modlitby — plna barva (text nikdy nelezi na pruhledne plose) */
    --mod-vnitrni: #eee4fb;
    position: relative;
    box-sizing: border-box;
    background: var(--mod-papir);
    color: var(--mod-ink);
    font-family: 'Urban Grotesk', sans-serif;
}
html.mh-dark .mh-mod {
    --mod-papir: #131313;
    --mod-ink: #f2f2f2;
    --mod-text: #d6d2cb;
    --mod-sedy: #a5a19a;
    --mod-linka: #2c2c2c;
    /* druhy fazi — tmavy rezim (vlastni stupne tychz odstinu) */
    --f-priprava: #e8e6e1;
    --f-slovo: #f0566f;
    --f-rozjimani: #4492d9;
    --f-diky: #52d4a9;
    --f-vyznani: #a17002;
    --f-prosba: #e6b540;
    --f-rozhovor: #c4a6f9;
    --f-ticho: #874ad8;
    --f-den: transparent;
    --mod-vnitrni: #2b1c47;
}
.mh-mod [hidden] { display: none !important; }

.mh-mod .je-priprava { --f: var(--f-priprava); }
.mh-mod .je-slovo { --f: var(--f-slovo); }
.mh-mod .je-rozjimani { --f: var(--f-rozjimani); }
.mh-mod .je-diky { --f: var(--f-diky); }
.mh-mod .je-vyznani { --f: var(--f-vyznani); }
.mh-mod .je-prosba { --f: var(--f-prosba); }
.mh-mod .je-rozhovor { --f: var(--f-rozhovor); }
.mh-mod .je-ticho { --f: var(--f-ticho); }
.mh-mod .je-den { --f: var(--f-den); }

/* ---- hlava ---- */
.mh-mod-kicker { font-weight: 700; font-size: 11px; line-height: 1.3; letter-spacing: .14em; color: var(--mod-sedy); }
.mh-mod-titul { margin: 4px 0 0; font-family: 'Novela Poster', Georgia, serif; font-weight: 900; font-size: 21px; line-height: 1.12; color: var(--mod-ink); }
.mh-mod .mh-mod-hlava p.mh-mod-uvod { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--mod-text); }
.mh-mod .mh-mod-hlava p.mh-mod-vyzva { margin: 3px 0 0; font-size: 12px; line-height: 1.4; font-style: italic; color: #d9294c; }
html.mh-dark .mh-mod .mh-mod-hlava p.mh-mod-vyzva { color: #ff6b83; }
/* vyzva plati jen tam, kde bezi skript (bez nej se podrobnosti neukazou) */
.mh-mod:not(.je-zive) .mh-mod-hlava p.mh-mod-vyzva { display: none; }

/* ---- rady ---- */
.mh-mod-rady { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.mh-mod-rada { position: relative; }
.mh-mod-skupina {
    margin: 10px 0 -2px; padding-top: 10px; border-top: 1.4px solid var(--mod-ink);
    font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mod-ink);
}
.mh-mod-skupina:first-child { margin-top: 0; }

/* jmeno autora = tlacitko (citat pri najeti / fokusu / klepnuti) */
.mh-mod .mh-mod-rada button.mh-mod-kdo,
.mh-mod .mh-mod-rada button.mh-mod-kdo:hover,
.mh-mod .mh-mod-rada button.mh-mod-kdo:focus {
    display: inline-block; margin: 0; padding: 0; min-height: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; text-align: left;
    font-family: 'Urban Grotesk', sans-serif; font-weight: 700; font-size: 13px; line-height: 1.25;
    letter-spacing: 0; text-transform: none; color: var(--mod-ink);
}
.mh-mod .mh-mod-rada button.mh-mod-kdo:hover,
.mh-mod .mh-mod-rada button.mh-mod-kdo.je-aktivni { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mh-mod .mh-mod-rada button.mh-mod-kdo:focus-visible { outline: 2px solid var(--f-ticho); outline-offset: 3px; }
.mh-mod-hlavicka { display: flex; align-items: baseline; gap: 7px; }
.mh-mod-kdy { font-weight: 400; font-size: 11.5px; line-height: 1.25; color: var(--mod-sedy); white-space: nowrap; }

/* faze = tlacitko: nazev nad valeckem (valecek kresli ::after, aby nazev byl samostatny segment prekladu).
   Mrizka o --n stejnych sloupcich; pod fazemi vnitrni modlitby lezi podklad .mh-mod-pas (tentyz radek mrizky). */
.mh-mod-faze {
    display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: 4px; align-items: end;
    margin-top: 3px;
}
.mh-mod-pas {
    grid-row: 1; align-self: stretch; margin: -5px -3px -6px; border-radius: 9px; background: var(--mod-vnitrni);
}
.mh-mod .mh-mod-faze button.mh-mod-f,
.mh-mod .mh-mod-faze button.mh-mod-f:hover,
.mh-mod .mh-mod-faze button.mh-mod-f:focus {
    grid-row: 1; position: relative; z-index: 1; min-width: 0; width: auto; margin: 0; padding: 0 0 15px; min-height: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
    font-family: 'Urban Grotesk', sans-serif; font-weight: 400; font-size: 10.5px; line-height: 1.15;
    letter-spacing: 0; text-transform: none; text-align: left; color: var(--mod-text);
    white-space: normal; overflow-wrap: normal; hyphens: manual;
}
.mh-mod .mh-mod-faze button.mh-mod-f::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 11px; border-radius: 999px;
    background: var(--f); transition: transform .15s ease;
}
.mh-mod .mh-mod-faze button.mh-mod-f:hover::after,
.mh-mod .mh-mod-faze button.mh-mod-f.je-aktivni::after { transform: scaleY(1.45); }
.mh-mod .mh-mod-faze button.mh-mod-f:hover,
.mh-mod .mh-mod-faze button.mh-mod-f.je-aktivni { color: var(--mod-ink); font-weight: 700; }
.mh-mod .mh-mod-faze button.mh-mod-f:focus-visible { outline: 2px solid var(--f-ticho); outline-offset: 2px; }
/* vnitrni modlitba: tucny nazev (a podklad .mh-mod-pas) */
.mh-mod .mh-mod-faze button.mh-mod-f.je-vnitrni { font-weight: 700; color: var(--mod-ink); }
/* druh "do dne": duty valecek s obrysem (viz uvod souboru) */
.mh-mod .mh-mod-faze button.mh-mod-f.je-den::after { background: none; box-shadow: inset 0 0 0 2px var(--mod-ink); }
/* faze, ktera je DAR (neda se udelat, jen prijmout) — prerusovany valecek; mezerami prosvita podklad */
.mh-mod .mh-mod-faze button.mh-mod-f.je-dar::after { background: repeating-linear-gradient(90deg, var(--f) 0 7px, transparent 7px 10px); }

/* legenda druhu */
.mh-mod-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--mod-linka); }
.mh-mod-legenda-pol { position: relative; padding-left: 24px; font-size: 11.5px; line-height: 1.2; color: var(--mod-text); }
.mh-mod-legenda-pol::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 8px; border-radius: 999px; background: var(--f); }
.mh-mod-legenda-pol.je-den::before { box-shadow: inset 0 0 0 1.6px var(--mod-ink); }
.mh-mod-legenda-pol.je-vnitrni .mh-mod-legenda-nazev { font-weight: 700; color: var(--mod-ink); }
/* popsana legenda na strance Modely modlitby: nazev druhu + jeho vysvetleni */
.mh-mod-legenda.je-popsana { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; margin-top: 22px; padding-top: 16px; }
.mh-mod-legenda.je-popsana .mh-mod-legenda-pol { padding-left: 30px; font-size: 13px; line-height: 1.4; }
.mh-mod-legenda.je-popsana .mh-mod-legenda-pol::before { top: 4px; width: 22px; height: 10px; }
.mh-mod-legenda.je-popsana .mh-mod-legenda-nazev { font-weight: 700; color: var(--mod-ink); }
.mh-mod-legenda-popis { margin-top: 1px; color: var(--mod-text); }
/* klic: podklad vnitrni modlitby a prerusovany valecek */
.mh-mod-klic { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px; }
.mh-mod-klic-pol { position: relative; font-size: 11.5px; line-height: 1.2; color: var(--mod-text); }
.mh-mod-klic-pol.je-pas { padding: 3px 9px 3px; border-radius: 7px; background: var(--mod-vnitrni); font-weight: 700; color: var(--mod-ink); }
.mh-mod-klic-pol.je-dar { padding: 3px 0 3px 30px; }
.mh-mod-klic-pol.je-dar::before {
    content: ''; position: absolute; left: 0; top: 6px; width: 24px; height: 8px; border-radius: 999px;
    background: repeating-linear-gradient(90deg, var(--f-ticho) 0 7px, transparent 7px 10px);
}
.mh-mod.je-graf .mh-mod-klic-pol { font-size: 13px; }

/* ---- podrobnost: spolecne prvky ---- */
.mh-mod-d-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.mh-mod-d-druh { position: relative; padding-left: 22px; }
.mh-mod-d-druh::before { content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 8px; margin-top: -4px; border-radius: 999px; background: var(--f); }
.mh-mod-d-druh.je-den::before { box-shadow: inset 0 0 0 1.6px currentColor; }
.mh-mod-d-autor { opacity: .8; }
.mh-mod-d-puvodne { margin-top: 1px; font-size: 12px; line-height: 1.3; font-style: italic; opacity: .75; }

/* ---- podrobnost: bublina (prehled) ---- */
.mh-mod-bublina {
    position: absolute; z-index: 20; box-sizing: border-box; padding: 12px 14px 12px;
    background: var(--mod-ink); color: var(--mod-papir); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28); pointer-events: none;
}
.mh-mod-bublina::before {
    content: ''; position: absolute; top: -6px; left: var(--sipka, 50%); width: 12px; height: 12px; margin-left: -6px;
    background: var(--mod-ink); transform: rotate(45deg);
}
.mh-mod-bublina .mh-mod-d-kicker { font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.mh-mod-bublina .mh-mod-d-titul { margin-top: 2px; font-family: 'Novela Poster', Georgia, serif; font-weight: 900; font-size: 17px; line-height: 1.15; }
.mh-mod .mh-mod-bublina p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--mod-papir); }
.mh-mod .mh-mod-bublina p.mh-mod-d-citat { font-style: italic; }
.mh-mod-bublina .mh-mod-d-zdroj { margin-top: 6px; font-size: 11px; line-height: 1.35; opacity: .7; }
/* pripnuta bublina (klepnuti) se da cist i ovladat — odkazy a tlacitka v ni funguji */
.mh-mod-bublina.je-pripnuta { pointer-events: auto; }
.mh-mod-bublina .mh-mod-d-co { color: inherit; opacity: .75; }
.mh-mod-bublina .mh-mod-d-dar { background: rgba(255, 255, 255, .14); color: inherit; }
html.mh-dark .mh-mod-bublina .mh-mod-d-dar { background: rgba(0, 0, 0, .1); }
.mh-mod-bublina .mh-mod-d-blizko { border-top-color: rgba(128, 128, 128, .45); }
.mh-mod-bublina .mh-mod-d-blizko-navesti { color: inherit; opacity: .7; }
.mh-mod .mh-mod-bublina button.mh-mod-skok,
.mh-mod .mh-mod-bublina button.mh-mod-skok:hover,
.mh-mod .mh-mod-bublina button.mh-mod-skok:focus {
    margin: 0; padding: 5px 11px; min-height: 0; border-radius: 999px; box-shadow: none; cursor: pointer;
    background: var(--mod-papir); border: 1.2px solid var(--mod-papir); color: var(--mod-ink);
    font-family: 'Urban Grotesk', sans-serif; font-weight: 700; font-size: 12.5px; line-height: 1.2;
    letter-spacing: 0; text-transform: none;
}
.mh-mod .mh-mod-bublina .mh-mod-d-vic a.mh-mod-d-odkaz { color: var(--mod-papir); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mh-mod.je-graf .mh-mod-bublina { padding: 14px 16px 14px; }
.mh-mod.je-graf .mh-mod-bublina p { font-size: 14px; }

/* ---- tlacitko Vice o modelech modlitby ---- */
.mh-mod-vice { margin-top: 14px; }
.mh-mod .mh-mod-vice a.mh-mod-vice-btn,
.mh-mod .mh-mod-vice a.mh-mod-vice-btn:visited {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
    background: var(--mod-ink); border: 1.4px solid var(--mod-ink); color: var(--mod-papir);
    font-weight: 700; font-size: 13.5px; line-height: 1.2; text-decoration: none;
}
.mh-mod .mh-mod-vice a.mh-mod-vice-btn:hover { background: #d9294c; border-color: #d9294c; color: #fff; }

/* ==========================================================================
   prehled v titulnim bloku stranky Vnitrni modlitba
   ========================================================================== */
.mh-mod.je-prehled { margin-top: 14px; padding: 16px 18px 18px; text-align: left; }
/* Titulni blok stranky (trida mh-vm-titulni z builderu): tri sloupce jen tam, kde se do praveho vejde sedm valecku
   s citelnymi nazvy (od 1200 px). Mezi 768 a 1199 px stoji nahore menu | nadpis s upozornenim a citat s prehledem
   jsou pod nimi pres celou sirku; do 767 px sklada Elementor vse pod sebe sam. Sirku sloupcu ridi promenna --width
   a zalamovani --flex-wrap (obycejne flex-wrap kontejner Elementoru prebiji). */
@media (min-width: 768px) and (max-width: 1199px) {
    .e-con.mh-vm-titulni { --flex-wrap: wrap !important; }
    .e-con.mh-vm-titulni > .e-con-inner { flex-wrap: wrap !important; }
    .e-con.mh-vm-titulni > .e-con-inner > .e-con:nth-child(1) { --width: 38% !important; }
    .e-con.mh-vm-titulni > .e-con-inner > .e-con:nth-child(2) { --width: calc(62% - 16px) !important; }
    .e-con.mh-vm-titulni > .e-con-inner > .e-con:nth-child(3) { --width: 100% !important; }
}

/* ==========================================================================
   graf na strance Modely modlitby
   ========================================================================== */
.mh-mod.je-graf { padding: 26px 32px 30px; }
/* stitek "Interaktivní" (.mh-inter-stitek, 114 × 38 px) sedi v pravem hornim rohu; tlacitka razeni pod nej nesmi
   zajet — do 1320 px sirky proto zacinaji az pod nim */
@media (max-width: 1320px) { .mh-mod.je-graf { padding-top: 58px; } }
.mh-mod.je-graf .mh-mod-titul { font-size: 28px; }
.mh-mod-ovladani { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.mh-mod-ovladani-navesti { margin-right: 4px; font-weight: 700; font-size: 11px; letter-spacing: .14em; color: var(--mod-sedy); }
.mh-mod .mh-mod-ovladani button.mh-mod-razeni,
.mh-mod .mh-mod-ovladani button.mh-mod-razeni:focus {
    margin: 0; padding: 7px 14px; min-height: 0; border-radius: 999px; box-shadow: none; cursor: pointer;
    background: var(--mod-papir); border: 1.4px solid var(--mod-linka); color: var(--mod-ink);
    font-family: 'Urban Grotesk', sans-serif; font-weight: 400; font-size: 13px; line-height: 1.2;
    letter-spacing: 0; text-transform: none;
}
.mh-mod .mh-mod-ovladani button.mh-mod-razeni:hover { background: var(--mod-papir); border-color: var(--mod-ink); color: var(--mod-ink); }
.mh-mod .mh-mod-ovladani button.mh-mod-razeni.je-zvolene,
.mh-mod .mh-mod-ovladani button.mh-mod-razeni.je-zvolene:hover,
.mh-mod .mh-mod-ovladani button.mh-mod-razeni.je-zvolene:focus { background: var(--mod-ink); border-color: var(--mod-ink); color: var(--mod-papir); font-weight: 700; }
.mh-mod .mh-mod-ovladani button.mh-mod-razeni:focus-visible { outline: 2px solid var(--f-ticho); outline-offset: 2px; }
.mh-mod .mh-mod-razeni-popisy p.mh-mod-razeni-popis { margin: 10px 0 0; max-width: 760px; font-size: 14px; line-height: 1.5; color: var(--mod-text); }

.mh-mod-hlavni { display: flex; gap: 28px; align-items: flex-start; margin-top: 18px; }
.mh-mod-leva { flex: 1 1 auto; min-width: 0; }
.mh-mod.je-graf .mh-mod-rady { margin-top: 0; gap: 0; }
.mh-mod.je-graf .mh-mod-rada {
    display: grid; grid-template-columns: 178px minmax(0, 1fr); column-gap: 16px; align-items: end;
    padding: 9px 0 10px; border-bottom: 1px solid var(--mod-linka); background: var(--mod-papir);
}
.mh-mod.je-graf .mh-mod-rada.je-vybrany { background: color-mix(in srgb, var(--f-ticho) 7%, var(--mod-papir)); }
.mh-mod.je-graf .mh-mod-hlavicka { flex-direction: column; align-items: flex-start; gap: 1px; }
.mh-mod.je-graf .mh-mod-rada button.mh-mod-kdo,
.mh-mod.je-graf .mh-mod-rada button.mh-mod-kdo:hover,
.mh-mod.je-graf .mh-mod-rada button.mh-mod-kdo:focus { font-size: 14.5px; }
.mh-mod.je-graf .mh-mod-kdy { font-size: 12px; }
/* Valecek ma ve vsech radcich STEJNOU sirku (sloupce pod sebou se daji porovnat): 94 px, nebo min, kdyz se
   nejdelsi radek (--max fazi, posila server) do sirky nevejde — na notebooku 1280 px zajizdel sedmy valecek
   Lutherova radku pod panel a mezi 768 a 900 px pretekal graf ze stranky. */
.mh-mod.je-graf .mh-mod-faze {
    margin-top: 0; column-gap: 5px;
    grid-template-columns: repeat(var(--n, 4), min(var(--mod-valecek, 94px), calc((100% - (var(--max, 7) - 1) * 5px) / var(--max, 7))));
}
.mh-mod.je-graf .mh-mod-faze button.mh-mod-f,
.mh-mod.je-graf .mh-mod-faze button.mh-mod-f:hover,
.mh-mod.je-graf .mh-mod-faze button.mh-mod-f:focus { padding-bottom: 19px; font-size: 12px; }
.mh-mod.je-graf .mh-mod-faze button.mh-mod-f::after { height: 13px; }
.mh-mod.je-graf { --vp: 13px; --krok: 15px; }
.mh-mod.je-graf .mh-mod-pas { margin: -6px -4px -7px; }
.mh-mod.je-graf .mh-mod-skupina { margin: 0; padding: 16px 0 6px; border-top: 0; border-bottom: 1.4px solid var(--mod-ink); }

/* panel podrobnosti vedle rad */
.mh-mod-panel { flex: 0 0 300px; position: sticky; top: 96px; box-sizing: border-box; padding: 16px 18px 16px; border: 1.4px solid var(--mod-ink); background: var(--mod-papir); }
.mh-mod-panel .mh-mod-d-kicker { font-weight: 700; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--mod-sedy); }
.mh-mod-panel .mh-mod-d-titul { margin-top: 4px; font-family: 'Novela Poster', Georgia, serif; font-weight: 900; font-size: 22px; line-height: 1.1; color: var(--mod-ink); }
.mh-mod .mh-mod-panel p { margin: 9px 0 0; font-size: 14px; line-height: 1.5; color: var(--mod-text); }
.mh-mod .mh-mod-panel p.mh-mod-d-citat { font-style: italic; color: var(--mod-ink); }
.mh-mod-panel .mh-mod-d-zdroj { margin-top: 9px; font-size: 12px; line-height: 1.4; color: var(--mod-sedy); }
.mh-mod .mh-mod-panel p.mh-mod-panel-vyzva { font-size: 12.5px; font-style: italic; color: #d9294c; }
html.mh-dark .mh-mod .mh-mod-panel p.mh-mod-panel-vyzva { color: #ff6b83; }
/* co model popisuje + dar + nejblizsi modely (jen na strance Modely modlitby) */
.mh-mod-d-co, .mh-mod-d-dar { margin-top: 9px; padding: 6px 10px 6px; border-radius: 7px; background: var(--mod-vnitrni); font-size: 12.5px; line-height: 1.35; color: var(--mod-ink); }
.mh-mod-d-co { background: none; padding: 0; color: var(--mod-sedy); font-style: italic; }
.mh-mod-d-blizko { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--mod-linka); }
.mh-mod-d-blizko-navesti { flex: 1 0 100%; font-weight: 700; font-size: 10.5px; letter-spacing: .13em; color: var(--mod-sedy); }
.mh-mod .mh-mod-panel button.mh-mod-skok,
.mh-mod .mh-mod-panel button.mh-mod-skok:focus {
    margin: 0; padding: 5px 11px; min-height: 0; border-radius: 999px; box-shadow: none; cursor: pointer;
    background: var(--mod-papir); border: 1.2px solid var(--mod-ink); color: var(--mod-ink);
    font-family: 'Urban Grotesk', sans-serif; font-weight: 700; font-size: 12.5px; line-height: 1.2;
    letter-spacing: 0; text-transform: none;
}
.mh-mod .mh-mod-panel button.mh-mod-skok:hover { background: var(--mod-ink); border-color: var(--mod-ink); color: var(--mod-papir); }
.mh-mod-d-vic { margin-top: 10px; font-size: 12.5px; line-height: 1.3; }
.mh-mod .mh-mod-panel .mh-mod-d-vic a.mh-mod-d-odkaz { color: var(--mod-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---- karty modelu (sekce Modely podrobne) ---- */
/* dva sloupce pod sebou (CSS columns): karty jsou ruzne vysoke, v mrizce by pod kratsimi zustavaly diry */
.mh-mod.mh-modk { display: block; columns: 2; column-gap: 18px; background: none; }
.mh-modk-karta { break-inside: avoid; margin: 0 0 18px; box-sizing: border-box; padding: 20px 22px 20px; border: 1.4px solid var(--mod-linka); border-radius: 12px; background: var(--mod-papir); scroll-margin-top: 96px; }
.mh-modk-karta:target { border-color: var(--f-ticho); box-shadow: 0 0 0 2px var(--f-ticho); }
.mh-modk-hlava { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.mh-modk-jmeno { font-family: 'Novela Poster', Georgia, serif; font-weight: 900; font-size: 24px; line-height: 1.08; color: var(--mod-ink); }
.mh-modk-kdy { font-size: 13px; line-height: 1.2; color: var(--mod-sedy); white-space: nowrap; }
.mh-modk-kdo { margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--mod-sedy); }
.mh-mod .mh-modk-karta p.mh-modk-uvod { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--mod-text); }
.mh-modk-co { margin-top: 8px; font-size: 12.5px; line-height: 1.35; font-style: italic; color: var(--mod-sedy); }
.mh-modk-kroky { margin: 14px 0 0; }
.mh-modk-krok { position: relative; padding: 10px 0 10px 18px; border-top: 1px solid var(--mod-linka); }
.mh-modk-krok::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 6px; border-radius: 999px; background: var(--f); }
.mh-modk-krok.je-vnitrni { margin: 0 -10px; padding-left: 28px; padding-right: 10px; border-top-color: transparent; border-radius: 9px; background: var(--mod-vnitrni); }
.mh-modk-krok.je-vnitrni::before { left: 10px; }
.mh-modk-krok.je-vnitrni + .mh-modk-krok { border-top-color: transparent; }
.mh-modk-krok.je-vnitrni + .mh-modk-krok.je-vnitrni { margin-top: 3px; }
.mh-modk-krok-hlava { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 9px; }
.mh-modk-krok-nazev { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--mod-ink); }
.mh-modk-krok-puvodne { font-size: 12.5px; font-style: italic; line-height: 1.3; color: var(--mod-sedy); }
.mh-mod .mh-modk-krok p.mh-modk-krok-text { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--mod-text); }
.mh-mod .mh-modk-krok p.mh-modk-krok-citat { margin: 5px 0 0; font-size: 14px; font-style: italic; line-height: 1.5; color: var(--mod-ink); }
.mh-modk-krok-zdroj { margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--mod-sedy); }
.mh-mod .mh-modk-karta p.mh-modk-citat { margin: 14px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--mod-ink); font-size: 15px; font-style: italic; line-height: 1.5; color: var(--mod-ink); }
.mh-modk-zdroj { margin-top: 6px; padding-left: 15px; font-size: 12px; line-height: 1.4; color: var(--mod-sedy); }
.mh-modk-vic { margin-top: 12px; font-size: 13.5px; line-height: 1.3; }
.mh-mod .mh-modk-karta .mh-modk-vic a.mh-modk-odkaz { color: var(--mod-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mh-mod .mh-modk-karta .mh-modk-vic a.mh-modk-odkaz::after { content: ' →'; }
/* NA TELEFONU A TABLETU JSOU KARTY SBALENE (skript prida .je-sbalitelne do 900 px, kde karty stoji v jednom
   sloupci): 21 karet pod sebou delalo na telefonu stranku
   dlouhou 54 000 px. Sbalena karta ukazuje jmeno, uvod a co model popisuje; faze, citaty a prameny rozbali tlacitko.
   Bez skriptu je vse rozbalene a tlacitko skryte. Skok na kartu (#model-…) ji rozbali. */
.mh-mod .mh-modk-karta button.mh-modk-prepni,
.mh-mod .mh-modk-karta button.mh-modk-prepni:hover,
.mh-mod .mh-modk-karta button.mh-modk-prepni:focus {
    display: none; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 15px; min-height: 0;
    border-radius: 999px; box-shadow: none; cursor: pointer;
    background: var(--mod-papir); border: 1.4px solid var(--mod-ink); color: var(--mod-ink);
    font-family: 'Urban Grotesk', sans-serif; font-weight: 700; font-size: 13.5px; line-height: 1.2;
    letter-spacing: 0; text-transform: none;
}
.mh-mod .mh-modk-karta button.mh-modk-prepni::after {
    content: ''; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .15s ease;
}
.mh-mod .mh-modk-karta.je-otevrena button.mh-modk-prepni::after { margin-top: 3px; transform: rotate(-135deg); }
.mh-mod .mh-modk-karta button.mh-modk-prepni:focus-visible { outline: 2px solid var(--f-ticho); outline-offset: 2px; }
.mh-mod.mh-modk.je-sbalitelne .mh-modk-karta button.mh-modk-prepni { display: inline-flex; }
.mh-mod.mh-modk.je-sbalitelne .mh-modk-karta:not(.je-otevrena) .mh-modk-telo { display: none; }
.mh-modk-jmeno { overflow-wrap: break-word; min-width: 0; }
html[lang="de"] .mh-modk-jmeno { hyphens: auto; }
/* druh "do dne": duty prouzek */
.mh-modk-krok.je-den::before { background: none; box-shadow: inset 0 0 0 1.6px var(--mod-ink); }
/* faze, ktera je dar: prerusovany prouzek vlevo */
.mh-modk-krok.je-dar::before { background: repeating-linear-gradient(180deg, var(--f) 0 7px, transparent 7px 10px); }

/* ---- uzsi obrazovky ---- */
@media (max-width: 1100px) {
    .mh-mod-hlavni { flex-direction: column; gap: 16px; }
    .mh-mod-panel { position: static; flex: none; width: 100%; }
    .mh-mod-leva { width: 100%; }
}
@media (max-width: 900px) {
    .mh-mod.mh-modk { columns: 1; }
    .mh-mod-legenda.je-popsana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .mh-mod.je-graf { padding: 58px 16px 22px; }
    /* jmeno nad valecky; valecky vyplni sirku radku (stejne jako v prehledu) */
    .mh-mod.je-graf .mh-mod-rada { grid-template-columns: minmax(0, 1fr); row-gap: 5px; padding: 10px 0 12px; }
    .mh-mod.je-graf .mh-mod-hlavicka { flex-direction: row; align-items: baseline; gap: 7px; }
    .mh-mod.je-graf .mh-mod-faze { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: 4px; }
    .mh-mod.je-graf .mh-mod-faze button.mh-mod-f,
    .mh-mod.je-graf .mh-mod-faze button.mh-mod-f:hover,
    .mh-mod.je-graf .mh-mod-faze button.mh-mod-f:focus { font-size: 10.5px; padding-bottom: 16px; }
    .mh-mod.je-graf .mh-mod-faze button.mh-mod-f::after { height: 11px; }
    .mh-mod.je-graf { --vp: 11px; --krok: 13px; }
    .mh-mod.je-graf .mh-mod-pas { margin: -5px -3px -6px; }
    .mh-mod-legenda.je-popsana { grid-template-columns: minmax(0, 1fr); }
    .mh-modk-karta { padding: 16px 16px 16px; }
}

/* ==========================================================================
   stranka /modely-modlitby/ — bile bloky kapitol (shortcode [mh_modely_sekce]) a uvodni graf
   Kontejner Elementoru nese tridu mh-modp (+ mh-ig-sekce u kapitol); bily podklad si nese obsah.
   Nadpis kapitoly je JEDINY text v Novele ≥ 28 px v sekci — podle nej pojmenuje kapitolu menu (mh-anim.js).
   ========================================================================== */
.mh-modp-sekce {
    --mod-papir: #ffffff; --mod-ink: #161513; --mod-text: #33312d; --mod-sedy: #6f6b64; --mod-linka: #e3ded6;
    box-sizing: border-box; margin-top: 14px; padding: 56px 32px; background: var(--mod-papir);
    color: var(--mod-ink); font-family: 'Urban Grotesk', sans-serif;
}
html.mh-dark .mh-modp-sekce { --mod-papir: #131313; --mod-ink: #f2f2f2; --mod-text: #d6d2cb; --mod-sedy: #a5a19a; --mod-linka: #2c2c2c; }
.mh-modp .mh-mod.je-graf { margin-top: 20px; }
/* hlava kapitoly: nadpis ve sloupci 300 px + kurzivni uvod (jako ostatni infograficke stranky) */
.mh-modp-hlava { display: flex; gap: 56px; align-items: flex-start; }
.mh-modp-nadpis {
    width: 300px; min-width: min-content; flex: none;
    font-family: 'Novela Poster', Georgia, serif; font-weight: 900; font-size: 56px; line-height: 1; color: var(--mod-ink);
}
.mh-modp-sekce p.mh-modp-uvod { flex: 1; margin: 6px 0 0; font-size: 17px; font-style: italic; line-height: 1.45; text-wrap: pretty; color: var(--mod-ink); }
.mh-modp-telo { margin-top: 34px; }
.mh-modp-sekce .mh-mod.mh-modk { margin-top: 34px; }

/* nalezy: dlazdice s cislem (cislo NENI v Novele — menu kapitol bere nejvetsi text v Novele) */
.mh-modp-nalezy { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.mh-modp-nalez { box-sizing: border-box; padding: 18px 18px 18px; border: 1.4px solid var(--mod-linka); border-top: 5px solid var(--f, var(--mod-ink)); border-radius: 12px; background: var(--mod-papir); }
.mh-modp-nalez-cislo { font-family: 'Urban Grotesk', sans-serif; font-weight: 900; font-size: 40px; line-height: 1; color: var(--mod-ink); font-variant-numeric: tabular-nums; }
.mh-modp-nalez-cislo .mh-modp-z { font-weight: 400; font-size: 22px; color: var(--mod-sedy); }
/* dvojice pribuznych pres hranici tradic: jmeno ↔ jmeno */
.mh-modp-nalez-pary { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.mh-modp-nalez-par { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--mod-ink); }
.mh-modp-nalez-par > div:first-child::after { content: '↔'; margin-left: 6px; color: var(--mod-sedy); }
.mh-modp-nalez-titul { margin-top: 9px; font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--mod-ink); }
.mh-modp-nalez-titul.je-prvni { margin-top: 0; }
.mh-modp-sekce .mh-modp-nalez p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--mod-text); }
.mh-modp-nalez.je-slovo { --f: #d9294c; }
.mh-modp-nalez.je-otcenas { --f: #161513; }
html.mh-dark .mh-modp-nalez.je-otcenas { --f: #e8e6e1; }
.mh-modp-nalez.je-ticho { --f: #7527c9; }
.mh-modp-nalez.je-dar { --f: #aa87e5; }
.mh-modp-nalez.je-blizko { --f: #187e66; }
html.mh-dark .mh-modp-nalez.je-slovo { --f: #f0566f; }
html.mh-dark .mh-modp-nalez.je-ticho { --f: #874ad8; }
html.mh-dark .mh-modp-nalez.je-dar { --f: #c4a6f9; }
html.mh-dark .mh-modp-nalez.je-blizko { --f: #52d4a9; }

/* text ve dvou sloupcich pod dlazdicemi / v kapitole Co graf nerika */
.mh-modp-sloupce { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; margin-top: 30px; }
.mh-modp-odstavec-titul { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--mod-ink); }
.mh-modp-sekce .mh-modp-sloupce p { margin: 5px 0 0; font-size: 15px; line-height: 1.55; text-wrap: pretty; color: var(--mod-text); }
.mh-modp-sekce .mh-modp-sloupce p a { color: var(--mod-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* zdroje: seznam del po modelech */
.mh-modp-prameny { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }

@media (max-width: 1240px) {
    .mh-modp-nalezy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .mh-modp-nalezy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .mh-modp-sekce { padding: 34px 18px; }
    .mh-modp-hlava { flex-direction: column; align-items: stretch; gap: 14px; }
    .mh-modp-nadpis { width: auto; min-width: 0; font-size: 36px; overflow-wrap: break-word; }
    .mh-modp-sekce p.mh-modp-uvod { margin-top: 0; font-size: 16px; }
    .mh-modp-telo, .mh-modp-sekce .mh-mod.mh-modk { margin-top: 22px; }
    .mh-modp-sloupce { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 22px; }
    .mh-modp-prameny { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .mh-modp-nalezy { grid-template-columns: minmax(0, 1fr); }
}
/* telefon: kontejner Elementoru ma po stranach 40 px — graf se sedmi valecky potrebuje kazdy pixel, proto tady 14 px
   (promenne kontejneru nastavuje CSS stranky s vyssi specificitou, odtud !important) */
@media (max-width: 600px) {
    .e-con.mh-modp { --padding-left: 14px !important; --padding-right: 14px !important; }
    .mh-mod.je-graf { padding-left: 14px; padding-right: 14px; }
}
/* ---- uzke valecky: nazvy v nekolika vyskach ----
   V prehledu (sloupec titulniho bloku, 351 px), na telefonu a na tabletu jsou valecky uzke — sedm fazi = 39 az 57 px
   na valecek — a nazvy by se prekryvaly, v nemcine a anglictine tim spis (Vaterunser, Kontemplation).
   ROZMISTUJE JE SKRIPT (mh-modely.js, rozmisti): zmeri skutecnou sirku kazdeho nazvu (tucne — najetim nazev ztucni)
   a prideli mu nejnizsi uroven, na ktere se s nikym neprekryje; radek (.je-merena) pak ma --urovni urovni a nazev
   stoji v urovni --u (0 = hned nad valeckem). Nazev, ktery by vyjel z radku vpravo, se zarovna pravym okrajem
   valecku (.je-vpravo). Na sirokem grafu (valecek ≥ nazev) zustavaji nazvy v toku a smeji se zalomit.
   BEZ SKRIPTU (koren nema .je-zive) plati zaloha: u rad s peti a vice fazemi (je-husta) se nazvy stridaji
   ve dvou vyskach. */
.mh-mod { --vp: 11px; --krok: 13px; }
.mh-mod.je-mereni .mh-mod-f-n { font-weight: 700; }
.mh-mod .mh-mod-faze.je-merena button.mh-mod-f,
.mh-mod .mh-mod-faze.je-merena button.mh-mod-f:hover,
.mh-mod .mh-mod-faze.je-merena button.mh-mod-f:focus { height: calc(var(--vp) + 5px + var(--urovni, 1) * var(--krok)); padding: 0; }
.mh-mod .mh-mod-faze.je-merena button.mh-mod-f .mh-mod-f-n {
    position: absolute; left: 0; right: auto; bottom: calc(var(--vp) + 4px + var(--u, 0) * var(--krok));
    white-space: nowrap; line-height: 1.15;
}
.mh-mod .mh-mod-faze.je-merena button.mh-mod-f.je-vpravo .mh-mod-f-n { left: auto; right: 0; }
/* zaloha bez skriptu */
.mh-mod.je-prehled:not(.je-zive) .mh-mod-faze.je-husta button.mh-mod-f,
.mh-mod.je-prehled:not(.je-zive) .mh-mod-faze.je-husta button.mh-mod-f:hover,
.mh-mod.je-prehled:not(.je-zive) .mh-mod-faze.je-husta button.mh-mod-f:focus { height: 44px; padding: 0; }
.mh-mod.je-prehled:not(.je-zive) .mh-mod-faze.je-husta .mh-mod-f-n { position: absolute; left: 0; bottom: 15px; white-space: nowrap; line-height: 1.15; }
.mh-mod.je-prehled:not(.je-zive) .mh-mod-faze.je-husta button.mh-mod-f:nth-of-type(even) .mh-mod-f-n { bottom: 29px; }
.mh-mod.je-prehled:not(.je-zive) .mh-mod-faze.je-husta button.mh-mod-f:last-of-type .mh-mod-f-n { left: auto; right: 0; }
@media (max-width: 600px) {
    .mh-mod.je-prehled { margin-left: -22px; margin-right: -22px; padding: 14px 12px 16px; }
    .mh-mod.je-graf:not(.je-zive) .mh-mod-faze.je-husta button.mh-mod-f,
    .mh-mod.je-graf:not(.je-zive) .mh-mod-faze.je-husta button.mh-mod-f:hover,
    .mh-mod.je-graf:not(.je-zive) .mh-mod-faze.je-husta button.mh-mod-f:focus { height: 44px; padding: 0; font-size: 10.5px; }
    .mh-mod.je-graf:not(.je-zive) .mh-mod-faze.je-husta .mh-mod-f-n { position: absolute; left: 0; bottom: 15px; white-space: nowrap; line-height: 1.15; }
    .mh-mod.je-graf:not(.je-zive) .mh-mod-faze.je-husta button.mh-mod-f:nth-of-type(even) .mh-mod-f-n { bottom: 29px; }
    .mh-mod.je-graf:not(.je-zive) .mh-mod-faze.je-husta button.mh-mod-f:last-of-type .mh-mod-f-n { left: auto; right: 0; }
    .mh-mod.je-graf:not(.je-zive) .mh-mod-faze.je-husta button.mh-mod-f::after { height: 11px; }
}
html[lang="de"] .mh-modp-nadpis { hyphens: auto; }