/* --- PERUS --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  background: #111;
  color: #eee;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --- HEADER --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
}

/* LOGO */
.logo {
  display: flex;
  flex-direction: column; /* tagline alle */
  align-items: flex-start; /* tekstit vasemmalle */
}

.logo h1 {
  font-family: 'Poppins', sans-serif; /* moderni ja selkeä */
  font-weight: 700;
  font-size: 1.8em;
  color: #eee;
  line-height: 1; /* tiivistää otsikon */
}

.logo .tagline {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;          /* hieman kevyempi kuin otsikko */
  font-size: 0.7em;          /* pienempi fontti */
  text-transform: uppercase; /* isoilla kirjaimilla */
  letter-spacing: 3px;       /* lisää tilaa kirjainten väliin */
  color: #ccc;
  line-height: 1;            /* tiivistää rivin */
  margin-top: 0;             /* poistaa välin otsikon ja taglinen välistä */
}





.menu {
  display: flex;
  gap: 20px;
}

.menu a:hover {
  color: #d4af37; /* hillitty korostus */
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background: #d4af37;
  transition: 0.3s;
}

@media(max-width:768px){
  .menu {
    position: fixed;
    top: 70px;
    right: -100%;
    width: 200px;
    height: calc(100vh - 70px); /* pieni välilyönti korjattu! */
    background: #1a1a1a;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    transition: right 0.3s ease;
  }
  .menu.active { right: 0; }

  /* 🔧 LISÄYS TÄHÄN */
  .menu a {
    display: block;
    padding: 14px 16px; /* kasvattaa kosketusaluetta */
    text-align: left;
  }

  .hamburger { display: flex; }
}

/* ==================================== */
/* ⚠️ HAMBURGER -> X TRANSFORMAATIO CSS */
/* Tämä tarvitsee erilliset säännöt, koska menu.active lisää luokan */
/* ==================================== */

/* Kun valikko on AUKI (eli .menu on .active), kohdista muutokset .hamburgeriin */
@media(max-width:768px){
    /* Keskimmäinen viiva: Piilota */
    .menu.active + .hamburger div:nth-child(2) {
        opacity: 0; 
    }

    /* Ylin viiva: Käännä 45 astetta ja siirrä alas risteystä varten */
    .menu.active + .hamburger div:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    /* Alin viiva: Käännä -45 astetta ja siirrä ylös risteystä varten */
    .menu.active + .hamburger div:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}


/* --- SECTION --- */
section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  padding: 80px 20px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

section h2 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #fff;
}

section p,
li {
  color: #ccc;
  font-size: 1em;
  margin-bottom: 10px;
}

.container {
  max-width: 1000px;
  width: 1000%;
}

/* --- VUOROTTELEVAT TUMMAT SÄVYT --- */
#etusivu { background: #111; }
#info { background: #333; } /* VAIHDETTU SELKEÄSTI VAALEAMMAKSI HARMAAKSI */
#palvelut { background: #121212; }
#galleria { background: #1c1c1c; }
#yhteystiedot { background: #141414; }
#tietovisat { background: #1e1e1e; }

/* --- PLACEHOLDER VÄRIT --- */
#etusivu .placeholder { background: #222; }
#info .placeholder { background: #2a2a2a; }
#palvelut .placeholder { background: #232323; }
#galleria .placeholder { background: #2b2b2b; }
#yhteystiedot .placeholder { background: #242424; }
#tietovisat .placeholder { background: #2c2c2c; }

/* Kolumnit */
.three-columns {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: stretch; /* 👈 tärkein muutos – venyttää kolumnit yhtä korkeiksi */
  flex-wrap: wrap; /* mobiilissa allekkain */
  margin-top: 30px;
}

/* Jokainen kolumni venyy yhtä korkeaksi */
.column {
  flex: 1;
  min-width: 250px;
  display: flex; /* 👈 tekee sisällöstä hallittavamman */
  flex-direction: column;
  justify-content: center; /* keskittää sisällön pystysuunnassa */
}

/* Keskikolumni */
.column.center {
  text-align: center;
}

/* Vasemman ja oikean tekstin tasaus */
.column.left,
.column.right {
  text-align: left;
}

/* Kortit ja kuvat */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* 👈 venyttää kortin koko kolumnin korkeudelle */
}

.column-image {
  width: 70%;
  height: auto;
  border-radius: 8px;
  margin-top: 10px;
  object-fit: cover;
}

.placeholder {
  height: 150px;
  border-radius: 8px;
  margin-top: 10px;
}





/* --- SERVICE LIST --- */
.service-list {
  list-style: none;
  padding-left: 0;
}
.service-list li {
  margin-bottom: 10px;
}

/* --- GALLERY --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* --- FOOTER --- */
footer {
  background: #1a1a1a;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}


/* --- BACK TO TOP --- */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  font-size: 2em;
  color: #d4af37;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s;
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
}

#backToTop:hover {
  transform: translateY(-5px);
  color: #fff;
}

/* -- PIKKUTEKSTIT KUVILLE ---*/
figure {
  margin: 10px 0 0 0; /* vähän väliä ylä- ja alapuolelle */
}

figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s ease; /* tekee zoomauksesta pehmeän */
}

figure img:hover {
  transform: scale(1.05); /* suurentaa kuvaa 50% hoverilla */
}


figure figcaption {
  font-size: 0.6em;        /* pienempi fontti */
  text-transform: uppercase; /* isot kirjaimet */
  letter-spacing: 1px;     /* kirjainten väli */
  color: #ccc;             /* hillitty väri */
  text-align: center;      /* keskitetty teksti kuvan alle */
  margin-top: 1px;         /* pieni väli kuvan ja tekstin väliin */
}

