:root { --primary-yellow: #f2bd2c; --main-black: #1a1a1a; }
body { font-family: 'Inter', sans-serif; margin: 0; color: #333; }
.navbar, main, footer { max-width: 1100px; margin: 0 auto; padding: 20px; }

.navbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--primary-yellow); }
.logo { font-weight: bold; font-size: 28px; flex: 1; text-align: center; }
.yellow { color: var(--primary-yellow); }
.black { color: var(--main-black); }

.hero { display: flex; align-items: center; gap: 40px; margin: 40px 0; }
.hero-text { flex: 1; }
.hero-image { flex: 1; }
.hero-image img { width: 100%; border-radius: 8px; }

.btn-white { border: 1px solid #333; padding: 10px 20px; text-decoration: none; color: black; margin-right: 10px; }
.btn-yellow { background: var(--primary-yellow); padding: 10px 20px; text-decoration: none; color: black; font-weight: bold; }

.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.card { border: 1px solid #eee; padding: 20px; border-radius: 8px; }

footer { text-align: center; border-top: 1px solid #eee; margin-top: 40px; }

/* Hlavička - zmenené na grid pre perfektné vycentrovanie */
.navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Tri stĺpce: ľavý prázdny, stred logo, pravý vyhľadávanie */
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid var(--primary-yellow);
    max-width: 1100px;
    margin: 0 auto;
}

.logo {
    grid-column: 2; /* Logo bude v stredovom stĺpci */
    font-weight: bold;
    font-size: 36px;
    text-align: center;
    cursor: pointer;
    line-height: 1.2;
}

.search-box {
    grid-column: 3; /* Vyhľadávanie bude v pravom stĺpci */
    justify-self: end; /* Zarovná vyhľadávanie úplne doprava */
}

/* Zvyšok CSS zostáva nezmenený */


/* Styling pre vyhľadávacie pole */
.search-box input {
    width: 250px;           /* Zväčší šírku poľa */
    padding: 12px 20px;     /* Zväčší vnútorný priestor (pohodlnejšie písanie) */
    border: 2px solid #ddd; /* Jemný okraj */
    border-radius: 30px;    /* Zaoblené rohy (pilulkový tvar) */
    font-size: 16px;        /* Väčší text */
    outline: none;          /* Odstráni modrý obrys pri kliknutí */
    transition: border-color 0.3s;
}

/* Efekt pri kliknutí do vyhľadávania */
.search-box input:focus {
    border-color: var(--primary-yellow); /* Zmení farbu okraja na žltú pri aktivácii */
}

/* Centrovanie tabuľky a štýl riadkov */
table {
    width: 90%;            /* Trochu užšia ako celá šírka pre lepší vzhľad */
    margin: 20px auto;     /* Vycentrovanie na stred */
    border-collapse: collapse; 
    text-align: center;    /* Obsah stĺpcov na stred */
}

table th, table td {
    padding: 15px 10px;    /* Medzery medzi stĺpcami */
    border-bottom: 1px solid #eee;
}

/* Štýl tlačidla "Viac info" */
.btn-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--primary-yellow);
    color: var(--main-black);
    text-decoration: none;
    border-radius: 20px;   /* Zaoblené tlačidlo */
    font-weight: bold;
    font-size: 14px;
    transition: background 0.3s;
}

.btn-link:hover {
    background-color: #dcb028; /* Jemná zmena farby pri prejdení myšou */
}

table {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 40px auto;
    border-collapse: collapse;
    table-layout: fixed; /* Kľúčové: vynúti fixnú šírku stĺpcov */
}

table td {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    text-align: center;
    word-wrap: break-word; /* Zabezpečí zalomenie dlhých názvov */
}

/* Definícia šírok stĺpcov (spolu musí byť 100%) */
table td:nth-child(1) { width: 10%; } /* Vlajka */
table td:nth-child(2) { width: 20%; } /* Dátum */
table td:nth-child(3) { width: 35%; } /* Názov akcie */
table td:nth-child(4) { width: 20%; } /* Miesto */
table td:nth-child(5) { width: 15%; } /* Tlačidlo */

