/* ==========================================================================
   Společně pro Brusné – styly webu
   Barvy převzaté z volebního letáku (modrá, červená, bílá).
   ========================================================================== */

:root {
    --modra:        #0f4485;
    --modra-tmava:  #0a3765;
    --modra-svetla: #e8eef7;
    --cervena:      #d00a1a;
    --cervena-tmava:#a80714;
    --bila:         #ffffff;
    --papir:        #f7f8fa;
    --text:         #1c2532;
    --text-tlumeny: #5b6779;
    --linka:        #dde3ec;

    --obal:         1140px;
    --radius:       10px;
    --stin:         0 1px 2px rgba(15, 68, 133, .06), 0 6px 20px rgba(15, 68, 133, .08);
    --stin-vyssi:   0 4px 10px rgba(15, 68, 133, .10), 0 18px 40px rgba(15, 68, 133, .16);
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bila);
    color: var(--text);
    font: 400 17px/1.65 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* Obsah roztlačí patičku ke spodnímu okraji i u krátkých stránek. */
main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--modra); }

.obal {
    width: 100%;
    max-width: var(--obal);
    margin-inline: auto;
    padding-inline: 20px;
}

.obal--uzky { max-width: 820px; }

/* --- přeskočení na obsah (klávesnice) ----------------------------------- */
.preskocit {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--modra);
    color: var(--bila);
    padding: 10px 16px;
    z-index: 100;
}
.preskocit:focus { left: 8px; top: 8px; }

/* --- upozornění na náhled ----------------------------------------------- */
.vyvojovy-pruh {
    background: #fff4d6;
    border-bottom: 1px solid #e8d296;
    color: #6b5100;
    font-size: 14px;
    text-align: center;
    padding: 8px 16px;
}

/* --- hlavička ------------------------------------------------------------ */
.hlavicka {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% -10%, #ffffff 0%, #f4f7fc 55%, #e9eff8 100%);
    padding: 72px 0 64px;
    text-align: center;
}

.hlavicka--kompaktni { padding: 34px 0 30px; }

/* dekorativní vlnovky z letáku */
.vlnky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.vlnky__cara--cervena { stroke: rgba(208, 10, 26, .30); }
.vlnky__cara--seda    { stroke: rgba(15, 68, 133, .16); }
.vlnky__cara--paticka { stroke: rgba(255, 255, 255, .16); }

.hlavicka--kompaktni .vlnky { opacity: .6; }

.hlavicka__obsah {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

/* logo */
.znacka-nadpis {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.znacka {
    text-decoration: none;
    line-height: .95;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.znacka__spolecne {
    color: var(--modra);
    font-size: clamp(38px, 8vw, 76px);
    font-weight: 900;
    letter-spacing: .04em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.znacka__pro {
    color: var(--cervena);
    font-size: clamp(26px, 5.4vw, 50px);
    font-weight: 800;
    letter-spacing: .01em;
}

.hlavicka--kompaktni .znacka__spolecne { font-size: clamp(26px, 5vw, 34px); }
.hlavicka--kompaktni .znacka__pro      { font-size: clamp(19px, 3.6vw, 25px); }

/* motto pod logem */
.hlavicka__claim {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    font-size: clamp(15px, 2.2vw, 20px);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--modra);
}

.hlavicka__slovo {
    position: relative;
    padding-bottom: 9px;
}

/* podtržení, které se po načtení stránky postupně vykreslí */
.hlavicka__slovo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--modra);
    transform-origin: left center;
    animation: podtrzeni .55s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes podtrzeni {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.hlavicka__slovo:nth-child(1)::after { animation-delay: .15s; }
.hlavicka__slovo:nth-child(2)::after { animation-delay: .30s; }
.hlavicka__slovo:nth-child(3)::after { animation-delay: .45s; }

.hlavicka__slovo--cervene { color: var(--cervena); }
.hlavicka__slovo--cervene::after { background: var(--cervena); }

.hlavicka--kompaktni .hlavicka__claim {
    font-size: 13px;
    letter-spacing: .12em;
    gap: 4px 16px;
}

.hlavicka--kompaktni .hlavicka__slovo { padding-bottom: 0; }
.hlavicka--kompaktni .hlavicka__slovo::after { display: none; }

/* barevná linka pod hlavičkou – přechod z modré do červené */
.trikolora {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(to right, var(--modra), #7b2450 55%, var(--cervena));
}

/* --- úvodní sekce -------------------------------------------------------- */
.uvodni { padding: 52px 0 8px; }

/* tři pilíře */
.pilire {
    list-style: none;
    margin: 0 0 52px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pilir {
    --akcent: var(--modra);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 28px 26px 26px;
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    background: var(--bila);
    box-shadow: var(--stin);
    transition: transform .2s ease, box-shadow .2s ease;
}

.pilir--cervena { --akcent: var(--cervena); }

/* barevný proužek nahoře */
.pilir::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--akcent);
}

.pilir:hover {
    transform: translateY(-4px);
    box-shadow: var(--stin-vyssi);
}

/* ikona + nadpis vedle sebe, text pod nimi */
.pilir__zahlavi {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--modra-svetla);
}

.pilir__ikona {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    color: var(--akcent);
}

.pilir__nadpis {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--akcent);
}

.pilir__podnadpis {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-tlumeny);
}

