/* ======================================================================
   Farní společenství Proseč, Nové Hrady, Perálec — overrides na Cassiopeia
   ====================================================================== */

/* Brand paleta z Yoo Avion lilac (referenční) */
:root {
  --fs-brand-red: #ed4f65;
  --fs-brand-red-hover: #c2142c;
  --fs-dark-purple: #5f5974;
  --fs-mid-purple: #67617b;
  --fs-light-lavender: #eeebf6;
  --fs-near-white: #fdfcff;

  /* 3-úrovňová hierarchie pozadí (jako prod):
     darkest = body (rám stránky a mezery mezi bloky)
     mid     = články + sidebar moduly (obsahové karty)
     light   = header + bottom moduly (lavender)             */
  --fs-page-bg: #4b455f;          /* darker — body */
  --fs-card-bg-mid: #5f5974;      /* mid — články + sidebar-right karty */
  --fs-card-bg-light: #eeebf6;    /* light — header + bottom-a/-b */
  --fs-card-text-on-mid: #f5f3f8; /* light text na mid BG */
  --fs-card-text-on-light: var(--fs-dark-purple);

  /* Mezery (svislé i horizontální stejné — jako na prod) */
  --fs-block-gap: 2rem;          /* svislé mezery mezi bloky */
  --fs-h-gap: 2rem;              /* horizontální (článek↔sidebar i -a↔-b) */

  /* Zpětně kompatibilní alias — kdyby na něj odkazovalo jiné pravidlo */
  --fs-card-bg: var(--fs-card-bg-light);
}

/* ----------------------------------------------------------------------
   Stránkové pozadí + max-width (vejít se do prod-style šířky)
   ---------------------------------------------------------------------- */
html {
  /* tmavošedá vyplní oblast mimo body na širokých monitorech */
  background-color: var(--fs-page-bg);
}

body.site {
  background-color: var(--fs-page-bg);
  /* 1200 obsah + 2× padding = ~1264 max */
  max-width: 1264px;
  margin-inline: auto;
  /* Padding tvoří jednotný tmavošedý okraj vlevo a vpravo pro VŠECHNY
     přímé děti body — header (mimo .site-grid), .site-grid i footer. */
  padding-inline: var(--fs-block-gap);
}

/* Site-grid přestavujeme na 4 explicitní sloupce bez vnějších gutter
   tracků — jinak `column-gap` ujídá 16 px na každé straně a hlavní obsah
   je užší než header/footer (které jsou body-children mimo grid).
   `full-start` = `main-start` (stejná čára), aby `.full-width` elementy
   neměly žádné navíc oproti hlavnímu obsahu. */
.site-grid {
  grid-template-columns:
    [full-start main-start] repeat(4, minmax(0, 1fr)) [main-end full-end];
  column-gap: var(--fs-h-gap);

  /* Default (mobile / pod 992 px): vše stacknuto pod sebou, každá oblast
     spaní celou šířku gridu (4 buňky se shodným názvem). */
  grid-template-areas:
    "banner banner banner banner"
    "top-a top-a top-a top-a"
    "top-b top-b top-b top-b"
    "comp comp comp comp"
    "side-r side-r side-r side-r"
    "side-l side-l side-l side-l"
    "bot-a bot-a bot-a bot-a"
    "bot-b bot-b bot-b bot-b";
}

/* Desktop: comp 50 % vlevo, sidebar-right 50 % vpravo (v sidebaru se
   pak -a a -b dělí napůl, takže oba jsou 25 % celkové šířky). */
