/* =====================================================================
   Rozvržení a komponenty — designová specifikace §5

   Mřížka: max. 1140 px, boční okraj clamp(1.25rem, 4vw, 3rem).
   Zarovnání vlevo v celém webu. Zaoblení 2 px. Žádné stíny.
   Barevné plochy nese jen patička a jeden pás „Pro veřejnost".
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter) }

/* ── hlavička ────────────────────────────────────────────────────────── */
header.site { border-bottom: 1px solid var(--rule) }
header.site .wrap { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem); padding-block: 1rem }

/* Vedle loga se neopakuje název textem — logo wordmark už obsahuje (§2.1) */
.brand { display: flex; align-items: center; text-decoration: none }
.brand img { height: 52px; width: auto; display: block }
@media (max-width: 520px) { .brand img { height: 42px } }

nav.main { margin-left: auto; display: flex; gap: clamp(.7rem, 1.4vw, 1.45rem); align-items: center; font-size: .93rem }
/* Položky se nesmí lámat uprostřed: „Právní pomoc dětem" se jinak rozpadne
   na tři řádky a lišta přestane vypadat jako lišta. Když se do šířky
   nevejdou, přepne se celé menu na tlačítko — viz media query níž. */
nav.main a { text-decoration: none; padding-block: .3rem; border-bottom: 2px solid transparent; white-space: nowrap }
nav.main a:hover { border-bottom-color: var(--rule) }
nav.main a[aria-current] { border-bottom-color: var(--brand); font-weight: 600; color: var(--brand) }

.nav-item { position: relative }
.nav-item > .sub {
  position: absolute; top: 100%; left: -.8rem; min-width: 210px; z-index: 30;
  background: var(--paper); border: 1px solid var(--rule); padding: .5rem 0;
  display: none;
}
.nav-item:hover > .sub, .nav-item:focus-within > .sub { display: block }
.nav-item > .sub a { display: block; padding: .42rem .95rem; border-bottom: 0; font-size: .91rem }
.nav-item > .sub a:hover { background: var(--brand-wash); color: var(--brand) }

.search-form { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto }
.search-form input {
  border: 1px solid var(--rule); border-radius: 2px; padding: .38rem .7rem;
  font: inherit; font-size: .9rem; color: var(--ink); width: 8.5rem; background: var(--paper);
}
.search-form button {
  border: 1px solid var(--rule); background: var(--paper); border-radius: 2px;
  padding: .38rem .6rem; font: inherit; font-size: .9rem; color: var(--ink-faint); cursor: pointer;
}
.search-form button:hover { color: var(--brand); border-color: var(--brand) }

.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--rule); border-radius: 2px; padding: .45rem .7rem; font: inherit; font-size: .9rem; cursor: pointer }

/* ── tlačítka ────────────────────────────────────────────────────────── */
.btn {
  font-size: .95rem; text-decoration: none; border-radius: 2px;
  padding: .68rem 1.15rem; border: 1px solid var(--brand); display: inline-block;
  font-family: var(--sans); cursor: pointer;
}
.btn-solid { background: var(--brand); color: #fff }
.btn-solid:hover { background: var(--brand-deep); border-color: var(--brand-deep) }
.btn-ghost { color: var(--brand); background: var(--paper) }
.btn-ghost:hover { background: var(--brand-wash) }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem }

/* ── hero (§5.2) ─────────────────────────────────────────────────────── */
.hero { padding-block: clamp(2.75rem, 6vw, 4.5rem); border-bottom: 1px solid var(--rule) }
.hero .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(2rem,5vw,4rem); align-items: center }
.hero p.lead { font-size: 1.08rem; color: var(--ink-soft); margin: 1.35rem 0 0 }

.spotlight { border: 1px solid var(--rule); border-top: 4px solid var(--brand); padding: 1.6rem }
.spotlight .no { font-size: .82rem; color: var(--brand); font-weight: 600 }
.spotlight h2 { font-size: 1.22rem; margin: .55rem 0 .6rem; line-height: 1.35 }
.spotlight p { font-family: var(--serif); font-size: 1rem; color: var(--ink-soft); margin: 0 0 1rem }
.spotlight a { color: var(--brand); font-size: .93rem }

