/* ¤¤¤ Text clanku: stejny vzhled na webu (.wz-body) i v editoru redakce (.wz-editor .tiptap), tedy 1:1.
   Barvy a pisma bere ze zaklad.css jako web i redakce. Sloupec textu 680 px, obrazky obtekaji floatem.
   Obrazek v editoru obaluje ramecek bloku Filamentu, proto ma umisteni v editoru vlastni pravidla
   dole (stejna cisla jako na webu). ¤¤¤ */

:is(.wz-body, .wz-editor .tiptap) {
  --wz-gap: 22px;
  display: flow-root;
  max-width: 680px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.65;
  color: var(--text-body);
  overflow-wrap: anywhere;
  /* ¤¤¤ Editor (ProseMirror) vypina ligatury, web proto taky, jinak by se radky lisily o par pixelu. ¤¤¤ */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
  -webkit-font-smoothing: antialiased;
}

/* ¤¤¤ Editor zachovava mezery (white-space: break-spaces), web u textu z editoru stejne, aby se radky
   zalomily na stejnem miste. Bloky (figure, aside) maji sablonu s odsazenim, ty zustanou normal. ¤¤¤ */
.wz-body > :is(p, h1, h2, h3, h4, blockquote, ul, ol, table, .tableWrapper, details, .grid-layout, .lead) { white-space: break-spaces; }
/* ¤¤¤ Zarovnany text (na stred, vpravo, do bloku): v break-spaces zabira mezera na konci radku misto, radky by
   pak koncily o mezeru driv nez posledni. V pre-wrap mezera na konci radku visi mimo sloupec, radky sedi na okraj.
   Vlevo (start) ne: editor ho pise ke kazdemu odstavci, web ho vynecha. ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) :is(p, h1, h2, h3, h4):is([style*="text-align: center"], [style*="text-align: end"], [style*="text-align: right"], [style*="text-align: justify"]) { white-space: pre-wrap; }

/* ¤¤¤ Mezery mezi prvky textu (odstavce, nadpisy, seznamy, bloky) jako driv na webu: 22 px. Pravidla nize
   proto nenastavuji margin na p, ul a ol, jinak by mezeru prebila. ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) > * { margin: 0; }
:is(.wz-body, .wz-editor .tiptap) > * + * { margin-top: var(--wz-gap); }
:is(.wz-body, .wz-editor .tiptap) :is(li, blockquote, th, td, summary) > p { margin: 0; }

/* ¤¤¤ Text ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) :is(h1, h2, h3, h4) { margin: 0; font-family: var(--sans); font-weight: 900; font-stretch: 68%; letter-spacing: 0; line-height: 1.1; color: var(--text); }
:is(.wz-body, .wz-editor .tiptap) > :is(h1, h2, h3, h4) { margin-top: calc(var(--wz-gap) + 10px); }
:is(.wz-body, .wz-editor .tiptap) > :is(h1, h2, h3, h4):first-child { margin-top: 0; }
:is(.wz-body, .wz-editor .tiptap) :is(h1, h2) { font-size: 30px; }
:is(.wz-body, .wz-editor .tiptap) h3 { font-size: 24px; }
:is(.wz-body, .wz-editor .tiptap) h4 { font-size: 20px; font-stretch: 75%; }
:is(.wz-body, .wz-editor .tiptap) a { color: var(--amber); font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:is(.wz-body, .wz-editor .tiptap) :is(strong, b) { font-weight: 700; color: inherit; }
:is(.wz-body, .wz-editor .tiptap) mark { background: var(--amber-mark); color: inherit; padding: 0 .12em; border-radius: 2px; }
:is(.wz-body, .wz-editor .tiptap) .color { color: var(--dark-color, var(--color)); }
:is(.wz-body, .wz-editor .tiptap) .lead { font-size: 23px; line-height: 1.45; font-weight: 500; color: var(--text-3); }
:is(.wz-body, .wz-editor .tiptap) small { font-size: .8em; line-height: 1.5; color: var(--muted-2); }
:is(.wz-body, .wz-editor .tiptap) code { font-family: ui-monospace, monospace; font-size: .85em; background: var(--card); padding: .1em .35em; border-radius: 3px; color: var(--text); }
:is(.wz-body, .wz-editor .tiptap) code::before, :is(.wz-body, .wz-editor .tiptap) code::after { content: none; }
:is(.wz-body, .wz-editor .tiptap) :is(ul, ol) { padding: 0 0 0 1.3em; }
:is(.wz-body, .wz-editor .tiptap) ul { list-style: disc; }
:is(.wz-body, .wz-editor .tiptap) ol { list-style: decimal; }
:is(.wz-body, .wz-editor .tiptap) li { margin: 0; padding: 0; }
:is(.wz-body, .wz-editor .tiptap) li + li { margin-top: 6px; }
:is(.wz-body, .wz-editor .tiptap) li > * + * { margin-top: 6px; }
:is(.wz-body, .wz-editor .tiptap) li::marker { color: inherit; }
:is(.wz-body, .wz-editor .tiptap) blockquote { margin: 0; padding: 20px 0 0; border: 0; border-top: 6px solid var(--red); font-style: italic; font-size: 28px; line-height: 1.3; color: var(--white); }
:is(.wz-body, .wz-editor .tiptap) > blockquote { margin: 32px 0; }
:is(.wz-body, .wz-editor .tiptap) blockquote p { margin: 0; }
:is(.wz-body, .wz-editor .tiptap) blockquote p::before, :is(.wz-body, .wz-editor .tiptap) blockquote p::after { content: none; }
:is(.wz-body, .wz-editor .tiptap) hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

/* ¤¤¤ Bloky a prvky, ktere nesmi byt vedle obtekaneho obrazku (pozadi by podjelo pod obrazek). ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) > :is(hr, blockquote, table, .tableWrapper, .grid-layout, details, [data-type="details"], .wz-gallery, .wz-video, .wz-factbox, .wz-related, .wz-spot-inline) { clear: both; }

/* ¤¤¤ Horni a dolni index jako v editoru (reset z Tailwindu): 75 % pisma a bez vlivu na vysku radku.
   Vychozi styl prohlizece (vertical-align sub/super) by na webu radek roztahl a posunul text pod nim. ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) :is(sub, sup) { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
:is(.wz-body, .wz-editor .tiptap) sub { bottom: -0.25em; }
:is(.wz-body, .wz-editor .tiptap) sup { top: -0.5em; }

/* ¤¤¤ Tabulka (na webu i v editoru v obalu tableWrapper, sirsi tabulka se posouva do strany) ¤¤¤ */
.wz-body .tableWrapper { overflow-x: auto; }
:is(.wz-body, .wz-editor .tiptap) table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 16px; line-height: 1.4; table-layout: auto; }
/* ¤¤¤ Okraj bunek 8 px: Filament ho v editoru vynucuje (!important ve sve vrstve CSS), web ho ma stejny. ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) table :is(th, td) { border: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
:is(.wz-body, .wz-editor .tiptap) th { background: var(--card); color: var(--text); font-weight: 800; }
:is(.wz-body, .wz-editor .tiptap) :is(th, td) > * { margin: 0; }
:is(.wz-body, .wz-editor .tiptap) :is(th, td) > * + * { margin-top: 6px; }

/* ¤¤¤ Sloupce (grid z editoru). Pod zvolenym zlomem pod sebou, nad nim vedle sebe. Editor dava sloupcum
   inline styl s pevnym poctem sloupcu, proto se tu ridi atributy data-cols a data-from-breakpoint s !important. ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) .grid-layout { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: var(--wz-gap); }
:is(.wz-body, .wz-editor .tiptap) .grid-layout > .grid-layout-col { grid-column: auto !important; min-width: 0; margin: 0; padding: 0; border: 0; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-cols="2"] { --wz-cols: repeat(2, minmax(0, 1fr)); }
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-cols="3"] { --wz-cols: repeat(3, minmax(0, 1fr)); }
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-cols="4"] { --wz-cols: repeat(4, minmax(0, 1fr)); }
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-cols="5"] { --wz-cols: repeat(5, minmax(0, 1fr)); }
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-cols="6"] { --wz-cols: repeat(6, minmax(0, 1fr)); }
:is(.wz-body, .wz-editor .tiptap) .grid-layout-col[data-col-span="1"] { --wz-span: span 1 / span 1; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout-col[data-col-span="2"] { --wz-span: span 2 / span 2; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout-col[data-col-span="3"] { --wz-span: span 3 / span 3; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout-col[data-col-span="4"] { --wz-span: span 4 / span 4; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout-col[data-col-span="5"] { --wz-span: span 5 / span 5; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout-col[data-col-span="6"] { --wz-span: span 6 / span 6; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout:is(:not([data-from-breakpoint]), [data-from-breakpoint="default"]) { grid-template-columns: var(--wz-cols, var(--cols)) !important; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout:is(:not([data-from-breakpoint]), [data-from-breakpoint="default"]) > .grid-layout-col { grid-column: var(--wz-span, auto) !important; }
@media (min-width: 640px) {
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-from-breakpoint="sm"] { grid-template-columns: var(--wz-cols, var(--cols)) !important; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-from-breakpoint="sm"] > .grid-layout-col { grid-column: var(--wz-span, auto) !important; }
}
@media (min-width: 768px) {
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-from-breakpoint="md"] { grid-template-columns: var(--wz-cols, var(--cols)) !important; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-from-breakpoint="md"] > .grid-layout-col { grid-column: var(--wz-span, auto) !important; }
}
@media (min-width: 1024px) {
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-from-breakpoint="lg"] { grid-template-columns: var(--wz-cols, var(--cols)) !important; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-from-breakpoint="lg"] > .grid-layout-col { grid-column: var(--wz-span, auto) !important; }
}
@media (min-width: 1280px) {
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-from-breakpoint="xl"] { grid-template-columns: var(--wz-cols, var(--cols)) !important; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-from-breakpoint="xl"] > .grid-layout-col { grid-column: var(--wz-span, auto) !important; }
}
@media (min-width: 1536px) {
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-from-breakpoint="2xl"] { grid-template-columns: var(--wz-cols, var(--cols)) !important; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout[data-from-breakpoint="2xl"] > .grid-layout-col { grid-column: var(--wz-span, auto) !important; }
}
:is(.wz-body, .wz-editor .tiptap) .grid-layout-col > * { margin: 0; }
:is(.wz-body, .wz-editor .tiptap) .grid-layout-col > * + * { margin-top: var(--wz-gap); }

/* ¤¤¤ Rozbalovaci blok: na webu <details>, v editoru ho TipTap kresli jako div. ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) :is(details, [data-type="details"]) { padding: 14px 18px; background: var(--card); border: 0; border-left: 6px solid var(--amber); border-radius: 0; }
:is(.wz-body, .wz-editor .tiptap) summary { font-family: var(--sans); font-weight: 800; font-size: 19px; line-height: 1.3; color: var(--text); cursor: pointer; }
:is(.wz-body, .wz-editor .tiptap) [data-type="detailsContent"] { margin-top: 12px; }
:is(.wz-body, .wz-editor .tiptap) [data-type="detailsContent"] > * { margin: 0; }
:is(.wz-body, .wz-editor .tiptap) [data-type="detailsContent"] > * + * { margin-top: 12px; }

/* ¤¤¤ Obrazek (blok Obrazek). Sirky jsou podil sloupce textu (680 px). ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) .wz-figure img { display: block; width: 100%; height: auto; }
:is(.wz-body, .wz-editor .tiptap) .wz-figure a { display: block; cursor: zoom-in; }
:is(.wz-body, .wz-editor .tiptap) :is(.wz-figure, .wz-gallery, .wz-video) figcaption { margin: 8px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--muted-2); }
:is(.wz-body, .wz-editor .tiptap) .wz-credit { font-weight: 600; opacity: .85; }

.wz-body > .wz-figure--s { width: 33.333%; }
.wz-body > .wz-figure--m { width: 50%; }
.wz-body > .wz-figure--l { width: 66.667%; }
.wz-body > .wz-figure--full { width: 100%; }
.wz-body > .wz-figure--center { margin-left: auto; margin-right: auto; }
.wz-body > .wz-figure--left:not(.wz-figure--wrap) { margin-right: auto; }
.wz-body > .wz-figure--right:not(.wz-figure--wrap) { margin-left: auto; }
.wz-body > .wz-figure--left.wz-figure--wrap { float: left; margin: calc(var(--wz-gap) + 6px) 26px 12px 0; }
.wz-body > .wz-figure--right.wz-figure--wrap { float: right; margin: calc(var(--wz-gap) + 6px) 0 12px 26px; }
.wz-body > .wz-figure--wrap:first-child { margin-top: 6px; }

/* ¤¤¤ Galerie ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) .wz-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
:is(.wz-body, .wz-editor .tiptap) .wz-gallery--2 .wz-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.wz-body, .wz-editor .tiptap) .wz-gallery--4 .wz-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:is(.wz-body, .wz-editor .tiptap) .wz-gallery__grid a { display: block; cursor: zoom-in; }
:is(.wz-body, .wz-editor .tiptap) .wz-gallery__grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ¤¤¤ Video (prehravac spusti weazel.js az po kliknuti) ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) .wz-video .player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-darkest); overflow: hidden; }
:is(.wz-body, .wz-editor .tiptap) .wz-video .player > img, :is(.wz-body, .wz-editor .tiptap) .wz-video .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
:is(.wz-body, .wz-editor .tiptap) .wz-video .play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
:is(.wz-body, .wz-editor .tiptap) .wz-video .play-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.wz-body .wz-video .player.is-playing > img, .wz-body .wz-video .player.is-playing .play-btn { display: none; }

/* ¤¤¤ Ramecek s fakty ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) .wz-factbox { padding: 18px 22px 20px; background: var(--card); border-top: 6px solid var(--red); font-family: var(--sans); font-size: 17px; line-height: 1.45; color: var(--text); }
:is(.wz-body, .wz-editor .tiptap) .wz-factbox--amber { border-top-color: var(--amber); }
:is(.wz-body, .wz-editor .tiptap) .wz-factbox--neutral { border-top-color: var(--line); }
:is(.wz-body, .wz-editor .tiptap) .wz-factbox__title { margin: 0 0 10px; font-size: 24px; font-weight: 900; font-stretch: 70%; line-height: 1.1; color: var(--white); }
:is(.wz-body, .wz-editor .tiptap) .wz-factbox ul { margin: 0; padding: 0 0 0 1.1em; list-style: square; }
:is(.wz-body, .wz-editor .tiptap) .wz-factbox li { margin: 0; padding: 0; }
:is(.wz-body, .wz-editor .tiptap) .wz-factbox li + li { margin-top: 6px; }
:is(.wz-body, .wz-editor .tiptap) .wz-factbox li::marker { color: var(--red); }
:is(.wz-body, .wz-editor .tiptap) .wz-factbox--amber li::marker { color: var(--amber); }
:is(.wz-body, .wz-editor .tiptap) .wz-factbox--neutral li::marker { color: var(--muted-2); }

/* ¤¤¤ Ctete take ¤¤¤ */
:is(.wz-body, .wz-editor .tiptap) .wz-related__link { display: flex; gap: 16px; align-items: center; padding: 14px; background: var(--card); border-left: 6px solid var(--red); color: inherit; text-decoration: none; }
:is(.wz-body, .wz-editor .tiptap) .wz-related__link img { display: block; width: 140px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; flex-shrink: 0; }
:is(.wz-body, .wz-editor .tiptap) .wz-related__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-family: var(--sans); }
:is(.wz-body, .wz-editor .tiptap) .wz-related__label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
:is(.wz-body, .wz-editor .tiptap) .wz-related__title { font-size: 21px; font-weight: 900; font-stretch: 70%; line-height: 1.1; color: var(--text); }
:is(.wz-body, .wz-editor .tiptap) .wz-related__kicker { font-size: 13px; color: var(--muted-2); }
.wz-body a.wz-related__link:hover .wz-related__title { text-decoration: underline; }