@media (min-width: 992px) {
  .site-grid {
    grid-template-areas:
      "banner banner banner banner"
      "top-a top-a top-a top-a"
      "top-b top-b top-b top-b"
      "comp comp side-r side-r"
      "bot-a bot-a bot-a bot-a"
      "bot-b bot-b bot-b bot-b";
  }

  /* Pozice `sidebar-narrow` přepíná layout na 75:25 (článek 3, sidebar 1).
     Aktivuje se přes body class `has-sidebar-narrow`, kterou nastaví
     custom index.php, když `countModules('sidebar-narrow', true) > 0`.
     Why: chceme znovu-použitelný způsob, jak označit „úzký sidebar"
     stránku. Stačí umístit modul do `sidebar-narrow` a přiřadit ho na
     menu — layout se přepne automaticky. */
  body.has-sidebar-narrow .site-grid {
    grid-template-areas:
      "banner banner banner banner"
      "top-a top-a top-a top-a"
      "top-b top-b top-b top-b"
      "comp comp comp side-r"
      "bot-a bot-a bot-a bot-a"
      "bot-b bot-b bot-b bot-b";
  }

  /* Sidebar-right vnitřně defaultně 2 sub-cols (-a, -b napůl). Při úzkém
     sidebaru (25 %) je 2-col split nesmyslný — přepneme na 1 col, takže
     sidebar-narrow / -a / -b se zobrazí pod sebou v plné šíři sidebaru. */
  body.has-sidebar-narrow .site-grid > .container-sidebar-right {
    grid-template-columns: minmax(0, 1fr);
  }
}

.site-grid > .grid-child {
  /* Default = lavender (light). Specifické kontejnery (top-a, component,
     sidebar-right) si přepisují na transparent v dalších pravidlech. */
  background-color: var(--fs-card-bg-light);
  margin-bottom: var(--fs-block-gap);
  min-width: 0;
}

/* Header je sourozenec .site-grid (přímý child body), takže boční odsazení
   stránky řeší padding-inline na body výše. Tady přidáváme **vnitřní**
   padding aby logo, menu a search nebyly přilepené na okraj lavendrové
   plochy. */
body > header.container-header {
  margin-bottom: var(--fs-block-gap);
  padding: 0.75rem var(--fs-block-gap);
}

/* Pod 768 px je topbar skrytý (viz níže), takže header je první viditelný
   blok a potřebuje vlastní `margin-top`, aby se nad lavender plochou ukázal
   tmavý frame jako na produkci. Na desktopu gap dodává topbar svým
   `margin-bottom`. */
@media (max-width: 767.98px) {
  body > header.container-header {
    margin-top: var(--fs-block-gap);
  }
}

/* Footer (modul "Copyright") horizontálně centrovaný. Cassiopeia stock
   má .footer .grid-child { justify-content: space-between } což u jednoho
   modulu posune obsah doleva — přepisujeme na center. */
body > footer.container-footer,
body > footer.container-footer .grid-child,
body > footer.container-footer .moduletable,
body > footer.container-footer .mod-custom,
body > footer.container-footer p {
  text-align: center;
}

body > footer.container-footer .grid-child {
  justify-content: center;
  /* Cassiopeia stock dává `.footer .grid-child { padding: 2.5rem .5em }`,
     to nám dělalo modul moc vysoký. Snižujeme. */
  padding: 0.5rem var(--fs-block-gap);
}

body > footer.container-footer {
  padding: 0;
  margin-top: 0;
}

body > footer.container-footer .moduletable {
  margin: 0;
}

/* Topbar je vyčleněný mimo <header> element (renderujeme ho v custom
   index.php přímo pod <body>), takže má svůj vlastní řádek bez nutnosti
   flex-wrap. Header pak může být `nowrap` a logo + menu + search se vejdou
   do jednoho řádku. */
body > .container-topbar {
  background-color: var(--fs-dark-purple);
  color: #fff;
  padding: .35rem var(--fs-block-gap);
  font-size: .9rem;
  margin-bottom: var(--fs-block-gap);
}

body > .container-topbar p { margin: 0; }
body > .container-topbar a { color: #fff; text-decoration: none; }
body > .container-topbar a:hover { color: var(--fs-brand-red); text-decoration: underline; }

/* Pod 768 px topbar skrýváme — produkce J3 ho nezobrazovala, na malém
   viewportu je redundantní (jeho odkazy jsou už v hlavním menu). */
@media (max-width: 767.98px) {
  body > .container-topbar {
    display: none;
  }
}

/* Header je teď pouze s logem + menu + search v jednom řádku na desktopu;
   na mobilu se zalomí a menu jde pod logo. */
.container-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 992px) {
  .container-header {
    flex-wrap: nowrap;
  }
}