/* ── tři popsané proudy (§5.3) ───────────────────────────────────────── */
.streams { padding-block: clamp(2.5rem,5vw,4rem) }
.streams .grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: clamp(1.5rem,4vw,3rem) }
.stream h2 { font-size: 1.25rem; padding-bottom: .6rem; border-bottom: 2px solid var(--brand) }
.stream .what { font-size: .87rem; color: var(--ink-faint); margin: .7rem 0 1.1rem }
.mini { border-bottom: 1px solid var(--rule); padding-block: .85rem }
.mini time { display: block; font-size: .79rem; color: var(--ink-faint); margin-bottom: .2rem }
.mini a { text-decoration: none; font-size: .99rem; line-height: 1.4; display: block }
.mini a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px }
.stream .more { display: inline-block; margin-top: 1rem; font-size: .92rem; color: var(--brand) }

/* ── pás pro veřejnost (§5.4) ────────────────────────────────────────── */
.public { background: var(--brand-wash); padding-block: clamp(2.5rem,5vw,4rem) }
.public h2 { font-size: 1.55rem; margin-bottom: .6rem }
.public .intro { color: var(--ink-soft); margin: 0 0 2.25rem }
.public .grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 1.5rem }
.card { background: var(--paper); border: 1px solid var(--rule); padding: 1.4rem }
.card h3 { font-size: 1.06rem; margin-bottom: .5rem }
.card p { margin: 0 0 1rem; font-size: .94rem; color: var(--ink-soft) }
.card a { font-size: .92rem; color: var(--brand) }

/* ── číslovaná osa stanovisek (§5.1) ─────────────────────────────────── */
.archive { padding-block: clamp(2.5rem,5vw,4rem) }
.archive-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ink); padding-bottom: .7rem; margin-bottom: 2rem }
.archive-head h2 { font-size: 1.55rem }
.archive-head a { font-size: .92rem; color: var(--brand) }
.year { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: clamp(1rem,3vw,2.25rem); align-items: start }
.year + .year { margin-top: 2.25rem }
.year .label { font-size: 1.35rem; font-weight: 600; color: var(--ink-faint); position: sticky; top: 1rem }
.items { border-left: 1px solid var(--rule); padding-left: clamp(1.75rem,4vw,3rem) }
.item { position: relative; padding-block: 1.2rem; border-bottom: 1px solid var(--rule) }
.item:last-child { border-bottom: 0 }

/* Číslo v kolečku je jediné místo, kde se číselné značení používá —
   stanoviska skutečně číslovaná jsou a číslo je jejich identifikátor. */
.item .no {
  position: absolute; left: calc(-1 * clamp(1.75rem,4vw,3rem) - 15px); top: 1.35rem;
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: .78rem; font-weight: 600;
}
.item time { font-size: .81rem; color: var(--ink-faint); display: block; margin-bottom: .25rem }
.item h3 { font-size: 1.14rem; line-height: 1.38; font-weight: 600 }
.item h3 a { text-decoration: none }
.item h3 a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px }
.item p { margin: .45rem 0 0; font-family: var(--serif); font-size: 1rem; color: var(--ink-soft) }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem }
.tag { font-size: .77rem; color: var(--brand-deep); background: var(--brand-wash); border: 1px solid var(--rule); padding: .13rem .55rem; text-decoration: none }
.tag:hover { border-color: var(--brand) }

/* Filtry musí fungovat bez JS — každý je odkaz (§5.6) */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-bottom: 2rem }
.chip { font-family: var(--sans); font-size: .88rem; border: 1px solid var(--rule); padding: .38rem .8rem; background: var(--paper); cursor: pointer; border-radius: 2px; text-decoration: none; color: var(--ink) }
.chip:hover { border-color: var(--brand); color: var(--brand) }
.chip[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand) }
.count { margin-left: auto; font-size: .86rem; color: var(--ink-faint) }