.pilir__text {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
}

/* úvodní text – závěrečné shrnutí pod pilíři */
.text-uvod {
    max-width: 820px;
    margin: 0 auto;
    font-size: 18px;
}

.text-uvod p { margin: 0; }

.zaver {
    position: relative;
    padding: 26px 30px;
    background: var(--modra-svetla);
    border-left: 5px solid var(--cervena);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.zaver p {
    color: var(--text);
    font-size: clamp(17px, 2.2vw, 20px);
    font-weight: 600;
    line-height: 1.6;
}

/* --- kandidáti ----------------------------------------------------------- */
.kandidati {
    padding: 56px 0 64px;
    margin-top: 48px;
    background: var(--papir);
    border-top: 1px solid var(--linka);
}

.nadpis-sekce {
    margin: 0 0 8px;
    text-align: center;
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 800;
    color: var(--modra);
}

.nadpis-sekce__popis {
    margin: 0 auto 36px;
    max-width: 620px;
    text-align: center;
    color: var(--text-tlumeny);
}

.mrizka {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.karta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 26px 18px 22px;
    background: var(--bila);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* barevný proužek nahoře, který se při najetí rozsvítí červeně */
.karta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--modra);
    transition: background .18s ease;
}

.karta:hover,
.karta:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--stin-vyssi);
    border-color: var(--modra);
    outline: none;
}

.karta:hover::before,
.karta:focus-visible::before { background: var(--cervena); }

/* obal fotky – drží kolečko s číslem, které smí přesahovat přes okraj */
.karta__portret {
    position: relative;
    display: block;
    margin-bottom: 16px;
}

/* číslo na kandidátce – bílé v červeném kolečku.
   Modrá na červené má kontrast jen 1,7:1 a byla by nečitelná; bílá dává 5,6:1. */
.karta__cislo {
    position: absolute;
    top: -9px;
    left: -9px;
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--cervena);
    border: 2px solid var(--bila);
    color: var(--bila);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 5px rgba(208, 10, 26, .30);
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

/* při najetí se barvy prohodí */
.karta:hover .karta__cislo,
.karta:focus-visible .karta__cislo {
    background: var(--bila);
    border-color: var(--cervena);
    color: var(--cervena);
}

/* text jen pro čtečky obrazovky */
.skryte {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.karta__foto {
    position: relative;
    display: block;
    width: 168px;
    height: 168px;
    border: 3px solid var(--modra);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--modra-svetla);
    transition: border-color .18s ease;
}

.karta:hover .karta__foto { border-color: var(--cervena); }

.karta__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .35s ease;
}

.karta:hover .karta__foto img { transform: scale(1.06); }

.karta__iniciala {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 56px;
    font-weight: 800;
    color: var(--modra);
}

.karta__jmeno {
    font-size: 19px;
    font-weight: 700;
    color: var(--modra);
    line-height: 1.25;
}

.karta__vek {
    font-weight: 700;
    margin-top: 2px;
}

.karta__profese {
    color: var(--text-tlumeny);
    font-size: 15px;
    margin-top: 2px;
}

.karta__vice {
    margin-top: auto;
    padding-top: 14px;
    color: var(--cervena);
    font-size: 14px;
    font-weight: 700;
}

.karta:hover .karta__vice { text-decoration: underline; }

/* --- medailonek ---------------------------------------------------------- */
.medailonek__hlavicka {
    display: flex;
    gap: 22px;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--modra-svetla);
}