.container-header > .grid-child {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Cassiopeia stock dává `.container-header .navbar-brand { margin-inline-end: auto }`
   — to roztahuje wrapper grid-child na plnou šířku, takže hamburger label
   se zalomí na další řádek. Vypneme. */
.container-header .navbar-brand {
  margin-inline-end: 0;
}

/* Grid-child s logem má v Cassiopeia stock implicitní `flex-basis: auto`
   ale viz výše — kombinace s flex-wrap:wrap parentu způsobí stretch na 100 %
   řádku. Forceneme width na content.

   Stock `.grid-child` má i `margin-left: auto; margin-right: auto`
   (centrování v parentu). Na mobilu, kde je hamburger `position: absolute`
   a logo grid-child je jediný flex item, by ty auto-marginy logo posunuly
   na střed baru. Ve Firefoxu navíc width:100% wins → logo zasahuje do
   hamburgeru. Vynutit doleva. */
.container-header > .grid-child:has(.navbar-brand) {
  flex: 0 0 auto;
  width: auto;
  margin-inline: 0;
}

.container-header > .grid-child.container-nav {
  flex: 1 1 auto;
  padding-bottom: 0;
  min-width: 0;
}

.container-header .container-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

/* Mod-menu — desktop horizontálně, mobile vertikálně (s kompletním
   uvolněním Cassiopeia rule `flex: 1 0 100%`). */
.container-header .mod-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  .container-header .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: 0 1 auto !important;
  }

  .container-header .mod-menu > li {
    list-style: none;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Mezera mezi logem a prvním menu itemem, ať se nedotýkají. */
  .container-header > .grid-child.container-nav {
    margin-left: 2rem;
  }
}

@media (max-width: 991.98px) {
  .container-header .mod-menu {
    display: block;
    flex: none;
  }
  .container-header > .grid-child.container-nav {
    flex: 1 0 100%;
  }
}

/* ----------------------------------------------------------------------
   Mobile hamburger toggle (CSS-only via checkbox hack).
   Pod 992 px se navigace defaultně skryje, viditelná je jen ☰ ikona;
   po kliknutí na label se přepne checkbox a menu se rozbalí pod hlavičkou.
   ---------------------------------------------------------------------- */
.mobile-menu-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mobile-menu-toggle-label {
  display: none;
}

@media (max-width: 991.98px) {
  .container-header .mobile-menu-toggle-label {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    color: var(--fs-card-text-on-light);
    background: transparent;
    border: 1px solid var(--fs-card-text-on-light);
    border-radius: 0.25rem;
    /* Vytáhnout label z flex flow → nemůže wrapnout na druhý řádek
       (Firefox vs Chrome rozdíl s flex-wrap: wrap + margin-left: auto). */
    position: absolute;
    top: 50%;
    right: var(--fs-block-gap);
    transform: translateY(-50%);
    margin: 0;
  }
  /* Cassiopeia stock má `label:after { position: absolute; inset: 1rem .5rem; ... }`
     — pro náš toggle to vypneme. */
  .container-header .mobile-menu-toggle-label::after {
    content: none !important;
    display: none !important;
  }

  .mobile-menu-toggle-icon,
  .mobile-menu-toggle-icon::before,
  .mobile-menu-toggle-icon::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    background-color: currentColor;
    position: relative;
  }
  .mobile-menu-toggle-icon::before,
  .mobile-menu-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .mobile-menu-toggle-icon::before { top: -0.4rem; }
  .mobile-menu-toggle-icon::after  { top:  0.4rem; }

  /* Default: menu/search blok skrytý pod 992 px. */
  .container-header > .grid-child.container-nav {
    display: none;
  }

  /* Po kliknutí (checked) → rozbalit menu pod hlavičkou (full row). */
  .mobile-menu-toggle-input:checked ~ .container-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 0 100%;
    gap: 0.5rem;
  }

  .mobile-menu-toggle-input:checked ~ .container-nav .container-search {
    margin-left: 0;
  }

  /* Aktivní stav (checked) ikony — křížek pro vizuální feedback. */
  .mobile-menu-toggle-input:checked ~ .mobile-menu-toggle-label .mobile-menu-toggle-icon {
    background-color: transparent;
  }
  .mobile-menu-toggle-input:checked ~ .mobile-menu-toggle-label .mobile-menu-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
  }
  .mobile-menu-toggle-input:checked ~ .mobile-menu-toggle-label .mobile-menu-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }
}