/* -- INFO TEKSTIT --- */
#info .column.center p {
  margin-bottom: 40px; /* kasvattaa väliä kaikkien kappaleiden välillä */
  line-height: 1.8;    /* säilyttää ilmavan rivivälin */
  color: #ccc;
}


/* --- INFO-OSIO: tasalevyiset kuvat oikeassa kolumnissa --- */
.column.right .column-figure {
  margin-bottom: 5px;       /* lisää tilaa kuvien väliin */
  text-align: center;
}

.column.right .column-figure img.column-image {
  width: 100%;               /* täyttää kolumnin leveyden */
  max-width: 300px;          /* halutessasi rajoitat maksimi leveyden */
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.column.right .column-figure img.column-image:hover {
  transform: scale(1.5);     /* hover-zoomi */
}

.column.right .column-figure figcaption {
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 5px;
  color: #ccc;
  text-align: center;
}


/* Lainaus ja lähde */
blockquote {
  margin: 20px 0;        /* lisää tilaa ylä- ja alapuolelle */
  padding-left: 20px;    /* hieman sisennystä */
  border-left: 3px solid #d4af37; /* hillitty kultainen viiva */
 

#modal-visa1 #share-whatsapp {
    border: 2px solid #d4af37;
    border-radius: 6px;
    padding: 5px 10px;
}

#modal-visa1 #share-whatsapp i { 
    color: #d4af37;
}


/* Jakonapit */
#modal-visa1 .share-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 90%; 
    max-width: 450px;
    margin: 10px auto; 
}

#modal-visa1 .share-buttons a {
    flex: 0 1 auto;
    text-align: center;
    padding: 5px 10px;
    font-size: 0.85rem; 
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent !important; 
    border: none;
    transition: color 0.2s ease;
    color: #eee; 
}

#modal-visa1 .share-buttons a i {
    font-size: 32px !important;
    display: inline-block !important; 
    transition: color 0.2s ease;
}

#modal-visa1 .share-buttons a:hover {
    color: #aaa; 
}
#modal-visa1 #share-facebook:hover i { color: #4c70ba; }
#modal-visa1 #share-whatsapp:hover i { color: #34d773; }

#modal-visa1 #result:not(:empty) + .share-buttons {
    margin-top: 10px;
}
#modal-visa1 #quiz-content-box:has(#result:not(:empty)) {
    min-height: auto; 
}

#modal-visa1 .modal-content > i {
    display: none !important;
}

/* ================================================================= */
/* --- SOTAVISA 2:N TYYLIT --- */
/* ================================================================= */

/* Piilotetaan kysymysmerkki */
#modal-visa2 .modal-content > i { display: none !important; }

/* Otsikko */
#modal-visa2 h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* 2. Kysymys/Tulos Boxi */
#modal-visa2 #quiz-content-box {
    background: #111;
    border: 1px solid #282828;
    border-radius: 6px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Kysymysteksti */
#modal-visa2 .question {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #eee;
    text-align: center;
    font-weight: 400;
    line-height: 1.4;
}

/* Kysymyksen Numero */
#modal-visa2 .question-number {
    font-size: 0.9rem;
    font-weight: 700;
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #333;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

/* 3. Vastausnapit */
#modal-visa2 .options {
    width: 100%;
}
#modal-visa2 .options button {
    display: block;
    margin: 6px auto;
    padding: 10px 15px;
    width: 95%;
    max-width: 450px;
    border: none;
    border-radius: 3px;
    background: #222;
    color: #fff;
    font-size: 0.95rem;
    transition: all 0.2s;
    text-align: center;
    font-weight: 300;
    letter-spacing: 0.5px;
    cursor: pointer !important;
}
#modal-visa2 .options button:hover {
    background-color: #333;
    color: #d4af37;
}
#modal-visa2 .options button:disabled {
    background-color: #2a2a2a;
    cursor: pointer !important;
    color: #888;
}

/* 4. Vastausvärit */
#modal-visa2 .options button.correct {
    background-color: #1f502c;
    color: white;
    font-weight: 600;
}
#modal-visa2 .options button.wrong {
    background-color: #701010;
    color: white;
    font-weight: 600;
}

/* 5. Tulos ja Kontrollit */
#modal-visa2 #result2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #d4af37;
    text-align: center;
    margin-top: auto;
    padding: 10px;
    text-transform: uppercase;
}

#modal-visa2 .reset-button {
    background-color: #d4af37;
    color: #111;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 25px;
    border: 3px solid #d4af37;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    display: block;
    width: 65%;
    max-width: 300px;
    margin: 20px auto 10px auto;
    transition: all 0.2s ease;
}
#modal-visa2 .reset-button:hover {
    background-color: #f0c94d;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Facebook ja WhatsApp napit Sotavisa 2:lle */
#modal-visa2 #share-facebook2,
#modal-visa2 #share-whatsapp2 {
    border: 2px solid #d4af37;
    border-radius: 6px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

#modal-visa2 #share-facebook2 i,
#modal-visa2 #share-whatsapp2 i {
    color: #d4af37;
    font-size: 1.5em;  /* ← Tee kuvakkeista isommat */
}

#modal-visa2 #share-facebook2:hover i { color: #4c70ba; }
#modal-visa2 #share-whatsapp2:hover i { color: #34d773; }



/* Jakonapit */
#modal-visa2 .share-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 90%;
    max-width: 450px;
    margin: 10px auto;
}

#modal-visa2 .share-buttons a {
    flex: 0 1 auto;
    text-align: center;
    padding: 5px 10px;
    font-size: 0.85rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent !important;
    border: none;
    transition: color 0.2s ease;
    color: #eee;
}

#modal-visa2 .share-buttons a i {
    font-size: 1.0em;
    display: inline-block !important;
    transition: color 0.2s ease;
}

#modal-visa2 .share-buttons a:hover { color: #aaa; }
#modal-visa2 #share-facebook2:hover i { color: #4c70ba; }
#modal-visa2 #share-whatsapp2:hover i { color: #34d773; }

