/* ============================================================
   sdh-mnisi.cz — projektové úpravy nad šablona šablonou
   Načítá se POSLEDNÍ (po theme.css) → overrides vyhrávají.
   Hasičská červená se ladí centrálně z jednoho místa níže.
   ============================================================ */

/* ----------------------------------------
   1. Brand paleta + remap šablona akcentu
   ---------------------------------------- */
:root {
    --color-primary:      #ce2029;   /* hasičská červená — CTA, odkazy, akcenty */
    --color-primary-dark: #a81a21;   /* hover / active */
    --color-text:         #212529;
    --color-text-muted:   #6c757d;
    --color-bg:           #ffffff;
    --color-bg-alt:       #f8f9fa;
    --color-border:       #dee2e6;

    /* šablona akcent (--brand-base, 1093× ve theme.css) → hasičská červená.
       Měň barvu jen nahoře v --color-primary; tohle ji jen přemapuje. */
    --brand-base:      var(--color-primary);
    --brand-base-rgb:  206, 32, 41;
}

/* Tlačítka — hover ztmavení na primary-dark (šablona nemá vlastní base-dark) */
.brand-btn:hover,
.brand-btn:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* ----------------------------------------
   2. Obrázkové logo SDH (nahrazuje šablona logo)
   ---------------------------------------- */
.logo-sdh__link,
a.logo-sdh {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}
.logo-sdh__img {
    display: block;
    box-sizing: content-box;   /* padding se přičte, logo zůstane 70px */
    height: 70px;
    width: auto;
    padding: 10px 0;           /* 10px vzduch nahoře i dole */
}
/* Footer logo — vlastní (světlé) logo, výška 80px. */
.logo-sdh--footer .logo-sdh__img {
    height: 80px;
    padding: 0;
}
/* Červený pruh je margin-top:-55px vytažený nad tmavou patičku a má být
   „napůl" přes hranici sekce/footeru (jako šablona originál): horní půlka na
   světlé sekci, spodní na tmavé. Bílé tělo stránky ale v překryvu prosvítalo.
   Řešení: jemně šedý pruh (barva sekce) přes horní polovinu červeného pruhu —
   sahá od spodku sekce do STŘEDU červeného pruhu, kde přebírá tmavá patička.
   (55px překryv + 21px do půlky 150px pruhu = 76px.) Červený pruh musí být nad
   tímto pruhem, proto z-index. */
.main-footer {
    position: relative;
}
.main-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -55px;
    height: 76px;
    background-color: #f5f6f7;
    z-index: 1;
}
.main-footer__top {
    position: relative;
    z-index: 2;
}
/* Symetrická mezera tmavé části patičky (šablona měl 60px nahoře / 110px dole).
   Dole 64px, protože copyright bar přidává ~16px → vizuálně 80px jako nahoře. */
.main-footer__middle {
    margin-top: 80px;
    margin-bottom: 64px;
}

/* Copyright bar 50/50: vlevo kredit jahoda.studio, vpravo sbor. */
.main-footer__bottom__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.main-footer__copyright--left { text-align: left; }
.main-footer__copyright--right { text-align: right; }
.main-footer__copyright a { color: inherit; }
.main-footer__copyright a:hover { color: var(--color-primary); }
@media (max-width: 767px) {
    .main-footer__bottom__inner {
        flex-direction: column;
        gap: 8px;
    }
    .main-footer__copyright--left,
    .main-footer__copyright--right { text-align: center; }
}

/* Dělicí čára v červeném pruhu: začíná až za širším logem (nenavazuje přímo
   na něj) a končí blíž jediné FB ikoně (šablona left:230px/right:310px počítá
   s úzkým logem a 4 ikonami — my máme široké logo a jen Facebook). */
.main-footer__top__inner::after {
    left: 500px;
    right: 124px;          /* stejná ~33px mezera jako u loga (ikona začíná 91px od kraje) */
    height: 2px;
    transform: translateY(-50%); /* vycentrovat 2px čáru na top:50% */
}

/* ----------------------------------------
   3. Šířka kontejneru (šablona má 1200px)
   ---------------------------------------- */
/* Širší obsahová plocha napříč webem. Stejný breakpoint jako šablona,
   ale načítá se později → vyhrává. Pod 1460px zůstává fluidní. */
@media (min-width: 1200px) {
    .container {
        max-width: 1460px;
    }
}

/* ----------------------------------------
   3b. Pozadí podstránek
   ---------------------------------------- */
/* Jemně šedá je default pozadí pro VŠECHNY podstránky (konzistence se šedou
   v patičce i sekcích). Homepage má vlastní sekce → zůstává bílá.
   (body dostává data-route v _includes/head.php; home = 'home'.) */
body {
    background-color: #f5f6f7;
}
body[data-route="home"] {
    background-color: #fff;
}

/* ----------------------------------------
   4. Vertikální rytmus — doladění mezer
   ---------------------------------------- */