/* ── detail dokumentu (§5.5) ─────────────────────────────────────────── */
.doc { padding-block: clamp(2rem,5vw,3.5rem) }
.crumbs { font-size: .86rem; color: var(--ink-faint); margin-bottom: 1.5rem }
.crumbs a { color: var(--brand); text-decoration: none }
.crumbs a:hover { text-decoration: underline }
.doc-grid { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: clamp(2rem,5vw,4rem); align-items: start }
.doc .id { font-size: .86rem; color: var(--brand); font-weight: 600; margin-bottom: .6rem }
.doc h1 { font-size: clamp(1.6rem,3vw,2.2rem); max-width: 24ch; margin-bottom: 1rem }
.doc-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .86rem; color: var(--ink-faint); padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem }
.doc-aside { position: sticky; top: 1.5rem; font-size: .92rem }
.doc-aside .box { border: 1px solid var(--rule); padding: 1.05rem 1.15rem; margin-bottom: .9rem }
.doc-aside h4 { font-size: .83rem; color: var(--ink-faint); font-weight: 600; margin-bottom: .6rem }
.doc-aside a { color: var(--brand) }
.doc-aside ul { list-style: none; margin: 0; padding: 0; line-height: 1.5 }
.doc-aside li { margin-bottom: .55rem }

/* Hotová citace k překopírování — stanoviska existují proto, aby se na ně
   dalo odkázat, tak na to musí být přímá odpověď (§5.5) */
.cite { font-family: var(--serif); font-size: .93rem; color: var(--ink-soft); background: var(--brand-wash); padding: .6rem .75rem; border-left: 3px solid var(--brand) }
/* Citace obsahuje plnou adresu stanoviska. Ta se nemá kde zlomit, takže
   bez tohohle vylézá z rámečku ven. */
.cite { overflow-wrap: anywhere }
/* Totéž pro odkazy v bočním panelu a v přeneseném obsahu. */
.doc-aside, .prose a { overflow-wrap: anywhere }
.cite-copy { margin-top: .6rem; font-size: .86rem; background: none; border: 1px solid var(--rule); border-radius: 2px; padding: .3rem .6rem; cursor: pointer; font-family: var(--sans); color: var(--brand) }
.cite-copy:hover { border-color: var(--brand) }

