/*
 * Šablona cassiopeia_opscz – Občanské poradenské středisko, o. p. s. (www.ops.cz)
 * Child šablona Cassiopeie (Joomla 6). Vzhled převzatý z původního webu (šablona opscz, 2019) jako mírná evoluce:
 * stejné rozložení a barvy, opravená mobilní verze a typografie.
 * Obsah článků je čisté HTML z editoru – styluje se jen prvky (p, h2–h4, seznamy, obrázky, tabulky), žádné vlastní třídy.
 *
 *  1. Písmo          2. Proměnné a typografická škála   3. Základ a typografie   4. Hlavička a menu
 *  5. Rychlý kontakt 6. Banner úvodu                    7. Výpisy (Novinky, blogy kategorií)
 *  8. Text článku a popisy kategorií                    9. Slidery (Tabs & Accordions)
 * 10. Pravý sloupec 11. Patička  12. Formuláře RSForm  13. Tablet a mobil
 */

/* 1. Písmo – Open Sans (variabilní 300–800), hostované lokálně (dev/pisma.py) ------------------------------- */
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap;
  src: url('../fonts/open-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap;
  src: url('../fonts/open-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap;
  src: url('../fonts/open-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-stretch: 100%; font-display: swap;
  src: url('../fonts/open-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Proměnné (barvy z původní šablony, variables.less) a typografická škála ---------------------------------- */
:root {
  --ops-modra: #080f55;          /* tmavě modrá – nadpisy, banner, patička */
  --ops-modra-svetla: #1e82c0;   /* odkazy, dlaždice Pracovní trénink */
  --ops-zelena: #2bb673;         /* dlaždice Poradenství, linka pod nadpisem */
  --ops-oranzova: #faab53;       /* dlaždice Vzdělávání */
  --ops-ruzova: #e92d8b;         /* dlaždice O nás */
  --ops-cervena: #ed135d;        /* akcent – ikony kontaktu, rámeček data, povinná pole */
  --ops-seda: #babcda;           /* linky, rámečky */
  --ops-seda-pozadi: #eef3f6;    /* boxy v pravém sloupci, box kontaktu */
  --ops-seda-tmava: #4f698e;     /* aktivní položka podnabídky */
  --ops-text: #242525;
  --ops-text-svetly: #555b66;
  --ops-sirka: 1180px;
  --ops-okraj: max(1rem, calc((100% - var(--ops-sirka)) / 2));
  --ops-mezera: 2.5rem;          /* mezera mezi sloupci obsahu (site-grid) */
  --ops-okraj-obsah: calc(var(--ops-okraj) + var(--ops-mezera)); /* hrana obsahu – hlavička, banner, patička s ní lícují */
  --ops-radius: 8px;

  /* Typografie: 5 velikostí, 3 řádkování – všechno na webu se drží těchto hodnot */
  --ops-pismo: 'Open Sans', Arial, Helvetica, sans-serif;
  --ops-fs-xs: .8125rem;   /* 13 px – odznak data, drobné popisky */
  --ops-fs-sm: .875rem;    /* 14 px – pravý sloupec, kontakt, popisy polí, tlačítka */
  --ops-fs-base: 1rem;     /* 16 px – text */
  --ops-fs-lg: 1.125rem;   /* 18 px – titulky ve výpisech, nadpisy karet, h3 */
  --ops-fs-xl: clamp(1.25rem, 1.15rem + .45vw, 1.4rem);    /* h2 */
  --ops-fs-2xl: clamp(1.5rem, 1.3rem + .9vw, 1.875rem);    /* h1 stránky */
  --ops-lh-text: 1.65;
  --ops-lh-maly: 1.5;
  --ops-lh-nadpis: 1.3;

  /* Cassiopeia a Bootstrap */
  --cassiopeia-color-primary: var(--ops-modra);
  --cassiopeia-color-link: var(--ops-modra-svetla);
  --cassiopeia-color-hover: var(--ops-modra);
  --cassiopeia-font-family-body: var(--ops-pismo);
  --cassiopeia-font-family-headings: var(--ops-pismo);
  --cassiopeia-font-weight-headings: 700;
  --link-color: var(--ops-modra-svetla);
  --link-color-rgb: 30, 130, 192;
  --link-hover-color: var(--ops-modra);
  --body-color: var(--ops-text);
  --body-bg: #fff;
  --body-font-family: var(--ops-pismo);
  --body-font-size: var(--ops-fs-base);
  --body-line-height: var(--ops-lh-text);
}

/* 3. Základ a typografie -------------------------------------------------------------------------------------- */
body.site {
  font-family: var(--ops-pismo); font-size: var(--ops-fs-base); line-height: var(--ops-lh-text);
  color: var(--ops-text); background: #fff;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--ops-pismo); color: var(--ops-modra); font-weight: 700; line-height: var(--ops-lh-nadpis); text-wrap: balance; }
h1 { font-size: var(--ops-fs-2xl); }
h2 { font-size: var(--ops-fs-xl); }
h3 { font-size: var(--ops-fs-lg); }
h4, h5, h6 { font-size: var(--ops-fs-base); }
p { text-wrap: pretty; }
small, .small { font-size: var(--ops-fs-sm); }
a { color: var(--ops-modra-svetla); text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--ops-modra); }
:focus-visible { outline: 3px solid var(--ops-oranzova); outline-offset: 2px; }
.site-grid { grid-template-columns: [full-start] var(--ops-okraj) [main-start] repeat(4, minmax(0, 1fr)) [main-end] var(--ops-okraj) [full-end]; column-gap: var(--ops-mezera); }
.container-component { padding-block: 2.25rem 3rem; }

/* Obsah natvrdo ze starého editoru (vložené písmo, velikosti, pevné šířky, zarovnání do bloku) → jednotná typografie.
   Platí pro článek, výpisy i popisy kategorií; obsah v editoru zůstává beze změny. */
:is(.com-content-article__body, .blog-item .item-content, .category-desc) :is([style*="font-family"], [style*="font-size"], font):not(h1, h2, h3, h4) {
  font-family: inherit !important; font-size: inherit !important;
}
:is(.com-content-article__body, .blog-item .item-content, .category-desc) [style*="line-height"] { line-height: inherit !important; }
:is(.com-content-article__body, .blog-item .item-content, .category-desc) [style*="width"]:not(img) { max-width: 100% !important; }
:is(.com-content-article__body, .blog-item .item-content, .category-desc) [style*="justify"] { text-align: left !important; }

/* Tlačítka bez černých stavů (proměnné Bootstrapu) */
.btn { font-size: var(--ops-fs-sm); font-weight: 700; line-height: var(--ops-lh-maly); border-radius: 6px; }
.btn-primary {
  --btn-bg: var(--ops-modra); --btn-border-color: var(--ops-modra); --btn-color: #fff;
  --btn-hover-bg: var(--ops-modra-svetla); --btn-hover-border-color: var(--ops-modra-svetla); --btn-hover-color: #fff;
  --btn-active-bg: var(--ops-modra-svetla); --btn-active-border-color: var(--ops-modra-svetla); --btn-active-color: #fff;
}
.btn-secondary, .btn-outline-secondary {
  --btn-color: var(--ops-modra); --btn-border-color: var(--ops-modra); --btn-bg: transparent;
  --btn-hover-bg: var(--ops-modra); --btn-hover-color: #fff; --btn-hover-border-color: var(--ops-modra);
  --btn-active-bg: var(--ops-modra); --btn-active-color: #fff; --btn-active-border-color: var(--ops-modra);
}

/* 4. Hlavička a menu – bílá: logo, menu, rychlý kontakt v jednom řádku ------------------------------------------ */
.container-header {
  background: #fff; background-image: none; color: var(--ops-modra);
  box-shadow: 0 1px 0 rgba(8, 15, 85, .1);
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 2rem;
  padding: .75rem var(--ops-okraj-obsah);
}
.container-header .grid-child { max-width: none; width: auto; margin: 0; padding: 0; }
.container-header > .grid-child:first-child { flex: 0 0 auto; }
.container-header .navbar-brand { padding: 0; margin: 0; }
.container-header .brand-logo img { height: 74px; width: auto; display: block; }
.container-header .container-nav {
  flex: 1 1 0; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0;
}
.container-header .container-nav nav { margin: 0; padding: 0; flex: 1 1 auto; justify-content: center; }
.container-header .navbar-toggler { color: var(--ops-modra); border: 1px solid var(--ops-seda); padding: .5rem .7rem; }
.container-header .navbar-toggler .icon-menu { color: var(--ops-modra); }

.container-header .metismenu.mod-menu { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; margin: 0; padding: 0; }
.container-header .metismenu.mod-menu > li > a,
.container-header .metismenu.mod-menu > li > button {
  color: var(--ops-modra); font-weight: 700; font-size: var(--ops-fs-sm); line-height: var(--ops-lh-maly);
  text-decoration: none; background: none; border: 0; padding-inline: 0;
}
.container-header .metismenu.mod-menu > li > button.mm-toggler { padding-left: .2rem; }
.container-header .metismenu.mod-menu > li > button.mm-toggler::after { border-top-color: var(--ops-modra); }
.container-header .metismenu.mod-menu > li.active > a,
.container-header .metismenu.mod-menu > li > a:hover { color: var(--ops-modra-svetla); }
/* Ikona položky = třída odkazu v nastavení položky menu (např. „far fa-comments“) – text odkazu ale v písmu webu */
.container-header .metismenu.mod-menu a[class*="fa-"] { font-family: var(--ops-pismo); font-style: normal; }
.container-header .metismenu.mod-menu a[class*="fa-"]::before { font-family: 'Font Awesome 6 Free'; font-weight: 400; margin-right: .4em; }
.container-header .metismenu.mod-menu > li:nth-child(4n+1) > a::before { color: var(--ops-zelena); }
.container-header .metismenu.mod-menu > li:nth-child(4n+2) > a::before { color: var(--ops-oranzova); }
.container-header .metismenu.mod-menu > li:nth-child(4n+3) > a::before { color: var(--ops-modra-svetla); }
.container-header .metismenu.mod-menu > li:nth-child(4n+4) > a::before { color: var(--ops-ruzova); }
/* Submenu: panel s položkami přes celou jeho šířku (Cassiopeia dává položkám flex → odkaz jen na šířku textu) */
.container-header .metismenu.mod-menu .mm-collapse {
  background: #fff; border: 1px solid var(--ops-seda); border-radius: var(--ops-radius);
  box-shadow: 0 10px 30px rgba(8, 15, 85, .14); padding: .4rem 0; min-width: 17rem;
}
.container-header .metismenu.mod-menu .mm-collapse > li { display: block; width: 100%; margin: 0; padding: 0; }
.container-header .metismenu.mod-menu .mm-collapse a {
  display: block; width: 100%; padding: .55rem 1.1rem;
  color: var(--ops-modra); font-size: var(--ops-fs-sm); font-weight: 600; line-height: var(--ops-lh-maly); text-decoration: none;
}
.container-header .metismenu.mod-menu .mm-collapse a:hover,
.container-header .metismenu.mod-menu .mm-collapse a:focus,
.container-header .metismenu.mod-menu .mm-collapse .active > a { background: var(--ops-seda-pozadi); color: var(--ops-modra); }
@media (min-width: 992px) {
  /* Menu kompaktně v jednom řádku (Cassiopeia dává položkám velký vnitřní okraj) */
  .container-header .metismenu.mod-menu { flex-wrap: nowrap; gap: 0 1.25rem; }
  .container-header .metismenu.mod-menu > li { padding: .5rem 0; white-space: nowrap; }
  .container-header .metismenu.mod-menu > li > button.mm-toggler { width: auto; padding: 0 0 0 .3rem; }
  .container-header .metismenu.mod-menu > li > button.mm-toggler::after { border-width: .3em .3em 0; }
  .container-header .metismenu.mod-menu .mm-collapse > li { white-space: normal; }
}

/* 5. Rychlý kontakt (pozice search, vpravo v hlavičce) ---------------------------------------------------------- */
.container-search { flex: 0 0 auto; margin: 0; }
.ops-kontakt {
  list-style: none; margin: 0; padding: .6rem 1rem;
  background: var(--ops-seda-pozadi); border-radius: var(--ops-radius);
  font-size: var(--ops-fs-xs); line-height: var(--ops-lh-maly);
}
.ops-kontakt li { display: flex; align-items: center; gap: .55rem; padding: .12rem 0; }
.ops-kontakt .fas, .ops-kontakt .far, .ops-kontakt .fab { color: var(--ops-cervena); width: 1.15em; text-align: center; }
.ops-kontakt a { color: var(--ops-modra); font-weight: 700; text-decoration: none; }
.ops-kontakt a:hover { text-decoration: underline; }

/* 6. Banner úvodní stránky (pozice banner) ----------------------------------------------------------------------- */
.container-banner { background: var(--ops-modra); color: #fff; }
.container-banner > * { padding: 2rem var(--ops-okraj-obsah); }
.container-footer .grid-child { max-width: none; margin: 0; padding-inline: var(--ops-okraj-obsah); }
.ops-uvod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2.25rem; align-items: start; }
.ops-uvod__poslani h1 { color: #fff; font-size: var(--ops-fs-xl); font-weight: 700; margin: 0 0 .75rem; }
.ops-uvod__poslani p { color: rgba(255, 255, 255, .9); font-size: var(--ops-fs-sm); line-height: var(--ops-lh-text); margin: 0; }
.ops-dlazdice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.ops-dlazdice a {
  display: flex; flex-direction: column; gap: .3rem; height: 100%;
  padding: 1rem 1.15rem 1.15rem; border-radius: var(--ops-radius);
  color: #fff; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.ops-dlazdice a:hover, .ops-dlazdice a:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
.ops-dlazdice .far { font-size: 1.6rem; }
.ops-dlazdice strong { font-size: var(--ops-fs-lg); font-weight: 700; line-height: var(--ops-lh-nadpis); }
.ops-dlazdice strong + span { font-size: var(--ops-fs-sm); line-height: var(--ops-lh-maly); opacity: .95; }
.ops-dlazdice--zelena a { background: var(--ops-zelena); }
.ops-dlazdice--oranzova a { background: #f39a35; } /* tmavší oranžová kvůli kontrastu bílého textu */
.ops-dlazdice--modra a { background: var(--ops-modra-svetla); }
.ops-dlazdice--ruzova a { background: var(--ops-ruzova); }

/* 7. Výpisy (Novinky na úvodu, blogy kategorií) ------------------------------------------------------------------
   Položka: odznak data vlevo, titulek a text odsazené za ním; mezi položkami linka a stejné odsazení nahoře i dole. */
.page-header h1, .com-content-category-blog > h1, .blog-featured > h1 { font-size: var(--ops-fs-2xl); }
.blog-featured .page-header h1 { text-transform: uppercase; font-size: var(--ops-fs-xl); letter-spacing: .03em; }
:is(.blog-featured, .com-content-category-blog, .com-content-article) > .page-header { position: relative; padding-bottom: .6rem; margin-bottom: 1.5rem; border: 0; }
:is(.blog-featured, .com-content-category-blog, .com-content-article) > .page-header::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 3px; background: var(--ops-zelena);
}
.com-content-category-blog .category-desc { margin-bottom: 1.5rem; }

:is(.blog-featured, .com-content-category-blog) .blog-items { display: block; row-gap: 0; margin: 0; }
:is(.blog-featured, .com-content-category-blog) .blog-items > .blog-item {
  position: relative; display: flow-root; margin: 0; padding: 1.5rem 0 1.5rem 4.75rem;
  border: 0; border-bottom: 1px solid var(--ops-seda); background: none;
}
:is(.blog-featured, .com-content-category-blog) .blog-items:first-child > .blog-item:first-child,
:is(.blog-featured, .com-content-category-blog) .page-header + .blog-items > .blog-item:first-child { padding-top: .25rem; }
/* Blog ve více sloupcích: místo masonry (CSS sloupce = položky různě vysoké, linky rozházené) mřížka –
   položky v řádku stejně vysoké, linka pod nimi v jedné úrovni podle nejdelšího textu, „Číst dál“ dole */
.com-content-category-blog .blog-items:is([class*="masonry-"], [class*="columns-"]) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-count: auto; column-gap: 2.5rem; align-items: stretch;
}
.com-content-category-blog .blog-items:is(.masonry-3, .columns-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.com-content-category-blog .blog-items:is([class*="masonry-"], [class*="columns-"]) > .blog-item {
  display: flex; flex-direction: column; break-inside: avoid; height: 100%;
}
.com-content-category-blog .blog-items:is([class*="masonry-"], [class*="columns-"]) > .blog-item:nth-child(-n+2) { padding-top: .25rem; }
.com-content-category-blog .blog-items:is([class*="masonry-"], [class*="columns-"]) > .blog-item:nth-child(-n+2) .ops-datum { top: .25rem; }
.com-content-category-blog .blog-items:is([class*="masonry-"], [class*="columns-"]) > .blog-item .item-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.com-content-category-blog .blog-items:is([class*="masonry-"], [class*="columns-"]) > .blog-item .readmore { margin-top: auto; padding-top: .75rem; }
@media (max-width: 767.98px) {
  .com-content-category-blog .blog-items:is([class*="masonry-"], [class*="columns-"]) { grid-template-columns: 1fr; }
  .com-content-category-blog .blog-items:is([class*="masonry-"], [class*="columns-"]) > .blog-item:nth-child(2) { padding-top: 1.5rem; }
  .com-content-category-blog .blog-items:is([class*="masonry-"], [class*="columns-"]) > .blog-item:nth-child(2) .ops-datum { top: 1.5rem; }
}
/* Výpis bez data (např. Oblasti): bez odsazení pro odznak */
:is(.blog-featured, .com-content-category-blog) .blog-items > .blog-item:not(:has(.ops-datum)) { padding-left: 0; }
.ops-polozka-hlavicka:not(:has(.ops-datum)) h2 { min-height: 0; }
.blog-item .item-content { padding: 0; font-size: var(--ops-fs-base); line-height: var(--ops-lh-text); }
.blog-item .item-content :is(p, ul, ol, div[dir]) { margin: 0 0 .75em; }
.blog-item .item-content > :last-child { margin-bottom: 0; }
.ops-polozka-hlavicka { display: block; margin: 0 0 .6rem; padding: 0; border: 0; }
.ops-polozka-hlavicka::after { display: none; }
.ops-polozka-hlavicka h2 { font-size: var(--ops-fs-lg); line-height: var(--ops-lh-nadpis); margin: 0; min-height: 3.1rem; display: flex; align-items: center; }
.ops-polozka-hlavicka h2 a { color: var(--ops-modra); text-decoration: none; }
.ops-polozka-hlavicka h2 a:hover { color: var(--ops-modra-svetla); text-decoration: underline; }
.ops-datum {
  position: absolute; left: 0; top: 1.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 3.5rem; min-height: 3.1rem; padding: .3rem .25rem; border: 2px solid var(--ops-cervena); border-radius: var(--ops-radius);
  color: var(--ops-modra); font-weight: 700; font-size: var(--ops-fs-xs); line-height: 1.25; font-variant-numeric: tabular-nums;
}
:is(.blog-featured, .com-content-category-blog) .blog-items:first-child > .blog-item:first-child .ops-datum,
:is(.blog-featured, .com-content-category-blog) .page-header + .blog-items > .blog-item:first-child .ops-datum { top: .25rem; }
.blog-item .article-info { font-size: var(--ops-fs-sm); color: var(--ops-text-svetly); margin: 0 0 .6rem; }
.blog-item .item-image { float: left; margin: .3rem 1.25rem .75rem 0; max-width: 40%; }
.blog-item .item-image img { border-radius: 4px; height: auto; display: block; }
.blog-item .readmore { clear: both; text-align: right; margin: .75rem 0 0; }
.blog-item .readmore .btn {
  background: none; border: 0; padding: 0; color: var(--ops-modra); font-weight: 700; font-size: var(--ops-fs-sm);
}
.blog-item .readmore .btn .icon-chevron-right { display: none; } /* šipka je za textem */
.blog-item .readmore .btn::after { content: ' \2192'; }
.blog-item .readmore .btn:hover { color: var(--ops-modra-svetla); text-decoration: underline; }
.com-content-category-blog__navigation, .com-content-featured__navigation { margin-top: 2rem; }
.pagination { --pagination-color: var(--ops-modra); --pagination-active-bg: var(--ops-modra); --pagination-active-border-color: var(--ops-modra); justify-content: center; flex-wrap: wrap; font-size: var(--ops-fs-sm); }
.com-content-category-blog__counter, .com-content-featured__counter, .counter { text-align: center; font-size: var(--ops-fs-sm); font-weight: 700; color: var(--ops-modra); }

/* 8. Text článku a popisy kategorií ------------------------------------------------------------------------------- */
:is(.com-content-article__body, .category-desc) { font-size: var(--ops-fs-base); line-height: var(--ops-lh-text); }
:is(.com-content-article__body, .category-desc) :is(p, div[dir]) { margin-block: 0 1em; hyphens: auto; }
:is(.com-content-article__body, .category-desc) :is(h2, h3, h4) { margin: 1.6em 0 .55em; }
:is(.com-content-article__body, .category-desc) > :first-child { margin-top: 0; }
:is(.com-content-article__body, .category-desc) h2 { font-size: var(--ops-fs-xl); }
:is(.com-content-article__body, .category-desc) h3 { font-size: var(--ops-fs-lg); }
:is(.com-content-article__body, .category-desc) h4 { font-size: var(--ops-fs-base); }
:is(.com-content-article__body, .category-desc) :is(ul, ol) { padding-left: 1.35em; margin-block: 0 1em; }
:is(.com-content-article__body, .category-desc) li + li { margin-top: .3em; }
:is(.com-content-article__body, .category-desc) li::marker { color: var(--ops-cervena); }
:is(.com-content-article__body, .category-desc) img { max-width: 100%; height: auto; border-radius: 4px; }
:is(.com-content-article__body, .category-desc) :is(img[style*="float"], img[align]) { margin: .25rem 1rem .75rem; }
:is(.com-content-article__body, .category-desc) blockquote { border-left: 4px solid var(--ops-zelena); margin-inline: 0; padding: .25em 0 .25em 1em; color: var(--ops-text-svetly); }
:is(.com-content-article__body, .category-desc) table { max-width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; display: block; overflow-x: auto; font-size: var(--ops-fs-sm); line-height: var(--ops-lh-maly); }
:is(.com-content-article__body, .category-desc) :is(th, td) { border: 1px solid var(--ops-seda); padding: .45em .65em; vertical-align: top; }
:is(.com-content-article__body, .category-desc) iframe { max-width: 100%; }
:is(.com-content-article__body, .category-desc) p:empty { display: none; }

/* 9. Slidery – Regular Labs Tabs & Accordions, značky {slider Název}…{/sliders} ------------------------------- */
[data-rlta-element="button"] {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; margin-top: .5rem; cursor: pointer;
  background: var(--ops-seda-pozadi); border: 0; border-left: 4px solid var(--ops-zelena); border-radius: 6px;
}
[data-rlta-element="button"]:hover, [data-rlta-element="button"]:focus-visible { background: #e2eaf0; }
[data-rlta-element="button"] [data-rlta-element="heading"] { margin: 0; font-size: var(--ops-fs-base); line-height: var(--ops-lh-nadpis); color: var(--ops-modra); }
[data-rlta-element="button"]::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .8rem; color: var(--ops-modra); transition: transform .2s ease; }
[data-rlta-element="button"][data-rlta-state="open"]::after { transform: rotate(180deg); }
[data-rlta-element="panel"] { border: 0; background: none; }
[data-rlta-element="panel-content"] { padding: 1rem 1rem .25rem; }

/* 10. Pravý sloupec (pozice sidebar-right) ------------------------------------------------------------------------ */
.container-sidebar-right { padding-block: 2.25rem; }
.container-sidebar-right .card {
  background: var(--ops-seda-pozadi); border: 0; border-radius: var(--ops-radius); margin-bottom: 1.5rem;
}
.container-sidebar-right .card-header {
  background: none; border: 0; color: var(--ops-modra); font-size: var(--ops-fs-lg); font-weight: 700; line-height: var(--ops-lh-nadpis); padding: 1.1rem 1.1rem .35rem;
}
.container-sidebar-right .card-body { padding: .5rem 1.1rem 1.1rem; font-size: var(--ops-fs-sm); line-height: var(--ops-lh-maly); }
.ops-pobocky { margin: 0; }
.ops-pobocky dt { color: var(--ops-modra); font-weight: 700; margin-top: .8rem; }
.ops-pobocky dt:first-child { margin-top: 0; }
.ops-pobocky dd { margin: .1rem 0 0; color: var(--ops-text-svetly); }
.ops-pobocky dd a { color: var(--ops-text); text-decoration: none; }
.ops-pobocky .fas { color: var(--ops-modra); font-size: .8em; margin-right: .25rem; }
/* Kalendář akcí (mod_ops_calendar) – velikosti písma podle škály webu */
.ops-calendar__meta, .ops-calendar__location, .ops-calendar__description, .ops-calendar__button { font-size: var(--ops-fs-sm) !important; line-height: var(--ops-lh-maly); }
.ops-calendar__title { font-size: var(--ops-fs-base) !important; line-height: var(--ops-lh-nadpis) !important; }
/* Podnabídka (layout cassiopeia_opscz:podnabidka): podúroveň jen u aktivní větve */
.container-sidebar-right .mod-menu { list-style: none; padding: 0; margin: 0; }
.container-sidebar-right .mod-menu li a { display: block; padding: .5rem .6rem; color: var(--ops-modra); border-bottom: 1px solid var(--ops-seda); text-decoration: none; }
.container-sidebar-right .mod-menu li a:hover { background: #e2eaf0; }
.container-sidebar-right .mod-menu li.current > a, .container-sidebar-right .mod-menu li.active > a { background: var(--ops-seda-tmava); color: #fff; }
.ops-podnabidka .mod-menu__sub { display: none; list-style: none; margin: .25rem 0 .5rem; padding-left: .75rem; }
.ops-podnabidka li.active > .mod-menu__sub { display: block; }
.container-sidebar-right .ops-podnabidka .mod-menu__sub a { border-bottom: 0; padding-block: .3rem; }
.container-sidebar-right .ops-podnabidka .mod-menu__sub li.current > a { background: none; color: var(--ops-modra-svetla); font-weight: 700; }

/* 11. Patička ------------------------------------------------------------------------------------------------------ */
.container-footer { background: var(--ops-modra); color: #fff; margin-top: 0; }
.container-footer .grid-child { padding-block: 1.25rem; }
.ops-paticka { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; font-size: var(--ops-fs-sm); }
.ops-paticka p { margin: 0; }
.ops-paticka img { background: #fff; border-radius: 3px; padding: 2px; display: block; }
.container-footer a { color: #fff; }
.back-to-top-link { background: var(--ops-zelena); color: #fff; }

/* 12. Formuláře RSForm (layout „responsive“: form.formResponsive) ------------------------------------------------ */
.formResponsive { max-width: 44rem; margin: 1.5rem 0 0; font-size: var(--ops-fs-base); line-height: var(--ops-lh-text); }
.formResponsive :is(h2, h3, h4) { margin: 2rem 0 .25rem; padding-bottom: .4rem; border-bottom: 1px solid var(--ops-seda); font-size: var(--ops-fs-lg); }
.formResponsive .rsform-block { margin: 0 0 1.25rem; }
.formResponsive .formControlLabel {
  display: block; float: none; width: auto; margin: 0 0 .35rem; padding: 0; text-align: left;
  font-weight: 700; font-size: var(--ops-fs-sm); line-height: var(--ops-lh-maly); color: var(--ops-modra);
}
.formResponsive .formControls { margin: 0; }
.formResponsive .formRequired { color: var(--ops-cervena); font-weight: 700; }
.formResponsive :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea) {
  display: block; width: 100%; max-width: 100%; margin: 0;
  padding: .7rem .85rem; border: 1px solid var(--ops-seda); border-radius: 6px; background-color: #fff;
  color: var(--ops-text); font: inherit; font-size: var(--ops-fs-base); line-height: var(--ops-lh-maly);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.formResponsive select {
  appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23080f55' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 14px 10px;
}
.formResponsive textarea { min-height: 10rem; resize: vertical; }
.formResponsive :is(input, select, textarea):focus { outline: none; border-color: var(--ops-modra-svetla); box-shadow: 0 0 0 3px rgba(30, 130, 192, .2); }
.formResponsive .rsfp-fieldset { border: 0; margin: 0; padding: 0; }
.formResponsive .rsfp-fieldset label { display: inline-flex; align-items: flex-start; gap: .55rem; margin: .15rem 1.25rem .15rem 0; font-weight: 400; cursor: pointer; }
.formResponsive :is(input[type="checkbox"], input[type="radio"]) { width: 1.15rem; height: 1.15rem; margin: .25rem 0 0; flex: 0 0 auto; accent-color: var(--ops-modra); }
.formResponsive .formDescription { margin: .35rem 0 0; color: var(--ops-text-svetly); font-size: var(--ops-fs-sm); line-height: var(--ops-lh-maly); }
.formResponsive .formNoError { display: none; }
.formResponsive .formError { display: block; margin-top: .3rem; color: var(--ops-cervena); font-size: var(--ops-fs-sm); font-weight: 700; }
.formResponsive .rsform-error { border-color: var(--ops-cervena) !important; }
.formResponsive .formRed, .formRed { color: var(--ops-cervena); font-weight: 700; }
.formResponsive :is(.rsform-submit-button, button[type="submit"], input[type="submit"]) {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem;
  padding: .8rem 1.6rem; border: 0; border-radius: 6px; background: var(--ops-modra); color: #fff;
  font: inherit; font-size: var(--ops-fs-base); font-weight: 700; line-height: 1.2; cursor: pointer;
  transition: background-color .15s ease;
}
.formResponsive :is(.rsform-submit-button, button[type="submit"], input[type="submit"]):hover,
.formResponsive :is(.rsform-submit-button, button[type="submit"], input[type="submit"]):focus-visible { background: var(--ops-modra-svetla); color: #fff; }
.formResponsive .formRow, .formResponsive [class*="formSpan"] { margin: 0; width: 100%; }
/* Past na roboty: pole „web“ mimo obrazovku (člověk ho nevidí ani nevyplní; obsluha ScriptBeforeValidation) */
.rsform-block-web { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
/* Potvrzovací zpráva po odeslání */
.com-rsform .alert, .rsform .alert { border-radius: var(--ops-radius); }

/* 13. Tablet a mobil ----------------------------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Hlavička: řádek 1 logo + hamburger, pod ním rozbalené menu (v toku stránky), pak rychlý kontakt */
  .container-header { row-gap: .75rem; position: relative; }
  .container-header .container-nav, .container-header .container-nav nav.navbar { display: contents; }
  .container-header > .grid-child:first-child { order: 1; }
  .container-header .navbar-toggler { order: 2; margin-left: auto; }
  .container-header .navbar-collapse { order: 3; flex: 1 0 100%; position: static; padding: 0; border-top: 1px solid var(--ops-seda); background: #fff; }
  .container-header .container-search { order: 4; flex: 1 0 100%; width: 100%; }
  /* Hamburger 48×48; po rozbalení křížek (Bootstrap nastaví aria-expanded) */
  .container-header .navbar-toggler { width: 48px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
  .container-header .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(30, 130, 192, .25); }
  .container-header .navbar-toggler .icon-menu::before { font-family: 'Font Awesome 6 Free'; font-weight: 900; content: '\f0c9'; font-size: 1.25rem; }
  .container-header .navbar-toggler[aria-expanded="true"] .icon-menu::before { content: '\f00d'; font-size: 1.4rem; }

  /* Položka menu = mřížka: odkaz | tlačítko podmenu (48×48), podmenu pod nimi přes celou šířku */
  .container-header .metismenu.mod-menu { flex-direction: column; gap: 0; padding-block: .25rem .5rem; }
  .container-header .metismenu.mod-menu > li {
    display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: stretch;
    padding: 0; border-bottom: 1px solid var(--ops-seda-pozadi);
  }
  .container-header .metismenu.mod-menu > li > a { grid-column: 1; min-height: 48px; display: flex; align-items: center; font-size: var(--ops-fs-base); }
  .container-header .metismenu.mod-menu > li > button.mm-toggler {
    grid-column: 2; width: 48px; height: 48px; padding: 0; margin: 0; position: static;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-left: 1px solid var(--ops-seda-pozadi); background: none; cursor: pointer;
  }
  .container-header .metismenu.mod-menu > li > button.mm-toggler::after {
    position: static; margin: 0; border: 0; width: auto; height: auto;
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .85rem; color: var(--ops-modra);
    transition: transform .2s ease;
  }
  .container-header .metismenu.mod-menu > li > button.mm-toggler::after,
  .container-header .metismenu.mod-menu > li > button.mm-toggler[aria-expanded="true"]::after { border: 0 !important; text-decoration: none; display: inline-block; }
  .container-header .metismenu.mod-menu > li > button.mm-toggler { text-decoration: none; }
  .container-header .metismenu.mod-menu > li > button.mm-toggler[aria-expanded="true"]::after { transform: rotate(180deg); }
  .container-header .metismenu.mod-menu > li > .mm-collapse {
    grid-column: 1 / -1; position: static; width: auto; min-width: 0; margin: 0 0 .5rem; padding: .25rem 0;
    box-shadow: none; border: 0; border-radius: 6px; background: var(--ops-seda-pozadi);
  }
  .container-header .metismenu.mod-menu .mm-collapse a {
    min-height: 48px; display: flex; align-items: center; padding: .5rem 1rem .5rem 1.25rem; font-size: var(--ops-fs-base); font-weight: 400;
  }
  .container-header .metismenu.mod-menu .mm-collapse > li + li { border-top: 1px solid #fff; }
  /* Dlouhé názvy na více řádků (Cassiopeia: nowrap + výpustka) */
  .container-header .metismenu.mod-menu a {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; hyphens: auto;
    min-width: 0; padding-block: .6rem; line-height: 1.35;
  }
  .container-header .metismenu.mod-menu .mm-collapse a:hover,
  .container-header .metismenu.mod-menu .mm-collapse .active > a { background: #e2eaf0; }
  .ops-kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .1rem 1rem; }
  .ops-uvod { grid-template-columns: 1fr; gap: 1.25rem; }
  :root { --ops-mezera: 0px; }
}
@media (max-width: 575.98px) {
  .container-header .brand-logo img { height: 56px; }
  .ops-dlazdice { grid-template-columns: 1fr; }
  .container-banner > * { padding-block: 1.25rem; }
  /* Výpis: odznak data vedle titulku, text pod nimi přes celou šířku */
  :is(.blog-featured, .com-content-category-blog) .blog-items > .blog-item { padding-left: 0; }
  .ops-polozka-hlavicka { display: flex; align-items: flex-start; gap: .75rem; }
  .ops-datum, :is(.blog-featured, .com-content-category-blog) .blog-items > .blog-item:first-child .ops-datum { position: static; }
  .ops-polozka-hlavicka h2 { font-size: var(--ops-fs-base); }
  .blog-item .item-image { float: none; max-width: 100%; margin: 0 0 .75rem; }
  /* obtékané obrázky na telefonu na samostatný řádek, aby nemačkaly text */
  :is(.com-content-article__body, .category-desc, .blog-item .item-content) :is(img[style*="float"], img[align]) { float: none !important; display: block; margin: 0 auto 1rem; }
}