/* ¤¤¤ Uzsi displej: mensi pismo jako u zbytku webu (980 px), obrazky a galerie pres celou sirku (560 px). ¤¤¤ */
@media (max-width: 980px) {
  :is(.wz-body, .wz-editor .tiptap) { font-size: 18px; }
  :is(.wz-body, .wz-editor .tiptap) blockquote { font-size: 23px; }
  :is(.wz-body, .wz-editor .tiptap) .lead { font-size: 20px; }
}
@media (max-width: 560px) {
  /* ¤¤¤ :is() ma specificnost nejsilnejsiho selektoru, takze prebije obtekani z pocitace. ¤¤¤ */
  .wz-body > :is(.wz-figure, .wz-figure--left.wz-figure--wrap, .wz-figure--right.wz-figure--wrap) { float: none; width: 100%; margin: var(--wz-gap) 0 0; }
  .wz-body > :is(.wz-figure, .wz-figure--left.wz-figure--wrap, .wz-figure--right.wz-figure--wrap):first-child { margin-top: 0; }
  :is(.wz-body, .wz-editor .tiptap) :is(.wz-gallery--3, .wz-gallery--4) .wz-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.wz-body, .wz-editor .tiptap) .wz-related__link img { width: 96px; }
  :is(.wz-body, .wz-editor .tiptap) table { display: block; overflow-x: auto; }
}

