.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
}

.history-card {
    background: rgba(25, 25, 25, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.history-card:hover {
    background: rgba(45, 45, 45, 0.9);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
}

.history-year {
    font-size: 3em;
    font-weight: bold;
    color: #61977e;
    margin-bottom: 10px;
    line-height: 1;
}

.history-edition {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 5px;
    color: #f2f2f2;
}

.history-title {
    font-size: 0.9em;
    opacity: 0.7;
    color: #ccc;
}

/* --- Styles extracted from index.php --- */
.topnav { overflow: hidden; }
.topnav.responsive { overflow: visible; }
.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font: 400 18px Lato, sans-serif; }
.topnav a:hover { background-color: #ddd; color: black; }
.topnav .icon { display: none; }
.topnav .menu-links { display: inline; }

@media screen and (max-width: 800px) {
    .topnav .menu-links { display: none; }
    .topnav a.icon { float: right; display: block; font-size: 24px; position: relative; z-index: 10001; }
    
    .topnav.responsive .menu-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #1a1a1a;
        z-index: 9999;
        padding-bottom: 10px;
        box-shadow: 0px 10px 20px rgba(0,0,0,0.6);
    }
    
    .topnav.responsive .menu-links a {
        float: none;
        display: block;
        text-align: center;
        border-bottom: 1px solid #333;
        padding: 15px;
    }
    .topnav.responsive .menu-links a:last-child {
        border-bottom: none;
    }
}

.button { display: inline-block; border-radius: 40px; background-color: #FFFFFF; border: none; color: #5a65ff; text-align: center; font-size: 22px; transition: all 0.5s; cursor: pointer; margin: 5px; max-width: 100%; white-space: normal; }
.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; max-width: 100%; }
.button span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; }
.button:hover span { padding-right: 25px; }
.button:hover span:after { opacity: 1; right: 0; }

@media screen and (max-width: 600px) {
    .ss-fade-up { transform: translate(0, 50px); }
    .button { font-size: 16px; padding: 10px 15px !important; width: 100%; box-sizing: border-box; }
    .s-intro { height: auto !important; min-height: 100vh; padding: 80px 0 50px 0; overflow: visible !important; }
    .counter { display: flex !important; flex-wrap: wrap; justify-content: center; width: 100%; gap: 10px; margin-bottom: 30px; }
    .counter__time { flex: 1 1 40% !important; margin: 10px 0 !important; }
}

.program-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 16px; }
.program-table th, .program-table td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
.program-table .section-header { font-weight: bold; text-align: center; background-color: #f2f2f2; }
.program-table a { text-decoration: none; font-weight: bold; }
.program-table a:hover { text-decoration: underline; }

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 20px; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Back to top fixed on screen */
.ss-go-top {
    position: fixed !important;
    z-index: 9999 !important;
}