#modal-visa2 #result2:not(:empty) + .share-buttons { margin-top: 10px; }
#modal-visa2 #quiz-content-box:has(#result2:not(:empty)) { min-height: auto; }




/* --- FOOTER: PERUSSIJOITTELU JA TYYLIT --- */
footer {
    background: #1a1a1a;
    text-align: center;
    padding: 30px 20px; /* Varmistaa tilaa ylä- ja alapuolella */
    margin-top: 1px; /* Antaa tilaa edelliseen osioon */
}

/* CONTAINER FOOTERIN SISÄLLÖLLE (Varmistaa keskityksen ja leveyden) */
.footer-content {
    /* HUOM: Korvattu antamasi lohko tällä, jotta keskitystyylit ovat oikein */
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 15px; /* Väli ikonien ja tekstin välillä */
    max-width: 1400px;
    margin: 0 auto;
}



/* --- FOOTER SOSIAALINEN MEDIA --- */
/* Jotta ikonit ovat samalla rivillä */
.social-links-footer {
    display: flex;
    gap: 20px;
    margin-bottom: 5px;
}

.social-links-footer a {
    font-size: 1.6em; /* Ikonin koko */
    color: #d4af37; /* Ikonin perusväri */
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links-footer a:hover {
    color: #ffffff; 
    transform: translateY(-2px);
}

.footer-images {
  display: flex;
  flex-direction: column; /* Pystysuuntainen asettelu */
  align-items: center; /* Keskittää kuvat, jos haluat */
}

.footer-image {
width: 90%;
/* max-width: 1000px; Tämän poistaminen antaa meille enemmän vapautta */
height: auto;
display: block;
margin: 0;
padding: 0;
border: none;
opacity: 1.0;
}


/* --- YKSINKERTAINEN KUVA BANNERI SARAKKEESSA --- */

/* Varmista, että kaikki kuvat sarakkeessa ovat responsiivisia */
.responsive-image {
    max-width: 100%; /* Kuva ei koskaan ylitä sarakkeen leveyttä */
    height: auto;
    display: block;
    border-radius: 5px; /* Pieni pyöristys kulmiin */
}

/* Lisää pieni marginaali kuvan alle erottamaan sen seuraavasta elementistä */
.column-image-margin {
    margin-bottom: 20px; 
}

/* Visuaalinen efekti linkille */
.quiz-image-link {
    display: block; /* Varmistaa, että linkki vie koko kuvan alueen */
    opacity: 0.9; /* Hieman hillitympi perusilme */
    transition: opacity 0.2s ease;
    margin-bottom: 20px; /* Tilaa seuraavaan elementtiin (lainaukseen) */
}

.quiz-image-link:hover {
    opacity: 2.0; /* Kirkas hoverilla */
}

/* Varmistaa, että #info näkyy mobiilissa */
@media (max-width: 768px) {
  #info {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  /* Mobiilissa logo ja tagline keskelle, hamburger oikealle */
header {
    justify-content: center; /* keskittää logon ja tagline */
    position: relative; /* jotta hamburger voidaan sijoittaa absoluuttisesti */
}

.logo {
    align-items: center; /* logo ja tagline keskelle */
}

.hamburger {
    position: absolute;
    right: 20px; /* pysyy oikeassa reunassa */
    top: 50%; 
    transform: translateY(-50%); /* keskittää pystysuunnassa */
}


}

/* =========================
   Custom Scrollbar
   ========================= */

/* Koko scrollbar alue */
::-webkit-scrollbar {
    width: 22px;            /* Paksuus vaakasuunnassa */
    height: 12px;           /* Paksuus pystysuunnassa */
}

/* Scrollbarin liukuosa / "thumb" */
::-webkit-scrollbar-thumb {
    background-color: #d4af37; /* Kultainen väri */
    border-radius: 6px;        /* Pyöristetyt reunat */
    border: 3px solid #1a1a1a; /* Taustaa ympäröivä tila */
}

/* Scrollbarin tausta / "track" */
::-webkit-scrollbar-track {
    background: #1a1a1a; /* Sama tummanharmaa kuin korttien tausta */
    border-radius: 6px;
}

/* Hover-efekti liukuosassa */
::-webkit-scrollbar-thumb:hover {
    background-color: #d4af37; /* Kirkkaampi kultainen hoverilla */
}

/*NUOLI */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 30px;
  color: white;
  display: none;
  cursor: pointer;
  z-index: 1000;
}


#backToTop.show {
  display: block;
  opacity: 0.8;
}

#backToTop:hover {
  opacity: 1;
}


/* SOTAVISOJEN KUVA */
.card {
    position: relative;
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-5px); /* kortti nousee hiukan */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* lisää varjon */
}

.card-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease, filter 0.3s ease;
    transform-origin: center center;
    image-rendering: auto;
    will-change: transform;
}

/* Hover-efekti ilman sumenemista */
.card:hover .card-image {
    transform: scale(1.08) translateY(-3px); /* kevyt zoom + nousee */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); /* pieni varjo */
}

/* AJANKOHTAISTA banneri */
.quiz-image-link.big-banner img {
    max-width: 100%;   /* täyttää sarakkeen leveyden */
    height: auto;      /* säilyttää kuvasuhteen */
    border-radius: 8px;
}



/* INFO-OSIO: kuvat tekstin alla */
#info {
  background: #1c1c1c; /* tai haluamasi harmaa sävy */
  padding: 60px 20px;
  color: #ddd;
}


#info .info-content {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.7;
}


#info figure {
  margin: 25px auto 40px;
  text-align: center;
}

#info figure img {
  width: 100%;
  max-width: 300px;     /* <-- tämä rajoittaa kuvien leveyden kuten ennen */
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
  cursor: pointer;
}

