/* ============ Praha 1 — site styles (header + footer) ============
   Vychází z prototypu wwwroot/prototypes/styles.css.
   Zatím obsahuje jen design tokeny, base, hlavičku a patičku. */

/* ---------- design tokens ---------- */
:root{
  --bg:        #F2F2F2;
  --bg-utility:#EDEDED;
  --card-bg:   #F2F2F2;
  --ink:       #1A1A1A;
  --ink-2:     #333333;
  --ink-3:     #666666;
  --line:      #BFBFBF;
  --line-2:    #DDDDDD;
  --pastel:    rgb(217,221,236);
  --blue:      rgb(65,89,189);
  --blue-deep: rgb(14,38,138);

  /* barvy štítků/kategorií (z Figma palety) */
  --t-ink:        #1A1A1A;
  --t-kultura:    rgb(244,155,161);
  --t-sport:      rgb(179,187,217);
  --t-skolstvi:   rgb(221,221,221);
  --t-politicke:  rgb(159,180,229);
  --t-socialni:   rgb(255,163,110);
  --t-deti:       rgb(255,209,183);
  --t-zdravotni:  rgb(136,4,11);
  --t-seniory:    rgb(175,221,182);
  --t-svc:        rgb(254,237,79);

  /* tmavá patička (dle grafiky) */
  --footer-bg:    #1A1A1A;
  --footer-text:  rgba(255,255,255,.72);
  --footer-line:  rgba(255,255,255,.16);

  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans:  "Manrope", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------- base ---------- */
*{ box-sizing:border-box }
html,body{ background:var(--bg); color:var(--ink); }
body{
  margin:0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline }
img{ max-width:100%; display:block }
button{ font-family:inherit }

/* ---------- skip link (WCAG 2.4.1) ---------- */
.skip-link{
  position: absolute;
  top: 0; left: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
  transform: translateY(0);
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* viditelný focus na interaktivních prvcích (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ============ Utility bar ============ */
.utility-bar{
  background: var(--bg-utility);
  border-bottom: 1px solid #E3E3E3;
}
.utility-inner{
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 80px;
  display: flex;
  gap: 32px;
  justify-content: flex-end;
  align-items: center;
}
.utility-link{ font-size: 14px; color: var(--ink); }
.utility-pill{
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
}
.utility-pill:hover{ background: var(--blue-deep); text-decoration:none }

/* ============ Header ============ */
.site-header{ background: var(--bg); }
.header-inner{
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.logo-link{ color: var(--ink); display:inline-flex; }
.logo-link:hover{ text-decoration:none }
.logo-svg{ height: 60px; width:auto; display:block; }
.primary-nav{
  display:flex;
  align-items:center;
  gap: 40px;
}
.nav-item{
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 0;
  position: relative;
}
.nav-item:hover{ text-decoration:none }
.nav-item:hover::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom: 2px;
  height: 2px;
  background: var(--blue);
}
.search-pill{
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px 4px 16px;
  width: 212px;
  height: 40px;
}
.search-pill input{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
}
.search-pill input::placeholder{ color: var(--ink-3); }
.search-pill button{
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 4px;
  cursor: pointer;
}

/* hamburger toggle — skrytý na desktopu */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 10px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  margin-left: auto;
  z-index: 1001;
}
.nav-toggle span{
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(10px) rotate(45deg) }
.nav-toggle.is-open span:nth-child(2){ opacity: 0 }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-10px) rotate(-45deg) }

