/* Sisältöalueet */

:root {
  --tummatausta: url('https://kadso.fi.joinas.fi/wp-content/uploads/2025/12/hero_bg_image.svg'); 
  --pinkkivarjo: 0px 32px 56px -6px rgba(0,170,110,0.11);
  --gvid-0viz4n3gxz: 15px;
}
#sisaltoalueet {

}
#sisaltoalueet section {
  width: 100%;
  max-width: 100%; 
  padding: 7vw 0px;
  /* background-color: #f6f6f6; */
}
#sisaltoalueet section div.row {
  width: 85%;
  max-width: var(--row_width);
  margin: 0 auto;
}

/* Osion väritaustat ja yleiset */

#sisaltoalueet section .center {
  margin: 0 auto;
  text-align: center;
}
#sisaltoalueet section.narrow,
#sisaltoalueet section.float.narrow {
  max-width: 1280px;
  width: calc(100% - 30px);
}
#sisaltoalueet section.grey {
  background-color: var(--gcid-4mxal2h0sp);
}
#sisaltoalueet section.dark {
  background-color: var(--gcid-primary-color);
  /* background: var(--tummatausta); */
  background-size: cover;
}
#sisaltoalueet section.light.float {
  box-shadow: var(--pinkkivarjo);
}
#sisaltoalueet section.dark div.row p,
#sisaltoalueet section.dark div.row h2,
#sisaltoalueet section.dark div.row h3,
#sisaltoalueet section.dark div.row  {
  color: #ffffff;
}
#sisaltoalueet section.border-radius {
 border-radius: var(--gvid-0viz4n3gxz);
}
#sisaltoalueet section.float {
  max-width: calc(100% - 40px);
  margin: 0 auto;
  margin-bottom: 50px;
  margin-top: 30px;
  position: revert;
  z-index: 10;
  overflow-y: visible;
}

/* Trustindex */

#sisaltoalueet section.ti-widget-layout {
  padding: 0px;
}

/* Täysleveä kuva */

#sisaltoalueet section.taysleveakuva {
    position: relative; /* tarvitaan, että video pysyy boxin sisällä */
    height: 37vw;
    min-height: 260px;
    max-height: 700px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; /* varmuudeksi ettei video karkaa ulos */
}

/* Videotaustalle: */
#sisaltoalueet section.taysleveakuva video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* Sama kuin background-size: cover */
    object-position: center;
    z-index: 0;
    /* optionaalisesti jos haluat hieman himmentää videota: */
    /* filter: brightness(0.7); */
    /* pointer-events: none;  jos haluat että video ei saa klikattavia tapahtumia */
}
/* Puhelinnosto */

#sisaltoalueet section.puhelinnosto {
  text-align: center;
}
#sisaltoalueet section.puhelinnosto h2 {
  font-size: 24px !important;
}
#sisaltoalueet section.puhelinnosto .row {
  max-width: 585px;
  width: 100%;
  maegin: 0 auto;
}

#sisaltoalueet section.puhelinnosto p.puhelinnumero a {
  font-size: 26px;
  margin-top: 30px;
  display: block;
}

/* Henkilönosto */
#sisaltoalueet section.henkilonosto {
  text-align: center;
  /* background-image: var(--tummatausta); */
  background-repeat: no-repeat;
  background-size: inherit;
  background-position: right;
}
#sisaltoalueet section.henkilonosto div.henkilokuva {
  width: 80px;
  height: 80px;
  background-size: cover !important;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 15px;
  border-radius: 50%;
  background-color: var(--gcid-primary-color) !important;
}

#sisaltoalueet section.henkilonosto p.puhelinnumero a,
#sisaltoalueet section.puhelinnosto p.puhelinnumero a  {
  font-family: var(--asiakasotsikkofontti);
  color: #ffffff;
}
#sisaltoalueet section.henkilonosto p.puhelinnumero a::before,
#sisaltoalueet section.puhelinnosto p.puhelinnumero a::before {
  color: #ffffff;
}
#sisaltoalueet section.henkilonosto h3 {

}

/* Galleria */

#sisaltoalueet section.galleria { text-align: center; }
#sisaltoalueet section.galleria .ingressi {
    font-size: 20px;
    font-weight: 600;
    color: var(--gcid-secondary-color);
    padding-bottom: 30px;
}
#sisaltoalueet section.galleria .kuvagalleria-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 kuvaa rinnakkain desktopilla */
    gap: 15px; /* Kuvien väli */
    margin-top: 20px;
}

#sisaltoalueet section.galleria .kuvagalleria-item img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--gvid-0viz4n3gxz) / 2);
    object-fit: cover;
}

/* Tekstiosio */

#sisaltoalueet section.heroalue .content p {
  font-size: var(--gvid-brzfxcn8kk);
  line-height: 1.65em;
}

#sisaltoalueet section div.row.narrow_area {
  max-width: 750px;
  /* width: calc(100% - 30px); */
}
#sisaltoalueet section.tekstiosio blockquote p {
    color: var(--gcid-secondary-color);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.9;
}

