/* ===================================================================
   BYTOVÉ DRUŽSTVO A SVJ MRKVIČKOVA 1361–1369
   user.css | Joomla 6 – Cassiopeia
   Pročištěná verze
   ===================================================================
   OBSAH:
   1.  Font a proměnné
   2.  Stavební prvky (tlačítka, karty, ikony)
   3.  Header (logo, název, topbar, login)
   4.  Hero banner
   5.  Dlaždice
   6.  Aktuální oznámení
   7.  Kontakty
   8.  Patička
   9.  Jednosloupcový layout (domovská stránka)
   10. Článek "Porucha výtahu"
   11. Podstránky (menu, obsah, Phoca Download)
   12. Úklid (skryté prvky)
   13. Mobil (responzivita)
   =================================================================== */


/* ===================================================================
   1. FONT A PROMĚNNÉ
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Značka */
  --navy:            #1e3a5f;
  --navy-dark:       #162a45;
  --navy-foreground: #ffffff;

  /* Tlačítka */
  --blue:        #3b82f6;
  --blue-hover:  #2563eb;
  --green:       #16a34a;
  --green-hover: #15803d;

  /* Barvy karet oznámení */
  --sky-bg:   #dbeafe;  --sky-fg:   #1d4ed8;
  --lime-bg:  #dcfce7;  --lime-fg:  #15803d;
  --amber-bg: #fef3c7;  --amber-fg: #b45309;
  --rose-bg:  #ffe4e6;  --rose-fg:  #be123c;

  /* Neutrální */
  --bd-background: #f8fafc;
  --bd-foreground: #0f172a;
  --bd-muted:      #64748b;
  --bd-border:     #e2e8f0;
  --bd-card:       #ffffff;

  --bd-radius:    10px;
  --bd-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --bd-shadow-md: 0 6px 20px rgba(15,23,42,.08);

  --bd-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Jednotná šířka obsahu (banner, dlaždice, oznámení, kontakty, patička) */
  --obsah-sirka: 1140px;

  /* Přepis fontů Cassiopeia */
  --cassiopeia-font-family-body:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cassiopeia-font-family-headings: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Font Inter všude */
html body,
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .navbar-brand,
html body .brand-logo,
html body nav a,
html body button,
html body input,
html body .site-title,
html body .site-description {
  font-family: var(--bd-font) !important;
}

body {
  color: #222;
  line-height: 1.6;
}

/* Nepřetékat vodorovně */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}


/* ===================================================================
   2. STAVEBNÍ PRVKY
   =================================================================== */