#info figure img:hover {
  transform: scale(1.5); /* pidetään halutessasi hover-zoom */
}

#info figure figcaption {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 5px;
  color: #ccc;
}


#info blockquote {
  margin: 20px auto;
  font-style: italic;
  color: #ccc;
  border-left: 4px solid #666;
  padding-left: 15px;
}

#info p.citation {
  text-align: right;
  font-style: italic;
  color: #aaa;
}

.info-content.two-columns {
    display: flex;
    gap: 40px; /* sarakkeiden väli */
    align-items: flex-start; /* pitää sarakkeet ylhäällä */
}

/* Vasemman sarakkeen leveys suhteessa oikeaan */
.left-column {
    flex: 5;  /* vie kolme kertaa tilaa kuin oikea sarake */
}

.right-column {
    flex: 3;  /* oikea sarake pienempi */
}

/* Sisällön järjestys sarakkeissa */
.left-column, .right-column {
    display: flex;
    flex-direction: column;
}

/* Keskitetään otsikot */
#info h2, 
#info h3 {
    text-align: center;
}



  font-style: italic;    /* varmistaa kursiivin */
}

.citation {
  text-align: center;    /* keskittää tekstin */
  font-style: italic;    /* kursiivi */
  color: #ccc;
  margin-top: 5px;       /* pieni väli yläpuolelle */
  margin-bottom: 20px;   /* hieman tilaa alla */
}

/* --- Kortit --- */
#palvelut .card {
  background: #1a1a1a;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 180px;

  display: flex;            /* Keskitetään sisältö pystysuunnassa */
  flex-direction: column;   /* Icon ylös, otsikko ja teksti alle */
  align-items: center;      /* Keskitetään horisontaalisesti */
  text-align: center;       /* Tekstin keskitys */
  
  /* Lisätty tämä mobiilivälkkymisen poistamiseksi */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

#palvelut .card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0,0,0,0.7);
}

#palvelut .card i {
  font-size: 3em;           /* Iconin koko */
  color: #d4af37;
  margin-bottom: 10px;      /* Tilaa iconin ja otsikon väliin */
}

#palvelut .card h3 {
  color: #d4af37;
  text-transform: uppercase;
  font-size: 1.0em;
  margin: 0 0 10px 0;       /* Tilaa otsikon ja tekstin väliin */
}

#palvelut .card p {
  color: #ccc;
  font-size: 0.95em;
  margin: 0;
}

#palvelut .card img {
  max-width: 250px;       /* Kuvan leveys voi pienentyä, mutta ei veny */
  height: auto;          /* Säilyttää kuvan mittasuhteet */
  margin-bottom: 10px;   /* Tilaa kuvan ja otsikon väliin */
  border-radius: 6px;    /* Pyöristetyt reunat halutessasi */
}




/* --- Kolumnit --- */
.three-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.three-columns .column {
  flex: 1 1 calc(33.33% - 20px);
  min-width: 280px;
}

/* Fade-in kortit */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards;
}

.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
.fade-in:nth-child(4) { animation-delay: 0.4s; }
.fade-in:nth-child(5) { animation-delay: 0.5s; }
.fade-in:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .three-columns .column {
    flex: 1 1 100%;
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* TÄMÄ ON KRIITTINEN! */
  background-color: rgba(0,0,0,0.85);
  
  display: flex; /* Käytetään flexboxia keskitykseen */
  justify-content: center; /* Vaakakeskitys */
  align-items: center; /* Pystykeskitys */

  padding: 20px; 
  
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2000; /* LISÄÄ TÄMÄ! Varmistaa, että modaali on kaiken päällä (Header on 1000) */
}

.modal.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.modal-content h3 {
    margin-bottom: 15px; /* tai haluamasi arvo */
}

.modal-content p {
    margin-top: 0; /* varmistaa, ettei ylimääräistä väliä ole */
}


.modal-content {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 12px;
  max-width: 700px;
  width: 100%;
  color: #ccc;
  text-align: center;
  overflow-y: auto; /* jos sisältö on iso */
  max-height: 90vh; /* estää ulos hyppäämisen */
}



.modal.show .modal-content {
  transform: scale(1);
}

.modal .close {
  color: #d4af37;
  float: right;
  font-size: 2em;
  cursor: pointer;
}

.modal .close:hover {
  color: #fff;
}

/* Otsikon ikonit keskelle ja ylös */
.modal-content i {
  font-size: 3em;   /* Iconin koko */
  color: #d4af37;   /* Iconin väri */
  display: block;    /* Pakottaa oman rivin */
}

.modal-content ol {
  padding-left: 0;           /* poistaa oletussisennyksen */
  margin-left: 0;            /* poistaa marginaalin */
  list-style-position: inside; /* numero kiinni tekstissä */
}

.modal-content ol li {
  margin-bottom: 10px;       /* vähän tilaa rivien väliin, voi säätää */
}

#modal-tuotteet a {
  color: #d4af37; /* Esimerkki: kultainen */
}

#modal-tuotteet a:hover {
  color: #fff; /* Väri hover-tilassa */
}


/* KUVAGALLERIA (Päivitetty ja zoom) */

#galleria .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.flickr-photo-item {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
    overflow: hidden; /* estää zoomin rajaamisen ulkopuolelle */
}

.flickr-photo-item:hover {
    box-shadow: none;
    transform: none;
}


.flickr-photo-item img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    transition: transform 0.4s ease; /* smooth zoom */
    cursor: zoom-in; /* osoittaa zoomattavuutta */
}

/* Hover zoom vain desktopissa */
@media (hover: hover) and (pointer: fine) {
    .flickr-photo-item img:hover {
        transform: scale(1.2); /* zoom 20% hoverilla */
    }
}