/* Chevron ikony u 1. úrovně menu skrýváme — na desktopu se submenu otevírá
   na hover (viz dále), na mobilu jsou všechny submenu rozbalené hned po
   otevření hamburgeru. Podle Cassiopeia stock markup se chevron renderuje
   v tlačítku `.mod-menu__toggle-sub`, které někdy obsahuje pouze chevron
   (parent má samostatný `<a href>`), jindy obsahuje i nadpis kategorie
   (parent bez vlastního odkazu — jen jako popisek). Proto:
   1) chevron-down ikonu skryjeme vždy
   2) button bez `.mod-menu__heading` (tj. obsahuje jen chevron) skryjeme celý
   3) button s `.mod-menu__heading` ponecháme, jen vyresetujeme jako plain
      text, ať vizuálně splývá s ostatními itemy menu */
.container-header .mod-menu .mod-menu__toggle-sub .icon-chevron-down,
.container-header .mod-menu .mod-menu__toggle-sub .visually-hidden {
  display: none;
}
.container-header .mod-menu .mod-menu__toggle-sub:not(:has(.mod-menu__heading)) {
  display: none;
}
.container-header .mod-menu .mod-menu__toggle-sub:has(.mod-menu__heading) {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: default;
  text-align: inherit;
}

/* ----------------------------------------------------------------------
   Hover-driven dropdown menu (jako prod). Cassiopeia má submenu skryté
   přes metismenu/click; tady ho ukazujeme přes :hover/:focus-within.
   ---------------------------------------------------------------------- */
.container-header .mod-menu > li.parent {
  position: relative;
}

.container-header .mod-menu > li.parent > .mod-menu__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: var(--fs-card-bg-light);
  min-width: 14rem;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  border-radius: 0 0 4px 4px;
}

.container-header .mod-menu > li.parent:hover > .mod-menu__sub,
.container-header .mod-menu > li.parent:focus-within > .mod-menu__sub {
  display: block;
}

/* Pod 992 px (mobile, kde funguje hamburger) nechat submenu vždy zobrazené
   inline (statický flow, ne absolute). Po otevření hamburgeru se 2. úroveň
   ukáže hned u všech parent itemů — odpovídá produkci. */
@media (max-width: 991.98px) {
  .container-header .mod-menu > li.parent > .mod-menu__sub {
    display: block;
    position: static;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 1rem;
    min-width: 0;
  }
  .container-header .mod-menu > li.parent > .mod-menu__sub a {
    color: inherit;
    padding: 0.25rem 0;
    white-space: normal;
  }
}

.container-header .mod-menu > li.parent > .mod-menu__sub li {
  list-style: none;
}

.container-header .mod-menu > li.parent > .mod-menu__sub a {
  display: block;
  padding: 0.35rem 1rem;
  color: var(--fs-dark-purple);
  text-decoration: none;
  white-space: nowrap;
}

.container-header .mod-menu > li.parent > .mod-menu__sub a:hover,
.container-header .mod-menu > li.parent > .mod-menu__sub a:focus {
  background: var(--fs-light-lavender);
  color: var(--fs-brand-red);
}

/* Gap mezi položkami v top-a (slideshow vs hero karta) zůstává 0, ať
   na sebe vizuálně přiléhají (jako prod). */
.container-top-a {
  gap: 0;
}

/* Mezera mezi jednotlivými moduletables uvnitř bottom-a / bottom-b /
   sidebar-right — body BG mezi nimi prosvítá. */
.container-bottom-a > .moduletable,
.container-bottom-b > .moduletable {
  margin-bottom: var(--fs-block-gap);
}
.container-bottom-a > .moduletable:last-child,
.container-bottom-b > .moduletable:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------
   Topbar — utility lišta nad hlavičkou
   ---------------------------------------------------------------------- */
.container-topbar {
  background-color: var(--fs-dark-purple);
  color: #fff;
  padding: .35rem 1rem;
  font-size: .9rem;
}