/* Lomakeosio */

#sisaltoalueet section.lomake h4.preheader {
  color: var(--gcid-primary-color);
  font-size: 18px !important;
}

#sisaltoalueet section.lomake h4.preheader::before {
    font-size: 25px;
    content: "\f0ab";
    font-family: 'Font Awesome 6 Pro' !important;
    font-style: normal;
    font-weight: 500;
    text-decoration: inherit;
    /* color: var(--gcid-primary-color); */
    padding-right: 0.5em;
    /* padding-left: 1em; */
    position: relative;
    top: 3px;
    left: 0px;
    color: var(--gcid-primary-color);
}

#sisaltoalueet section.lomake .ingressi {
    margin-bottom: 40px;
}
#sisaltoalueet section.lomake div.row.narrow_area {
  max-width: 600px;
}

/* Otsikko ja palstat */

#sisaltoalueet section.otsikko_ja_palstat h2 {
  max-width: 750px;
  width: 100%;
  text-align: left;
  flex: 0 0 100%;
}

#sisaltoalueet section.otsikko_ja_palstat .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px; /* Väli content blockien välillä */
    max-width: var(--row_width);
    margin: 0 auto;
    padding: 20px 0;
}

#sisaltoalueet section.otsikko_ja_palstat .content_block {
    flex: 1 1 calc(33.333% - 27px); /* 3 kpl per rivi */
    max-width: calc(33.333% - 27px);
    box-sizing: border-box;
    padding-bottom: 30px;
}
#sisaltoalueet section.otsikko_ja_palstat .content_block p {
  max-width: 550px;
  width: 100%;
}



/* Pointtiosio */

#sisaltoalueet section.pointtinostot h2 {
  text-align: center;
  margin-bottom: 60px !important;
  display: block;
}

#sisaltoalueet section.pointtinostot .ruudukko {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
}

#sisaltoalueet section.pointtinostot .ruudukko_item {
    flex: 1 1 25%; /* Kolme per rivi */
    text-align: center;
    padding: 20px;
    min-width: 280px;
}

#sisaltoalueet section.pointtinostot .ruudukko_item span.ikoni {
    display: block;
    font-size: 4.5rem;
    font-weight: 400;
    color: var(--gcid-secondary-color);
    margin-bottom: 45px;
}

#sisaltoalueet section.pointtinostot a.cta_nappi {
  margin-top: 60px;
}


/* Teksti ja kuva / kuva ja teksti  */

#sisaltoalueet section.teksti-ja-kuva,
#sisaltoalueet section.kuva-ja-teksti {
  padding: 4vw 0px;
}
#sisaltoalueet section.tumma_tausta,
#sisaltoalueet section.tumma_tausta {
  background-color: var(--gcid-primary-color);
  
  background-repeat: no-repeat !important;
}
#sisaltoalueet section.tumma_tausta.ominaisuuslista {
 
  background-position: right;

}

#sisaltoalueet .teksti-ja-kuva .row,
#sisaltoalueet .kuva-ja-teksti .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; 
}

#sisaltoalueet .teksti-ja-kuva .content,
#sisaltoalueet .teksti-ja-kuva .kuva,
#sisaltoalueet .kuva-ja-teksti .content,
#sisaltoalueet .kuva-ja-teksti .kuva {
    flex: 1 1 50%; 
    max-width: 50%; 
    box-sizing: border-box; 
}

#sisaltoalueet .teksti-ja-kuva .content {
    padding: 5vw 5vw 5vw 0vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#sisaltoalueet .kuva-ja-teksti .content {
    padding: 5vw 0vw 5vw 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#sisaltoalueet section.tumma_tausta .content,
#sisaltoalueet section.tumma_tausta .content,
#sisaltoalueet section.tumma_tausta .content_block,
#sisaltoalueet section.tumma_tausta h2,
#sisaltoalueet section.tumma_tausta p,
#sisaltoalueet section.tumma_tausta .content h2,
#sisaltoalueet section.tumma_tausta .content h2 {
    color: #ffffff;
}
#sisaltoalueet section.tumma_tausta h3 {
    color: #ffffff;
}

#sisaltoalueet .teksti-ja-kuva .kuva,
#sisaltoalueet .kuva-ja-teksti .kuva {
    background-size: cover;
    background-position: center;
    height: auto;
    min-height: 100%;
    border-radius: calc(var(--gvid-0viz4n3gxz) / 2);
}

#sisaltoalueet .teksti-ja-kuva .visually-hidden,
#sisaltoalueet .kuva-ja-teksti .visually-hidden,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Ominaisuuslista */

#sisaltoalueet section.ominaisuuslista p.alaotsikko {
  color: var(--gcid-primary-color);
  margin-bottom: 40px;
}

#sisaltoalueet section.ominaisuuslista h3 {
  color: var(--gcid-primary-color);
}