/* Klikattava zoom (JS lisää luokan 'zoomed') */
.flickr-photo-item img.zoomed {
    transform: scale(2);       /* kuinka iso zoomi */
    position: relative;
    z-index: 1000;
    cursor: zoom-out;
}

/* Tekstin korostus hoverilla */
.flickr-photo-item figcaption {
    color: #d0d0d0;
    font-size: 0.9em;
    margin-top: 8px;
    text-align: center;
    font-weight: 400;
    line-height: 1.3;
    transition: color 0.3s ease;
}






#yhteystiedot form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
  margin: 20px auto 0 auto; /* keskitetään lomake */
}

#yhteystiedot input,
#yhteystiedot textarea {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 12px;
    font-size: 1em;
    color: #eee;
    width: 100%;
    resize: none; /* Estää koon muuttamisen */
}

/* UUSI LOHKO: Asettaa korkeuden vain textarea-kentälle */
#yhteystiedot textarea {
    height: 150px; /* Aseta haluamasi korkeus */
}

#yhteystiedot input:focus,
#yhteystiedot textarea:focus {
  border-color: #d4af37;
  outline: none;
}

#yhteystiedot button {
  background: #d4af37;
  color: #111;
  font-weight: bold;
  text-transform: uppercase;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

#yhteystiedot button:hover {
  background: #fff;
  transform: translateY(-2px);
}

#yhteystiedot input::placeholder,
#yhteystiedot textarea::placeholder {
  color: #888;
}


/* --- Tietovisat-osio (Quiz) --- */

/* Varmistaa, että kortti toimii klikattavana linkkinä */
.quiz-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Tyylit paikkamerkille (Tulossa pian -kortti) */
.placeholder-quiz {
    opacity: 0.6;
    cursor: default !important;
    transform: none !important;
    box-shadow: none !important;
}

.placeholder-quiz:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

#tietovisat .card {
    height: 200px;
    background: #1a1a1a;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#tietovisat .card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.7);
}
#tietovisat .card i { color: #d4af37; margin-bottom: 10px; }
#tietovisat .card h3 { color: #d4af37; }
#tietovisat .card p { color: #ccc; }

/* 1. Visan Pääkääre */
#modal-visa1 .quiz-container {
    max-width: 550px;
    margin: auto;
    background: #1a1a1a;
    padding: 10px;
    border-radius: 10px;
    text-align: center; 
}

/* Otsikko */
#modal-visa1 h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* 2. Kysymys/Tulos Boxi */
#modal-visa1 #quiz-content-box {
    background: #111;
    border: 1px solid #282828;
    border-radius: 6px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Kysymysteksti */
#modal-visa1 .question {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #eee;
    text-align: center;
    font-weight: 400;
    line-height: 1.4;
}

/* Kysymyksen Numero */
#modal-visa1 .question-number {
    font-size: 0.9rem;
    font-weight: 700;
    color: #d4af37; 
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #333;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

/* 3. Vastausnapit */
#modal-visa1 .options {
    width: 100%;
}
#modal-visa1 .options button {
    display: block;
    margin: 6px auto; 
    padding: 10px 15px;
    width: 95%;
    max-width: 450px;
    border: none;
    border-radius: 3px;
    background: #222;
    color: #fff;
    font-size: 0.95rem; 
    transition: all 0.2s;
    text-align: center;
    font-weight: 300;
    letter-spacing: 0.5px;
    cursor: pointer !important; 
}
#modal-visa1 .options button:hover {
    background-color: #333;
    color: #d4af37;
}
#modal-visa1 .options button:disabled {
    background-color: #2a2a2a;
    cursor: pointer !important;
    color: #888;
}

/* 4. Vastausvärit */
#modal-visa1 .options button.correct {
    background-color: #1f502c;
    color: white;
    font-weight: 600; 
}
#modal-visa1 .options button.wrong {
    background-color: #701010;
    color: white;
    font-weight: 600;
}

/* 5. Tulos ja Kontrollit */
#modal-visa1 #result {
    font-size: 1.4rem;
    font-weight: 700;
    color: #d4af37;
    text-align: center;
    margin-top: auto;
    padding: 10px;
    text-transform: uppercase;
}

#modal-visa1 .reset-button {
    background-color: #d4af37;
    color: #111;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 25px;
    border: 3px solid #d4af37; 
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); 
    display: block;
    width: 65%; 
    max-width: 300px;
    margin: 20px auto 10px auto;
    transition: all 0.2s ease;
}
#modal-visa1 .reset-button:hover {
    background-color: #f0c94d;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* ⚠️ Facebook ja WhatsApp ikonivärit SIIRRETTY YLÄPUOLELLE ⚠️ */
#modal-visa1 #share-facebook {
    border: 2px solid #d4af37;
    border-radius: 6px;
    padding: 5px 10px;
}

#modal-visa1 #share-facebook i { 
    color: #d4af37; 
}

#modal-visa1 #share-whatsapp {
    border: 2px solid #d4af37;
    border-radius: 6px;
    padding: 5px 10px;
}

#modal-visa1 #share-whatsapp i { 
    color: #d4af37;
}


/* Jakonapit */
#modal-visa1 .share-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 90%; 
    max-width: 450px;
    margin: 10px auto; 
}

#modal-visa1 .share-buttons a {
    flex: 0 1 auto;
    text-align: center;
    padding: 5px 10px;
    font-size: 0.85rem; 
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent !important; 
    border: none;
    transition: color 0.2s ease;
    color: #eee; 
}

#modal-visa1 .share-buttons a i {
    font-size: 32px !important;
    display: inline-block !important; 
    transition: color 0.2s ease;
}

#modal-visa1 .share-buttons a:hover {
    color: #aaa; 
}
#modal-visa1 #share-facebook:hover i { color: #4c70ba; }
#modal-visa1 #share-whatsapp:hover i { color: #34d773; }