.medailonek__foto {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    object-fit: cover;
    object-position: center top;
    border: 3px solid var(--modra);
    border-radius: var(--radius);
}

.medailonek__udaje { min-width: 0; }

.medailonek__jmeno {
    margin: 0 0 6px;
    font-size: clamp(22px, 3.2vw, 29px);
    font-weight: 800;
    color: var(--modra);
    line-height: 1.2;
}

.medailonek__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
}

.medailonek__vek {
    font-weight: 700;
}

.medailonek__profese { color: var(--text-tlumeny); }

.medailonek__poradi {
    margin: 8px 0 0;
    display: inline-block;
    padding: 3px 10px;
    background: var(--cervena);
    color: var(--bila);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.medailonek__perex {
    margin: 0 0 20px;
    font-size: 19px;
    font-style: italic;
    color: var(--modra-tmava);
    border-left: 4px solid var(--cervena);
    padding-left: 16px;
}

/* jen ve vývojovém režimu – označení neschváleného textu */
.medailonek__vzor {
    margin: 0 0 14px !important;
    padding: 8px 12px;
    background: #fff4d6;
    border-left: 4px solid #e8c46a;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: #6b5100;
}

.medailonek__text p { margin: 0 0 16px; }
.medailonek__text p:last-child { margin-bottom: 0; }

/* --- samostatná stránka kandidáta ---------------------------------------- */
.stranka-kandidata { padding: 40px 0 64px; }

.drobecky {
    margin: 0 0 24px;
    font-size: 15px;
    font-weight: 600;
}

.drobecky a { text-decoration: none; }
.drobecky a:hover { text-decoration: underline; }

/* --- modální karta -------------------------------------------------------- */
.modal {
    width: min(780px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 0;
    border: none;
    border-top: 6px solid var(--cervena);
    border-radius: var(--radius);
    box-shadow: var(--stin-vyssi);
    color: var(--text);
    overflow: visible;
}

.modal::backdrop {
    background: rgba(10, 55, 101, .55);
}

.modal__obsah {
    padding: 30px 34px 34px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
}

.modal__zavrit {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-tlumeny);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.modal__zavrit:hover {
    background: var(--modra-svetla);
    color: var(--modra);
}

/* --- patička -------------------------------------------------------------- */
.paticka {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(160deg, var(--modra) 0%, var(--modra-tmava) 70%);
    color: var(--bila);
    padding: 48px 0 40px;
    text-align: center;
    border-top: 6px solid var(--cervena);
}

.paticka__obsah { position: relative; }

.paticka__vyzva {
    margin: 0 0 12px;
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 900;
    letter-spacing: .01em;
}

.paticka__radek {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .78);
}

.paticka__radek a { color: var(--bila); }

/* --- responzivita ---------------------------------------------------------- */
@media (max-width: 900px) {
    .hlavicka { padding: 48px 0 44px; }
    .mrizka { grid-template-columns: repeat(2, 1fr); }
    .pilire { grid-template-columns: 1fr; gap: 16px; }
    .pilir { padding: 22px 22px 22px 24px; }
    .pilir__zahlavi { padding-bottom: 12px; margin-bottom: 12px; }
    .pilir__ikona { width: 40px; height: 40px; }
    .pilir__nadpis { font-size: 19px; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .hlavicka { padding: 36px 0 34px; }
    .hlavicka__obsah { gap: 16px; }
    .hlavicka__claim { letter-spacing: .1em; gap: 4px 14px; }
    .uvodni { padding-top: 36px; }
    .mrizka { grid-template-columns: 1fr; gap: 18px; }
    .karta__foto { width: 140px; height: 140px; }
    .medailonek__hlavicka { flex-direction: column; text-align: center; align-items: center; }
    .medailonek__meta { justify-content: center; }
    .modal__obsah { padding: 26px 20px 28px; }
    .medailonek__perex { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .karta, .pilir, .karta__foto, .karta__foto img { transition: none; }
    .karta:hover, .karta:focus-visible, .pilir:hover { transform: none; }
    .karta:hover .karta__foto img { transform: none; }
    .hlavicka__slovo::after { animation: none; transform: scaleX(1); }
}

/* --- tisk ------------------------------------------------------------------ */
@media print {
    .vyvojovy-pruh, .karta__vice, .modal, .preskocit { display: none !important; }
    body { font-size: 12pt; }
    .kandidati { background: none; }
    .karta { box-shadow: none; page-break-inside: avoid; }
}