/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/


/* Tarinoiden pääwrapper */
.tarinakortit-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Sivun otsikko */
.sivun-otsikko-alue {
    text-align: center;
    margin-bottom: 40px;
}

.tarinat-otsikko {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}

/* Grid-layout kolmelle kortille */
.tarinakortit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* Yksittäinen tarinakortti */
.tarinakortti {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tarinakortti:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Kuva */
.tarinakortti .kuva-linkki {
    display: block;
    overflow: hidden;
}

.tarinakortti img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.tarinakortti:hover img {
    transform: scale(1.05);
}

/* Kortin sisältö */
.tarinakortti-sisalto {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tarinakortti h2 {
    margin: 0 0 15px 0;
    font-size: 1.4rem;
    line-height: 1.3;
}

.tarinakortti h2 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.tarinakortti h2 a:hover {
    color: #007cba;
}

.tarinakortti .ingressi {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Työnnä nappi alareunaan */
.tarinakortti-sisalto .lue-lisaa-nappi {
    margin-top: auto;
}

/* Lue lisää -nappi 
.lue-lisaa-nappi {
    display: inline-block;
    background: var(--ast-global-color-0);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s ease;
    align-self: flex-start;
}

.lue-lisaa-nappi:hover {
    background: #005a87;
    color: white;
}
*/
/* Ei tarinoita -viesti */
.ei-tarinoita {
    text-align: center;
    font-size: 1.1rem;
    color: #666;
    grid-column: 1 / -1;
}

/* Yksittäisen tarinan tyylit */
.tarina-ingressi {
    font-size: 1.2em;
    font-style: italic;
    margin-bottom: 1em;
    color: #666;
}

/* Yksittäisen tarinan kuvat */
.tarina-kuvat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
    align-items: start;
}

/* Tarinan sisältö (ACF-kenttä) */
.tarina-sisalto {
    margin: 30px 0;
    line-height: 1.7;
    font-size: 1.1rem;
}

.tarina-sisalto p {
    margin-bottom: 1.5em;
}

.tarina-sisalto h2,
.tarina-sisalto h3,
.tarina-sisalto h4 {
    margin-top: 2em;
    margin-bottom: 1em;
    color: #333;
}

.tarina-sisalto ul,
.tarina-sisalto ol {
    margin: 1.5em 0;
    padding-left: 2em;
}

.tarina-sisalto blockquote {
    border-left: 4px solid #007cba;
    margin: 2em 0;
    padding-left: 1.5em;
    font-style: italic;
    color: #666;
}

/* ACF-tekstikenttä */
.tarina-teksti {
    margin: 30px 0;
    line-height: 1.7;
    font-size: 1.1rem;
}

.tarina-teksti p {
    margin-bottom: 1.5em;
}

/* Pääkuva */
.tarina-paakuva {
    margin: 30px 0;
    text-align: center;
}

.paakuva-wrapper {
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    max-width: 100%;
}

.paakuva-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.paakuva-kuva {
    width: 100%;
    height: auto;
    display: block;
    max-width: 800px;
    transition: transform 0.3s ease;
}

.paakuva-wrapper:hover .paakuva-kuva {
    transform: scale(1.02);
}

/* Kuvamodaali (lightbox) */
.kuva-modaali {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.kuva-modaali img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.kuva-modaali .sulje-x {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.kuva-modaali .sulje-x:hover {
    color: #ccc;
}

/* Kuvanavigaatio */
.kuva-navigaatio {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
}

.kuva-nuoli {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    font-size: 30px;
    padding: 15px 20px;
    cursor: pointer;
    border-radius: 50%;
    color: #333;
    transition: all 0.3s ease;
    pointer-events: auto;
    user-select: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.kuva-nuoli:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
    color: #000;
}

.kuva-edellinen {
    left: 30px;
}

.kuva-seuraava {
    right: 30px;
}

/* Kuvalaskuri */
.kuva-laskuri {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.tarinan-kuva {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    align-self: start;
}

.tarinan-kuva:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kuva-wrapper {
    display: block;
    overflow: hidden;
    cursor: pointer;
}

.tarinan-kuva-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    border-radius: 12px;
}

.tarinan-kuva:hover .tarinan-kuva-img {
    transform: scale(1.02);
}

/* Responsiivisuus */
@media (max-width: 768px) {
    .tarinakortit-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .tarinat-otsikko {
        font-size: 2rem;
    }
    
    .tarinakortit-wrapper {
        padding: 15px;
    }

    .tarina-kuvat {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .tarinan-kuva-img {
        border-radius: 8px;
    }

    .kuva-nuoli {
        font-size: 24px;
        padding: 12px 16px;
    }
    
    .kuva-edellinen {
        left: 15px;
    }
    
    .kuva-seuraava {
        right: 15px;
    }
    
    .kuva-modaali .sulje-x {
        top: 15px;
        right: 20px;
        font-size: 30px;
    }
    
    .kuva-laskuri {
        bottom: 20px;
        font-size: 12px;
        padding: 6px 12px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tarinakortit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tarina-kuvat {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .tarinakortit-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tarina-kuvat {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        max-width: 1000px;
        margin: 30px auto 0;
    }
}

/* Yhteystiedot-tyylit */
.yhteystiedot-lohko {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    border-left: 4px solid var(--ast-global-color-1);
}

.yhteystiedot-lohko h3 {
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.yhteystiedot-lohko p {
    margin-bottom: 10px;
    line-height: 1.6;
}

.yhteystiedot-lohko strong {
    color: var(--ast-global-color-0);
}

.yhteystiedot-lohko a {
    color: var(--ast-global-color-0);
    text-decoration: none;
}

.yhteystiedot-lohko a:hover {
    text-decoration: underline;
}

/* ACF yhteystieto-kenttien tyylit */
.yhteystiedot-sisalto {
    margin-bottom: 20px;
}

.yhteystiedot-kenttat {
    margin-top: 15px;
}

/* Kaksipalstainen grid-layout */
.yhteystiedot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 25px;
}

.yhdistyksen-tiedot-palsta,
.toimihenkilot-palsta {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.palsta-otsikko {
    color: var(--ast-global-color-0);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ast-global-color-0);
}

.yhteystieto-kentta {
    margin-bottom: 12px;
    padding: 8px 0;
    line-height: 1.6;
}

.yhteystieto-kentta:last-child {
    margin-bottom: 0;
}

.yhteystieto-kentta a {
    color: var(--ast-global-color-0);
    text-decoration: none;
    font-weight: 500;
    display: block;
}

.yhteystieto-kentta a:hover {
    text-decoration: underline;
    color: #1a1f1b;
}

.yhteystieto-kentta a[href^="tel:"] {
    color: var(--ast-global-color-2);
}

.yhteystieto-kentta a[href^="mailto:"] {
    color: var(--ast-global-color-2);
}

.yhteystieto-kentta a[href^="http"] {
    color: var(--ast-global-color-2);
}

/* Toimihenkilöiden tittelit */
.toimihenkilon-titteli {
    display: block;
    color: var(--ast-global-color-0);
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

/* Uudet toimihenkilökortit */
.toimihenkilo-kortti {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.toimihenkilo-kortti:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.toimihenkilo-titteli {
    font-weight: 700;
    color: var(--ast-global-color-0);
    font-size: 1rem;
    margin-bottom: 5px;
}

.toimihenkilo-nimi-rivi {
    margin-bottom: 5px;
    line-height: 1.4;
}

.toimihenkilo-nimi-rivi a {
    color: var(--ast-global-color-2);
    text-decoration: none;
}

.toimihenkilo-nimi-rivi a:hover {
    text-decoration: underline;
}

.toimihenkilo-osoite {
    margin-bottom: 5px;
    color: var(--ast-global-color-2);
    line-height: 1.4;
}

.toimihenkilo-sahkoposti {
    margin-bottom: 5px;
}

.toimihenkilo-sahkoposti a {
    color: var(--ast-global-color-2);
    text-decoration: none;
}

.toimihenkilo-sahkoposti a:hover {
    text-decoration: underline;
}

.toimihenkilo-sahkoposti .social-icon {
    margin-right: 5px;
}

/* Responsiivisuus */
@media (max-width: 768px) {
    .yhteystiedot-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .yhdistyksen-tiedot-palsta,
    .toimihenkilot-palsta {
        padding: 15px;
    }
}

/* Sosiaalisen median ikonit */
.social-icon {
    font-size: 1.1em;
    margin-right: 10px;
    vertical-align: middle;
    width: 20px;
    display: inline-block;
    text-align: center;
}

.facebook-icon {
    color: var(--ast-global-color-2);
}

.instagram-icon {
    color: var(--ast-global-color-2);
}

.email-icon {
    color: var(--ast-global-color-2);
}

.yhteystieto-kentta .social-icon + a {
    display: inline;
}

/* Yhdistyksen nimi H2-otsikkona */
.yhdistyksen-nimi {
    color: var(--ast-global-color-0);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

/* Yhdistyksen esittely -lohko */
.yhdistyksen-esittely-lohko {
    margin: 20px 0;
}

.yhdistyksen-esittely-lohko h2 {
    margin-bottom: 15px;
}

.yhdistyksen-esittely-lohko p {
    line-height: 1.6;
}

/* ============================================
   UUSI ETUSIVU (front-page.php)
   ============================================ */

/* Etusivun pääwrapper */
.etusivu-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* Etusivun esittely ylhäällä */
.etusivu-esittely {
    padding: 3rem 2rem 2rem 2rem;
    text-align: center;
}

.etusivu-esittely .etusivun-esittely-lohko h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--ast-global-color-0);
}

.etusivu-esittely .etusivun-esittely-lohko > div {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #666;
    
    margin: 0 auto;
}

/* Korttien otsikko */
.kortit-otsikko {
    text-align: center;
    font-size: 2.2rem;
    color: var(--ast-global-color-0);
    margin-bottom: 2.5rem;
    font-weight: 600;
}

/* Kortit-osio */
.etusivu-kortit {
    padding: 2rem;
}

/* Korttien grid (3 korttia vierekkäin) */
.kortit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Yksittäinen etusivun kortti */
.etusivu-kortti {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.etusivu-kortti:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Kortin kuva */
.etusivu-kortti .kuva-linkki {
    display: block;
    overflow: hidden;
}

.etusivu-kortti img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.etusivu-kortti:hover img {
    transform: scale(1.05);
}

/* Kortin sisältö */
.kortti-sisalto {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Kortin tyyppi-palkki (kiinteästi kuvan alareunaan) */
.kortti-tyyppi {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.8rem 1rem;
    margin: 0; /* Poistetaan marginaalit */
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tapahtuma-badge {
    background: var(--ast-global-color-1);
    color: white;
}

.tarina-badge {
    background: var(--ast-global-color-0);
    color: white;
}

/* Kortin sisältö (ilman ylimääräistä väliä) */
.kortti-sisalto {
    padding: 0; /* Poistetaan padding kokonaan */
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Kortin tekstisisältö (alle palkin) */
.kortti-teksti {
    padding: 1.5rem; /* Siirretään padding tähän */
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Tapahtuman päivämäärä (ilman reunuksia) */
.etusivu-kortti .tapahtuma-paivays {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ast-global-color-0);
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
    /* border: 2px solid var(--ast-global-color-1); POISTETTU */
}

/* KORTIN OTSIKKO (yhtenäinen kaikille) */
.kortti-teksti h3 {
    font-size: 1.3rem;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.kortti-teksti h3 a {
    color: var(--ast-global-color-0);
    text-decoration: none;
    transition: color 0.3s ease;
}

.kortti-teksti h3 a:hover {
    color: var(--ast-global-color-1);
}

/* KORTIN INGRESSI (yhtenäinen kaikille) */
.kortti-teksti .ingressi {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    flex: 1;
}

/* LUE LISÄÄ -LINKKI (pelkistetty, yhtenäinen) */
.kortti-teksti .lue-lisaa-nappi {
    color: var(--ast-global-color-0);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    align-self: flex-end;
    margin-top: auto;
    text-align: right;
    transition: color 0.3s ease;
}

.kortti-teksti .lue-lisaa-nappi:hover {
    color: var(--ast-global-color-1);
    text-decoration: underline;
}

/* Etusivun linkit */
.etusivu-linkit {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.etusivu-linkki {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.tapahtuma-linkki {
    background: var(--ast-global-color-1);
    color: white;
}

.tapahtuma-linkki:hover {
    background: transparent;
    color: var(--ast-global-color-1);
    border-color: var(--ast-global-color-1);
}

.tarina-linkki {
    background: var(--ast-global-color-0);
    color: white;
}

.tarina-linkki:hover {
    background: transparent;
    color: var(--ast-global-color-2);
    border-color: var(--ast-global-color-2);
}

.tutustu-muihin-linkki:hover {
    color: var(--ast-global-color-1) !important;
    text-decoration: underline;
}

/* Yksittäinen nappi keskitettynä */
.tarina-linkki-keskitetty {
    margin: 0 auto;
}



/* Responsiivisuus */



@media (max-width: 1024px) {
    .kortit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .etusivu-linkit {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .tarina-linkki-keskitetty {
        margin: 0; /* Poista auto-margin responsiivisessa */
    }
}

@media (max-width: 768px) {
    .kortit-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .etusivu-esittely {
        padding: 2rem 1rem 1rem 1rem;
    }
    
    .etusivu-esittely .etusivun-esittely-lohko h2 {
        font-size: 2rem;
    }
    
    .etusivu-kortit {
        padding: 1rem;
    }
    
    .etusivu-kartta {
        padding: 1rem;
    }
    
    .etusivu-linkit {
        margin-top: 1.5rem;
    }
    
    .etusivu-linkki {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }

    .etusivu-linkki {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        width: 100%; /* Täysi leveys mobiilissa */
        text-align: center;
    }
}

/* Etusivun osiot (tarina ja tapahtuma) */
.etusivu-osio {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

.etusivu-osio:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Tapahtuman päivämäärä etusivulla */
.etusivu-tarinakortti .tapahtuma-paivays {
    font-size: 0.85rem;
    padding: 4px 8px;
    margin-bottom: 8px;
}

/* Responsiivisuus etusivun osioille */
@media (max-width: 768px) {
    .etusivu-osio {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
    }
}

#kartta {
    width: 100%;
    max-width: 550px;
    height: 400px;
    margin-top: 20px;
}

/* Sijainti-shortcoden kartta */
.sijainti-kartta {
    width: 100%;
    max-width: 550px;
    height: 300px;
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
}

/* Sijainti-lohkon tyylit */
.sijainti-lohko {
    margin: 20px 0;
}

.sijainti-lohko h3 {
    color: var(--ast-global-color-0);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.sijainti-tiedot {
    margin-bottom: 20px;
}

.sijainti-tiedot p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.5;
}
/* Tapahtumien tyylit */
.tapahtuma-paivays {
    background: var(--ast-global-color-1);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
    display: inline-block;
}

.mennyt-paivays {
    background: #666;
}

.tapahtumat-osaotsikko {
    grid-column: 1 / -1;
    text-align: center;
    margin: 40px 0 20px 0;
    font-size: 1.8rem;
    color: #333;
}

.nayta-menneet-nappi {
    display: block;
    margin: 40px auto 20px auto;
    padding: 12px 24px;
    background: var(--ast-global-color-2);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.nayta-menneet-nappi:hover {
    background: var(--ast-global-color-1);
}

.mennyt-tapahtuma {
    opacity: 0.8;
}

.tapahtuma-ajankohta {
    background: var(--ast-global-color-1);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 500;
}

/* KUVA-ALUE TARINOILLE JA TAPAHTUMILLE */
.kuva-alue {
    height: 250px; /* Sama kuin tarinoissa */
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kuva-alue .kuva-linkki {
    display: block;
    width: 100%;
    height: 100%;
}

.kuva-alue img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.kuva-alue:hover img {
    transform: scale(1.05);
}

/* Placeholder tyhjille kuville */
.kuva-alue:empty::before {
    content: "📅";
    font-size: 3rem;
    color: #ccc;
}

/* Tapahtumien päivämäärä-badge korteissa */
.tarinakortti .tapahtuma-paivays {
    background: var(--ast-global-color-1);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: inline-block;
    text-align: center;
}

.tarinakortti .mennyt-paivays {
    background: #666;
}

/* Varmista että tapahtumakortit ovat samanlaisia kuin tarinat */
/* .tapahtuma-kortti removed as it was an empty ruleset */

.mennyt-tapahtuma {
    opacity: 0.8;
}