/* ============ Footer (tmavá — dle grafiky) ============ */
.site-footer{
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 64px 0 32px;
}
.footer-inner{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
.footer-top{
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.5fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-heading{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin: 0 0 24px;
}
.footer-links{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 14px;
}
.footer-links a{ color: var(--footer-text); font-size: 16px; }
.footer-links a:hover{ color: #fff; }
.footer-text{
  font-size: 16px;
  color: var(--footer-text);
  margin: 0;
  line-height: 1.6;
}
.footer-text a{ color: var(--footer-text); }
.footer-text a:hover{ color:#fff; }
/* foto budovy úřadu — fallback barva, pokud foto chybí */
.footer-building{
  align-self: stretch;
  min-height: 200px;
  border-radius: 8px;
  background-color: #2a2a2a;
  background-image: url('/assets/foto/uradni-budova.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer-brand-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 8px 0 40px;
}
.footer-brand{ color:#fff; display:inline-flex; }
.footer-brand:hover{ text-decoration:none }
.footer-brand .logo-svg{ height: 56px; }
.footer-social{
  display: flex;
  gap: 18px;
  align-items: center;
}
.footer-social a{
  color: #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.footer-social a:hover{ opacity:.8; text-decoration:none }

.footer-meta{
  display:flex;
  gap: 32px;
  align-items:center;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--footer-line);
  font-size: 14px;
  color: var(--footer-text);
}
.footer-meta a{ color: var(--footer-text); }
.footer-meta a:hover{ color:#fff; }

/* ============ Responsive ============ */
/* ≤ 1279 px : zúžit okraje */
@media (max-width: 1279px){
  .utility-inner,
  .header-inner,
  .footer-inner{
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ≤ 1023 px : tablet — nav se mění na hamburger */
@media (max-width: 1023px){
  .utility-inner{ gap: 16px; padding: 12px 24px; }
  .utility-inner .utility-link:nth-child(1),
  .utility-inner .utility-link:nth-child(2){ display: none }

  .header-inner,
  .footer-inner{
    padding-left: 24px;
    padding-right: 24px;
  }

  .header-inner{ padding-top: 20px; padding-bottom: 20px; }
  .nav-toggle{ display: flex }
  .primary-nav{
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 88vw);
    background: var(--bg);
    box-shadow: -2px 0 24px rgba(0,0,0,.18);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 100px 32px 40px;
    gap: 8px;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1000;
  }
  .primary-nav.is-open{ transform: translateX(0) }
  body.nav-open{ overflow: hidden }
  .nav-item{
    font-size: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-2);
  }
  .nav-item:hover::after{ display: none }
  .search-pill{ width: 100%; margin-top: 16px }
  .logo-svg{ height: 48px }

  /* footer: 2 sloupce, foto pod text */
  .footer-top{
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-building{ grid-column: 1 / -1; min-height: 220px; }
}

/* ≤ 767 px : mobil */
@media (max-width: 767px){
  body{ font-size: 15px }

  .utility-inner{ padding: 10px 16px; gap: 12px }
  .utility-pill{ padding: 4px 10px; font-size: 13px }
  .utility-link{ font-size: 13px }

  .header-inner,
  .footer-inner{
    padding-left: 16px;
    padding-right: 16px;
  }
  .logo-svg{ height: 40px }

  .site-footer{ padding-top: 40px; }
  .footer-top{
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }
  .footer-heading{ margin-bottom: 16px }
  .footer-links{ gap: 10px }
  .footer-brand-row{ flex-direction: column; align-items: flex-start; gap: 24px }
  .footer-meta{ font-size: 13px; gap: 12px 20px; padding-top: 16px }
}

/* ============ Content page (stranka) ============
   Typografie vychází z prototypu (obecna-stranka.html). Tělo `obsah` je
   importované WP HTML, proto stylujeme přímo elementy a rozestupy řešíme
   marginy (ne flexem) — funguje nezávisle na zanoření obsahu. */
.page-inner{
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 80px 64px;
}
.page-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 40px;
}
.page-body{
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: break-word;
}
.page-body > :first-child{ margin-top: 0 }
.page-body > :last-child{ margin-bottom: 0 }
.page-body p{ margin: 0 0 16px; hyphens: auto }
.page-body h2{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 36px 0 12px;
}
.page-body h3{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin: 28px 0 8px;
}
.page-body h4{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  margin: 20px 0 6px;
}
.page-body strong, .page-body b{ font-weight: 600 }
.page-body em, .page-body i{ font-style: italic }
.page-body a{
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-body a:hover{ color: var(--blue-deep) }
.page-body ul,
.page-body ol{ margin: 0 0 16px; padding-left: 24px }
.page-body li{ margin: 6px 0 }
.page-body li::marker{ color: var(--blue) }
.page-body ol li::marker{ font-weight: 600 }
.page-body blockquote{
  margin: 24px 0;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--blue);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.page-body img{ max-width: 100%; height: auto; border-radius: 6px }
.page-body figure{ margin: 24px 0 }
.page-body figcaption{ font-size: 14px; color: var(--ink-3); margin-top: 8px }
.page-body hr{ border: 0; border-top: 1px solid var(--line); margin: 24px 0 }
.page-body table{
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 15px;
}
.page-body th,
.page-body td{
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.page-body th{ background: var(--bg-utility); font-weight: 600 }
/* respect WordPress alignment classes from migrated content */
.page-body .has-text-align-center{ text-align: center }
.page-body .has-text-align-right{ text-align: right }

@media (max-width: 1279px){
  .page-inner{ padding-left: 40px; padding-right: 40px }
}
@media (max-width: 1023px){
  .page-inner{ padding-left: 24px; padding-right: 24px }
  .page-title{ font-size: 44px }
  .page-body h2{ font-size: 26px }
  .page-body h3{ font-size: 18px }
  .page-body blockquote{ font-size: 24px }
}
@media (max-width: 767px){
  .page-inner{ padding: 24px 16px 40px }
  .page-title{ font-size: 34px; margin-bottom: 28px }
  .page-body blockquote{ font-size: 20px; padding-left: 20px }
}


/* ============================================================ */
/* DESIGN SYSTEM — komponenty (přeneseno z prototypes/styles.css) */
/* Chrome (tokeny/base/utility/hlavička/patička) zůstává výše.      */
/* Pozn.: některé komponenty (gridy home/sekce) v prototypu spoléhají */
/* na Bootstrap (.row/.col) — ten řešíme až u příslušných šablon.    */
/* ============================================================ */

/* ============ Layout container ============ */
.container-1440{
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 80px;
  padding-right: 80px;
}

/* ============ Section scaffolding ============ */
.site-main{ padding-top: 8px; padding-bottom: 56px }
.section{
  max-width: 1440px;
  margin: 0 auto 56px;
  padding: 0 80px;
}
.section-head{
  display:flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 24px;
}
.section-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.section-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 16px;
  color: var(--ink);
}
.section-link svg{ padding-top:2px; }
.section-link svg{ transition: transform .15s ease; }
.section-link:hover{ text-decoration: none }
.section-link:hover svg{ transform: translateX(3px) }

/* ============ Banner ============ */
.banner-section{
  max-width: 1440px;
  margin: 0 auto 32px;
  padding: 0 80px;
}
.banner-carousel{
  border-radius: 16px;
  overflow: hidden;
}
.banner-carousel .carousel-item{
  transition: transform .6s ease-in-out;
}
.banner-card{
  display: grid;
  grid-template-columns: 784px 1fr;
  height: 440px;
  border-radius: 16px;
  overflow: hidden;
}
.banner-image{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #d8d3cd;
}
.banner-image--alt2{
  background: linear-gradient(135deg, #b8a586 0%, #6b5b3f 60%, #3d3221 100%);
}
.banner-image--alt3{
  background: linear-gradient(135deg, #93a3b8 0%, #4d6479 60%, #2a3848 100%);
}
.banner-text{
  background: var(--pastel);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.banner-text--alt2{ background: rgb(232,222,205) }
.banner-text--alt3{ background: rgb(205,215,228) }
.banner-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.banner-lead{
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  max-width: 44ch;
}

/* ============ Scroll bar / pager ============ */
.scroll-bar{
  max-width: 1440px;
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
.scroll-track{
  flex: 1;
  height: 1px;
  background: var(--ink);
  position: relative;
}
.scroll-thumb{
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  width: 20%;
  background: var(--ink);
  border-radius: 999px;
  transition: left .3s ease, width .3s ease;
}
.scroll-arrows{ display:flex; gap: 8px }
.round-btn{
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.round-btn:hover{ background: var(--ink); color: #fff }

/* ============ News (Aktuality) row ============ */
.news-row{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.news-row::-webkit-scrollbar{ display: none }
.news-card{
  flex: 0 0 calc((100% - 16px*4) / 5);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  border-radius: 8px;
}
.news-thumb{
  aspect-ratio: 275 / 180;
  border-radius: 8px;
  background: linear-gradient(135deg, #d6d3cc 0%, #b9b4ab 100%);
  position: relative;
  overflow: hidden;
}
.news-thumb::before,
.news-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px);
}
.news-thumb.v1{ background: linear-gradient(140deg, #b1a999 0%, #847d6e 100%) }
.news-thumb.v2{ background: linear-gradient(140deg, #d6c0a8 0%, #a48565 100%) }
.news-thumb.v3{ background: linear-gradient(140deg, #99a8b8 0%, #6b7d8f 100%) }
.news-thumb.v4{ background: linear-gradient(140deg, #c4ad8b 0%, #8a6e4b 100%) }
.news-thumb.v5{ background: linear-gradient(140deg, #aaa19a 0%, #7a716a 100%) }
.news-title{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-2);
  margin: 0;
}
.news-meta{
  display:flex;
  gap: 16px;
  align-items:center;
  color: var(--ink-3);
  font-size: 14px;
}
.news-meta .dot{
  display:inline-block;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--ink-3);
}
.news-meta .important{ color: var(--ink-2); font-weight: 500 }

/* ============ Kalendar — panels ============ */
.card-panel{
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0,0,0,.18), 0 2px 12px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.panel-head{
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #999;
}
.panel-head-label{
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
}
.icon-btn{
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
}
.icon-btn:hover{ background: rgba(0,0,0,.06) }

/* events list */
.events-panel{ min-height: 485px }
.events-list{
  flex: 1;
  overflow: hidden;
}
.event-row{
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line-2);
}
.event-row:last-child{ border-bottom: 0 }
.event-title{
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.1;
}
.event-desc{
  font-size: 14px;
  line-height: 1.25;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.event-meta{
  display:flex;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.meta-item{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-2);
}
.event-tags{
  display:flex;
  gap: 4px;
}

/* month selectors */
.month-selects{
  display:flex;
  gap: 12px;
  align-items: center;
}
.select-pill{
  display:inline-flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  width: 165px;
  height: 32px;
  padding: 4px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  cursor:pointer;
  white-space: nowrap;
}
.select-pill:hover{ border-color: var(--ink) }
.select-pill[aria-expanded="true"]{ border-color: var(--ink) }
.select-pill--today{
  width: auto;
  padding: 4px 14px;
  justify-content: center;
}
.select-pill--today:hover{
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.select-pill[aria-expanded="true"] svg{ transform: rotate(180deg) }
.select-pill svg{ transition: transform .15s }

.select-wrap{ position: relative; display: inline-block; }
.select-menu{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 50;
}
.select-menu[hidden]{ display: none; }
.select-menu li{ list-style: none; }
.select-option{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}
.select-option:hover{ background: rgba(0,0,0,.06); }
.select-option.is-selected{
  background: var(--blue);
  color: #fff;
  font-weight: 500;
}

/* calendar grid */
.calendar-panel{ padding-bottom: 0 }
.cal-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 12px;
  flex: 1;
}
.cal-th{
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  padding: 8px 0;
}
.cal-cell{
  aspect-ratio: 1 / 0.9;
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-start;
  padding: 10px 0 6px;
  font-size: 16px;
  color: var(--ink-2);
  position: relative;
  gap: 6px;
}
.cal-cell:nth-child(7n){ border-right: 0 }
.cal-cell.muted{ color: rgb(178,178,178) }
.cal-cell.today .num{
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cal-cell.selected .num{
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 500;
}
.dots{
  display:flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 56px;
}
.dots .d{
  width: 6px; height: 6px;
  border-radius: 999px;
  display:inline-block;
}

/* ============ Tags (events / filters) ============ */
.tag{
  display:inline-flex;
  align-items:center;
  height: 23px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--t-ink);
  border: 0;
  cursor: default;
  white-space: nowrap;
  line-height: 1;
}
button.tag{ cursor:pointer }
.tag-vse{ background: transparent; border: 1px solid var(--ink); }
.tag-kultura{   background: var(--t-kultura) }
.tag-sport{     background: var(--t-sport) }
.tag-skolstvi{  background: var(--t-skolstvi) }
.tag-politicke{ background: var(--t-politicke) }
.tag-socialni{  background: var(--t-socialni) }
.tag-deti{      background: var(--t-deti) }
.tag-zdravotni{ background: var(--t-zdravotni); color: #fff }
.tag-seniory{   background: var(--t-seniory) }
.tag-svc{       background: var(--t-svc) }

.tag-filters{
  margin-top: 16px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-filters .tag.is-active{
  border: 2px solid var(--ink);
}
.calendar-panel .select-pill{ cursor: pointer; }

/* ============ Project list (lower aktuality) ============ */
.project-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.project-card{
  display: block;
  border: 1px solid var(--line, #BFBFBF);
  border-radius: 8px;
  background: transparent;
  aspect-ratio: 2 / 1;
  transition: border-color .15s, background .15s;
}
.project-card:hover{
  border-color: var(--ink);
  background: rgba(0,0,0,.02);
  text-decoration: none;
}


/* ============ Breadcrumb ============ */
.breadcrumb-nav{
  max-width: 1440px;
  margin: 0 auto 32px;
  padding: 16px 80px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--ink-2);
}
.breadcrumb-nav a{
  color: var(--ink-2);
  font-weight: 500;
}
.breadcrumb-nav a:hover{ color: var(--ink); text-decoration: none }
.bc-sep{ color: var(--ink-2); }
.bc-current{ color: var(--ink); font-weight: 500; }

/* ============ Article ============ */
.article{
  max-width: 1440px;
  margin: 0 auto 56px;
  padding: 0 80px;
}
.article-head{
  display: grid;
  grid-template-columns: 524px 1fr;
  gap: 124px;
  margin-bottom: 56px;
}
.article-head-left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  min-height: 420px;
}
.article-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.article-perex-block{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.article-perex{
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.article-tags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-tags li{ list-style: none; }
.article-hero{
  width: 100%;
  height: 420px;
  border-radius: 6px;
  overflow: hidden;
  background: #b5a896;
}
.article-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* article body */
.article-body{
  display: grid;
  grid-template-columns: 524px 1fr;
  gap: 124px;
}
.article-meta{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.article-social{
  display: flex;
  gap: 18px;
  align-items: center;
  color: var(--ink);
}
.article-social a{ color: var(--ink); display: inline-flex; }
.article-social a:hover{ color: var(--blue); }
.article-attrs{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.article-attrs li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--ink-2);
}
.article-attrs li strong{
  font-weight: 500;
  color: var(--ink);
  margin-left: 4px;
}
.article-dates{
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.article-dates > div{
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.article-dates dt{
  font-weight: 400;
  color: var(--ink-2);
}
.article-dates dd{
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

.article-content{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.article-content p{
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  hyphens: auto;
}

/* small section variant */
.section-head--sm{ padding-bottom: 16px }
.section-title--sm{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
}

/* ============ Odbor intro ============ */
.container-section{
  max-width: 1440px;
  margin: 0 auto 56px;
  padding: 0 80px;
}
.odbor-intro{
  max-width: 1440px;
  margin: 0 auto 56px;
  padding: 0 80px;
  display: grid;
  grid-template-columns: 503px 1fr;
  gap: 145px;
}
.odbor-intro-text{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.odbor-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.odbor-perex{
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.odbor-photo{
  height: 370px;
  border-radius: 6px;
  background: var(--bg-utility);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,.25);
}
.photo-placeholder{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ============ Tabs (Oddělení) ============ */
.tabs-wrap{ }
.tabs-strip{
  display: flex;
  gap: 0;
  position: relative;
  z-index: 1;
}
.tab{
  flex: 1;
  height: 48px;
  background: var(--bg-utility);
  border: 0;
  border-radius: 8px 8px 0 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 -1px 3px rgba(0,0,0,.04);
}
.tab + .tab{ margin-left: 2px }
.tab:hover{ color: var(--ink) }
.tab.is-active{
  background: var(--card-bg);
  color: var(--ink);
  z-index: 2;
  box-shadow:
    -2px -2px 4px rgba(0,0,0,.08),
    2px -2px 4px rgba(0,0,0,.08);
}
.tabs-panel{
  background: var(--card-bg);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 0 4px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.05);
  padding: 32px;
}
.tabs-row{
  display: grid;
  grid-template-columns: 608px 1fr;
  gap: 16px;
  padding-bottom: 24px;
}
.tabs-row-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.tabs-row-body p{
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.tabs-divider{
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 0 0 24px;
}

/* ============ Contact cards grid ============ */
.contact-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 16px;
  margin-top: 24px;
}
.contact-card{
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cc-name{
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.cc-role{
  font-size: 16px;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.cc-contact{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  color: var(--ink-3);
}
.cc-contact a{
  color: var(--ink-3);
}
.cc-contact a:hover{ color: var(--blue); text-decoration: none }
.cc-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-3);
}
.cc-meta .dot{
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--ink-3);
}

/* ============ Úřední deska ============ */
.uredni-desk{
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.ud-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}

.ud-search{
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 0 4px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.05);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ud-search-row{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ud-search-row--bottom{ align-items: flex-start }
.ud-field{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ud-field-grow{ flex: 2 }
.ud-field label{
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
}
.ud-field input,
.ud-select select,
.ud-select input{
  height: 48px;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 8px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.ud-field input::placeholder,
.ud-select input::placeholder{
  color: var(--ink-3);
}
.ud-field input:focus,
.ud-select select:focus,
.ud-select input:focus{
  border-color: var(--ink);
}
.ud-select{
  position: relative;
}
.ud-select svg{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-2);
  pointer-events: none;
}
.ud-select select{ padding-right: 40px }
.ud-select input[type="date"]{ padding-right: 40px }
.ud-select input[type="date"]::-webkit-calendar-picker-indicator{
  /* Skrýt nativní kalendář indikátor — chceme zobrazit naši vlastní SVG ikonu */
  opacity: 0;
  position: absolute;
  right: 0;
  width: 40px;
  height: 100%;
  cursor: pointer;
}
.ud-select:has(input[type="date"]) svg{
  /* SVG ikona kalendáře musí být klikatelná, aby otevřela picker přes JS showPicker() */
  pointer-events: auto;
  cursor: pointer;
}
.ud-help{
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.ud-buttons{
  display: flex;
  gap: 8px;
  align-items: center;
  align-self: flex-end;
  flex-shrink: 0;
}
.btn-ghost{
  height: 48px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
}
.btn-ghost:hover{ background: rgba(65,89,189,.08) }
.btn-primary{
  height: 48px;
  padding: 0 28px;
  border: 0;
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.btn-primary:hover{ background: var(--blue-deep) }

/* result bar */
.result-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--ink-2);
  padding: 0 4px;
}
.result-bar strong{ color: var(--ink); font-weight: 500 }
.result-bar-left,
.result-bar-right{
  display: flex;
  align-items: center;
  gap: 12px;
}
.round-btn--sm{ width: 28px; height: 28px }
.mini-select{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}
.mini-select:hover{ border-color: var(--ink) }
.mini-select--sm{ padding: 0 10px }

/* Custom dropdown (řazení, počet záznamů) — celé tlačítko otevírá menu */
.mini-dd{ position: relative; display: inline-block; }
.mini-dd-trigger{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .15s, box-shadow .15s;
}
.mini-dd-trigger:hover{ border-color: var(--ink); }
.mini-dd-trigger:focus-visible{ outline: 2px solid var(--blue); outline-offset: 1px; }
.mini-dd.is-open .mini-dd-trigger{ border-color: var(--blue); box-shadow: 0 0 0 3px rgba(65,89,189,.12); }
.mini-dd-caret{ color: var(--ink-2); transition: transform .15s; flex-shrink: 0; }
.mini-dd.is-open .mini-dd-caret{ transform: rotate(180deg); }
.mini-dd-menu{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  z-index: 30;
}
.mini-dd-menu[hidden]{ display: none; }
.mini-dd-item{
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.mini-dd-item + .mini-dd-item{ margin-top: 2px; }
.mini-dd-item:hover{ background: rgba(65,89,189,.08); }
.mini-dd-item.is-selected{ background: var(--blue); color: #fff; }

/* ============ Document cards (Úřední deska) ============ */
.doc-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.doc-card{
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  color: inherit;
  border-radius: 8px;
  border: solid 1px var(--line);

}
.doc-card:hover{ text-decoration: none }
.doc-card:hover .doc-title{ color: var(--blue) }
.doc-title{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  transition: color .15s;
}
.doc-rule{
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 0;
}
.doc-meta{
  margin: 0;
  display: grid;
  gap: 12px;
}
.doc-meta > div{
  display: grid;
  gap: 2px;
}
.doc-meta dt{
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
}
.doc-meta dd{
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

/*==== COMMON ====*/
.card-cta SVG {
  padding-top: 1px;
}

.gap-minimize {
  margin-bottom: -20px;
}

/* ═════════════ ŽIVOTNÍ SITUACE ═════════════ */

.zs-header{
  margin-bottom: 32px;
}
.zs-title{
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ink);
}
.zs-perex{
  margin: 0;
  font-size: 16px;
  color: var(--ink-2);
}

/* Reservation box */
.zs-reservation{
  background: #F2F2F2;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 64px;
  max-width: 1280px;
}
@media (min-width: 1440px){
  .zs-reservation{ margin-left: auto; margin-right: auto }
}
.zs-res-label{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.zs-res-row{
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.zs-res-input{
  flex: 1;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}
.zs-res-input::placeholder{ color: var(--ink-3) }
.zs-res-input:focus{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(65,89,189,.15);
}
.zs-res-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  background: var(--blue);
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.zs-res-btn:hover{ background: var(--blue-deep); color: #fff; text-decoration: none }

/* Accordions */
.zs-accordions{
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1280px;
}
@media (min-width: 1440px){
  .zs-accordions{ margin-left: auto; margin-right: auto }
}
.zs-acc-section{ width: 100% }
.zs-acc-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.zs-acc-title{
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
}
.zs-toggle-all{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 6px 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.zs-toggle-all:hover{ color: var(--ink) }
.zs-toggle-all .zs-chev{ transition: transform .2s }
.zs-toggle-all.is-open .zs-chev{ transform: rotate(180deg) }

.zs-acc-list{
  display: flex;
  flex-direction: column;
}
.zs-acc-item{
  border-top: 1px solid var(--line);
}
.zs-acc-item:last-child{
  border-bottom: 1px solid var(--line);
}
.zs-acc-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink);
  list-style: none;
}
.zs-acc-summary::-webkit-details-marker{ display: none }
.zs-acc-summary::marker{ display: none }
.zs-acc-summary:hover{ color: var(--blue) }
.zs-acc-summary .zs-chev{
  flex-shrink: 0;
  transition: transform .2s;
  color: var(--ink-2);
}
.zs-acc-item[open] > .zs-acc-summary .zs-chev{ transform: rotate(180deg) }
.zs-acc-item[open] > .zs-acc-summary{ color: var(--blue) }

.zs-acc-body{
  padding: 4px 4px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 800px;
}
.zs-acc-body p{ margin: 0 }

/* Tablet */
@media (max-width: 1023px){
  .zs-title{ font-size: 44px }
  .zs-acc-title{ font-size: 26px }
  .zs-accordions{ gap: 40px }
}

/* Mobile */
@media (max-width: 767px){
  .zs-title{ font-size: 34px }
  .zs-acc-title{ font-size: 22px }
  .zs-reservation{ padding: 16px; margin-bottom: 40px }
  .zs-res-row{ flex-direction: column }
  .zs-res-btn{ justify-content: center }
  .zs-accordions{ gap: 32px }
  .zs-acc-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}


/* ═════════════ COOKIE CONSENT ═════════════ */

/* Banner — centered overlay with dimmed backdrop */
.cc-banner{
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.5);
  font-family: var(--sans);
  color: var(--ink);
  opacity: 0;
  transition: opacity .2s ease;
}
.cc-banner.is-visible{ opacity: 1 }
.cc-banner[hidden]{ display: none }

.cc-banner__card{
  width: min(440px, 100%);
  background: #EDEDED;
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  transform: translateY(8px);
  transition: transform .2s ease;
}
.cc-banner.is-visible .cc-banner__card{ transform: translateY(0) }

.cc-title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.cc-text{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.cc-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.cc-btn{
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cc-btn--ghost{
  background: #fff;
  color: var(--ink-2);
  border: 1px solid #D9D9D9;
}
.cc-btn--ghost:hover{ background: #F7F7F7; color: var(--ink) }
.cc-btn--primary{
  background: var(--blue);
  color: #fff;
}
.cc-btn--primary:hover{ background: var(--blue-deep) }

/* Modal */
.cc-modal{
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .18s ease;
}
.cc-modal.is-visible{ opacity: 1 }
.cc-modal[hidden]{ display: none }

.cc-dialog{
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
  font-family: var(--sans);
  color: var(--ink);
  overflow: hidden;
}
.cc-dialog__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #EDEDED;
}
.cc-dialog__title{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.cc-dialog__close{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-3);
}
.cc-dialog__close:hover{ background: #F2F2F2; color: var(--ink) }
.cc-dialog__body{
  padding: 8px 24px 16px;
  overflow-y: auto;
}
.cc-dialog__intro{
  margin: 12px 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.cc-cat{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid #EDEDED;
}
.cc-cat:first-of-type{ border-top: 0 }
.cc-cat__title{
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.cc-cat__desc{
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Toggle switch */
.cc-switch{
  --w: 40px;
  --h: 22px;
  position: relative;
  display: inline-block;
  width: var(--w);
  height: var(--h);
  flex-shrink: 0;
}
.cc-switch input{
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.cc-switch__track{
  position: absolute;
  inset: 0;
  background: #CFCFCF;
  border-radius: 999px;
  transition: background .15s;
}
.cc-switch__track::before{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--h) - 4px);
  height: calc(var(--h) - 4px);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .15s;
}
.cc-switch input:checked + .cc-switch__track{ background: var(--blue) }
.cc-switch input:checked + .cc-switch__track::before{
  transform: translateX(calc(var(--w) - var(--h)));
}
.cc-switch input:disabled + .cc-switch__track{
  background: var(--blue);
  opacity: .55;
  cursor: not-allowed;
}
.cc-switch input:focus-visible + .cc-switch__track{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.cc-dialog__foot{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 24px 20px;
  border-top: 1px solid #EDEDED;
}

@media (max-width: 520px){
  .cc-banner{ padding: 12px }
  .cc-banner__card{ padding: 18px 16px 16px }
  .cc-actions{ justify-content: stretch }
  .cc-actions .cc-btn{ flex: 1 }
  .cc-dialog__foot{ flex-direction: column-reverse }
  .cc-dialog__foot .cc-btn{ width: 100% }
}

/* ============ Calendar & event interactivity ============ */
.cal-cell.is-clickable{ cursor: pointer; transition: background .12s }
.cal-cell.is-clickable:hover{ background: rgba(0,0,0,.04) }

.events-list .event-row{ cursor: pointer; transition: background .12s }
.events-list .event-row:hover{ background: rgba(0,0,0,.03) }
.events-empty{
  padding: 32px 16px;
  color: var(--ink-3);
  font-size: 14px;
  margin: 0;
  text-align: center;
}

/* ============ Event detail overlay ============ */
.ev-overlay{
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(40,40,40,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px 16px;
  opacity: 0;
  transition: opacity .2s;
}
.ev-overlay.is-visible{ opacity: 1 }

.ev-nav{
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: white;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ev-nav:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.75);
  color: #fff;
}

.ev-card{
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 32px;
  width: 100%;
  max-width: 1080px;
  max-height: calc(100vh - 48px);
  background: #EDEBE7;
  border-radius: 16px;
  padding: 32px;
  overflow: auto;
}

.ev-content{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ev-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--ink);
}
.ev-tags{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ev-divider{
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 0 0 18px;
}
.ev-meta{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.ev-meta .meta-item{ font-size: 15px }
.ev-body{
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 22px;
}
.ev-body p{ margin: 0 0 12px }
.ev-body p:last-child{ margin: 0 }
.ev-more{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.ev-more:hover{
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}

.ev-poster{
  border-radius: 12px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  font-family: var(--sans);
  color: var(--ink);
}
.ev-poster--pink   { background: linear-gradient(160deg, #f5c8c8 0%, #f0a4a4 100%) }
.ev-poster--yellow { background: linear-gradient(160deg, #f5e0a8 0%, #f0c878 100%) }
.ev-poster--green  { background: linear-gradient(160deg, #c5e0c2 0%, #9ec998 100%) }
.ev-poster--blue   { background: linear-gradient(160deg, #c7d3e8 0%, #98b0d0 100%) }
.ev-poster--red    { background: linear-gradient(160deg, #d8b0b0 0%, #b87878 100%); color: #2a0a0a }
.ev-poster--kultura{ background: linear-gradient(160deg, #f5c2c8 0%, #d893a0 100%) }
.ev-poster__brand{
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  opacity: .8;
}
.ev-poster__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.2;
  margin: 18px 0 8px;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.ev-poster__meta{
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0 0;
}
.ev-poster__loc{
  font-size: 14px;
  margin: 0;
  opacity: .8;
}

@media (max-width: 900px){
  .ev-overlay{ gap: 8px; padding: 12px 8px }
  .ev-card{
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: 24px;
    gap: 24px;
  }
  .ev-title{ font-size: 32px }
  .ev-poster{ min-height: 320px; padding: 24px }
  .ev-poster__title{ font-size: 42px }
  .ev-nav{ width: 40px; height: 40px }
}

@media (max-width: 520px){
  .ev-overlay{ padding: 8px }
  .ev-card{ padding: 20px; border-radius: 12px }
  .ev-title{ font-size: 26px }
  .ev-poster__title{ font-size: 32px }
}

/* ============ Fotogalerie (button varianta news-card) ============ */
.gallery-card{
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.gallery-card .news-thumb{
  transition: transform .15s, box-shadow .15s;
}
.gallery-card:hover .news-thumb{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.gallery-card:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.gallery-caption{
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}

/* ============ Lightbox ============ */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px 16px;
  opacity: 0;
  transition: opacity .2s;
}
.lightbox.is-visible{ opacity: 1 }
.lightbox-stage{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  width: 100%;
}
.lightbox-image{
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: linear-gradient(135deg, #d6d3cc 0%, #b9b4ab 100%);
  position: relative;
  overflow: hidden;
}
.lightbox-image::before{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px);
}
.lightbox-image.v1{ background: linear-gradient(140deg, #b1a999 0%, #847d6e 100%) }
.lightbox-image.v2{ background: linear-gradient(140deg, #d6c0a8 0%, #a48565 100%) }
.lightbox-image.v3{ background: linear-gradient(140deg, #99a8b8 0%, #6b7d8f 100%) }
.lightbox-image.v4{ background: linear-gradient(140deg, #c4ad8b 0%, #8a6e4b 100%) }
.lightbox-image.v5{ background: linear-gradient(140deg, #aaa19a 0%, #7a716a 100%) }
.lightbox-caption{
  color: rgba(255,255,255,.85);
  font-size: 14px;
  text-align: center;
  margin: 0;
  max-width: 70ch;
}
.lightbox-nav{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: transparent;
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.lightbox-nav:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.75);
  color: #fff;
}
.lightbox-close{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.lightbox-close:hover{ background: rgba(255,255,255,.24) }

@media (max-width: 768px){
  .lightbox{ gap: 8px; padding: 16px 4px }
  .lightbox-nav{ width: 40px; height: 40px }
  .lightbox-close{ top: 12px; right: 12px; width: 40px; height: 40px }
  .lightbox-image{ aspect-ratio: 4 / 3 }
}

/* ============ Samospráva — rozcestník + hero ============ */
.mayor-intro{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: start;
  margin-bottom: 56px;
}
.mayor-intro-text{
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}
.mayor-role{
  font-size: 18px;
  color: var(--ink-2);
  font-weight: 400;
  margin: 0 0 4px;
}
.mayor-name{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.mayor-bio{
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.mayor-photo{
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: transparent;
}
.mayor-photo img{
  width: 100%;
  height: auto;
  display: block;
}

.section-divider{
  border: 0;
  border-top: 1px solid var(--line);
  max-width: 1280px;
  margin: 0 auto 56px;
}

.samosprava-section{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  margin-bottom: 56px;
  align-items: start;
}
.samosprava-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.samosprava-pills{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.samosprava-col{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.action-pill{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 56px;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: border-color .12s, background .12s, color .12s;
}
.action-pill:hover{
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 1023px){
  .mayor-intro{
    grid-template-columns: 1fr 280px;
    gap: 40px;
  }
  .mayor-name{ font-size: 44px }
  .samosprava-section{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .samosprava-title{ font-size: 40px }
}
@media (max-width: 768px){
  .mayor-intro{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .mayor-name{ font-size: 36px }
  .mayor-photo{ max-width: 360px }
  .samosprava-pills{ grid-template-columns: 1fr }
}

/* ============ Usnesení — karta s download tlačítkem ============ */
.usneseni-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
}
.usneseni-meta{
  margin: 0;
}
.usneseni-title{
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.usneseni-soubor{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  align-self: flex-start;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  transition: border-color .12s, background .12s, color .12s;
}
.usneseni-soubor:hover{
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}

/* ============ Kontakty — adresář zaměstnanců ============ */
.kontakty-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 32px;
}
.contact-card-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 24px 0 40px;
}
.contact-card{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  min-height: 220px;
}
.contact-name{
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px;
}
.contact-role{
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 12px;
  flex: 1;
}
.contact-meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.contact-phone,
.contact-email{
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
}
.contact-phone:hover,
.contact-email:hover{ color: var(--blue); text-decoration: underline; }
.contact-where{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.contact-dot{ color: var(--ink-3); }

@media (max-width: 1100px){
  .contact-card-grid{ grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 768px){
  .kontakty-title{ font-size: 40px; margin-bottom: 24px }
  .contact-card-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px }
  .contact-card{ min-height: auto; padding: 16px }
}
@media (max-width: 520px){
  .contact-card-grid{ grid-template-columns: 1fr }
}

/* ============ Rada — výpis členů ============ */
.rada-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}
.council-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  margin: 24px 0 56px;
}
.council-card{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.council-photo{
  aspect-ratio: 4 / 5;
  background: #E5E5E5;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 12px;
}
.council-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.council-name{
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.council-email{
  font-size: 14px;
  color: var(--ink-3);
  text-decoration: none;
  word-break: break-all;
}
.council-email:hover{ color: var(--ink); text-decoration: underline; }
.council-role{
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  margin: 8px 0 0;
}
.council-party{
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
  margin: 4px 0 0;
}

@media (max-width: 1100px){
  .council-grid{ grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 768px){
  .rada-title{ font-size: 40px }
  .council-grid{ grid-template-columns: repeat(2, 1fr); gap: 28px 16px }
}
@media (max-width: 520px){
  .council-grid{ grid-template-columns: 1fr }
}

/* ============ Akce — detail stránka ============ */
.event-detail{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 80px;
  align-items: start;
}
.event-detail-content{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.event-detail-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 64px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 8px;
}
.event-detail-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.event-detail-divider{
  border: 0;
  border-top: 1px solid var(--line);
  margin: 12px 0 6px;
}
.event-detail-meta{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
}
.event-detail-meta .meta-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 16px;
}
.event-detail-body{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}
.event-detail-body p{ margin: 0 }

.event-detail-poster{
  width: 100%;
}
.event-poster-btn{
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.event-poster-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.event-poster-btn img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Single-image lightbox (akce detail) */
.lightbox-stage--single{
  max-width: 900px;
}
.lightbox-photo{
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}

/* Další akce — pás karet */
.section--related{ margin-top: 16px }
.related-card{
  text-decoration: none;
  color: inherit;
}
.related-card:hover{ text-decoration: none }
.related-card:hover .news-thumb{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.10) }
.related-card .news-thumb{
  transition: transform .15s, box-shadow .15s;
  background: linear-gradient(135deg, #8fb47c 0%, #5e8a4e 100%);
}
.related-card .news-thumb::before,
.related-card .news-thumb::after{
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px);
}
.related-card-title{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.related-card-meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--ink-3);
}
.related-card-meta .meta-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
}

@media (max-width: 1023px){
  .event-detail{ gap: 48px }
  .event-detail-title{ font-size: 48px }
}
@media (max-width: 768px){
  .event-detail{
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 48px;
  }
  .event-detail-title{ font-size: 40px }
}

/* ============ Kalendář akcí — výpis stránka ============ */
.events-page-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 32px;
}
.events-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  margin: 24px 0 40px;
}
.event-tile{
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.event-tile:hover{ text-decoration: none; color: inherit; }
.event-tile:hover .event-tile-thumb{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.event-tile:hover .event-tile-title{ color: var(--blue); }
.event-tile-thumb{
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #8fb47c 0%, #5e8a4e 100%);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.event-tile-thumb::before,
.event-tile-thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px);
}
.event-tile-title{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.event-tile-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.event-tile-meta{
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: var(--ink-2);
}
.event-tile-meta .meta-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.load-more-wrap{
  display: flex;
  justify-content: center;
  margin: 16px 0 0;
}
.load-more-btn{
  min-width: 200px;
  justify-content: center;
}

@media (max-width: 1100px){
  .events-grid{ grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 768px){
  .events-page-title{ font-size: 40px; margin-bottom: 24px }
  .events-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px 16px }
}
@media (max-width: 520px){
  .events-grid{ grid-template-columns: 1fr }
}

/* ============ Organizační struktura úřadu ============ */
.orgstruktura-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 32px;
}
.org-sections{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 56px;
}
.org-section{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
}
.org-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.org-summary::-webkit-details-marker{ display: none; }
.org-summary::marker{ display: none; }
.org-name{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.org-chev{
  flex: none;
  color: var(--ink);
  transition: transform .2s ease;
}
.org-section[open] > .org-summary .org-chev{
  transform: rotate(180deg);
}
.org-section[open] > .org-summary{
  border-bottom: 1px solid var(--line);
}
.org-body{
  padding: 24px 28px 28px;
}
.org-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.org-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-bg, #fff);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.org-pill:hover{ border-color: var(--ink); }
.org-pill-chev{ color: var(--ink-3); }

.org-table-wrap{
  overflow-x: auto;
}
.org-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.org-table td{
  padding: 14px 12px;
  vertical-align: top;
  color: var(--ink-2);
  line-height: 1.4;
}
.org-table tr{
  border-bottom: 1px solid var(--line);
}
.org-table tr:last-child{ border-bottom: none; }
.org-table td:first-child{
  padding-left: 0;
}
.org-table td:last-child{
  padding-right: 0;
  text-align: right;
}
.org-table .org-name-cell{
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.org-table .org-mistnost-cell{
  white-space: nowrap;
}
.org-email{
  color: var(--ink-2);
  text-decoration: none;
}
.org-email:hover{ color: var(--blue); text-decoration: underline; }
.org-empty{
  margin: 0;
  padding: 16px 0;
  color: var(--ink-3);
  font-size: 14px;
}

@media (max-width: 1100px){
  .org-summary{ padding: 18px 22px }
  .org-name{ font-size: 28px }
  .org-body{ padding: 20px 22px 24px }
  .org-table .org-name-cell{ white-space: normal }
}
@media (max-width: 768px){
  .orgstruktura-title{ font-size: 40px; margin-bottom: 24px }
  .org-summary{ padding: 16px 18px }
  .org-name{ font-size: 24px }
  .org-body{ padding: 16px 18px 20px }
  .org-table{ font-size: 13px }
  .org-table td{ padding: 10px 8px }
}

/* ============ Obecná textová stránka — rozšířená typografie .article-content ============ */
.article-content h2{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 24px 0 4px;
}
.article-content h2:first-child{ margin-top: 0 }
.article-content h3{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  margin: 16px 0 2px;
}
.article-content strong{ font-weight: 600 }
.article-content em{ font-style: italic }
.article-content a:not(.tag):not(.btn-primary):not(.btn-ghost):not(.file-download){
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-content a:not(.tag):not(.btn-primary):not(.btn-ghost):not(.file-download):hover{
  color: var(--blue-deep);
}
.article-content ul,
.article-content ol{
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-content ul li,
.article-content ol li{
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.article-content ul li::marker{ color: var(--blue) }
.article-content ol li::marker{ color: var(--blue); font-weight: 600 }
.article-content .article-outro{
  font-size: 14px;
  color: var(--ink-3);
  font-style: italic;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 12px;
}

/* Blockquote — citace v textu */
.article-content .content-quote{
  margin: 16px 0;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--blue);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.article-content .content-quote p{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.article-content .content-quote cite{
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.content-quote .quote-author{
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.content-quote .quote-source{
  font-size: 13px;
  color: var(--ink-3);
}

/* Inline figure (obrázek v textu) */
.inline-figure{
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inline-figure-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: var(--bg-utility, #e6e6e6);
  overflow: hidden;
}
.inline-figure figcaption{
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* Data table */
.data-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.data-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.data-table thead th{
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.data-table tbody td{
  padding: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.4;
}
.data-table tbody tr:last-child td{ border-bottom: none }
.data-table tbody tr:hover{ background: rgba(0,0,0,.02) }

.badge{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge-ok{
  background: rgba(34,139,77,.08);
  color: #1e7e3d;
}
.badge-warn{
  background: rgba(204,131,0,.10);
  color: #985f00;
}

/* File list (soubory ke stažení) */
.file-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.file-card{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  transition: border-color .12s, background .12s;
}
.file-card:hover{
  border-color: var(--ink);
  background: var(--card-bg, #fff);
}
.file-icon{
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink-2);
}
.file-body{
  flex: 1;
  min-width: 0;
}
.file-name{
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.file-meta{
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.file-download{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.file-download:hover{
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  text-decoration: none;
}

@media (max-width: 1023px){
  .article-content h2{ font-size: 26px }
  .article-content h3{ font-size: 18px }
  .article-content .content-quote p{ font-size: 24px }
}
@media (max-width: 640px){
  .data-table{ font-size: 14px }
  .data-table thead th,
  .data-table tbody td{ padding: 10px 12px }
  .file-card{ flex-wrap: wrap; gap: 12px }
  .file-download{ width: 100%; justify-content: center }
  .article-content .content-quote{ padding-left: 20px }
  .article-content .content-quote p{ font-size: 20px }
}

/* ============ Obecná textová stránka — single column ============ */
.text-page-head{
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 800px;
  margin-bottom: 48px;
}
.text-page-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.text-page-perex{
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.text-page-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.text-page-meta strong{
  font-weight: 600;
  color: var(--ink);
}
.text-page-meta .meta-sep{ color: var(--ink-3); }

.text-page-hero{
  margin: 0 0 56px;
  height: 420px;
  border-radius: 6px;
  overflow: hidden;
}
.text-page-hero > *{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.text-page-content{
  max-width: 800px;
}

@media (max-width: 1023px){
  .text-page-title{ font-size: 44px }
  .text-page-hero{ height: 360px }
}
@media (max-width: 640px){
  .text-page-title{ font-size: 34px }
  .text-page-perex{ font-size: 17px }
  .text-page-hero{ height: 240px; margin-bottom: 40px }
  .text-page-head{ margin-bottom: 32px; gap: 20px }
}



/* ---- .article-content — robustní typografie pro migrovaný WP obsah (RTE `obsah`) ----
   Prototyp počítal s ručně psaným markupem; migrovaný obsah obsahuje i seznamy
   s odrážkami, tabulky a obrázky. Tato pravidla jsou ZÁMĚRNĚ až za prototypovou
   typografií (.article-content výše), aby pro reálný obsah vyhrála. */
.article-content > :first-child{ margin-top: 0 }
.article-content ul,
.article-content ol{
  display: block;
  margin: 0 0 16px;
  padding-left: 24px;
}
.article-content li{ margin: 6px 0 }
.article-content img{ max-width: 100%; height: auto; border-radius: 6px }
.article-content figure{ margin: 24px 0 }
.article-content figcaption{ font-size: 14px; color: var(--ink-3); margin-top: 8px }
.article-content blockquote{
  margin: 24px 0;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--blue);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.article-content hr{ border: 0; border-top: 1px solid var(--line); margin: 24px 0 }
.article-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 15px;
}
.article-content th,
.article-content td{
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.article-content th{ background: var(--bg-utility); font-weight: 600 }
/* respektuj zarovnání z WordPressu */
.article-content .has-text-align-center{ text-align: center }
.article-content .has-text-align-right{ text-align: right }


/* ============================================================ */
/* Komponentní responsive (chrome responsive řeší site.css výše) */
/* Breakpointy: 1279 / 1023 / 767 / 380 — shodné s hlavičkou/patičkou. */
/* ============================================================ */

/* ─────────── ≤ 1279 px ─────────── */
@media (max-width: 1279px){
  .section,
  .container-section,
  .banner-section,
  .article,
  .breadcrumb-nav,
  .odbor-intro{
    padding-left: 40px;
    padding-right: 40px;
  }
  .section-title{ font-size: 36px }
  .banner-title{ font-size: 48px }
  .article-title{ font-size: 48px }
  .news-row{ scroll-padding-left: 40px }
  .news-card{ flex: 0 0 calc((100% - 16px*3) / 4) }
  .article-head,
  .article-body{ grid-template-columns: 1fr 1fr; gap: 48px }
  .article-head-left{ min-height: auto }
  .odbor-intro{ grid-template-columns: 1fr 1fr; gap: 48px }
  .doc-grid{ grid-template-columns: repeat(3, 1fr) }
  .contact-grid{ grid-template-columns: repeat(3, 1fr) }
}

/* ─────────── ≤ 1023 px ─────────── */
@media (max-width: 1023px){
  .section,
  .container-section,
  .banner-section,
  .article,
  .breadcrumb-nav,
  .odbor-intro{
    padding-left: 24px;
    padding-right: 24px;
  }
  .banner-card{ grid-template-columns: 1fr; height: auto }
  .banner-image{ aspect-ratio: 16 / 10 }
  .banner-text{ padding: 28px 24px }
  .banner-title{ font-size: 40px }
  .banner-lead{ font-size: 17px }
  .section-title{ font-size: 32px }
  .news-row{ scroll-padding: 0 24px }
  .news-card{ flex-basis: calc((100% - 16px) / 2) }
  .section .row.g-3 .col-6{ width: 100%; flex: 0 0 100%; max-width: 100% }
  .section .row.g-3.align-items-stretch{ align-items: flex-start }
  .section .row.g-3 .card-panel{ height: auto }
  .events-panel{ min-height: 0 }
  .cal-cell{ aspect-ratio: 1 / 1 }
  .panel-head-label{ font-size: 15px }
  .select-pill{ width: auto; min-width: 110px; flex: 1 }
  .month-selects{ flex: 1; padding: 0 12px }
  .project-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px }
  .article-head,
  .article-body{ grid-template-columns: 1fr; gap: 32px }
  .article-title{ font-size: 40px }
  .article-hero{ height: auto; aspect-ratio: 16 / 10 }
  .article-meta{ flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: flex-start }
  .article-social{ flex-basis: 100% }
  .article-attrs{ flex-direction: row; gap: 24px }
  .article-dates{ flex-direction: row; gap: 24px }
  .odbor-intro{ grid-template-columns: 1fr; gap: 32px }
  .odbor-title{ font-size: 36px }
  .odbor-photo{ height: 260px }
  .tabs-strip{ overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none }
  .tabs-strip::-webkit-scrollbar{ display: none }
  .tab{ flex: 0 0 auto; padding: 0 20px; white-space: nowrap; font-size: 15px }
  .tabs-panel{ padding: 24px }
  .tabs-row{ grid-template-columns: 1fr; gap: 12px }
  .tabs-row-title{ font-size: 26px }
  .contact-grid{ grid-template-columns: repeat(2, 1fr) }
  .ud-search{ padding: 20px; gap: 16px }
  .ud-search-row{ flex-wrap: wrap; gap: 12px }
  .ud-field{ flex: 1 1 calc(50% - 6px); min-width: 0 }
  .ud-field-grow{ flex-basis: 100% }
  .ud-buttons{ flex-basis: 100%; justify-content: flex-end }
  .result-bar{ flex-direction: column; align-items: flex-start; gap: 12px }
  .result-bar-right{ flex-wrap: wrap }
  .doc-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px 16px }
}

/* ─────────── ≤ 767 px ─────────── */
@media (max-width: 767px){
  .section,
  .container-section,
  .banner-section,
  .article,
  .breadcrumb-nav,
  .odbor-intro{
    padding-left: 16px;
    padding-right: 16px;
  }
  .site-main{ padding-bottom: 32px }
  .section{ margin-bottom: 40px }
  .section-head{ padding-bottom: 16px }
  .section-title{ font-size: 26px }
  .section-link{ font-size: 14px }
  .banner-text{ padding: 20px 18px; gap: 16px }
  .banner-title{ font-size: 30px }
  .banner-lead{ font-size: 15px; line-height: 1.4 }
  .banner-card{ border-radius: 12px }
  .scroll-bar{ gap: 12px; padding-top: 4px }
  .round-btn{ width: 36px; height: 36px }
  .news-row{ gap: 12px; margin: 0 -16px; padding: 0 16px 4px }
  .news-card{ flex: 0 0 80% }
  .cal-grid{ padding: 8px }
  .cal-th{ font-size: 11px; padding: 6px 0 }
  .cal-cell{ font-size: 14px; padding: 6px 0 4px }
  .dots .d{ width: 5px; height: 5px }
  .panel-head{ padding: 10px 8px }
  .month-selects{ gap: 6px; padding: 0 6px }
  .select-pill{ font-size: 13px; min-width: 0; padding: 0 8px; height: 30px }
  .select-pill svg{ width: 12px; height: 12px }
  .event-title{ font-size: 17px }
  .event-row{ padding: 14px }
  .tag-filters{ gap: 6px }
  .tag{ font-size: 12px; height: 22px; padding: 0 8px }
  .article-title{ font-size: 30px; line-height: 1.2 }
  .article-perex{ font-size: 17px }
  .article-meta{ gap: 16px }
  .article-attrs{ flex-direction: column; gap: 8px }
  .article-dates{ flex-direction: column; gap: 4px }
  .breadcrumb-nav{ font-size: 13px; gap: 6px; flex-wrap: wrap; margin-bottom: 20px }
  .odbor-title{ font-size: 28px }
  .odbor-perex{ font-size: 15px }
  .odbor-photo{ height: 200px }
  .tabs-panel{ padding: 18px 16px }
  .tab{ height: 44px; font-size: 14px; padding: 0 14px }
  .tabs-row-title{ font-size: 22px }
  .tabs-row-body p{ font-size: 15px }
  .contact-grid{ grid-template-columns: 1fr; gap: 12px }
  .ud-title{ font-size: 28px }
  .ud-search{ padding: 16px; border-radius: 10px }
  .ud-field{ flex: 1 1 100% }
  .ud-buttons{ flex-direction: column; align-items: stretch }
  .btn-ghost,
  .btn-primary{ width: 100%; justify-content: center }
  .doc-grid{ grid-template-columns: 1fr; gap: 20px }
  .project-grid{ grid-template-columns: 1fr; gap: 16px }
  .project-card{ aspect-ratio: 2.4 / 1 }
}

/* ─────────── ≤ 380 px ─────────── */
@media (max-width: 380px){
  .banner-title{ font-size: 26px }
  .section-title{ font-size: 22px }
  .article-title{ font-size: 26px }
  .news-card{ flex-basis: 88% }
  .month-selects{ flex-direction: column; gap: 4px; padding: 0 6px }
  .select-pill{ width: 100% }
}


/* ============================================================ */
/* WCAG 2.1 AA — komponentní doplňky                            */
/* (skip-link a globální focus-visible řeší site.css výše)       */
/* ============================================================ */

/* Focus na komponentních polích, která mají outline:0 */
.zs-res-input:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.ud-field input:focus-visible,
.ud-select select:focus-visible,
.ud-select input:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Cíl interakce: min 24×24 px (2.5.8 Target Size) */
.tag{ min-height: 24px }

/* Reduced motion (uživatelská preference) */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen-reader-only text */
.visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Lightbox dialog — focus */
.lightbox:focus{ outline: none }
.lightbox.is-visible .lightbox-close:focus-visible,
.lightbox.is-visible .lightbox-nav:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}