#sisaltoalueet section.ominaisuuslista .ominaisuusruudukko_item span.ikoni i {
  color: var(--gcid-primary-color);
  font-size: 40px;
  margin: 50px 0px 20px 0px;
}

#sisaltoalueet section.ominaisuuslista .ominaisuusruudukko p {
  color: var(--gcid-primary-color);
}

/* HUOM: kortti on nyt <a>, ei div */
#sisaltoalueet section.ominaisuuslista .ominaisuusruudukko_item {
  text-align: left !important;
}


/* Grid: 4 per rivi desktopissa, skaalautuu alas */
#sisaltoalueet section.ominaisuuslista .ominaisuusruudukko {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px; /* käytä samaa rytmiä kuin muualla */
}

/* Linkkikortti */
#sisaltoalueet section.ominaisuuslista .ominaisuusruudukko_item {
  display: block;          /* koska <a> */
  min-width: 0;            /* estää ylivuotoa gridissä */
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

/* Nuoli / lisäikoni jos käytössä */
#sisaltoalueet .ominaisuusruudukko_item i.fa-light {
  margin-top: 16px;
  font-size: 20px;
}


/* Responsiivisuus */
@media (max-width: 1024px) {
  #sisaltoalueet section.ominaisuuslista .ominaisuusruudukko {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  #sisaltoalueet section.ominaisuuslista .ominaisuusruudukko {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* älä nollaa paddingeja täällä, koska kortti on linkki ja grid hoitaa välin gapilla */
}

#sisaltoalueet section.ominaisuuslista .ominaisuusruudukko_item:hover {
  opacity: 0.9;
}
#sisaltoalueet section.ominaisuuslista .ominaisuusruudukko_item:focus-visible {
  outline: 2px solid var(--gcid-primary-color);
  outline-offset: 4px;
}

/*
@media (max-width: 480px) {
  #sisaltoalueet section.ominaisuuslista .ominaisuusruudukko_item {
    flex: 1 1 100%;           
    max-width: 100%;
  }
} 
*/

/* ANImoinnit */

/* Yleinen fade-up animaatio */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

/* Kun näkyvissä */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tumma tausta ei vaadi erikoiskäsittelyä */

/* Responsiiviset muutokset */

/* Responsiivisuus */
@media (max-width: 1024px) {
    #sisaltoalueet section.galleria .kuvagalleria-grid {
        grid-template-columns: repeat(4, 1fr); /* 3 kuvaa rinnakkain tabletilla */
    }
}
@media (max-width: 768px) {

    #sisaltoalueet section.pointtinostot .ruudukko_item {
        padding-left: 0px;
    }
    #sisaltoalueet section.pointtinostot h2,
    #sisaltoalueet section.pointtinostot .ruudukko,
    #sisaltoalueet section.pointtinostot .ruudukko_item {
        text-align: left;
    }
    #sisaltoalueet section {
      width: 100%;
      max-width: 100%; 
      padding: 60px 0px;
    }
    #sisaltoalueet section.otsikko_ja_palstat .content_block {
        flex: 1 1 100%;
        max-width: 100%;
    }
    #sisaltoalueet section.galleria .kuvagalleria-grid {
        grid-template-columns: repeat(3, 1fr); /* 2 kuvaa rinnakkain mobiilissa */
    }
    #sisaltoalueet section.otsikko_ja_palstat h2 {
      text-align: left;
    }
    #sisaltoalueet .teksti-ja-kuva .content,
    #sisaltoalueet .kuva-ja-teksti .content {
      padding: 50px 0vw 50px 0vw; 
    }
    #sisaltoalueet .teksti-ja-kuva .row,
    #sisaltoalueet .kuva-ja-teksti {
        flex-direction: column;
    }

    #sisaltoalueet .teksti-ja-kuva .content,
    #sisaltoalueet .teksti-ja-kuva .kuva,
    #sisaltoalueet .kuva-ja-teksti .content,
    #sisaltoalueet .kuva-ja-teksti .kuva {
        flex: 1 1 100%; /* Molemmat täyttävät 100% leveydestä mobiilissa */
        max-width: 100%;
    }

    #sisaltoalueet .teksti-ja-kuva .kuva,
    #sisaltoalueet .kuva-ja-teksti .kuva {
        order: -1; /* Siirtää kuvan ensimmäiseksi mobiilissa */
        min-height: 300px; /* Säilyttää kuvan korkeuden mobiilissa */
    }
}
@media (max-width: 480px) {
    #TB_window {
        width: 100% !important;
        margin-left: -50% !important;
        margin-top: -75% !important;
    }
    #TB_window img#TB_Image {
        margin: 0 !important;
        width: 100% !important;
    }
    #TB_closeWindow {
        padding-top: 0 !important;
    }
    #sisaltoalueet section.galleria .kuvagalleria-grid {
        grid-template-columns: repeat(3, 1fr); /* 1 kuva per rivi pienillä näytöillä */
    }
}