/* ¤¤¤ Jen editor: pozadi a sloupec jako na webu, lista pri posouvani nahore, ovladani bloku jen pri najeti.
   Blok Filamentu (div data-type=customBlock) prebira umisteni obrazku, ktery obaluje. ¤¤¤ */
/* ¤¤¤ Sloupec editoru je siroky jako sloupec clanku na webu pri stejne sirce okna: web ho zuzuje pod 1180 px
   (vedle je postranni panel) a pod 980 px (jeden sloupec). --wz-vw je sirka okna bez posuvniku (redakce.js). ¤¤¤ */
.wz-editor { --wz-web: 680px; container-type: inline-size; }
@media (max-width: 1180px) { .wz-editor { --wz-web: min(680px, calc(var(--wz-vw, 100vw) - 384px)); } }
@media (max-width: 980px) { .wz-editor { --wz-web: min(680px, calc(var(--wz-vw, 100vw) - 32px)); } }
/* ¤¤¤ Ramecek editoru je siroky na sloupec textu (sloupec + 2x 20 px) a v sekci vycentrovany. Kdyz se nevejde
   (notebook, tablet, telefon), zuzi se i sloupec, ale okraje zustanou a text nikdy nesaha az k ramecku.
   Na uzkem okne se proto radky muzou lamat trochu jinak nez na webu. ¤¤¤ */
