/* style.css - Nová verze */

/* --- Barevné proměnné a globální nastavení --- */
:root {
    --hlavni-barva: #005C53;      /* Zelená pro odkazy a akcenty */
    --sekundarni-barva: #343a40; /* Tmavá pro text a hlavičku */
    --pozadi-barva: #f8f9fa;      /* Velmi světle šedá pro pozadí stránky */
    --kontejner-barva: #ffffff;   /* Bílá pro hlavní obsahové bloky */
    --okraj-barva: #005C53;       /* Zelená pro okraje a oddělovače */
    --nahled-obrazek-sirka: 250px; /* <-- PŘIDAT TENTO ŘÁDEK */
    
    --font-zakladni: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --radius-okraju: 8px; /* Zaoblení rohů */
}

/* --- Základní styly a typografie --- */
body {
    font-family: var(--font-zakladni);
    line-height: 1.7;
    color: var(--sekundarni-barva);
    background-color: var(--pozadi-barva);
    margin: 0;
}

.kontejner {
    max-width: 960px; /* Širší layout, jak jste si přál */
    margin: 20px auto;
    padding: 20px 40px;
    background-color: var(--kontejner-barva);
    border-radius: var(--radius-okraju);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

a {
    color: var(--hlavni-barva);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: var(--sekundarni-barva);
    text-decoration: underline;
}

h1, h2, h3 {
    line-height: 1.3;
}
img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-okraju);
}

/* --- Hlavička a Patička --- */
.hlavni-hlavicka {
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--okraj-barva);
}
.hlavni-hlavicka .logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--sekundarni-barva);
    text-decoration: none;
}
.hlavni-paticka {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--okraj-barva);
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
}

/* --- Komponenty (náhledy článků atd.) --- */
.prehled-clanku {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
/* --- Nové styly pro náhledy článků na hlavní stránce (verze s opravami) --- */
.clanek-karta {
    display: flex;
    gap: 25px;
    align-items: center;
    padding: 20px; /* PŘIDÁNO: Vnitřní odsazení celé karty */
    background-color: var(--kontejner-barva);
    border-radius: var(--radius-okraju);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    color: var(--sekundarni-barva);
}

.clanek-karta:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    text-decoration: none;
    color: var(--sekundarni-barva);
}

/* PŘIDÁNO: Nové pravidlo pro změnu barvy H2 při najetí myší */
.clanek-karta:hover h2 {
    color: var(--sekundarni-barva);
}

/* Kontejner pro obrázek s pevnou šířkou danou naší proměnnou */
.karta-obrazek-kontejner {
    flex-shrink: 0;
    width: var(--nahled-obrazek-sirka);
    height: 180px;
    border-radius: var(--radius-okraju); /* Přesunuto sem pro lepší kontrolu */
    overflow: hidden; /* Zajistí, že obrázek nepřesáhne zaoblené rohy kontejneru */
}

.karta-obrazek-kontejner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kontejner pro text, který se roztáhne na zbytek místa */
.karta-obsah {
    flex-grow: 1;
    padding: 0; /* ZMĚNA: Odebrán padding, protože ho má rodič .clanek-karta */
}

/* OPRAVENO: Pravidlo pro H2, které zajistí správnou barvu */
.clanek-karta h2 {
    margin-top: 0;
    color: var(--hlavni-barva);
    transition: color 0.2s ease-in-out;
}
/* Detail článku */
.clanek-detail h1 {
    margin-bottom: 20px;
}
.clanek-obrazek-hlavni {
    margin-bottom: 30px;
}
.clanek-obsah p, .clanek-obsah ul, .clanek-obsah h2, .clanek-obsah h3 {
    margin-bottom: 1.2rem;
}
.navigace-clanku { display: flex; justify-content: space-between; margin-top: 40px; border-top: 1px solid var(--okraj-barva); padding-top: 20px; font-weight: bold; }