/* Hero fotka je <img srcset> místo CSS backgroundu (kvůli responzivním
   variantám). Musí se chovat jako `background-size: cover`.

   Gradient `.main-slider-one__bg::before` je v DOM PŘED <img>, takže by ho
   obrázek přebil. Zvednout gradient na `z-index: 1` ale nestačí: `__bg` má
   `z-index: auto`, takže NENÍ stacking context — gradient by vystoupil až do
   `__item` a překryl i bílý roh `.main-slider-one__item::after` (ten zešedne).
   Proto z `__bg` uděláme stacking context (`z-index: 0`) a gradient zvedneme
   jen uvnitř něj. */
.main-slider-one__bg {
    z-index: 0;
}
.main-slider-one__bg > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.main-slider-one__bg::before {
    z-index: 1;
}

/* CLS fix — hero musí mít svou výšku už od prvního vykreslení.
   owl.carousel.min.css má `.owl-carousel { display: none }` a teprve init
   přidá `.owl-loaded { display: block }`. Do té chvíle je hero NULOVĚ vysoký,
   feature-one sedí hned pod hlavičkou — a v okamžiku initu všechno pod herem
   spadne dolů. Naměřeno: CLS 0.56 (desktop) i 0.61 (mobil).
   Řešení: ukázat PRVNÍ slide hned a ostatní schovat, dokud owl nenaběhne.
   Výška pak vyjde z obsahu, takže to platí na každé šířce (desktop má slide
   859px pevně, pod 992px `height: auto`) a nezávisí to na magickém čísle.
   Vedlejší efekt: hero se vykreslí ještě před JS → dřívější LCP. */
.main-slider-one__carousel:not(.owl-loaded) {
    display: block;
}
.main-slider-one__carousel:not(.owl-loaded) > .item:not(:first-child) {
    display: none;
}

/* Menší mezery u první sekce pod hero (šablona má 120px nahoře i dole). */
.feature-one {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Karty „feature-one" stejně vysoké — srovnat podle nejvyšší.
   BS4 sloupce v .row jsou flex-stretch → item vyplní celou výšku sloupce.
   Užší padding (theme má 40px 30px) uvolní 12px na titulek. */
.feature-one__item {
    height: 100%;
    padding: 34px 24px;
}

/* 19px místo 20px — „ZÁSAHOVÁ JEDNOTKA – JPO V" potřebuje 276px
   a s paddingem 24px je k dispozici 285px, takže se vejde na jeden řádek. */
.feature-one__item__title {
    font-size: 19px;
}

/* Mezi 992 a 1459px je sloupec užší a titulek se zalomí na 2 řádky.
   Rezervovat mu tam dva řádky (2 × line-height 23px), ať odstavce
   všech karet začínají na stejné výšce. Nad 1460px je jednořádkový,
   pod 992px se karty přeskládají do col-md-6 (opět se vejde). */
@media (min-width: 992px) and (max-width: 1459px) {
    .feature-one__item__title {
        min-height: 46px;
    }
}

/* Menší mezera pod sekcí „O sboru" (šablona má 120px). */
.about-one {
    padding-bottom: 80px;
}

/* Menší horní mezera sekce „Co děláme" (šablona má 120px). */
.service-page {
    padding-top: 80px;
}

/* Karty carouselu „Co děláme" stejně vysoké.
   Owl slidy se defaultně nesrovnávají → flex řetězec od .owl-stage
   (align-items: stretch) protáhne všechny karty na výšku nejvyšší. */
.service-page__carousel.owl-carousel .owl-stage {
    display: flex;
}
.service-page__carousel .owl-item {
    display: flex;
    height: auto;
}
.service-page__carousel .service-page__item,
.service-page__carousel .service-card,
.service-page__carousel .service-card__inner {
    display: flex;
    width: 100%;
}
.service-page__carousel .service-card__inner {
    flex-direction: column;
}
/* Obrázek dolů → karty s kratším textem mají zarovnané spodky. */
.service-page__carousel .service-card__thumb {
    margin-top: auto;
}

/* Stejná mezera nahoře i dole u červené sekce „Čísla o sboru" (šablona má 185/105px). */
.funfact-one {
    padding-top: 80px;
    padding-bottom: 80px;
}
/* šablona maskuje horní hranu červeného pozadí do diagonály (počítá se 185px
   horním paddingem) — u nás (80px padding) to nechávalo tmavý šikmý „zub"
   vlevo nahoře = pozadí nesahalo až nahoru. Vypnout masku → plný obdélník. */
.funfact-one__bg {
    -webkit-mask: none;
    mask: none;
}

/* CTA „Chcete se přidat" — sjednotit na 80px nahoře i dole (šablona má 120/0). */
.cta-one {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Užší topbar — nižší pruh (šablona má 10px nahoře/dole + line-height 129%). */
.topbar-one__right {
    padding-top: 2px;
    padding-bottom: 2px;
}
.topbar-one__info__item span,
.topbar-one__info__item a {
    line-height: 1;
}

/* Topbar Facebook ikona — hover na červenou (šablona řeší jen 2.+ ikonu). */
.topbar-one__social a:hover {
    color: var(--color-primary);
}

/* Bílý box „Tísňová linka" vyplní celou výšku headeru (pryč tmavé proužky
   nad/pod). Obsah uvnitř zůstává vycentrovaný (box je flex align-items:center). */
.main-header__right,
.main-header__right__call {
    align-self: stretch;
}

/* Bílý dekorativní roh CTA boxu pryč a stejný „řez" (146×119px)
   aplikovaný přímo na červený box → v useknutém rohu prosvítá oheň. */
.cta-one__inner::after {
    display: none;
}
.cta-one__inner {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 119px), calc(100% - 146px) 100%, 0 100%);
}