#modal-visa1 #result:not(:empty) + .share-buttons {
    margin-top: 10px;
}
#modal-visa1 #quiz-content-box:has(#result:not(:empty)) {
    min-height: auto; 
}

#modal-visa1 .modal-content > i {
    display: none !important;
}

/* ================================================================= */
/* --- SOTAVISA 2:N TYYLIT --- */
/* ================================================================= */

/* Piilotetaan kysymysmerkki */
#modal-visa2 .modal-content > i { display: none !important; }

/* Otsikko */
#modal-visa2 h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* 2. Kysymys/Tulos Boxi */
#modal-visa2 #quiz-content-box {
    background: #111;
    border: 1px solid #282828;
    border-radius: 6px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Kysymysteksti */
#modal-visa2 .question {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #eee;
    text-align: center;
    font-weight: 400;
    line-height: 1.4;
}

/* Kysymyksen Numero */
#modal-visa2 .question-number {
    font-size: 0.9rem;
    font-weight: 700;
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #333;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

/* 3. Vastausnapit */
#modal-visa2 .options {
    width: 100%;
}
#modal-visa2 .options button {
    display: block;
    margin: 6px auto;
    padding: 10px 15px;
    width: 95%;
    max-width: 450px;
    border: none;
    border-radius: 3px;
    background: #222;
    color: #fff;
    font-size: 0.95rem;
    transition: all 0.2s;
    text-align: center;
    font-weight: 300;
    letter-spacing: 0.5px;
    cursor: pointer !important;
}
#modal-visa2 .options button:hover {
    background-color: #333;
    color: #d4af37;
}
#modal-visa2 .options button:disabled {
    background-color: #2a2a2a;
    cursor: pointer !important;
    color: #888;
}

/* 4. Vastausvärit */
#modal-visa2 .options button.correct {
    background-color: #1f502c;
    color: white;
    font-weight: 600;
}
#modal-visa2 .options button.wrong {
    background-color: #701010;
    color: white;
    font-weight: 600;
}

/* 5. Tulos ja Kontrollit */
#modal-visa2 #result2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #d4af37;
    text-align: center;
    margin-top: auto;
    padding: 10px;
    text-transform: uppercase;
}

#modal-visa2 .reset-button {
    background-color: #d4af37;
    color: #111;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 25px;
    border: 3px solid #d4af37;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    display: block;
    width: 65%;
    max-width: 300px;
    margin: 20px auto 10px auto;
    transition: all 0.2s ease;
}
#modal-visa2 .reset-button:hover {
    background-color: #f0c94d;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Facebook ja WhatsApp napit Sotavisa 2:lle */
#modal-visa2 #share-facebook2,
#modal-visa2 #share-whatsapp2 {
    border: 2px solid #d4af37;
    border-radius: 6px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

#modal-visa2 #share-facebook2 i,
#modal-visa2 #share-whatsapp2 i {
    color: #d4af37;
    font-size: 1.5em;  /* ← Tee kuvakkeista isommat */
}

#modal-visa2 #share-facebook2:hover i { color: #4c70ba; }
#modal-visa2 #share-whatsapp2:hover i { color: #34d773; }



/* Jakonapit */
#modal-visa2 .share-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    width: 90%;
    max-width: 450px;
    margin: 10px auto;
}

#modal-visa2 .share-buttons a {
    flex: 0 1 auto;
    text-align: center;
    padding: 5px 10px;
    font-size: 0.85rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent !important;
    border: none;
    transition: color 0.2s ease;
    color: #eee;
}

#modal-visa2 .share-buttons a i {
    font-size: 1.0em;
    display: inline-block !important;
    transition: color 0.2s ease;
}

#modal-visa2 .share-buttons a:hover { color: #aaa; }
#modal-visa2 #share-facebook2:hover i { color: #4c70ba; }
#modal-visa2 #share-whatsapp2:hover i { color: #34d773; }

#modal-visa2 #result2:not(:empty) + .share-buttons { margin-top: 10px; }
#modal-visa2 #quiz-content-box:has(#result2:not(:empty)) { min-height: auto; }




/* --- FOOTER: PERUSSIJOITTELU JA TYYLIT --- */
footer {
    background: #1a1a1a;
    text-align: center;
    padding: 30px 20px; /* Varmistaa tilaa ylä- ja alapuolella */
    margin-top: 1px; /* Antaa tilaa edelliseen osioon */
}

/* CONTAINER FOOTERIN SISÄLLÖLLE (Varmistaa keskityksen ja leveyden) */
.footer-content {
    /* HUOM: Korvattu antamasi lohko tällä, jotta keskitystyylit ovat oikein */
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 15px; /* Väli ikonien ja tekstin välillä */
    max-width: 1400px;
    margin: 0 auto;
}


/* --- FOOTER SOSIAALINEN MEDIA --- */
/* Jotta ikonit ovat samalla rivillä */
.social-links-footer {
    display: flex;
    gap: 20px;
    margin-bottom: 5px;
}