.wz-editor .fi-fo-rich-editor { width: 100%; max-width: calc(var(--wz-web) + 40px); margin-inline: auto; }
.wz-editor .fi-fo-rich-editor-content { padding: 28px 20px 40px; scrollbar-gutter: auto; background: var(--bg); }
/* ¤¤¤ Telefon: mensi okraje sekce i editoru, aby na text zbylo misto. ¤¤¤ */
@media (max-width: 640px) { .wz-editor .fi-section-content { padding-inline: 12px; } .wz-editor .fi-fo-rich-editor-content { padding: 20px 14px 32px; } }
.wz-editor .tiptap { max-width: var(--wz-web); margin: 0; min-height: 420px; outline: none; }
/* ¤¤¤ Lista pri posouvani prekryva text, proto nepruhledne pozadi jako sekce. Na telefonu se posouva cela
   stranka a lista stoji pod horni listou redakce (4rem), na PC se posouva jen obsah (redakce.css). ¤¤¤ */
.wz-editor .fi-fo-rich-editor-toolbar { position: sticky; top: 4rem; z-index: 20; background: var(--card); }
@media (min-width: 1024px) { .wz-editor .fi-fo-rich-editor-toolbar { top: 0; } }
@media (max-width: 767px) {
  /* ¤¤¤ Na telefonu je lista jeden radek, ktery jde posunout do strany. Ve sesti radcich by pri psani
     s klavesnici zabrala skoro celou obrazovku. Pravy okraj slabne, aby bylo videt, ze pokracuje. ¤¤¤ */
  .wz-editor .fi-fo-rich-editor-toolbar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-right: 40px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .wz-editor .fi-fo-rich-editor-toolbar::-webkit-scrollbar { display: none; }
  .wz-editor .fi-fo-rich-editor-toolbar-group { flex: none; }
}
/* ¤¤¤ Rozbalovaci blok v editoru jako na webu: nadpis se znackou prohlizece (sipka) na zacatku radku, obsah pod
   nim bez odsazeni. TipTap kresli blok jako flex s tlacitkem vedle nadpisu, tlacitko proto lezi pruhledne pres
   znacku. Mezera nad obsahem je odsazeni, protoze okraj Filament vynucuje (!important ve sve vrstve CSS). ¤¤¤ */
