/* Kalendář */
.zalozka_mesic h4 {
    font-weight: 600;
    border: 1px solid red;
    padding: 10px;
}
.oddelovac_novinky {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

/* Aktuality fotogalerie tlačítka */
/* 1. Zvětšení a bílá barva pro OBĚ šipky */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* Zvětšení rozměrů ikony. Použijte !important, pokud se styl stále nepřepisuje. */
    width: 3rem !important; 
    height: 3rem !important; 
}

/* 2. Definice bílé šipky doleva (Předchozí) */
.carousel-control-prev-icon {
    /* Ujistěte se, že toto je správný kód pro bílou šipku doleva */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

/* 3. Definice bílé šipky doprava (Další) */
.carousel-control-next-icon {
    /* Ujistěte se, že toto je správný kód pro bílou šipku doprava */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

/* Odstranění pozadí, ohraničení a stínu u celého navigačního tlačítka */
.carousel-control-prev,
.carousel-control-next {
    /* Odstraní výchozí tmavé/průsvitné pozadí */
    background: none !important;
    
    /* Odstraní pozadí i při najetí myší a při zaměření (focus) */
    opacity: 1 !important; /* Zajišťuje, že tlačítka nejsou průsvitná, ale necháme viditelnou jen ikonu */
    
    /* Zruší veškeré stínování a ohraničení (někdy je definováno pro lepší viditelnost) */
    border: none !important;
    box-shadow: none !important;
}

/* Volitelné: Můžete upravit i reakci na najetí myší (hover) a focus */
.carousel-control-prev:hover,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-next:focus {
    /* Zabrání Bootstrapu přidat pozadí nebo ohraničení při interakci */
    background: none !important;
    opacity: 1 !important; 
    outline: none !important; /* Odstraní výchozí modré ohraničení při focusu */
    border: none !important;
}

/* Seznam SDH */
    .ftco-section table {
        width: 100%;
        margin-bottom: 1rem;
        color: #212529;
        border-collapse: collapse;
    }

    .ftco-section th,
    .ftco-section td {
        padding: .75rem;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }

    .ftco-section thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }
    
    .ftco-section .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, .05);
    }

    /* ikonky */
          /* --- VLASTNÉ STYLY PRE POLOŽKU --- */
      .list-item-custom {
        border: none !important; 
        cursor: pointer;
        transition: background-color 0.2s;
      }
      .list-item-custom:hover {
        background-color: #f8f9fa; /* Jemný hover efekt */
      }
      /* Zabezpečí, že hlavný text bude v strede */
      .item-text-wrapper {
        flex-grow: 1;
        text-align: center;
      }
      
      /* --- ZVÄČŠENIE IKON A VLASTNÉ FARBY --- */
      .list-item-custom i {
        font-size: 2.5em; /* Zväčšenie ikony na 150% */
      }
      
      /* Korespondenční barvy */
      .icon-pdf { color: #dc3545; }   /* Červená (Danger) */
      .icon-word { color: #007bff; }  /* Modrá (Primary) */
      .icon-excel { color: #28a745; } /* Zelená (Success) */
      .icon-text { color: #343a40; }  /* Tmavě šedá (Dark) */
      .icon-image { color: #ffc107; } /* Žlutá (Warning) */
      .icon-ppt { color: #fd7e14; }   /* Oranžová (Warning/Accent) */
      .icon-archive { color: #6c757d; } /* Šedá (Secondary) */

      /* Aktiv hasičů */
/* Základní nastavení pro galerii (pro velké obrazovky: 4 sloupce) */
.aktiv-gallery {
    display: flex;         /* Použijeme Flexbox */
    flex-wrap: wrap;       /* Zalamování prvků na další řádek */
    justify-content: flex-start; /* Zarovnání prvků od začátku */
    gap: 10px;             /* Mezera mezi obrázky */
}

/* Nastavení pro každý obrázek/kontejner */
.aktiv-item {
    /* 25% minus malá mezera, aby se vešly 4 na řádek */
    flex-basis: calc(25% - 10px); 
    min-width: 100px; /* Zajištění minimální šířky pro velkou obrazovku */
    margin-bottom: 10px; /* Mezera pod každým řádkem */
}

/* Obrázek uvnitř kontejneru */
.aktiv-img {
    width: 100%;           /* Obrázek vyplní celou šířku svého .aktiv-item */
    height: auto;
    display: block;        /* Zabraňuje mezerám pod obrázky */
    border-radius: 5px; /* Volitelné: pro lepší vzhled */
}

/* MEDIA QUERY: Pro menší obrazovky (např. do 768px, tablety) */
@media (max-width: 768px) {
    .aktiv-item {
        /* Přepneme na 2 sloupce */
        flex-basis: calc(50% - 10px); 
    }
}

/* MEDIA QUERY: Pro nejmenší obrazovky (např. do 480px, mobily) */
@media (max-width: 480px) {
    .aktiv-item {
        /* Přepneme na 1 sloupec (budou pod sebou) */
        flex-basis: 100%; 
    }
}

/* 1. Výchozí styl pro větší obrazovky (3 sloupce) */
.oddelovac_novinky .container {
    /* Použijte 30% a přidejte gap (10px) z flexboxu. */
    /* Váš HTML má na divu .oddelovac_novinky styl gap: 10px; */
    flex: 0 0 calc(33.333% - 7px); /* Opraveno pro lepší rozložení při gap: 10px (přes 30% pro 3 sloupce) */
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 10px;
}

/* 2. Media Query pro malé obrazovky (max-width: 600px je běžná praxe) */
@media (max-width: 800px) {
    /* Cíl pro mobil: nastavit na 100% šířku */
    .oddelovac_novinky .container {
        flex: 0 0 100%; /* MUSÍ být 100% pro zobrazení jednoho na řádek */
        margin-bottom: 10px; /* Přidá mezeru pod každý kontejner */
    }
}