/* Tlačítka */
.bd-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease;
}
.bd-btn-blue        { background: var(--blue);  color: #fff !important; }
.bd-btn-blue:hover  { background: var(--blue-hover); }
.bd-btn-green       { background: var(--green); color: #fff !important; }
.bd-btn-green:hover { background: var(--green-hover); }

/* Karta */
.bd-card {
  background: var(--bd-card);
  border: 1px solid var(--bd-border);
  border-radius: var(--bd-radius);
  padding: 24px;
  box-shadow: var(--bd-shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bd-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bd-shadow-md);
}

/* Bublina pro ikonu */
.bd-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.bd-icon.sky   { background: var(--sky-bg);   color: var(--sky-fg); }
.bd-icon.lime  { background: var(--lime-bg);  color: var(--lime-fg); }
.bd-icon.amber { background: var(--amber-bg); color: var(--amber-fg); }
.bd-icon.rose  { background: var(--rose-bg);  color: var(--rose-fg); }
.bd-icon.navy  { background: var(--navy);     color: #fff; }


/* ===================================================================
   3. HEADER (logo, název, topbar, login)
   =================================================================== */

/* Jednolitá modrá přes celou šířku, bez gradientu a linek */
header.container-header,
.container-header,
.container-header .grid-child,
.container-topbar {
  background: var(--navy) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
header.container-header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Logo vlevo od názvu */
.navbar-brand {
  display: flex;
  align-items: center;
}
.navbar-brand .brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none !important;
}
.navbar-brand .brand-logo span {
  text-decoration: none !important;
}
.navbar-brand .brand-logo::before {
  content: "";
  display: inline-block;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  align-self: center;
  background-image: url('/images/banners/icona-domy.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 8px;
}

/* --- Topbar: login VLEVO, Kontakt/Přihlášení VPRAVO, vše na jednom řádku --- */
.container-topbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
  max-width: var(--obsah-sirka) !important;
  margin: 0 auto !important;
  padding: 6px 20px !important;
}

/* Odkazy Kontakt / Přihlášení (šířku a centrování řeší .container-topbar výše) */
.bd-header-links {
  display: flex;
  gap: 28px;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: .9rem;
}
.container-topbar > .mod-custom {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
.bd-header-link {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 500;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bd-header-link:hover {
  opacity: .8;
}

/* --- Login v topbaru: skrýt celý formulář (přihlašuje se na stránce) --- */
.container-topbar .mod-login__userdata,
.container-topbar .mod-login__password,
.container-topbar .mod-login__remember,
.container-topbar .mod-login__submit,
.container-topbar .mod-login__options,
.container-topbar .mod-login .form-group,
.container-topbar .mod-login .input-group,
.container-topbar .mod-login input,
.container-topbar .mod-login label,
.container-topbar .mod-login ul,
.container-topbar .mod-login-logout ul {
  display: none !important;
}

/* Login blok vlevo (v HTML je až druhý, proto order: -1) */
.container-topbar > .mod-login,
.container-topbar > form.mod-login,
.container-topbar > .mod-login-logout,
.container-topbar > form.mod-login-logout {
  order: -1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

/* Pozdrav "Ahoj, Miri" */
.container-topbar .mod-login-logout__login-greeting,
.container-topbar .login-greeting {
  color: #fff !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Tlačítko Odhlásit */
.container-topbar .mod-login-logout__button,
.container-topbar .logout-button {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
}
.container-topbar .mod-login button,
.container-topbar .mod-login .btn,
.container-topbar .mod-login-logout button,
.container-topbar .logout-button button {
  padding: 4px 12px !important;
  font-size: .85rem !important;
  line-height: 1.2 !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 5px !important;
  width: auto !important;
  white-space: nowrap !important;
  margin: 0 !important;
}


/* ===================================================================
   4. HERO BANNER
   =================================================================== */

.bd-hero {
  position: relative;
  width: 100%;
  height: 260px;
  background-image: url('/images/headers/BDM-banner.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0;
}

.bd-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(30,58,95,.60) 0%,
              rgba(30,58,95,.45) 45%,
              rgba(30,58,95,.15) 75%,
              rgba(30,58,95,.03) 100%);
}

.bd-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--obsah-sirka);
  width: 100%;
  margin: 0 auto;
  padding: 12px 20px;
  box-sizing: border-box;
  color: #fff;
}

.bd-hero__title {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px 0;
  color: #fff;
  border-left: 5px solid var(--blue);
  padding-left: 1.2rem;
}

.bd-hero__perex {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 8px 0;
  color: rgba(255,255,255,.92);
}

.bd-hero__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.bd-hero__buttons .bd-btn {
  padding: 8px 16px;
  font-size: .9rem;
}


/* ===================================================================
   5. DLAŽDICE
   =================================================================== */

.bd-tiles {
  width: 100%;
  background: var(--bd-background);
  padding: .5rem 0;
}

.bd-tiles__inner {
  max-width: var(--obsah-sirka);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.bd-tile {
  background: #fff;
  border: 1px solid var(--bd-border);
  border-radius: 12px;
  padding: .6rem .8rem;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bd-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
}

.bd-tile__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: .3rem;
}
.bd-tile__icon.sky    { background: var(--sky-bg); }
.bd-tile__icon.lime   { background: var(--lime-bg); }
.bd-tile__icon.amber  { background: var(--amber-bg); }
.bd-tile__icon.violet { background: #ede9fe; }

.bd-tile__title {
  color: var(--navy);
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .2rem 0;
}
.bd-tile__desc {
  color: var(--bd-muted);
  font-size: .78rem;
  line-height: 1.3;
  margin: 0 0 .3rem 0;
  flex-grow: 1;
}
.bd-tile__arrow {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
}


/* ===================================================================
   6. AKTUÁLNÍ OZNÁMENÍ
   =================================================================== */

.bd-notices {
  width: 100%;
  background: var(--bd-background);
  padding: .5rem 0;
}
.bd-notices__inner {
  max-width: var(--obsah-sirka);
  margin: 0 auto;
  padding: 0 20px;
}

.bd-notices__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.bd-notices__head h2 {
  color: var(--navy);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}
.bd-notices__all {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
}
.bd-notices__all:hover { text-decoration: underline; }

.bd-notices__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.bd-notice {
  border-radius: 10px;
  padding: .6rem .8rem;
  border: 1px solid transparent;
}
.bd-notice__top {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .3rem;
}
.bd-notice__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.bd-notice__label {
  font-weight: 700;
  font-size: .9rem;
}
.bd-notice__date {
  font-weight: 700;
  font-size: .8rem;
  margin-bottom: .25rem;
}
.bd-notice__text {
  color: #444;
  font-size: .78rem;
  line-height: 1.3;
  margin: 0 0 .35rem 0;
}
.bd-notice__more {
  font-weight: 600;
  font-size: .78rem;
  text-decoration: none;
}

/* Barevné varianty karet */
.bd-notice--sky   { background: #eff6ff; border-color: #dbeafe; }
.bd-notice--sky   .bd-notice__icon { background: var(--sky-bg); }
.bd-notice--sky   .bd-notice__label,
.bd-notice--sky   .bd-notice__date,
.bd-notice--sky   .bd-notice__more { color: var(--sky-fg); }

.bd-notice--lime  { background: #f0fdf4; border-color: #dcfce7; }
.bd-notice--lime  .bd-notice__icon { background: var(--lime-bg); }
.bd-notice--lime  .bd-notice__label,
.bd-notice--lime  .bd-notice__date,
.bd-notice--lime  .bd-notice__more { color: var(--lime-fg); }

.bd-notice--amber { background: #fffbeb; border-color: #fef3c7; }
.bd-notice--amber .bd-notice__icon { background: var(--amber-bg); }
.bd-notice--amber .bd-notice__label,
.bd-notice--amber .bd-notice__date,
.bd-notice--amber .bd-notice__more { color: var(--amber-fg); }

.bd-notice--rose  { background: #fff1f2; border-color: #ffe4e6; }
.bd-notice--rose  .bd-notice__icon { background: var(--rose-bg); }
.bd-notice--rose  .bd-notice__label,
.bd-notice--rose  .bd-notice__date,
.bd-notice--rose  .bd-notice__more { color: var(--rose-fg); }


/* ===================================================================
   7. KONTAKTY
   =================================================================== */

.bd-contacts {
  width: 100%;
  background: var(--bd-background);
  padding: .4rem 0 .3rem;
}
.bd-contacts__inner {
  max-width: var(--obsah-sirka);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Hlavička (nadpis + odkaz "Všechny kontakty") --- */
.bd-contacts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-bottom: .6rem;
}
.bd-contacts__head h2 {
  color: var(--navy);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}
.bd-contacts__all {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.bd-contacts__all:hover { text-decoration: underline; }

/* --- Mřížka karet --- */
.bd-contacts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}

/* --- Karta --- */
.bd-contact {
  background: #fff;
  border: 1px solid var(--bd-border);
  border-radius: 10px;
  padding: .7rem .9rem;
  min-width: 0;
}
.bd-contact__top {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}
.bd-contact__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.bd-contact__icon.sky   { background: var(--sky-bg); }
.bd-contact__icon.lime  { background: var(--lime-bg); }
.bd-contact__icon.amber { background: var(--amber-bg); }

.bd-contact__label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  min-width: 0;
  overflow-wrap: anywhere;
}
.bd-contact__name {
  color: #555;
  font-size: .9rem;
  margin-bottom: .3rem;
  overflow-wrap: anywhere;
}
.bd-contact__phone {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--navy);
  font-size: .95rem;
  white-space: nowrap;
}
.bd-contact__email {
  color: var(--blue);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  display: block;
  margin-bottom: .3rem;
  overflow-wrap: anywhere;
}
.bd-contact__email:hover { text-decoration: underline; }

/* Telefon je odkaz – zachovat vzhled */
a.bd-contact__phone {
  display: flex;
  text-decoration: none;
}
a.bd-contact__phone:hover { text-decoration: underline; }

/* Odkaz "Více informací" v kontaktní kartě */
.bd-contact__more {
  display: inline-block;
  margin-top: .5rem;
  color: var(--blue);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
}
.bd-contact__more:hover { text-decoration: underline; }

/* ===================================================================
   7a. KONTAKTY – RESPONZIVITA
   =================================================================== */

/* Tablet / menší notebook: 2 sloupce */
@media (max-width: 1100px) {
  .bd-contacts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobil: 1 sloupec */
@media (max-width: 600px) {
  .bd-contacts__inner {
    padding: 0 14px;
  }
  .bd-contacts__head h2 {
    font-size: 1.2rem;
  }
  .bd-contacts__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: .8rem;
  }
  .bd-contact {
    padding: .7rem .8rem;
  }
  .bd-contact__phone {
    font-size: 1rem;   /* větší cíl pro klepnutí */
  }
}

/* ===================================================================
   8. PATIČKA
   =================================================================== */

.container-footer,
footer.container-footer,
.container-footer > .grid-child {
  background: var(--navy) !important;
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.bd-footer {
  background: var(--navy);
  color: rgba(255,255,255,.75);
  width: 100%;
  margin-top: 0;
}

.bd-footer__inner {
  max-width: var(--obsah-sirka);
  margin: 0 auto;
  padding: 1rem 20px .8rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Nadpisy sloupců */
.bd-footer__col h4 {
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .7rem 0;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
}

/* Odkazy ve sloupcích */
.bd-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bd-footer__col ul li {
  margin-bottom: .4rem;
}
.bd-footer__col ul li a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: .9rem;
  transition: color .15s ease;
}
.bd-footer__col ul li a:hover {
  color: #fff;
}

/* První sloupec: logo + název */
.bd-footer__logo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: .7rem;
  min-height: 1.5rem;
}
.bd-footer__logo-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}
.bd-footer__logo-text {
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
}
.bd-footer__desc {
  font-size: .85rem;
  line-height: 1.4;
  color: rgba(255,255,255,.7);
  margin: 0;
}

/* Spodní copyright lišta */
.bd-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.15);
}
.bd-footer__bottom-inner {
  max-width: var(--obsah-sirka);
  margin: 0 auto;
  padding: .7rem 20px;
  font-size: .8rem;
  color: rgba(255,255,255,.6);
}
/* Verze Joomly v patičce */
.bd-footer__verze {
  margin-left: 1rem;
  opacity: .7;
  font-size: .78rem;
}

/* ===================================================================
   9. JEDNOSLOUPCOVÝ LAYOUT (jen domovská stránka, itemid-101)
   =================================================================== */

/* Skrýt postranní sloupce a hlavní obsah */
body.itemid-101 .container-sidebar-left,
body.itemid-101 .container-sidebar-right,
body.itemid-101 .container-component,
body.itemid-101 main {
  display: none !important;
}

/* Moduly v top-a skládat pod sebe (dlaždice → oznámení → kontakty) */
body.itemid-101 .container-top-a {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
body.itemid-101 .container-top-a > .grid-child {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Odstranit Cassiopeia .card obal kolem modulů */
body.itemid-101 .container-top-a .card,
body.itemid-101 .top-a.card,
body.itemid-101 .container-top-a .card-body,
body.itemid-101 .container-top-a .mod-custom {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  --card-bg: transparent !important;
  --card-border-width: 0 !important;
}

/* Bez mezer nad patičkou */
body.itemid-101 .site-grid {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.itemid-101 .container-bottom-b {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Pozadí --- */
/* Základ: bílá. Header a patička si modrou nastavují samy. */
body.site {
  background: #fff !important;
}

/* Domovská stránka: středová část (dlaždice, oznámení, kontakty) světle šedá */
body.itemid-101 .site-grid,
body.itemid-101 .container-top-a {
  background: var(--bd-background) !important;
}

/* Podstránky: obsah na bílém, čitelný text */
body:not(.itemid-101) .site-grid,
body:not(.itemid-101) main,
body:not(.itemid-101) .container-component {
  background: #fff !important;
  color: #222 !important;
}


/* ===================================================================
   10. ČLÁNEK "Porucha výtahu" – kontaktní karty
   =================================================================== */

.clanek-vytah {
  max-width: 700px;
}

.clanek-vytah__nadpis {
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
}

.clanek-vytah__karty {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Mřížka ikona | jméno | telefon – sloupce sedí pod sebou napříč kartami */
.clanek-vytah__karta {
  display: grid;
  grid-template-columns: 48px minmax(190px, auto) auto;
  align-items: center;
  gap: 0 1rem;

  background: #fff;
  border: 1px solid var(--bd-border);
  border-radius: 12px;
  padding: 1rem 1.3rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);

  transition: transform .15s ease, box-shadow .15s ease;
}
.clanek-vytah__karta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
}

.clanek-vytah__ikona {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sky-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.clanek-vytah__jmeno {
  font-weight: 600;
  color: var(--navy);
  font-size: 1.05rem;
}

.clanek-vytah__tel {
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
}
.clanek-vytah__tel:hover {
  text-decoration: underline;
}

/* --- Nouzová informace (samostatný blok pod kartami) --- */
.clanek-vytah__nouze {
  margin-top: 1.8rem;
  background: #fdeceb;
  border: 1px solid #f0b6b1;
  border-left: 5px solid #ba372a;
  border-radius: 0;
  padding: 1rem 1.2rem;
}

/* Pojistka: prázdný box se nezobrazí */
.clanek-vytah__nouze:empty {
  display: none;
}

.clanek-vytah__nouze-nadpis {
  display: block;
  color: #8f271d;
  font-size: 1rem;
  margin-bottom: .35rem;
}

.clanek-vytah__nouze-text {
  color: #ba372a;
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
}

/* --- Mobil --- */
@media (max-width: 560px) {
  .clanek-vytah__karta {
    grid-template-columns: 48px 1fr;
    row-gap: .2rem;
  }
  .clanek-vytah__tel {
    grid-column: 2;
  }
}
/* ===================================================================
   11. PODSTRÁNKY (menu, obsah, Phoca Download)
   =================================================================== */

/* Hlavní menu */
#menu-velke a {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.0 !important;
  padding: .35rem .6rem !important;
  display: inline-block;
}
.card:has(#menu-velke) > .card-header {
  font-size: 1.0rem !important;
}
.card:has(#menu-velke) {
  background-color: #eaf1fb !important;
  border: 1px solid #c7dcf3 !important;
  border-radius: 8px;
}

/* Top menu */
#menu-top a {
  font-size: 1.2rem !important;
}

/* Nadpis článku */
.container-component h1 {
  font-size: 1.3rem !important;
}

/* Nadpisy podkategorií (Aktuality, Formuláře) */
.container-component h3.page-header.item-title,
.container-component h3.page-header.item-title a {
  font-size: 0.8rem !important;
}

/* Phoca Download – složky pod sebou, plná šířka */
#phoca-dl-categories-box .row > .col {
  flex: 0 0 100%;
  max-width: 100%;
}
#phoca-dl-category-box .pd-ctitle,
#phoca-dl-categories-box .card-title {
  font-size: 1rem !important;
}

/* Drobečková navigace – viditelná na podstránkách */
.mod-breadcrumbs,
.breadcrumb {
  display: block !important;
}

/* --- Přihlašovací formulář NA STRÁNCE (nikdy ne v topbaru!) ---
   POZOR: selektory musí být zakotvené v .container-component.
   Zápis přes body:not(.itemid-101) nebo .com_users zasáhne i topbar
   a kvůli vyšší specificitě přebije pravidla v sekci 3. */
.container-component .mod-login,
.container-component form.mod-login,
.container-component .mod-login-logout,
.container-component .login {
  max-width: 420px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Pole formuláře tady naopak viditelná */
.container-component .mod-login__userdata,
.container-component .mod-login__password,
.container-component .mod-login__remember,
.container-component .mod-login__submit,
.container-component .mod-login__options {
  display: block !important;
  width: 100% !important;
}

/* Hláška o (od)hlášení – taky užší */
.container-component .alert {
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===================================================================
   12. ÚKLID – skryté prvky
   =================================================================== */

/* Prázdné spodní pozice po odpublikovaných modulech */
.container-bottom-a,
.container-bottom-b,
.grid-child:empty {
  display: none !important;
}

/* Původní Cassiopeia patička (nahrazena vlastní) */
.container-footer > .grid-child:not(:has(.bd-footer)),
footer.container-footer .mod-footer,
.footer .mod-footer {
  display: none !important;
}

/* Statistika "Kdo je online" */
.mod-whosonline,
[class*="whosonline"] {
  display: none !important;
}
/* ===================================================================
   14. PRUH – PROBÍHAJÍCÍ HLASOVÁNÍ
   (modul mod_hlasovani_pruh, pozice mezi hero a dlaždicemi)
   =================================================================== */

.bd-vote-bar {
  width: 100%;
  background: var(--bd-background);
  padding: .8rem 0 .2rem;
}

.bd-vote-bar__inner {
  max-width: var(--obsah-sirka);
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  align-items: center;
  gap: 1rem;

  box-sizing: border-box;
}

/* Vlastní pruh – teplý akcent, ať se odliší od modré a šedé */
.bd-vote-bar__inner {
  background: linear-gradient(90deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fdba74;
  border-left: 5px solid #e8821e;
  border-radius: 10px;
  padding: .9rem 1.2rem;
  box-shadow: var(--bd-shadow-sm);
}

.bd-vote-bar__icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.bd-vote-bar__text {
  flex-grow: 1;
  min-width: 0;
}

.bd-vote-bar__title {
  color: #9a3412;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .15rem;
}

.bd-vote-bar__sub {
  color: #7c2d12;
  font-size: .88rem;
  line-height: 1.35;
}

.bd-vote-bar__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;

  background: #e8821e;
  color: #fff !important;
  text-decoration: none !important;

  font-weight: 700;
  font-size: .92rem;

  padding: .55rem 1.2rem;
  border-radius: 8px;

  transition: background .15s ease;
}
.bd-vote-bar__btn:hover {
  background: #c96a12;
}

/* Domovská stránka – modul sedí v top-a, nesmí ho zabalit Cassiopeia karta */
body.itemid-101 .container-top-a .mod-hlasovani-pruh,
.bd-vote-bar {
  background: var(--bd-background);
}

/* Mobil */
@media (max-width: 600px) {
  .bd-vote-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
  }
  .bd-vote-bar__btn {
    width: 100%;
    justify-content: center;
  }
}

====================================================================
CSS – vlož do user.css jako SEKCE 17 (nad sekci Mobil!)
====================================================================
 
/* ===================================================================
   17. SVÁTEČNÍ PRUHY (Vánoce / Velikonoce)
   =================================================================== */
 
.bd-svatek {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  max-width: 1140px;
  margin: 0 auto 1.5rem;
  padding: .9rem 1.3rem;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5;
}
 
.bd-svatek__ikona {
  font-size: 1.4rem;
  flex-shrink: 0;
}
 
/* Vánoce – tmavě modrá */
.bd-svatek--vanoce {
  background: var(--navy);
  color: #fff;
}
.bd-svatek--vanoce strong { color: #fff; }
 
/* Velikonoce – jarní zelená */
.bd-svatek--velikonoce {
  background: #f4f8ec;
  color: #3b6d11;
  border: 1px solid #c0dd97;
}
.bd-svatek--velikonoce strong { color: #27500a; }
 
/* Mobil */
@media (max-width: 560px) {
  .bd-svatek {
    flex-direction: column;
    gap: 8px;
    font-size: .95rem;
  }
}
/* ===================================================================
   18. POZVÁNKY NA SCHŮZI / SHROMÁŽDĚNÍ
   =================================================================== */

.bd-pozvanka {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1140px;
  margin: 0 auto 1.5rem;
  padding: 1.1rem 1.4rem;
  border-radius: 10px;
}

.bd-pozvanka__ikona {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.bd-pozvanka__nadpis {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
}

.bd-pozvanka__udaje {
  font-size: .95rem;
  margin-top: 3px;
  line-height: 1.5;
}

.bd-pozvanka__odkaz {
  display: inline-block;
  margin-top: 5px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.bd-pozvanka__odkaz:hover { text-decoration: underline; }

/* Bytové družstvo – tmavě modrá */
.bd-pozvanka--bd {
  background: var(--navy);
  color: #fff;
}
.bd-pozvanka--bd strong,
.bd-pozvanka--bd .bd-pozvanka__odkaz { color: #fff; }

/* SVJ1 – modrá */
.bd-pozvanka--svj1 {
  background: #e6f1fb;
  color: #0c447c;
  border: 1px solid #85b7eb;
}
.bd-pozvanka--svj1 strong { color: #042c53; }
.bd-pozvanka--svj1 .bd-pozvanka__odkaz { color: #185fa5; }

/* SVJ2 – zelená */
.bd-pozvanka--svj2 {
  background: #eaf3de;
  color: #27500a;
  border: 1px solid #97c459;
}
.bd-pozvanka--svj2 strong { color: #173404; }
.bd-pozvanka--svj2 .bd-pozvanka__odkaz { color: #3b6d11; }

/* Mobil */
@media (max-width: 560px) {
  .bd-pozvanka {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}
===================================================================
CSS – vlož do user.css jako SEKCE 19 (nad sekci Mobil!)
====================================================================
 
/* ===================================================================
   19. STRÁNKA KONTAKTY (orgány BD a SVJ)
   =================================================================== */

.kont {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.kont__hlava {
  padding: .7rem 1.1rem; border-radius: 8px 8px 0 0;
  font-weight: 700; font-size: 1.05rem;
}
.kont__hlava--bd   { background: var(--navy); color: #fff; }
.kont__hlava--svj1 { background: #e6f1fb; color: #0c447c; border: 1px solid #85b7eb; }
.kont__hlava--svj2 { background: #eaf3de; color: #27500a; border: 1px solid #97c459; }

/* Odkaz na dokument (Výpis z OR) v hlavičce bloku Bytové družstvo */
.kont__dokument {
  margin-bottom: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid #eef1f5;
}
.kont__dokument a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.kont__dokument a:hover {
  text-decoration: underline;
}

.kont__telo {
  border: 1px solid #d7dde5; border-top: none;
  border-radius: 0 0 8px 8px; padding: 1.1rem 1.3rem;
}
.kont__telo--svj1 { border-color: #85b7eb; }
.kont__telo--svj2 { border-color: #97c459; }

.kont__podnadpis { font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.kont__podnadpis--odsazeny {
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid #eef1f5;
}

.kont__mrizka {
  display: grid;
  grid-template-columns: 160px 320px auto;
  gap: .5rem 1.5rem;
  align-items: center;
}
.kont__mrizka--bezkontaktu { grid-template-columns: 160px 320px; }

.kont__role { color: #666; }
.kont__role--mezera { margin-top: .7rem; }
.kont__jmeno { font-weight: 600; }
.kont__jmeno--velky { margin-bottom: .3rem; }
.kont__kontakt { color: var(--blue); text-decoration: none; }

.kont__svj-rada {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 2rem;
}

.kont__sekce-nadpis {
  font-weight: 700; color: var(--navy); font-size: 1.05rem;
  margin-bottom: .6rem; padding-bottom: .3rem; border-bottom: 2px solid #eef1f5;
}
.kont__havarie {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .8rem; font-size: .9rem; margin-bottom: 1.5rem;
}
.kont__havarie-karta { display: flex; flex-direction: column; }

.kont__spodek { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.kont__box {
  background: #f7f8fa; border: 1px solid #dfe3e8;
  border-radius: 8px; padding: 1rem 1.2rem; font-size: .9rem;
}
.kont__box-nadpis { font-weight: 700; color: var(--navy); margin-bottom: .4rem; }

/* Telefony jako prostý text – bez odkazu, bez podtržení */
.notel {
  color: inherit;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

/* Mobil */
@media (max-width: 560px) {
  .kont__svj-rada,
  .kont__spodek,
  .kont__havarie { grid-template-columns: 1fr; }
  .kont__mrizka,
  .kont__mrizka--bezkontaktu { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .kont__mrizka .kont__role { margin-top: .5rem; }
}
/* ===================================================================
   13. MOBIL (responzivita)
   =================================================================== */

@media (max-width: 900px) {
  .bd-tiles__inner,
  .bd-notices__grid,
  .bd-contacts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bd-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .bd-hero {
    height: auto;
    min-height: 220px;
  }
  .bd-hero__title {
    font-size: 22px;
  }
  .bd-hero__buttons {
    flex-direction: column;
  }
  .bd-hero__buttons .bd-btn {
    justify-content: center;
  }
  .bd-header-links {
    gap: 16px;
    font-size: .85rem;
  }
}

@media (max-width: 500px) {
  .bd-tiles__inner,
  .bd-notices__grid,
  .bd-contacts__grid,
  .bd-footer__inner {
    grid-template-columns: 1fr;
  }
  .navbar-brand .brand-logo::before {
    width: 42px;
    height: 42px;
  }
}
/* ===================================================================
   15. PATIČKA – SPRÁVCOVSKÝ 5. SLOUPEC
   (modul mod_bd_paticka; sloupec vidí jen přihlášený Super User)
   =================================================================== */

/* Když je přihlášený správce, mřížka má 5 sloupců místo 4 */
.bd-footer__inner--sprava {
  grid-template-columns: repeat(5, 1fr) !important;
}

/* Odlišení správcovského sloupce – jemný oranžový akcent */
.bd-footer__col--sprava {
  border-left: 2px solid rgba(232, 130, 30, .5);
  padding-left: 18px;
}

.bd-footer__col--sprava h4 {
  color: #f6b26b !important;
}

.bd-footer__col--sprava a {
  color: #ffd9b0 !important;
}
.bd-footer__col--sprava a:hover {
  color: #fff !important;
}

/* Položka, která ještě nemá odkaz (SVJ1 / SVJ2) */
.bd-footer__brzy {
  color: rgba(255, 255, 255, .35);
  cursor: default;
}
.bd-footer__brzy em {
  font-style: normal;
  font-size: .8em;
  opacity: .8;
}

/* Menší obrazovky – ať se 5 sloupců nemačká */
@media (max-width: 1100px) {
  .bd-footer__inner--sprava {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .bd-footer__col--sprava {
    border-left: none;
    padding-left: 0;
    border-top: 2px solid rgba(232, 130, 30, .5);
    padding-top: 14px;
  }
}

@media (max-width: 700px) {
  .bd-footer__inner--sprava {
    grid-template-columns: 1fr !important;
  }
}

/* =================== KONEC user.css =================== */