.wz-editor .tiptap [data-type="details"] { display: block; position: relative; }
.wz-editor .tiptap [data-type="details"] > div { display: block; }
.wz-editor .tiptap [data-type="details"] summary { display: list-item; list-style: disclosure-closed inside; }
.wz-editor .tiptap [data-type="details"].is-open summary { list-style-type: disclosure-open; }
.wz-editor .tiptap [data-type="details"] > button { position: absolute; z-index: 1; left: 18px; top: 14px; width: 22px; height: 25px; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.wz-editor .tiptap [data-type="details"] > button::before { content: none; }
.wz-editor .tiptap [data-type="details"] [data-type="detailsContent"] { padding-top: 12px; }

/* ¤¤¤ Filament dava sloupcum v editoru ramecek a vnitrni okraj, tady bez nich (jako web), jen carkovany obrys. ¤¤¤ */
.wz-editor .fi-fo-rich-editor .tiptap .grid-layout > .grid-layout-col { padding: 0; border: 0; border-radius: 0; outline: 1px dashed var(--muted-soft); outline-offset: 6px; }
.wz-editor .tiptap .wz-block-missing { margin: 0; padding: 12px 14px; font-family: var(--sans); font-size: 14px; color: var(--amber); background: var(--card); }

.wz-editor .tiptap > [data-type="customBlock"] { position: relative; margin-left: 0; margin-right: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.wz-editor .tiptap > [data-type="customBlock"] > .fi-fo-rich-editor-custom-block-header { position: absolute; top: 6px; right: 6px; z-index: 3; margin: 0; padding: 2px 6px; background: var(--veil); opacity: 0; transition: opacity .15s; }
/* ¤¤¤ Lista bloku lezi na obrazku, proto ma tmave pozadi a svetly popisek i tlacitka. ¤¤¤ */
.wz-editor .tiptap > [data-type="customBlock"] > .fi-fo-rich-editor-custom-block-header :is(.fi-fo-rich-editor-custom-block-heading, .fi-icon-btn) { color: var(--text); }
.wz-editor .tiptap > [data-type="customBlock"]:hover > .fi-fo-rich-editor-custom-block-header,
.wz-editor .tiptap > [data-type="customBlock"].ProseMirror-selectednode > .fi-fo-rich-editor-custom-block-header { opacity: 1; }
.wz-editor .tiptap > [data-type="customBlock"].ProseMirror-selectednode { outline: 2px solid var(--red); outline-offset: 4px; }
.wz-editor .tiptap > [data-type="customBlock"] > :not(.fi-fo-rich-editor-custom-block-header) { margin: 0; padding: 0; }
.wz-editor .tiptap > [data-type="customBlock"] .wz-figure { width: 100%; }
.wz-editor .tiptap [data-type="customBlock"] .fi-not-prose { margin: 0; white-space: normal; }
.wz-editor .tiptap > [data-type="customBlock"]:has(.wz-gallery, .wz-video, .wz-factbox, .wz-related) { clear: both; }
.wz-editor .tiptap > [data-type="customBlock"]:has(.wz-figure--s) { width: 33.333%; }
.wz-editor .tiptap > [data-type="customBlock"]:has(.wz-figure--m) { width: 50%; }
.wz-editor .tiptap > [data-type="customBlock"]:has(.wz-figure--l) { width: 66.667%; }
.wz-editor .tiptap > [data-type="customBlock"]:has(.wz-figure--full) { width: 100%; }
.wz-editor .tiptap > [data-type="customBlock"]:has(.wz-figure--center) { margin-left: auto; margin-right: auto; }
.wz-editor .tiptap > [data-type="customBlock"]:has(.wz-figure--left:not(.wz-figure--wrap)) { margin-right: auto; }
.wz-editor .tiptap > [data-type="customBlock"]:has(.wz-figure--right:not(.wz-figure--wrap)) { margin-left: auto; }
.wz-editor .tiptap > [data-type="customBlock"]:has(.wz-figure--left.wz-figure--wrap) { float: left; margin: calc(var(--wz-gap) + 6px) 26px 12px 0; }
.wz-editor .tiptap > [data-type="customBlock"]:has(.wz-figure--right.wz-figure--wrap) { float: right; margin: calc(var(--wz-gap) + 6px) 0 12px 26px; }
.wz-editor .tiptap > [data-type="customBlock"]:first-child:has(.wz-figure--wrap) { margin-top: 6px; }
@media (max-width: 560px) {
  .wz-editor .tiptap > [data-type="customBlock"]:is(:has(.wz-figure), :has(.wz-figure--left.wz-figure--wrap), :has(.wz-figure--right.wz-figure--wrap)) { float: none; width: 100%; margin: var(--wz-gap) 0 0; }
  .wz-editor .tiptap > [data-type="customBlock"]:first-child:is(:has(.wz-figure), :has(.wz-figure--left.wz-figure--wrap), :has(.wz-figure--right.wz-figure--wrap)) { margin-top: 0; }
}