/* Yleiset tyylit */
body {
    margin: 0;
    font-family: 'Garamond', 'Times', serif; 
    background-color: #0077be;
    color: #4a586e; 
}

/* Ylärivi */
header {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
    text-align: left;
    z-index: 1000;
    position: relative;
}

nav ul {
    list-style: none;
    margin: 0;
    padding-left: 20px;
    display: flex; 
    justify-content: flex-start;
    align-items: center;
}

nav ul li {
    margin-right: 15px;
}

nav ul li a {
    color: #bbb;
    text-decoration: none;
}

nav ul li a.active, nav ul li a.language-active {
    color: #ddd;
    font-weight: bold;
}

.language-notinuse {
    color: #333; 
    pointer-events: none; 
    cursor: default; 
    text-decoration: none;
}

/* Grid Container kortteja varten */
.tiles-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 360px); /* Kortit ovat aina 360px leveitä */
    grid-auto-rows: 640px; /* Korttien korkeus aina 640px */
    justify-content: center; /* Keskitetään kortit */
    gap: 10px; /* Väli korttien välillä */
    padding: 20px;
}

/* Yksittäinen kortti */
.tile {
    width: 360px; /* Vakiokoko 360px leveys */
    height: 640px; /* Vakiokoko 640px korkeus */
    box-sizing: border-box;
    position: relative; /* Varmistaa, että sisältö pysyy kortin sisällä */
    overflow: hidden; /* Estää sisällön ylityksen */
}



/* Taustakuva (fallback) */
.background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Säilyttää kuvasuhteen */
    z-index: 0; /* Kuva on alimmaisena */
}


/* Iframe-videon oikea skaalaus (16:9 kuvasuhde) */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Tämä säilyttää 16:9 kuvasuhteen videolle */
    height: 0;
}

/* Video (iframe) */
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1; /* Video on kuvan päällä */
    object-fit: cover; /* Täyttää kortin koon */
}

/* GIF ja logo -container */
.gif-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Taustagiffin asetukset */
.background-gif {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Logon asetukset */
.logo {
    position: absolute;
    top: 12%; /* Sijoitus suhteessa kortin kokoon */
    width: 800%; /* Skaalautuu suhteessa containeriin */
    max-width: 250px; /* Varmistetaan, että se ei kasva liikaa */
    height: auto;
    z-index: 2;
}

/* Tagline */
.tagline {
    position: absolute;
    bottom: 45%; /* Sijoitus suhteessa kortin kokoon */
    color: white;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2em;
    text-align: center;
    z-index: 3;
}

/* GIF-kortit */
.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Varmistetaan, että GIFit eivät veny */
}

/* Footer */
.footer {
    background-color: rgba(255, 165, 0, 0.9);
    color: #808000;
    text-align: center;
    padding: 20px;
}

/* Kortin ja linkkien asetukset */
.link-container {
    position: relative;
    width: 360px;
    height: 640px;
}

.top-link, .bottom-link {
    position: absolute;
    width: 100%;
    height: 50%; /* Jaa kortti puoliksi */
    left: 0;
    z-index: 2; /* Varmistetaan, että linkit ovat kuvien päällä */
}

/* Ylemmän linkin asettelu */
.top-link {
    top: 0; /* Ylälaita */
    background-color: rgba(255, 255, 255, 0); /* Varmistetaan, että se on läpinäkyvä */
}

/* Alemman linkin asettelu */
.bottom-link {
    bottom: 0; /* Alalaita */
    background-color: rgba(255, 255, 255, 0); /* Varmistetaan, että se on läpinäkyvä */
}

/* Taulukon asettelu */
.table-container {
    width: 60%; /* Rajoitetaan taulukon leveys 60% sivusta */
    margin: 0 auto; /* Keskitetään taulukko */
}

table {
    width: 100%; /* Taulukko täyttää käytettävissä olevan tilan */
    border-collapse: collapse;
    font-size: 18px;
    text-align: left;
}

td {
    padding: 12px 15px;
    vertical-align: top; /* Yhdistetään pystyyn */
}

/* Linkin asettelu oikealle */
td:first-child {
    text-align: right; /* Vasemman palstan linkit oikealle */
    white-space: nowrap; /* Varmistetaan, että linkit eivät jaa rivejä */
}

/* Oikean palstan selitteiden tasaus vasemmalle */
td:last-child {
    text-align: left; /* Oikean palstan selitteet vasemmalle */
}

/* Responsiivinen muotoilu */
@media (max-width: 768px) {
    .table-container {
        width: 90%; /* Pienillä ruuduilla taulukon leveys kasvaa */
    }

    td {
        display: block;
        text-align: left; /* Molemmat palstat vasemmalle */
        width: 100%;
    }

    td:first-child {
        text-align: left; /* Linkit vasemmalle pienissä näytöissä */
        padding-bottom: 5px;
    }

    td:last-child {
        padding-top: 5px;
    }
}



/* Mobiilinäkymän asettelu */
/* @media (max-width: 768px) {*/
/*     .tiles-container {*/
/*         grid-template-columns: 1fr; /* Mobiilissa yksi kortti per rivi */
/*         grid-auto-rows: auto; /* Korkeus mukautuu sisältöön mobiilissa */
/*     }*/
/* 
/*     .tile {*/
/*         width: 100vw; /* Mobiilissa kortit täyttävät leveyden */
/*         height: auto; /* Korkeus mukautuu */*/
/*     }*/
/* 
/*     .tile img {*/
/*         width: 100vw;*/
/*         height: auto;*/
/*     }*/
/*
/*    /* Logon skaalaaminen mobiilissa */
/*    .logo {*/
 /*       width: 40%; /* Pienempi koko mobiilissa */
/*        max-width: 120px;*/
/*    }*/
/*
 /*   /* Taglineen lisätään pieni skaalaus mobiilissa */
/*    .tagline {*/
 /*       font-size: 1.0em; /* Pienempi fonttikoko mobiilissa */
 /*       bottom: 10%; /* Siirretään vähän ylemmäs mobiilissa */
/*    }*/
/*} */