/* ----------------------------------------
   5. Drobné úpravy obsahu
   ---------------------------------------- */
/* Placeholder poznámky v copy — vizuálně potlačit */
.about-one__top__text em {
    color: var(--color-text-muted);
    font-size: .85em;
}

/* Prázdné aktuality */
.articles__empty {
    color: var(--color-text-muted);
    font-style: italic;
    padding: 2rem 0 3rem;
}

/* Excerpt / anotace v blog kartě */
.blog-card__excerpt {
    color: var(--color-text-muted);
    font-size: .95rem;
    margin-top: 0;
}
.blog-card__excerpt p:last-child { margin-bottom: 0; }

/* šablona blog karta (homepage aktuality i výpis /aktuality — obě mají .blog-one):
   všechny karty stejně vysoké, cover jednotně oříznutý, anotace na 3 řádky,
   „Číst více" přilepené dolů (vyplní šedý roh se šipkou), celá karta = odkaz. */
/* Mezery sekcí 80/80 (šablona měl bottom 0) + lehce šedé pozadí (homepage
   i výpis /aktuality), ať bílé karty vyniknou a nesplývají. */
.blog-one--home,
.blog-one--page {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #f5f6f7;
}
/* Detail článku: menší mezera mezi page-headerem a metařádkem (datum). */
.blog-one--detail {
    padding-top: 32px;
}
.blog-one .row.gutter-y-30 { align-items: stretch; }
.blog-one .blog-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.blog-one .blog-card__image {
    height: 265px;   /* blíž poměru 16:9 (šířka karty ~457px) */
    flex: 0 0 auto;
}
.blog-one .blog-card__image img { height: 100%; }
.blog-one .blog-card__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.blog-one .blog-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-one .blog-card__link {
    margin-top: auto;
    text-transform: none; /* šablona capitalize by dělalo „Číst Více" */
}

/* Hover: karta ztmavne (šablona) → titulek, anotace i „Číst více" jednotně bílé.
   (Titulek by jinak od šablona .blog-card__title a:hover zčervenal — teď je
   odkazem celá karta, takže by červenal pořád.) */
.blog-one .blog-card:hover .blog-card__title a,
.blog-one .blog-card:hover .blog-card__excerpt,
.blog-one .blog-card:hover .blog-card__link {
    color: #fff;
}

/* Celá karta klikatelná — odkaz na článek rovnou, ne jen šipka.
   Obrázek už samostatný <a> je; překryjeme i obsahovou část (kotví
   k .blog-card__content, který je position:relative). */
.blog-one .blog-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}
/* Meta (kategorie/datum) nad overlay → badge i datum zůstávají čitelné
   a označitelné, i když je celá karta klikací odkaz. */
.blog-one .blog-card__meta {
    position: relative;
    z-index: 3;
    line-height: 1;       /* theme mělo 34px → nevyvážená mezera kolem badge */
    margin-bottom: 12px;  /* konzistentní odstup badge → nadpis */
}
/* Nadpis karty: těsnější odstup k textu (theme 20px byl moc, „rozhozené"). */
.blog-one .blog-card__title {
    margin-bottom: 12px;
}
/* Datum = pilulka v PRAVÉM HORNÍM rohu obrázku (odděleno od meta řádku).
   Kategorie badge zůstává nad nadpisem. Kotvíme k .blog-card__content (nejbližší
   positioned ancestor), který je odsazený margin:15px + padding:30px a vyjíždí
   přes spodek obrázku (horní hrana 211px pod vrškem karty; obrázek 265px).
   → top -216px = ~15px pod horní hranou obrázku (stejný odstup jako vpravo);
   right -30px ruší content padding/margin → ~15px od pravé hrany karty. */
.blog-one .blog-card__content { position: relative; }
.blog-one .blog-card__date {
    position: absolute;
    top: -216px;
    right: -30px;   /* desktop: content padding 30 + margin 15 → 15px od hrany */
    margin: 0;
    z-index: 4;
    white-space: nowrap;
}
/* Pod 768px theme mění content na padding:20 + margin:0 → -30px by přeteklo.
   -5px dá zase 15px od pravé hrany (jinak datum vyjelo z karty ven). */