/* Zarovnanie názvov mesiacov na stred */
h3 {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 15px;
    color: var(--main-black);
}

/* 1. Sivé a menej výrazné názvy mesiacov */
h3 {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 15px;
    color: #888888; /* Sivá farba pre mesiace */
    font-size: 20px; /* O niečo menšie, aby nepôsobili ako hlavné nadpisy */
    text-transform: uppercase; /* Voliteľné: pekný efekt pre hlavičky */
    letter-spacing: 1px;
}

/* 2. Kratšie a nižšie vyhľadávacie pole */
.search-box input {
    width: 180px;           /* Zmenšená šírka z 250px na 180px */
    padding: 8px 16px;      /* Zmenšený vnútorný priestor (nižšie pole) */
    border: 2px solid #ddd;
    border-radius: 30px;
    font-size: 14px;        /* Menšie písmo */
    outline: none;
    transition: border-color 0.3s;
}

/* --- RESPONZIVITA --- */

/* Pre tablety a mobily (obrazovky užšie ako 768px) */
@media (max-width: 768px) {
    .navbar {
        grid-template-columns: 1fr; /* Všetko pôjde pod seba */
        gap: 15px;
        padding: 15px;
    }

    .logo {
        grid-column: 1; /* Logo na prvej pozícii */
        font-size: 32px; /* Logo bude na mobile trochu menšie */
    }

    .search-box {
        grid-column: 1; /* Vyhľadávanie pod logom */
        justify-self: center; /* Vyhľadávanie na stred */
    }

    table {
        width: 100%; /* Tabuľka na celú šírku obrazovky */
    }

    /* Zmenšenie stĺpcov v tabuľke, aby sa zmestili na mobil */
    table td:nth-child(1) { width: 15%; } 
    table td:nth-child(2) { width: 25%; }
    table td:nth-child(3) { width: 30%; }
    table td:nth-child(4) { display: none; } /* Miesto na mobile skryjeme, aby sa to zmestilo */
    table td:nth-child(5) { width: 30%; }
}

/* Pre veľmi malé mobily (obrazovky užšie ako 480px) */
@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column; /* Tlačidlá pôjdu pod seba */
        gap: 10px;
    }
    
    table td {
        font-size: 12px; /* Zmenšíme písmo v tabuľke */
        padding: 8px 4px;
    }

    @media (max-width: 480px) {
    .hero-buttons a {
        min-width: 140px; /* Na mobile budú trochu užšie, aby sa zmestili */
    }
}
}

.hero-buttons a {
    display: inline-block;
    min-width: 220px;      /* Zvýšil som pre istotu */
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    margin: 0 10px;
    box-sizing: border-box; /* Kľúčové: započíta border do veľkosti */
    border: 2px solid var(--primary-yellow); /* Obe budú mať rovnaký border */
}

/* Teraz len meníme farbu pozadia */
.btn-white {
    background-color: white;
    color: var(--main-black);
}

.btn-yellow {
    background-color: var(--primary-yellow);
    color: var(--main-black);
}

/* Kontajner pre články */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 stĺpce rovnakej šírky */
    gap: 20px;
    margin-top: 40px;
}

/* Responzivita: pri menších obrazovkách prepne na 1 stĺpec (pod sebou) */
@media (max-width: 768px) {
    .articles-grid {
        grid-template-columns: 1fr;
    }
}

/* Štýl navigačných šípok */

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* Pagination - šípky */
.pagination {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    font-size: 18px;
    font-weight: bold;
    color: #888;
}

.pagination button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: #f4f4f4; /* Svetlosivý podklad krúžku */
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.pagination button:hover:not(:disabled) {
    background-color: #e0e0e0;
}

.pagination button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Responzivita */
@media (max-width: 768px) {
    .articles-grid { grid-template-columns: 1fr; }
}