.container-topbar p {
  margin: 0;
}

.container-topbar a {
  color: #fff;
  text-decoration: none;
}

.container-topbar a:hover,
.container-topbar a:focus {
  color: var(--fs-brand-red);
  text-decoration: underline;
}

/* Plná šíře — Cassiopeia umí header full-width, ale obsah topbar dáme
   centrovat do stejné šíře jako hlavičkový obsah pro vizuální shodu. */
.container-topbar > .moduletable,
.container-topbar > div {
  max-width: var(--container-max-width, 1200px);
  margin-inline: auto;
}

/* ----------------------------------------------------------------------
   Top-A — hero zóna na úvodu (slideshow vlevo + particle karta vpravo)
   ---------------------------------------------------------------------- */
.container-top-a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .container-top-a {
    grid-template-columns: 1fr 1fr;
  }
}

/* Cassiopeia balí každý modul v top-a do .card s padding/borderem; pro hero
   to úplně nulujeme, aby slideshow a hero karta byly přímo vedle sebe
   bez bílého proužku a obě měly přesně 50 % šířky a stejnou výšku.
   Cassiopeia stock dává `column-gap: 1em` na .site-grid > [class^=container-]
   (vyšší specificita než holé `.container-top-a`), proto explicit selector. */
.site-grid > .container-top-a {
  background: transparent;
  padding: 0;
  align-items: stretch;
  column-gap: 0;
  gap: 0;
}