@media (max-width: 767px) {
    .blog-one .blog-card__date { right: -5px; }
}

/* „Načíst další aktuality" — default skryté; JS ho ukáže a skryje číslované
   stránkování (progressive enhancement, viz aktuality-more.js). */
.articles-more {
    display: none;
    margin-top: 3rem;
}

/* Partneři — pruh log na šedém pozadí. 6 vedle sebe (desktop), grayscale
   → barva na hover. Responsivně 3 / 2 na menších obrazovkách. */
.partners-one {
    padding: 80px 0;
    background-color: #f5f6f7;
}
.partners-one__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px 16px;
}
.partners-one__item {
    flex: 0 0 auto;
    width: calc((100% - 5 * 16px) / 6); /* 6 v řadě */
    display: flex;
    align-items: center;
    justify-content: center;
}
.partners-one__item img {
    max-width: 100%;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0);
    opacity: 1;
    transition: filter .3s ease, opacity .3s ease;
}
.partners-one__item img:hover {
    filter: grayscale(1);
    opacity: .7;
}
@media (max-width: 991px) {
    .partners-one__item { width: calc((100% - 2 * 16px) / 3); } /* 3 v řadě */
}
@media (max-width: 575px) {
    .partners-one { padding: 50px 0; }
    .partners-one__item { width: calc((100% - 16px) / 2); } /* 2 v řadě */
}

/* Page-header (Aktuality, detail) — kompaktní červený pruh bez cover fotky.
   šablona měl velký header (210/195px) s obrázkem + tmavý překryv.
   min-height (ne fixní height) → dlouhý breadcrumb (název článku) nepřeteče,
   pruh se přizpůsobí; vertikální padding drží vzduch i při jednom řádku. */
.page-header {
    padding: 1rem 0;
    min-height: 110px;
    display: flex;
    align-items: center;
    background-color: var(--color-primary);
}
.page-header::before {
    display: none;              /* tmavý překryv pryč (byl kvůli fotce) */
}
.page-header .container {
    width: 100%;
}
.page-header__title {
    font-size: 2.2rem;
    margin-bottom: .35rem;
}
/* Breadcrumb: lomítko „//" bylo červené (na červeném pozadí neviditelné) → bílé.
   šablona má na odkazech obří line-height (293%) → fantomová mezera dělala
   nesymetrický padding; srovnat na normální řádkování (obsah se vycentruje). */
.breadcrumb-nav li:not(:last-of-type)::after {
    color: #fff;
}
.breadcrumb-nav,
.breadcrumb-nav li span,
.breadcrumb-nav li a {
    line-height: 1.4;
    margin-bottom: 0;
}
/* Poslední drobek = název článku (může být dlouhý). Zkrátit na jeden řádek
   s „…", ať nerozbije pruh — celý název je stejně v H1 hned pod breadcrumbem.
   šablona má breadcrumb i li jako flex → aby se poslední li mohlo smrštit
   (a ellipsis zabral), potřebuje flex-wrap na kontejneru + min-width:0. */
.breadcrumb-nav {
    flex-wrap: wrap;
}
.breadcrumb-nav li:last-child {
    min-width: 0;
}
.breadcrumb-nav li:last-child span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----------------------------------------
   6. Aktuality — kategorie badge, detail, galerie
   ---------------------------------------- */
/* Kategorie badge (výpis i detail) — hasičská červená pilulka */
.article-badge {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .28em .75em;
    line-height: 1.4;
}

/* Detail — meta řádek (badge + datum) */
.article-detail__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.article-detail__date {
    color: var(--color-text-muted);
    font-size: .95rem;
}
.article-detail__date i { margin-right: .35em; color: var(--color-primary); }

/* Detail — titulek */
.article-detail__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

/* Detail — cover */
.article-detail__cover { margin-bottom: 1.75rem; }
.article-detail__cover img {
    width: 100%;
    height: auto;
    display: block;
}

/* Detail — anotace (perex).
   Kurzíva + tenká linka pod ní odděluje perex od těla textu. */
.article-detail__lead {
    font-size: 1.15rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-text);
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(23, 24, 24, .12);
}

/* Detail — rich content (z Quillu) */
.article-content {
    color: var(--color-text);
    line-height: 1.8;
    font-size: 1.05rem;
}
.article-content h2,
.article-content h3 {
    font-weight: 800;
    margin: 1.8rem 0 .8rem;
    color: var(--color-text);
}
.article-content p { margin-bottom: 1.1rem; }
.article-content ul,
.article-content ol { margin: 0 0 1.1rem 1.25rem; }
.article-content li { margin-bottom: .4rem; }
.article-content a { color: var(--color-primary); text-decoration: underline; }

/* Odkazy na dokumenty ke stažení (PDF/XLS/DOC…) — globálně jako samostatná
   „tlačítka" pod sebou (v archivu chodí naskládané inline za sebou = změť).
   Cílíme přes příponu; obrázky (jpg/png/webp/gif) záměrně vynechané. */