.social-links-footer a {
    font-size: 1.6em; /* Ikonin koko */
    color: #d4af37; /* Ikonin perusväri */
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links-footer a:hover {
    color: #ffffff; 
    transform: translateY(-2px);
}

.footer-images {
  display: flex;
  flex-direction: column; /* Pystysuuntainen asettelu */
  align-items: center; /* Keskittää kuvat, jos haluat */
}

.footer-image {
  width: 90%;
  max-width: 1000px;
  height: auto;
  display: block;
  margin: 0; /* 🔹 Poistaa ylimääräiset marginaalit */
  padding: 0; /* 🔹 Varmistaa ettei ole sisätyhjää */
  border: none;
  opacity: 8.0;
}

footer p {
    font-size: 0.7em !important; 
    /* ... muut tyylit ... */
}


/* --- YKSINKERTAINEN KUVA BANNERI SARAKKEESSA --- */

/* Varmista, että kaikki kuvat sarakkeessa ovat responsiivisia */
.responsive-image {
    max-width: 100%; /* Kuva ei koskaan ylitä sarakkeen leveyttä */
    height: auto;
    display: block;
    border-radius: 5px; /* Pieni pyöristys kulmiin */
}

/* Lisää pieni marginaali kuvan alle erottamaan sen seuraavasta elementistä */
.column-image-margin {
    margin-bottom: 20px; 
}

/* Visuaalinen efekti linkille */
.quiz-image-link {
    display: block; /* Varmistaa, että linkki vie koko kuvan alueen */
    opacity: 0.9; /* Hieman hillitympi perusilme */
    transition: opacity 0.2s ease;
    margin-bottom: 20px; /* Tilaa seuraavaan elementtiin (lainaukseen) */
}

.quiz-image-link:hover {
    opacity: 2.0; /* Kirkas hoverilla */
}

/* Varmistaa, että #info näkyy mobiilissa */
@media (max-width: 768px) {
  #info {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  /* Mobiilissa logo ja tagline keskelle, hamburger oikealle */
header {
    justify-content: center; /* keskittää logon ja tagline */
    position: relative; /* jotta hamburger voidaan sijoittaa absoluuttisesti */
}

.logo {
    align-items: center; /* logo ja tagline keskelle */
}

.hamburger {
    position: absolute;
    right: 20px; /* pysyy oikeassa reunassa */
    top: 50%; 
    transform: translateY(-50%); /* keskittää pystysuunnassa */
}

}

/* =========================
   Custom Scrollbar
   ========================= */

/* Koko scrollbar alue */
::-webkit-scrollbar {
    width: 22px;            /* Paksuus vaakasuunnassa */
    height: 12px;           /* Paksuus pystysuunnassa */
}

/* Scrollbarin liukuosa / "thumb" */
::-webkit-scrollbar-thumb {
    background-color: #d4af37; /* Kultainen väri */
    border-radius: 6px;        /* Pyöristetyt reunat */
    border: 3px solid #1a1a1a; /* Taustaa ympäröivä tila */
}

/* Scrollbarin tausta / "track" */
::-webkit-scrollbar-track {
    background: #1a1a1a; /* Sama tummanharmaa kuin korttien tausta */
    border-radius: 6px;
}

/* Hover-efekti liukuosassa */
::-webkit-scrollbar-thumb:hover {
    background-color: #d4af37; /* Kirkkaampi kultainen hoverilla */
}

/*NUOLI */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 30px;
  color: white;
  display: none;
  cursor: pointer;
  z-index: 1000;
}


#backToTop.show {
  display: block;
  opacity: 0.8;
}

#backToTop:hover {
  opacity: 1;
}


/* SOTAVISOJEN KUVA */
.card {
    position: relative;
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-5px); /* kortti nousee hiukan */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* lisää varjon */
}

.card-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease, filter 0.3s ease;
    transform-origin: center center;
    image-rendering: auto;
    will-change: transform;
}

/* Hover-efekti ilman sumenemista */
.card:hover .card-image {
    transform: scale(1.08) translateY(-3px); /* kevyt zoom + nousee */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); /* pieni varjo */
}

/* AJANKOHTAISTA banneri */
.quiz-image-link.big-banner img {
    max-width: 100%;   /* täyttää sarakkeen leveyden */
    height: auto;      /* säilyttää kuvasuhteen */
    border-radius: 8px;
}



/* INFO-OSIO: kuvat tekstin alla */
#info {
  background: none;
  padding: 60px 20px;
  color: #ddd;
}

#info .info-content {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.7;
}

#info h2, #info h3 {
  color: #d4af37;
  margin-top: 40px;
  text-align: left;
}

#info figure {
  margin: 25px auto 40px;
  text-align: center;
}

#info figure img {
  width: 100%;
  max-width: 300px;     /* <-- tämä rajoittaa kuvien leveyden kuten ennen */
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
  cursor: pointer;
}

#info figure img:hover {
  transform: scale(1.5); /* pidetään halutessasi hover-zoom */
}

#info figure figcaption {
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 5px;
  color: #ccc;
}


#info blockquote {
  margin: 20px auto;
  font-style: italic;
  color: #d4af37;
  border-left: 4px solid #d4af37;
  padding-left: 15px;
}

#info p.citation {
  text-align: right;
  font-style: italic;
  color: #aaa;
}

.info-content.two-columns {
    display: flex;
    gap: 40px; /* sarakkeiden väli */
    align-items: flex-start; /* pitää sarakkeet ylhäällä */
}

/* Vasemman sarakkeen leveys suhteessa oikeaan */
.left-column {
    flex: 3;  /* vie kolme kertaa tilaa kuin oikea sarake */
}

.right-column {
    flex: 3;  /* oikea sarake pienempi */
}

/* Sisällön järjestys sarakkeissa */
.left-column, .right-column {
    display: flex;
    flex-direction: column;
}

/* Keskitetään otsikot */
#info h2, 
#info h3 {
    text-align: center;
}

#info p.citation {
  text-align: center;   /* Keskittää tekstin */
  font-style: italic;
  color: #aaa;
  margin-top: 10px;     /* Pieni väli blockquoten ja citationin väliin */
}