/* ── patička ─────────────────────────────────────────────────────────── */
footer.site { background: var(--ink); color: #fff; padding-block: clamp(2.5rem,5vw,3.5rem); font-size: .93rem; margin-top: clamp(3rem,6vw,5rem) }
footer.site .grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 2rem }
footer.site h2 { font-size: .85rem; font-weight: 600; color: #A9A2AB; margin-bottom: .8rem }
footer.site ul { list-style: none; margin: 0; padding: 0; line-height: 1.95 }
footer.site a { color: #fff; text-decoration: none; opacity: .9 }
footer.site a:hover { opacity: 1; text-decoration: underline }
footer.site p { margin: 0; line-height: 1.75 }
.legal { border-top: 1px solid rgba(255,255,255,.18); margin-top: 2.25rem; padding-top: 1.15rem; color: #A9A2AB; font-size: .84rem; display: flex; flex-wrap: wrap; gap: 1.2rem }
.legal a { color: #A9A2AB }

/* ── Právní pomoc dětem (§7) ─────────────────────────────────────────── */
.paths { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1.5rem; margin-top: 2.25rem }
.path { border: 1px solid var(--rule); border-top: 4px solid var(--brand); padding: 1.6rem; text-decoration: none; display: block }
.path:hover { background: var(--brand-wash) }
.path h2 { font-size: 1.15rem; margin-bottom: .55rem }
.path p { margin: 0 0 1rem; font-size: .95rem; color: var(--ink-soft) }
.path .go { color: var(--brand); font-size: .93rem; font-weight: 600 }

/* Prostý datovaný seznam — funguje při jedné i při třiceti položkách */
.doclist { border-top: 1px solid var(--rule); margin-top: 1.75rem }
.docrow { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 1.5rem; padding-block: 1.35rem; border-bottom: 1px solid var(--rule); align-items: start }
.docrow time { font-size: .85rem; color: var(--ink-faint) }
.docrow h3 { font-size: 1.1rem; margin-bottom: .4rem }
.docrow h3 a { text-decoration: none }
.docrow h3 a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px }
.docrow p { font-family: var(--serif); font-size: 1rem; color: var(--ink-soft); margin: 0 0 .7rem }
.docrow .dl { color: var(--brand); font-size: .9rem; font-weight: 600; text-decoration: none }
.note { font-size: .93rem; color: var(--ink-faint); font-style: italic; padding: 1.25rem 0 }

.lawyers { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 1rem; margin-top: 1.75rem }
.lawyer { border: 1px solid var(--rule); padding: 1.1rem 1.2rem }
.lawyer h3 { font-size: 1rem; margin-bottom: .2rem }
.lawyer .where { font-size: .86rem; color: var(--ink-faint); margin-bottom: .7rem }
.lawyer .c { font-size: .88rem; line-height: 1.7 }
.lawyer .c a { color: var(--brand) }
.badge { display: inline-block; font-size: .72rem; color: var(--brand-deep); background: var(--brand-wash); border: 1px solid var(--rule); padding: .1rem .45rem; margin-left: .4rem; vertical-align: .08em }

/* Jedna věta nad každým seznamem, aby bylo jasné, co znamená být na něm */
.scope { background: var(--brand-wash); border-left: 3px solid var(--brand); padding: .85rem 1rem; font-size: .94rem; color: var(--ink-soft); margin-top: 1.25rem }

/* ── orgány unie a seznam členů (§5.7) ───────────────────────────────── */
/* Prezidium: tři portréty na řádek. Zbytek prezidia je šest lidí, takže
   z toho vyjdou dvě plné řady — automatické skládání dávalo 4 + 2. */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.75rem; margin-top: 2rem }
.person h3 { font-size: 1rem; line-height: 1.35; margin-bottom: .15rem }
.person .role { font-size: .85rem; color: var(--brand); font-weight: 600 }

/* Sjednocený poměr stran a záložní iniciály jsou důležitější než samotné
   fotky — seznam nesmí vypadat rozbitě, když polovina lidí fotku nepošle */
.portrait { aspect-ratio: 4/5; background: var(--brand-wash); border: 1px solid var(--rule); display: grid; place-items: center; color: var(--brand); font-size: 1.5rem; font-weight: 600; margin-bottom: .75rem; overflow: hidden }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block }
.lead-person { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 2rem; align-items: start; margin-top: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule) }
.lead-person .portrait { margin-bottom: 0 }
.lead-person h3 { font-size: 1.35rem; margin-bottom: .3rem }
.lead-person p { font-family: var(--serif); color: var(--ink-soft); margin: .9rem 0 0 }

table.members { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: .95rem }
table.members th { text-align: left; font-size: .8rem; color: var(--ink-faint); font-weight: 600; padding: .5rem .6rem; border-bottom: 2px solid var(--ink) }
table.members td { padding: .62rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: middle }
table.members tr:hover td { background: var(--brand-wash) }
.thumb { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-wash); border: 1px solid var(--rule); display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: var(--brand); overflow: hidden }
.thumb img { width: 100%; height: 100%; object-fit: cover }

.filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.5rem }
.filter-bar input, .filter-bar select {
  font: inherit; font-size: .92rem; padding: .42rem .6rem;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); color: var(--ink);
}

.gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1rem; margin-top: 1.75rem }
.shot { aspect-ratio: 3/2; background: var(--brand-wash); border: 1px solid var(--rule); display: grid; place-items: center; color: var(--ink-faint); font-size: .82rem; overflow: hidden }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block }
.shot a { display: block; width: 100%; height: 100% }
.shot figcaption {
  position: absolute; inset-inline: 0; bottom: 0; padding: .35rem .5rem;
  background: rgba(20,18,22,.72); color: #fff; font-size: .78rem; line-height: 1.3;
}
.gallery .shot { position: relative }

/* Rozcestník galerií — jen když je jich víc než jedna. */
.gallery-index { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.75rem }
.gallery-index a { font-size: .92rem }
.gallery-block { margin-top: 2.5rem }
.gallery-block .t-section { margin-bottom: .35rem }


.contactgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 2rem; margin-top: 1.75rem }
.contactgrid h3 { font-size: 1rem; margin-bottom: .5rem }
.contactgrid p { margin: 0; font-size: .95rem; line-height: 1.75; color: var(--ink-soft) }
.contactgrid a { color: var(--brand) }

/* ── rozcestník podle publik (varianta B, §6.1) ──────────────────────── */
.audiences { padding-block: clamp(2.5rem,5vw,4rem); border-top: 1px solid var(--rule) }
.audiences .grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: clamp(1.5rem,4vw,3rem) }
.audience h2 { font-size: 1.1rem; padding-bottom: .55rem; border-bottom: 2px solid var(--brand); margin-bottom: .8rem }
.audience ul { list-style: none; margin: 0; padding: 0; line-height: 2 }
.audience a { color: var(--brand); text-decoration: none; font-size: .95rem }
.audience a:hover { text-decoration: underline; text-underline-offset: 2px }

/* ── hlášky a prázdné stavy ──────────────────────────────────────────── */
.flash { border-left: 3px solid var(--brand); background: var(--brand-wash); padding: .8rem 1rem; margin-bottom: 1.25rem; font-size: .95rem }
.flash-danger { border-left-color: #B3261E; background: #FCEEEC }
.flash-warning { border-left-color: #A16207; background: #FEF6E7 }
.empty { color: var(--ink-faint); font-style: italic; padding: 1.5rem 0 }

.pager { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2.5rem; font-size: .92rem }
.pager a, .pager span { border: 1px solid var(--rule); border-radius: 2px; padding: .35rem .7rem; text-decoration: none }
.pager a:hover { border-color: var(--brand); color: var(--brand) }
.pager [aria-current] { background: var(--brand); color: #fff; border-color: var(--brand) }

/* ── responzivita ────────────────────────────────────────────────────── */
/* Sbalené menu se zapíná dřív než ostatní mobilní úpravy — sedm položek
   a hledání se na střední šířky nevejde a lišta by se zlomila. */
@media (max-width: 1100px) {
  .nav-toggle { display: block; margin-left: auto }
  nav.main {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gutter) 1rem; box-shadow: 0 10px 20px rgba(20,18,22,.08);
  }
  nav.main[data-open] { display: flex }
  nav.main a { padding-block: .65rem; border-bottom: 1px solid var(--rule); white-space: normal }
  nav.main a[aria-current] { border-bottom-color: var(--brand) }
  .nav-item > .sub { position: static; display: block; border: 0; padding: 0 0 0 1rem }
  .nav-item > .sub a { padding-block: .55rem }
  header.site .wrap { position: relative; flex-wrap: wrap }
  .search-form { width: 100%; margin-top: .5rem }
  .search-form input { flex: 1 }
}

@media (max-width: 880px) {
  /* Media query nepřidává specificitu — pravidlo pro užší šířku proto musí
     v souboru stát ZA tím pro širší, jinak neplatí. */
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hero .grid, .doc-grid { grid-template-columns: 1fr }
  .docrow { grid-template-columns: 1fr; gap: .4rem }
  .lead-person { grid-template-columns: 1fr }

  /* pod 880 px se osa ruší, kolečko s číslem jde nad nadpis (§5.1) */
  .year { grid-template-columns: 1fr; gap: .75rem }
  .year .label { position: static }
  .items { border-left: 0; padding-left: 0 }
  .item .no { position: static; margin-bottom: .5rem }

  .doc-aside { position: static }

}


/* =====================================================================
   Odstupy a drobnosti třídami, ne atributem style

   Hlavička Content-Security-Policy je bez 'unsafe-inline', takže atribut
   style prohlížeč zahodí a odstup se vůbec neuplatní. Proto tyhle třídy.
   ===================================================================== */
.mt-half { margin-top: .5rem }
.mt-1    { margin-top: 1.5rem }
.mt-2    { margin-top: 1.75rem }
.mt-3    { margin-top: 2rem }
.mt-4    { margin-top: 2.5rem }
.mb-half { margin-bottom: .5rem }
.m-0     { margin: 0 }
.m-tight { margin: 0 0 .2rem }
.pb-1    { padding-block: 1.5rem }
.w-16    { min-width: 16rem }
.lh-2    { line-height: 2 }
.fw-600  { font-weight: 600 }
.text-soft { color: var(--ink-soft); margin-top: .9rem }
.lead-person .name-lead { font-size: 1.35rem; margin-bottom: .3rem }
.lead-person .role-lead { color: var(--brand); font-weight: 600; margin: 0 }

/* =====================================================================
   Obsah přenesený ze staré verze

   Texty stránek nesou HTML původního webu: Bootstrap mřížku
   (container / row / col-lg-*) a názvy tříd jeho šablony. Nový web tyhle
   třídy nemá, takže se mřížka rozpadla do jednoho sloupce a obrázky se
   vykreslily v originální velikosti — na stránce Orgány unie to znamenalo
   sedm fotek pod sebou, každá jinak velká.

   Než klientka texty postupně přepíše, drží je tenhle blok v mezích.
   Platí ZÁMĚRNĚ jen uvnitř .prose, aby nesahal na layout webu.
   ===================================================================== */
.prose img { max-width: 100%; height: auto; display: block }
.prose figure { margin: 0 }

.prose .container,
.prose .container-fluid { width: auto; max-width: none; padding: 0; margin: 0 }

.prose section { margin: 0 }

.prose .row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem 1.75rem; margin: 0;
}
.prose [class*="col-"] { padding: 0; width: auto; max-width: none; float: none }

/* Bez třídy nebo pod nejmenší hranicí zabírá prvek celou šířku — stejně
   jako v Bootstrapu. */
.prose .row > * { grid-column: span 12 }

/* Hranice odpovídají Bootstrapu 3: sm 768, md 992, lg 1200. */
.prose [class~="col-xs-1"] { grid-column: span 1 }
.prose [class~="col-xs-2"] { grid-column: span 2 }
.prose [class~="col-xs-3"] { grid-column: span 3 }
.prose [class~="col-xs-4"] { grid-column: span 4 }
.prose [class~="col-xs-5"] { grid-column: span 5 }
.prose [class~="col-xs-6"] { grid-column: span 6 }
.prose [class~="col-xs-7"] { grid-column: span 7 }
.prose [class~="col-xs-8"] { grid-column: span 8 }
.prose [class~="col-xs-9"] { grid-column: span 9 }
.prose [class~="col-xs-10"] { grid-column: span 10 }
.prose [class~="col-xs-11"] { grid-column: span 11 }
.prose [class~="col-xs-12"] { grid-column: span 12 }
@media (min-width: 768px) {
  .prose [class~="col-sm-1"] { grid-column: span 1 }
  .prose [class~="col-sm-2"] { grid-column: span 2 }
  .prose [class~="col-sm-3"] { grid-column: span 3 }
  .prose [class~="col-sm-4"] { grid-column: span 4 }
  .prose [class~="col-sm-5"] { grid-column: span 5 }
  .prose [class~="col-sm-6"] { grid-column: span 6 }
  .prose [class~="col-sm-7"] { grid-column: span 7 }
  .prose [class~="col-sm-8"] { grid-column: span 8 }
  .prose [class~="col-sm-9"] { grid-column: span 9 }
  .prose [class~="col-sm-10"] { grid-column: span 10 }
  .prose [class~="col-sm-11"] { grid-column: span 11 }
  .prose [class~="col-sm-12"] { grid-column: span 12 }
}
@media (min-width: 992px) {
  .prose [class~="col-md-1"] { grid-column: span 1 }
  .prose [class~="col-md-2"] { grid-column: span 2 }
  .prose [class~="col-md-3"] { grid-column: span 3 }
  .prose [class~="col-md-4"] { grid-column: span 4 }
  .prose [class~="col-md-5"] { grid-column: span 5 }
  .prose [class~="col-md-6"] { grid-column: span 6 }
  .prose [class~="col-md-7"] { grid-column: span 7 }
  .prose [class~="col-md-8"] { grid-column: span 8 }
  .prose [class~="col-md-9"] { grid-column: span 9 }
  .prose [class~="col-md-10"] { grid-column: span 10 }
  .prose [class~="col-md-11"] { grid-column: span 11 }
  .prose [class~="col-md-12"] { grid-column: span 12 }
}
@media (min-width: 1200px) {
  .prose [class~="col-lg-1"] { grid-column: span 1 }
  .prose [class~="col-lg-2"] { grid-column: span 2 }
  .prose [class~="col-lg-3"] { grid-column: span 3 }
  .prose [class~="col-lg-4"] { grid-column: span 4 }
  .prose [class~="col-lg-5"] { grid-column: span 5 }
  .prose [class~="col-lg-6"] { grid-column: span 6 }
  .prose [class~="col-lg-7"] { grid-column: span 7 }
  .prose [class~="col-lg-8"] { grid-column: span 8 }
  .prose [class~="col-lg-9"] { grid-column: span 9 }
  .prose [class~="col-lg-10"] { grid-column: span 10 }
  .prose [class~="col-lg-11"] { grid-column: span 11 }
  .prose [class~="col-lg-12"] { grid-column: span 12 }
}

/* Obrázek uvnitř přenesené mřížky se chová jako portrét — jednotný poměr
   je podle návrhu důležitější než původní rozměry snímku (§5.7). */
.prose .row img { aspect-ratio: 4 / 5; object-fit: cover; width: 100% }

/* Zbytky tříd staré šablony, které by jinak nedělaly nic nebo vadily. */
.prose .theme-shadow { box-shadow: none }
.prose [class*="padding-"], .prose [class*="margin-"] { padding: 0; margin: 0 }
.prose [class*="font-size"] { font-size: inherit }
.prose .text-center { text-align: left }

@media (max-width: 520px) {
  .people { grid-template-columns: 1fr }
}

/* =====================================================================
   Kontakty

   Údaje organizace i kontakty na prezidium se skládají z dat. Popis vlevo,
   hodnota vpravo — na úzké obrazovce pod sebou.
   ===================================================================== */
.org-card { border: 1px solid var(--rule); border-top: 3px solid var(--brand); padding: 1.5rem 1.75rem }
.org-name { font-size: 1.2rem; margin-bottom: 1.1rem }

.org-details { margin: 0; display: grid; gap: .85rem 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.org-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: .25rem 1rem; align-items: start }
.org-row dt { font-size: .86rem; color: var(--ink-faint); font-weight: 600; padding-top: .1rem }
.org-row dd { margin: 0; line-height: 1.55 }
.org-row a { color: var(--brand) }
.org-note { display: block; font-size: .84rem; color: var(--ink-faint) }

/* Kontakty na prezidium — portrét vlevo, údaje vpravo. Fotka je malá
   záměrně: velké portréty patří na stránku Orgány unie. */
.contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1.75rem; margin-top: 1.5rem }
.contact-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 1rem; align-items: start }
.contact-photo {
  aspect-ratio: 4 / 5; background: var(--brand-wash); border: 1px solid var(--rule);
  display: grid; place-items: center; overflow: hidden;
  color: var(--brand); font-size: 1.05rem; font-weight: 600;
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.contact-card h3 { font-size: 1rem; line-height: 1.35; margin-bottom: .1rem }
.contact-card .role { font-size: .85rem; color: var(--brand); font-weight: 600; margin: 0 0 .35rem }
.contact-card .line { margin: 0; font-size: .92rem; line-height: 1.6 }
.contact-card .line a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere }
.contact-card .line a:hover { color: var(--brand); text-decoration: underline }

@media (max-width: 1100px) {
  .org-details { grid-template-columns: 1fr }
  .contacts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 620px) {
  .org-card { padding: 1.15rem 1.2rem }
  .org-row { grid-template-columns: 1fr }
  .contacts { grid-template-columns: 1fr }
  .contact-card { grid-template-columns: 68px minmax(0, 1fr) }
}