.article-content a[href$=".pdf"],  .article-content a[href$=".PDF"],
.article-content a[href$=".doc"],  .article-content a[href$=".docx"],
.article-content a[href$=".xls"],  .article-content a[href$=".xlsx"],
.article-content a[href$=".ppt"],  .article-content a[href$=".pptx"],
.article-content a[href$=".ods"],  .article-content a[href$=".odt"],
.article-content a[href$=".csv"],  .article-content a[href$=".rtf"],
.article-content a[href$=".txt"],  .article-content a[href$=".zip"] {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: fit-content;
    max-width: 100%;
    margin: .4rem 0;
    padding: .7rem 1rem;
    background: #fff;
    border: 1px solid #e3e5e8;
    color: var(--color-primary);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    word-break: break-word;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.article-content a[href$=".pdf"]::before,  .article-content a[href$=".PDF"]::before,
.article-content a[href$=".doc"]::before,  .article-content a[href$=".docx"]::before,
.article-content a[href$=".xls"]::before,  .article-content a[href$=".xlsx"]::before,
.article-content a[href$=".ppt"]::before,  .article-content a[href$=".pptx"]::before,
.article-content a[href$=".ods"]::before,  .article-content a[href$=".odt"]::before,
.article-content a[href$=".csv"]::before,  .article-content a[href$=".rtf"]::before,
.article-content a[href$=".txt"]::before,  .article-content a[href$=".zip"]::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: currentColor; /* ikona dědí barvu textu → invertuje se na hoveru */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.article-content a[href$=".pdf"]:hover,  .article-content a[href$=".PDF"]:hover,
.article-content a[href$=".doc"]:hover,  .article-content a[href$=".docx"]:hover,
.article-content a[href$=".xls"]:hover,  .article-content a[href$=".xlsx"]:hover,
.article-content a[href$=".ppt"]:hover,  .article-content a[href$=".pptx"]:hover,
.article-content a[href$=".ods"]:hover,  .article-content a[href$=".odt"]:hover,
.article-content a[href$=".csv"]:hover,  .article-content a[href$=".rtf"]:hover,
.article-content a[href$=".txt"]:hover,  .article-content a[href$=".zip"]:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Dokumenty ke stažení (strukturované, articles.json[dokumenty]) — na detailu
   článku. Vizuál navazuje na inline download tlačítka výš (bílá karta, primární
   rámeček, invert na hoveru), navíc typový badge + velikost. */
.article-docs { margin-top: 2rem; }
.article-docs__title { font-size: 1.25rem; margin-bottom: .9rem; }
.article-docs__list { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.article-doc {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .9rem;
    background: #fff; border: 1px solid #e3e5e8;
    color: var(--color-primary); font-weight: 600; text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.article-doc:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.article-doc__type {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 28px; border-radius: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .3px; color: #fff; background: #6b7280;
}
.article-doc--pdf .article-doc__type { background: #d1332e; }
.article-doc--xls .article-doc__type, .article-doc--xlsx .article-doc__type { background: #1d7044; }
.article-doc--doc .article-doc__type, .article-doc--docx .article-doc__type { background: #2360a5; }
.article-doc__name { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.article-doc__size { flex: 0 0 auto; font-weight: 400; font-size: .85em; opacity: .75; }

.article-content blockquote {
    border-left: 4px solid var(--color-primary);
    margin: 1.5rem 0;
    padding: .5rem 0 .5rem 1.25rem;
    color: var(--color-text-muted);
    font-style: italic;
}
.article-content img { max-width: 100%; height: auto; }

/* Detail — fotogalerie (GLightbox) */
.article-gallery { margin-top: 2.5rem; }
.article-gallery__title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
}
.article-gallery__item {
    display: block;
    overflow: hidden;
}
.article-gallery__item img {
    width: 100%;
    height: auto;              /* přebije HTML height atribut (archiv) → aspect-ratio zabere */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.article-gallery__item:hover img { transform: scale(1.05); }

/* Detail — zpět na výpis */
.article-back { margin-top: 2.5rem; }

/* ----------------------------------------
   7. Mobilní úpravy
   ---------------------------------------- */
/* Hamburger režim je pod 1200px (šablona). Nav má margin-left:114px, které platí
   i když je horizontální menu skryté → logo+114 zaplní celý řádek a vytlačí
   hamburger mimo obrazovku. V hamburger režimu odsazení zrušit (margin-right:auto
   necháváme — drží hamburger u pravého kraje). */
@media (max-width: 1199px) {
    .main-header__nav {
        margin-left: 0;
    }
}
/* Široké logo „SDH MNÍŠÍ" (~360px při 70px) je na telefonech moc — zmenšit,
   ať se pohodlně vejde vedle hamburgeru (header) i do panelu mobilního menu. */
@media (max-width: 767px) {
    .main-header__logo .logo-sdh__img,
    .logo-sdh--mobile .logo-sdh__img,
    .logo-sdh--footer .logo-sdh__img {
        height: 45px;
        padding: 0;
    }
}

/* Hero titulek: šablona má na mobilu 50px, ale titulek má overflow:hidden a dlouhá
   česká slova („DOBROVOLNÝCH") se nezalomí → uříznou se. Zmenšit, ať se vejdou. */
@media (max-width: 767px) {
    .main-slider-one__title {
        font-size: 36px;
    }
}
@media (max-width: 400px) {
    .main-slider-one__title {
        font-size: 32px;
    }
}

/* Mobilní menu (rozbalené) — přepracovaný vzhled:
   - rozbalí se POD hlavičkou (nepřekrývá ji; hlavička 65px zůstává nahoře)
   - tmavá jako hlavička (#232728), ne černá
   - celá šířka, obsah zarovnaný doprava, bez loga (odebráno z markupu)
   - zavírá se hamburgerem, který se změní na X (panelový křížek skrytý) */
.mobile-nav__wrapper {
    top: 65px;                     /* výška mobilní hlavičky */
    height: calc(100vh - 65px);
}
.mobile-nav__content {
    width: 100%;
    text-align: center;
    background-color: #232728;
    padding-top: 24px;
}
.mobile-nav__close {
    display: none;                 /* zavírá hamburger (viz X níže) */
}
.mobile-nav__container {
    margin-top: 0;
}
/* Položky menu — větší a vzdušnější. Label vlevo, rozbalovací šipka vpravo
   (space-between z theme.css) → čitelná hierarchie a klikatelný toggle. */
.mobile-nav__content .main-menu__list li > a {
    font-size: 15px;
    height: 52px;
    text-align: left;
}
/* Progresivní odsazení vnořených úrovní (2. a 3. úroveň družstev). */
.mobile-nav__content .main-menu__list ul li > a { padding-left: 1.75em; }
.mobile-nav__content .main-menu__list ul ul li > a { padding-left: 3em; }
/* Rozbalovací šipka (theme.js vkládá <button> do <a>) — klikací plocha vpravo. */
.mobile-nav__content .main-menu__list .dropdown > a button {
    background: transparent;
    border: 0;
    color: inherit;
    width: 52px;
    height: 52px;
    margin: 0 -15px 0 auto;
    flex: 0 0 auto;
    cursor: pointer;
    transition: transform .3s ease;
}
.mobile-nav__content .main-menu__list .dropdown > a.expanded button {
    transform: rotate(180deg);
}
/* Kontakt (ikona + text) na střed. */
.mobile-nav__contact li {
    justify-content: center;
}
/* Hamburger → X, když je menu otevřené (toggler přidá na <body> třídu .locked). */
body.locked .mobile-nav__btn span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
body.locked .mobile-nav__btn span:nth-child(2) {
    opacity: 0;
}
body.locked .mobile-nav__btn span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ----------------------------------------
   8. Obsahové stránky (Kontakt, O nás, Soutěžní družstva, Veteráni, Archiv)
   ---------------------------------------- */
.content-section {
    padding-top: 80px;
    padding-bottom: 80px;
}
/* Bílý panel na šedém pozadí podstránek — hranatý (web nikde nemá zaoblení),
   na celou šířku kontejneru. */
.content-panel {
    background: #fff;
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: 0 6px 30px rgba(23, 24, 24, 0.06);
    height: 100%;
}
.content-panel__title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: .35rem;
    color: var(--color-text);
}
.content-panel__sub {
    color: var(--color-text-muted);
    margin-bottom: 1.75rem;
}

/* Kontakt — seznam s ikonami */
.contact-list { margin-bottom: 1.75rem; }
.contact-list__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.1rem;
    line-height: 1.6;
}
.contact-list__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.contact-list__item a { color: inherit; transition: color .3s; }
.contact-list__item a:hover { color: var(--color-primary); }

/* Jmenné kontakty (starosta, velitel) — role jako drobný červený kicker,
   pod ní jméno s telefonem. Telefon zvýrazněný, ať se dobře trefuje prstem. */
.contact-people {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.contact-person {
    display: flex;
    flex-direction: column;
}
.contact-person__role {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
    line-height: 1.4;
}
.contact-person__line a {
    font-weight: 700;
    white-space: nowrap;
}
.contact-meta { color: var(--color-text-muted); }
.contact-meta li { margin-bottom: .25rem; }

/* Kontakt — OSM mapa */
.contact-map { height: 100%; }
.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    display: block;
}
.contact-map__link {
    display: inline-block;
    margin-top: .5rem;
    font-size: .9rem;
    color: var(--color-text-muted);
}
.contact-map__link:hover { color: var(--color-primary); }

/* Placeholder textové stránky (O nás, Soutěžní družstva, Veteráni, Archiv) */
.content-block + .content-block {
    margin-top: 2.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid rgba(23, 24, 24, .08);
}
.content-block__title {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: .6rem;
    color: var(--color-text);
}
.content-placeholder {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 0;
}
.content-placeholder em { font-size: .9em; opacity: .8; }

/* Odkaz „Starší příspěvky" (výpis aktualit → archiv) */
.archiv-link {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(23, 24, 24, .08);
}
.archiv-link a {
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .9rem;
    transition: color .3s;
}
.archiv-link a:hover { color: var(--color-primary); }
.archiv-link i { font-size: .8em; margin-left: .35em; }

/* ----------------------------------------
   7. Fotogalerie (ročníky 2016–2025, read-only archiv)
   ---------------------------------------- */
/* Grid fotek — čtvercový výřez, hover zoom, GLightbox. */
.fotogalerie__item {
    display: block;
    overflow: hidden;
    position: relative;
    line-height: 0;
}
.fotogalerie__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.fotogalerie__item:hover img { transform: scale(1.06); }

/* Dlaždice starších ročníků */
.fotogalerie-years__heading { margin-top: 3.5rem; }
.year-tile {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    color: #fff;
}
.year-tile__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .5s ease;
}
.year-tile:hover .year-tile__bg { transform: scale(1.08); }
.year-tile__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--brand-base-rgb), .85), rgba(35, 39, 40, .40));
    transition: background .3s ease;
}
.year-tile:hover .year-tile__overlay {
    background: linear-gradient(to top, rgba(var(--brand-base-rgb), .92), rgba(var(--brand-base-rgb), .55));
}
.year-tile__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}
.year-tile__year {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.year-tile__count {
    margin-top: .4rem;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .95;
}

/* ----------------------------------------
   8. Obsahové stránky — rozcestník, tabulky
   ---------------------------------------- */
/* Rozcestníkové karty (O nás, Soutěžní družstva, Družstvo žáků) */
.subnav-grid { margin-top: 1.75rem; }
.subnav-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    padding: 1.6rem 1.7rem;
    box-shadow: 0 6px 30px rgba(23, 24, 24, 0.06);
    color: var(--color-text);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.subnav-card:hover { background: var(--color-primary); color: #fff; transform: translateY(-3px); }
.subnav-card__title { font-size: 1.2rem; font-weight: 800; margin-bottom: .5rem; color: var(--color-text); }
.subnav-card:hover .subnav-card__title { color: #fff; }
.subnav-card__desc { color: var(--color-text-muted); flex: 1 1 auto; margin-bottom: 1rem; }
.subnav-card:hover .subnav-card__desc { color: rgba(255, 255, 255, .92); }
.subnav-card__link { font-weight: 700; text-transform: none; }
.subnav-card__link i { font-size: .8em; margin-left: .35em; }

/* Tabulky v obsahu (členská základna apod.) */
.article-content table,
.content-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2rem;
}
.article-content th,
.article-content td,
.content-table th,
.content-table td {
    text-align: left;
    padding: .55rem .85rem;
    border-bottom: 1px solid rgba(23, 24, 24, .08);
    vertical-align: top;
}
.article-content th,
.content-table th {
    width: 45%;
    font-weight: 700;
    color: var(--color-text);
}
/* Prázdné popiskové buňky (pokračování skupiny) — bez horní čáry, ať skupina
   drží pohromadě, když klient v budoucnu vloží tabulku přes editor. */
.article-content tr:has(> th:empty) td { border-top: 0; }

/* --- Roster (výbor sboru / KRR): role vlevo, jméno vpravo, jemný oddělovač --- */
.article-content .roster {
    margin: 1.25rem 0 2rem;
    border-top: 2px solid var(--color-primary);
}
.article-content .roster__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.25rem;
    padding: .8rem .35rem;
    border-bottom: 1px solid rgba(23, 24, 24, .09);
    transition: background .15s ease;
}
.article-content .roster__item:hover { background: rgba(206, 32, 41, .035); }
.article-content .roster__role {
    font-weight: 700;
    color: var(--color-text);
    flex: 1 1 auto;
}
.article-content .roster__name {
    color: #444;
    text-align: right;
    flex: 0 1 auto;
}

/* --- Mřížka jmen (Členové výboru) místo jednoho jména na řádek --- */
.article-content .member-grid {
    list-style: none;
    margin: .9rem 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .3rem 1.5rem;
}
.article-content .member-grid li {
    position: relative;
    padding: .45rem 0 .45rem 1.2rem;
    color: var(--color-text);
    border-bottom: 1px solid rgba(23, 24, 24, .06);
}
.article-content .member-grid li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* --- Odkazy: dva vyvážené sloupce sekcí (jinak prázdná pravá půlka) --- */
.article-content .link-section { margin-bottom: 2rem; }
.article-content .link-section:last-child { margin-bottom: 0; }
.article-content .link-section h2 { margin-top: 0; }

/* Indikátor podmenu (JEN desktop — scope .main-menu; mobil má vlastní toggle
   z theme.js). Top-level dropdown = šipka dolů; vnořený = šipka doprava vždy. */
.main-menu .main-menu__list > li.dropdown > a::after {
    content: "";
    display: inline-block;
    width: .5em;
    height: .5em;
    margin-left: .5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .3s ease;
}
.main-menu .main-menu__list > li.dropdown:hover > a::after {
    transform: translateY(1px) rotate(45deg);
}
/* Vnořené dropdown položky (Družstvo žáků, Družstvo mužů) — šipka doprava vždy
   viditelná (šablona ji měl jen na hover). */
.main-menu .sub-menu .dropdown::before {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* =====================================================================
   9. Přístupnost (a11y) — launch fixy
   ===================================================================== */
/* Hamburger + zavírací tlačítko mobilního menu jsou nově <button> (klávesnice).
   Strhnout defaultní button chrome, ať vypadají identicky jako dřív div/span. */
.mobile-nav__btn,
.mobile-nav__close {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Submenu flyout i pro klávesnici (Tab) — zrcadlí :hover stav z theme.css. */
.main-menu .main-menu__list li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1) translateZ(0px);
}

/* Skip-link „Přeskočit na obsah" — viditelný jen při fokusu (klávesnice). */
.skip-link.sr-only-focusable:focus,
.skip-link.sr-only-focusable:focus-visible {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 18px;
    clip: auto;
    clip-path: none;
    background: var(--color-primary);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}

/* <address> u kontaktu/footeru — sémantika bez kurzívy (default prohlížeče). */
.content-panel__address,
.footer-widget__address {
    font-style: normal;
}

/* Viditelný focus ring pro klávesnici (myš ho nedostane) — menu, tlačítka,
   odkazy. Doplňuje :focus-within flyout výše. */
.main-menu a:focus-visible,
.brand-btn:focus-visible,
.footer-widget__links a:focus-visible,
.blog-card__link:focus-visible,
.breadcrumb-nav a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Vyváženější zalamování nadpisů a perexů (moderní prohlížeče; jinde no-op). */
.sec-title__title,
.page-header__title,
.blog-card__title,
.main-slider-one__title {
    text-wrap: balance;
}
.blog-card__excerpt,
.article-detail__lead {
    text-wrap: pretty;
}

/* Respekt k prefers-reduced-motion — vypnout parallax/carousel/hover pohyby
   uživatelům, kteří si to v OS vyžádali (a11y, vestibulární obtíže). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   10. Hlavní menu — dřívější přepnutí na hamburger
   ===================================================================== */
/* Dlouhé české popisky (SOUTĚŽNÍ DRUŽSTVA, CHYSTANÉ AKCE…) + box „Tísňová linka"
   se do desktop menu vejdou až od ~1650px; níže se lámalo do 2 řádků. Proto
   přepínáme na hamburger až do 1699px (theme default byl 1199px). V celém tomto
   rozsahu chceme IDENTICKOU mobilní hlavičku: tmavý pruh, logo vlevo, červený
   hamburger vpravo — BEZ bílého boxu „Tísňová linka" (ten se s hamburgerem bil). */
@media (max-width: 1699px) {
    .main-menu .main-menu__list { display: none !important; }
    .mobile-nav__btn { display: flex !important; }
    /* Skrýt bílý call box (theme ho skrýval jen pod 768px) → čistá tmavá hlavička. */
    .main-header__right__call { display: none !important; }
    /* Hamburger červený jako na mobilu (na tmavém pozadí). */
    .main-header .mobile-nav__btn span { background: var(--color-primary) !important; }
    /* Malý odstup od pravé hrany (mimo bílý box už theme margin neplatí). */
    .main-header__right { margin-right: 10px; }
}

/* =====================================================================
   11. Foto-sidebar na obsahových stránkách (Chystané akce)
   ===================================================================== */
/* Pár náhodných fotek z galerie vpravo od dlouhého textu, ať stránka nepůsobí
   prázdně. GLightbox po kliknutí (fotky mají .fotogalerie__item). */
.page-photos__title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 1.1rem;
    color: var(--color-text);
    position: relative;
    padding-bottom: .6rem;
}
.page-photos__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    background: var(--color-primary);
}
.page-photos__grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.page-photos .fotogalerie__item {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(23, 24, 24, .08);
}
.page-photos__more {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    margin-top: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.page-photos__more i { font-size: .8em; }
.page-photos__more:hover { color: var(--color-primary-dark); }
/* Na desktopu se sidebar drží při scrollu (dlouhý seznam akcí). */
@media (min-width: 992px) {
    .content-panel--has-sidebar .page-photos {
        align-self: flex-start;
        position: sticky;
        top: 100px;
    }
}
/* Mobil: fotky až pod textem, menší strip. */
@media (max-width: 991px) {
    .page-photos { margin-top: 2.5rem; }
    .page-photos__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}