.container-top-a > .moduletable,
.container-top-a > .top-a,
.container-top-a > .card,
.container-top-a > [class*="card"] {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.container-top-a .card-body,
.container-top-a .mod-custom {
  background: transparent;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.container-top-a .mod-custom > * {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Slideshow (mod_custom obsah označený data-fs-slideshow) */
.fs-slideshow {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #000;
}

.fs-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease-in-out;
}

.fs-slideshow img.is-active {
  opacity: 1;
}

/* Hero karta (red BG + particles + bílé logo) */
.fs-hero-card {
  position: relative;
  background-color: var(--fs-brand-red);
  color: #fff;
  text-align: center;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  overflow: hidden;
}

.fs-hero-card > * {
  position: relative;
  z-index: 1;
}

.fs-hero-card img {
  max-width: 80%;
  height: auto;
  margin-bottom: 1rem;
}

.fs-hero-card h1 {
  color: #fff;
  font-size: 2rem;
  margin: .5rem 0;
}

.fs-hero-card p {
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  max-width: 32rem;
}

/* Při kratším poměru než 4:3 zachovat výšku slideshow podobnou kartě */
@media (min-width: 768px) {
  .fs-slideshow { aspect-ratio: auto; height: 100%; min-height: 22rem; flex: 1 1 auto; }
  .fs-hero-card { min-height: 22rem; flex: 1 1 auto; }
}

/* Pod 768 px hero stackujeme pod sebe — slideshow nahoře, particles karta
   pod ní (jako produkce J3). Container-top-a je grid 1fr (jeden sloupec)
   na mobilu, takže stackování řeší grid sám. Particles kartě jen dáme
   minimální výšku, ať není zhroucená (`min-height: 100 %` nedává smysl
   mimo flex-row kontext). */
@media (max-width: 767.98px) {
  .container-top-a .fs-hero-card {
    min-height: 18rem;
  }
}

/* ----------------------------------------------------------------------
   Hlavní obsahová oblast — container-component samotný je průhledný,
   bílou kartu má každý článek/blok zvlášť, takže mezi nimi prosvítá
   tmavě šedé body BG.
   ---------------------------------------------------------------------- */
.site-grid > .container-component {
  background-color: transparent;
  margin-bottom: var(--fs-block-gap);
}

/* Jednotlivé "karty" v hlavní oblasti — single article (.item-page),
   featured/blog list items (.blog-item), category blog items.
   Pozadí karty = mid (#5f5974), text light, ať obsah na mid pozadí čte. */
.container-component .item-page,
.container-component .blog-item,
.container-component .com-content-category-blog__item,
.container-component .com-content-category-default__item {
  background: var(--fs-card-bg-mid);
  color: var(--fs-card-text-on-mid);
  padding: 1.25rem;
  margin-bottom: var(--fs-block-gap);
}

/* Nadpisy v hlavním obsahu i v sidebar kartách — bílé, bez podtržení.
   Sjednoceno přes všechny varianty (h1..h6 i jejich vnořené <a>). */
.container-component .item-page :is(h1,h2,h3,h4,h5,h6),
.container-component .item-page :is(h1,h2,h3,h4,h5,h6) a,
.container-component .blog-item :is(h1,h2,h3,h4,h5,h6),
.container-component .blog-item :is(h1,h2,h3,h4,h5,h6) a,
.container-component .com-content-category-blog__item :is(h1,h2,h3,h4,h5,h6),
.container-component .com-content-category-blog__item :is(h1,h2,h3,h4,h5,h6) a,
.container-component .com-content-category-default__item :is(h1,h2,h3,h4,h5,h6),
.container-component .com-content-category-default__item :is(h1,h2,h3,h4,h5,h6) a,
.container-sidebar-right .card :is(h1,h2,h3,h4,h5,h6),
.container-sidebar-right .card :is(h1,h2,h3,h4,h5,h6) a {
  color: var(--fs-card-text-on-mid);
  text-decoration: none;
  font-weight: 600;
  margin-top: 0;
}

.container-component .item-page :is(h1,h2,h3,h4,h5,h6) a:hover,
.container-component .blog-item :is(h1,h2,h3,h4,h5,h6) a:hover,
.container-component .com-content-category-blog__item :is(h1,h2,h3,h4,h5,h6) a:hover,
.container-component .com-content-category-default__item :is(h1,h2,h3,h4,h5,h6) a:hover,
.container-sidebar-right .card :is(h1,h2,h3,h4,h5,h6) a:hover {
  color: #fff;
  text-decoration: none;
}

/* Body odkazy v článcích (NE nadpisy) zůstávají brand-red */
.container-component .item-page a:not(:is(h1,h2,h3,h4,h5,h6) a),
.container-component .blog-item a:not(:is(h1,h2,h3,h4,h5,h6) a),
.container-component .com-content-category-blog__item a:not(:is(h1,h2,h3,h4,h5,h6) a),
.container-component .com-content-category-default__item a:not(:is(h1,h2,h3,h4,h5,h6) a) {
  color: var(--fs-brand-red);
}

.container-component .item-page a:not(:is(h1,h2,h3,h4,h5,h6) a):hover,
.container-component .blog-item a:not(:is(h1,h2,h3,h4,h5,h6) a):hover,
.container-component .com-content-category-blog__item a:not(:is(h1,h2,h3,h4,h5,h6) a):hover,
.container-component .com-content-category-default__item a:not(:is(h1,h2,h3,h4,h5,h6) a):hover {
  color: var(--fs-brand-red-hover);
}

/* Obrázky uvnitř článků nesmějí přetéct kartu */
.container-component .item-page img,
.container-component .blog-item img,
.container-component .com-content-category-blog__item img,
.container-component .com-content-category-default__item img {
  max-width: 100%;
  height: auto;
}

.container-component .blog-item:last-child,
.container-component .com-content-category-blog__item:last-child,
.container-component .com-content-category-default__item:last-child {
  margin-bottom: 0;
}

/* Wrappery uvnitř container-component samy nepotřebují kartu — bílý
   podklad mají jen jednotlivé položky. */
.container-component .blog-featured,
.container-component .blog-items,
.container-component .com-content-category-blog,
.container-component .com-content-category,
.container-component .content-category,
.container-component main {
  background: transparent;
  padding: 0;
}

/* Mezery mezi položkami v blog gridu (.blog-items.columns-N) — Cassiopeia
   stock dává `grid-gap: 1em`, my používáme jednotných 2 rem (svislé i
   horizontální), aby Aktuality/Historie/Fotogalerie měly stejné odsazení
   jako úvodní stránka. */
.container-component .blog-items,
.container-component .com-content-category-blog__items {
  gap: var(--fs-block-gap);
}

/* ----------------------------------------------------------------------
   Category list (com_content list view) — Časopis, Ohlášky.
   Joomla generuje Bootstrap `<table.table.table-striped...>` se světlým
   defaultem; my přepíšeme na tmavou variantu se subtilními zebra stripes.
   ---------------------------------------------------------------------- */
.container-component .com-content-category__table {
  --bs-table-color: var(--fs-card-text-on-mid);
  --bs-table-bg: transparent;
  --bs-table-striped-color: var(--fs-card-text-on-mid);
  --bs-table-striped-bg: rgba(255, 255, 255, .05);
  --bs-table-hover-color: #fff;
  --bs-table-hover-bg: rgba(255, 255, 255, .08);
  --bs-table-border-color: rgba(255, 255, 255, .12);
  color: var(--fs-card-text-on-mid);
  background: transparent;
}

/* Odkazy v list view brand-red (header titulku i jednotlivé řádky). */
.container-component .com-content-category__table a {
  color: var(--fs-brand-red);
  text-decoration: none;
}
.container-component .com-content-category__table a:hover {
  color: var(--fs-brand-red-hover);
  text-decoration: underline;
}

/* Hits/zobrazení sloupec — badge přebarvit na brand red. */
.container-component .com-content-category__table .badge {
  background-color: var(--fs-brand-red) !important;
  color: #fff;
}

/* ----------------------------------------------------------------------
   Drobné detaily — fáze 9
   ---------------------------------------------------------------------- */

/* Stránkování (Bootstrap .pagination): nahradit bílé pozadí mid pozadím
   sidebar modulů, ať ladí se zbytkem tmavého layoutu. */
.pagination {
  --bs-pagination-bg: var(--fs-card-bg-mid);
  --bs-pagination-color: var(--fs-card-text-on-mid);
  --bs-pagination-hover-bg: var(--fs-mid-purple);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-active-bg: var(--fs-brand-red);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-border-color: var(--fs-brand-red);
  --bs-pagination-disabled-bg: var(--fs-card-bg-mid);
  --bs-pagination-disabled-color: rgba(245, 243, 248, .5);
  --bs-pagination-border-color: rgba(255, 255, 255, .15);
}

.pagination .page-link {
  background-color: var(--bs-pagination-bg);
  color: var(--bs-pagination-color);
  border-color: var(--bs-pagination-border-color);
}

.pagination .page-link:hover {
  background-color: var(--bs-pagination-hover-bg);
  color: var(--bs-pagination-hover-color);
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link.active {
  background-color: var(--bs-pagination-active-bg);
  color: var(--bs-pagination-active-color);
  border-color: var(--bs-pagination-active-border-color);
}

.pagination .page-item.disabled .page-link {
  background-color: var(--bs-pagination-disabled-bg);
  color: var(--bs-pagination-disabled-color);
}

/* Brand-red primární tlačítka (Joomla .btn-primary defaultně modré) */
.btn-primary,
button.btn-primary {
  background-color: var(--fs-brand-red);
  border-color: var(--fs-brand-red);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus {
  background-color: var(--fs-brand-red-hover);
  border-color: var(--fs-brand-red-hover);
  color: #fff;
}

/* Pravý sidebar má dvě sub-pozice (sidebar-right-a / sidebar-right-b)
   renderované vedle sebe na desktopu, pod sebou na mobilu. Vyhrává
   nad default `.grid-child` BG díky vyšší specificitě (.site-grid > ...). */
.site-grid > .container-sidebar-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fs-h-gap);
  align-items: start;
  background: transparent;
  padding: 0;
  min-width: 0;
}

@media (max-width: 767.98px) {
  .site-grid > .container-sidebar-right {
    grid-template-columns: minmax(0, 1fr);
  }
}

.container-sidebar-narrow,
.container-sidebar-right-a,
.container-sidebar-right-b,
.container-sidebar-right-legacy {
  display: flex;
  flex-direction: column;
  gap: var(--fs-h-gap);
  min-width: 0;
}

/* Sidebar moduly (sidebar-right-*) — mid BG (#5f5974) se světlým textem,
   stejné jako kartované články v hlavní části. Padding zvětšen pro
   čitelnost. */
.container-sidebar-right .card {
  background-color: var(--fs-card-bg-mid);
  color: var(--fs-card-text-on-mid);
  border: 0;
  border-radius: 4px;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  min-width: 0;
}

.container-sidebar-right .card-header,
.container-sidebar-right .card-body {
  background: transparent;
  color: inherit;
  border: 0;
  padding: 1.5rem;
}

.container-sidebar-right .card a {
  color: var(--fs-light-lavender);
  text-decoration: underline;
}

.container-sidebar-right .card a:hover,
.container-sidebar-right .card a:focus {
  color: #fff;
}

.container-sidebar-right .card hr {
  border-color: rgba(255, 255, 255, .2);
}

/* Obrázky v sidebar modulech (cca 177×something) občas šíří kartu —
   držet je uvnitř, ať se nepřelije obsah. */
.container-sidebar-right .card img {
  max-width: 100%;
  height: auto;
}

/* Varianta sidebar modulu se světlým pozadím — používá se na stránkách
   Osobnosti (Jindřich Soukal, P. Josef Čechal), kde produkce J3 měla
   sidebar v lavender (světlé) variantě. Aktivuje se přes
   moduleclass_sfx=" sidebar-light" v Joomla admin (modul 138 a 139).
   Why: stejná hierarchie barev jako na produkci — článek v mid pozadí,
   sidebar v light pozadí. */
.container-sidebar-right .card.sidebar-light {
  background-color: var(--fs-card-bg-light);
  color: var(--fs-card-text-on-light);
}

.container-sidebar-right .card.sidebar-light a {
  color: var(--fs-brand-red);
  text-decoration: underline;
}

.container-sidebar-right .card.sidebar-light a:hover,
.container-sidebar-right .card.sidebar-light a:focus {
  color: var(--fs-brand-red-hover);
}

/* Nadpisy v sidebar-light kartě — produkce má `<h2 style="color:#5a5764">`
   (inline má vždy přednost), ostatní nadpisy bez inline stylu jdou
   v dark-purple barvě (čitelné na lavender pozadí). Vyšší specificita
   než globální .container-sidebar-right .card :is(h1..h6) výše. */
.container-sidebar-right .card.sidebar-light :is(h1,h2,h3,h4,h5,h6),
.container-sidebar-right .card.sidebar-light :is(h1,h2,h3,h4,h5,h6) a {
  color: var(--fs-card-text-on-light);
}

/* ----------------------------------------------------------------------
   Article meta (Podrobnosti / Aktualizováno) — globálně skryté.
   Why: produkce J3 Avion ji nikdy neukazovala; uvedení kategorie nebo
   data publikace tu nedává obsahový smysl. Skryto v CSS, aby admin
   nemusel měnit globální com_content config (což by ovlivnilo i
   administraci a jiné views).
   ---------------------------------------------------------------------- */
.container-component .article-info,
.container-component .item-page .article-info {
  display: none;
}

/* Položky kategorie blog (Fotogalerie, Aktuality detail listy…) mají
   plovoucí obrázek `<a style="float:left">`. Aby karta kolem floatu
   "obtekla" (a nesplaskla na 0 výšku), nastavíme parent na
   display: flow-root — tím se vytvoří nový block formatting context
   a karta se natáhne na výšku obrázku. */
.container-component .com-content-category-blog__item .item-content,
.container-component .blog-item .item-content,
.container-component .item-page > div {
  display: flow-root;
}

/* Pojistka: ::after clear za celou položkou, aby další blog-item nikdy
   nezačal vedle floatu z předchozí položky. */
.container-component .com-content-category-blog__item::after,
.container-component .blog-item::after {
  content: "";
  display: block;
  clear: both;
}

/* Responzivní Google Maps embeddy (kontaktní moduly 125, 126).
   HTML má `<iframe width="400" height="300">` v `<div class="map-responsive">`
   — ale CSS pravidla nikde, takže iframe drží fixních 400 px a na mobilu
   přetéká přes pravý okraj. Vynutíme 100% šířku se zachovaným poměrem 4:3. */
.map-responsive {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
}

.map-responsive iframe {
  width: 100%;
  height: 100%;
  border: 0;
}