@media (max-width: 768px) {
    
    /* ----------------------------------------------------
       1. Palautetaan YLEINEN MOBIILIPADDING JA FLEX-KESKITYS 
       ---------------------------------------------------- */
    /* Kohdistetaan kaikki section-elementit, jotka saattavat käyttää poistettuja flex-tyylejä. */
    #etusivu,
    #info,
    #palvelut,
    #galleria,
    #yhteystiedot,
    #tietovisat {
        /* Palauttaa flex-keskityksen, joka pitää sisällön keskellä, kun leveys on pieni */
        justify-content: center; 
        align-items: center; 
        
        /* Palauttaa tiukan pystysuoran ja vaakasuoran paddingin mobiiliin */
        padding: 80px 20px; 
        text-align: center; 
    }
    
    /* ----------------------------------------------------
       2. .CONTAINER LUOKAN NOLLAUS MOBIILIIN
       ---------------------------------------------------- */
    /* Jos .containerin max-width on kasvatettu desktopilla, 
       sen on palattava joustavaksi mobiilissa, jotta se sopii 20px paddingin sisään. */
    .container {
        max-width: none !important; /* Estää ison max-widthin periytyvän */
        width: 100% !important; /* Pakota täyttämään section-elementin sisällä oleva tila */
    }

    /* ----------------------------------------------------
       3. KOLUMNSETTIEN ALLEKKAIN MENO JA INFO-KORJAUS
       ---------------------------------------------------- */
    
    /* Yleinen sääntö kaikille kolumniasetelmille (three-columns ja two-columns) */
    .three-columns,
    .info-content.two-columns {
        flex-direction: column; /* Pinotaan kolumnit pystysuoraan mobiilissa */
        align-items: center; /* Keskittää sisältöä, kuten kuvia */
        gap: 20px; 
    }
    
    /* Varmistetaan, että yksittäiset kolumnit venyvät koko leveydelle */
    .column {
        width: 100%;
        margin: 0; /* Poista mahdolliset erikoisreunukset */
        padding: 0; /* Poista mahdolliset erikoispehmusteet */
    }

    /* Varmistetaan, että #info-osion teksti palautuu vasemmalle, 
       jos sitä tarvitaan luettavuuden vuoksi, tai jätetään keskelle (center).
       (Jätän nyt centeriin, jotta se noudattaa yleistä sääntöä)
    */
    #info .column {
        text-align: left; /* Usein parempi lukukokemus mobiilissa */
    }
}



/* =========================================== */
/* ETUSIVUN KORTIT (vain .etusivu-card)       */
/* =========================================== */

/* Kortit gridissä rivillä */
#ajankohtaista.three-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  align-items: stretch;  /* kaikki kortit yhtä korkeita */
}

/* Korttien tyyli */
#etusivu .card.etusivu-card {
  background-color: #222;        
  border: 3px solid #d4af37;     
  border-radius: 10px;           
  padding: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   
  height: 100%;                  
  box-sizing: border-box;

  /* Smooth hover + liukuva effect ilman JS:ää */
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Hover-efekti kaikille korteille */
#etusivu .card.etusivu-card:hover {
  transform: translateY(-5px);   /* nousee vähän */
  border-color: #ffdf6c;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

/* Kuva ja placeholder-ikoni */
#etusivu .card.etusivu-card img,
#etusivu .card.etusivu-card .placeholder-image {
  width: 100%;
  height: 220px;                  
  object-fit: cover;              
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 1.5em;             /* ikonille sopivampi koko */
  color: #d4af37;
}

/* Tekstit */
#etusivu .card.etusivu-card h3 {
  color: #d4af37;
  font-weight: 700;
  margin: 10px 0 5px 0;
  text-transform: uppercase;
}

#etusivu .card.etusivu-card p {
  color: #ddd;
  font-size: 0.95em;
  flex-grow: 1;                  
}

/* Responsiivisuus mobiilissa */
@media (max-width: 768px) {
  #ajankohtaista.three-columns {
    grid-template-columns: 1fr;
  }
  #etusivu .card.etusivu-card img,
  #etusivu .card.etusivu-card .placeholder-image {
    height: 180px;
  }
}

/* Korttien otsikko */
.cards-title {
  color: #d4af37;
  text-transform: uppercase;
  font-weight: 700;
  margin: 40px 0 15px 0; /* 40px ylhäällä, 15px alhaalla */
  text-align: center;
}


/* Korjaa ankkurien vieritysetäisyys fixed-headerin vuoksi */
:target {
  scroll-margin-top: 80px; /* säädä headerin todellisen korkeuden mukaan */
}
/* --- KORJAUS: Kiinteä headerin (70px) peittämien ankkurien korjaus --- */
/* Tämä kertoo selaimelle, kuinka paljon tilaa sen on jätettävä yläreunaan vierittäessä ankkuriin. */
section[id] {
    scroll-margin-top: 85px; 
}

/* POPUP */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* keskitys */
  background-color: #1c1c1c;
  color: #fff;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  display: none; /* piilotettu aluksi */
  z-index: 10000;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  width: 90%;       /* käyttää 90% ruudun leveydestä mobiilissa */
  max-width: 450px; /* ei liian leveä desktopilla */
  box-sizing: border-box;
}

.popup p {
  margin: 0 0 15px 0;
  font-weight: 600;
  font-size: 1.1rem;
}

.popup-icons a {
  color: #d4af37;
  margin: 0 10px;
  font-size: 1.5rem;
  transition: transform 0.2s;
}

.popup-icons a:hover {
  transform: scale(1.3);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.8rem;
}




/* WHATSAPP */
.whatsapp-card {
  background-color: #1c1c1c;
  color: #fff;
  padding: 25px 30px;
  border-radius: 12px;
  border: 3px solid #d4af37;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  text-align: center;
  max-width: 350px;
  margin: 30px auto 20px auto;
  font-family: 'Poppins', sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  display: block;
  text-decoration: none;       /* poistaa linkkialleviivauksen */
  cursor: pointer;
}

.whatsapp-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
  background-color: #2c2c2c;
}

/* WhatsApp-ikoni */
.whatsapp-card i {
  color: #25D366;
  font-size: 2.5rem;
  margin-top: 25px;
  display: inline-block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.whatsapp-card:hover i {
  transform: scale(1.4);
  filter: brightness(1.2);
}