/* === Zde začínají styly pro administraci, ty zůstávají stejné === */
.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-box { padding: 40px; background: #fff; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.1); text-align: center; }
.login-box input { display: block; width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; }
.login-box button { width: 100%; padding: 10px; background: var(--hlavni-barva); color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.login-box .error { color: #d9534f; margin-top: 15px; }

.admin-body .kontejner { background-color: #fff; }
.admin-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #eee; padding-bottom: 15px; margin-bottom: 20px; }
.admin-header h1 { margin: 0; }
.admin-header nav a { margin-left: 15px; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 12px; border: 1px solid #ddd; text-align: left; }
.admin-table th { background-color: #f2f2f2; }
.admin-table td:last-child { width: 150px; text-align: center; }
.btn, .btn-edit, .btn-delete { display: inline-block; padding: 8px 12px; border-radius: 4px; color: #fff; text-decoration: none; }
.btn { background-color: #28a745; }
.btn-edit { background-color: #ffc107; color: #333; }
.btn-delete { background-color: #dc3545; }
.success { color: #28a745; border: 1px solid #28a745; padding: 10px; border-radius: 4px; background-color: #e9f7eb; }
.edit-form { display: flex; flex-direction: column; gap: 20px; }
.edit-form label { font-weight: bold; display: block; margin-bottom: 5px; }
.edit-form input[type="text"], .edit-form input[type="date"], .edit-form textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; box-sizing: border-box; }
.edit-form button { padding: 12px 20px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1.1rem; align-self: flex-start; }
.aktualni-obrazek { background-color: #f9f9f9; border: 1px dashed #ccc; padding: 15px; border-radius: 5px; }
.aktualni-obrazek p { margin-top: 0; }

/* --- Styly pro nová navigační tlačítka v článku --- */
.navigace-nahore {
    margin-bottom: 30px;
    font-weight: bold;
}

/* Vylepšení spodní navigace pomocí mřížky (grid) pro perfektní zarovnání */
.navigace-clanku {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Tři stejně široké sloupce */
    align-items: center;
    font-weight: bold;
}
.navigace-clanku a:first-child { /* První odkaz (Předchozí) bude vlevo */
    text-align: left;
}
.navigace-clanku a:nth-child(2) { /* Druhý odkaz (Hlavní stránka) bude uprostřed */
    text-align: center;
    font-size: 0.9em;
    color: #6c757d;
}
.navigace-clanku span:last-child { /* Obal posledního odkazu (Další) bude vpravo */
     text-align: right;
}


/* --- Styly pro "Scroll to Top" tlačítko --- */
#scroll-to-top {
    display: none; /* Výchozí stav: skryté */
    position: fixed; /* Bude se "vznášet" nad stránkou a rolovat s ní */
    bottom: 30px;
    right: 30px;
    z-index: 99; /* Bude vždy na nejvyšší vrstvě */
    border: none;
    outline: none;
    background-color: var(--hlavni-barva);
    color: white;
    cursor: pointer;
    padding: 0;
    width: 50px; /* Pevná šířka */
    height: 50px; /* Pevná výška */
    border-radius: 50%; /* Uděláme ho kulaté */
    font-size: 24px;
    line-height: 50px; /* Vertikálně vycentruje šipku */
    text-align: center; /* Horizontálně vycentruje šipku */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: background-color 0.3s, transform 0.2s;
}

#scroll-to-top:hover {
    background-color: var(--sekundarni-barva);
    text-decoration: none;
    transform: translateY(-3px); /* Malý efekt při najetí myší */
}

/* ==========================================================================
   Responzivní design pro mobilní zařízení (Tablet a menší)
   ========================================================================== */

@media (max-width: 768px) {

    /* Zmenšíme odsazení hlavního kontejneru na mobilu, aby bylo více místa */
    .kontejner {
        padding: 20px 15px;
    }

    /* Hlavní změna: Karty článků se změní na vertikální uspořádání */
    .clanek-karta {
        flex-direction: column; /* KLÍČOVÉ: Změníme směr flexboxu na "pod sebou" */
        padding: 0;             /* Vynulujeme padding, protože obrázek bude od kraje ke kraji */
        gap: 0;                 /* Vynulujeme mezeru, odsazení vyřešíme jinak */
    }

    /* Kontejner obrázku zabere opět plnou šířku */
    .karta-obrazek-kontejner {
        width: 100%;
        height: 220px; /* Můžeme upravit výšku speciálně pro mobilní zobrazení */
    }

    /* Obsah karty (text) bude mít vlastní vnitřní odsazení */
    .karta-obsah {
        padding: 20px;
    }

    /* Upravíme i navigaci pod detailem článku, aby se na mobilu lépe zobrazila */
    .navigace-clanku {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
}