:root {
  --valmentajan_vari: #239BBE;
  --valmentajan_tehostevari: #FF8A15;
  --row_width: 1440px;
  --kulmat: 20px;
  --video_overflow: 12vw;
}

#sisaltoalueet {

}
#sisaltoalueet section {
  width: 100%;
  max-width: 100%; 
  padding: 7vw 0px;
}
#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.dark div.row p,
#sisaltoalueet section.dark div.row h2,
#sisaltoalueet section.dark div.row  {
  color: #ffffff;
}
#sisaltoalueet section.border-radius {
 border-radius: var(--kulmat);
}
#sisaltoalueet section.float {

  width: calc(100% - 40px);
  margin: 0 auto;
  margin-bottom: 50px;
  margin-top: 30px;
  position: revert;
  z-index: 10;
  overflow-y: visible;
  background-color: var(--valmentajan_vari);
  border-radius: var(--kulmat);
  max-width: 1920px !important;
}


/* Perus­korkeus, jotta kuva näkyy ilman sisältöäkin */
#sisaltoalueet .tayslevea_kuva {
  min-height: 60vh;   /* säädä makusi mukaan */
}



/* 2. Pieni läiskä pseudosolmuna */
.section-blur::after {
  content: '';
  position: absolute;

  /* Pieni neliö → käännetään timantiksi */
  width: 33vmax;
  height: 33vmax;

  max-width: 410px;
  max-height: 410px;

  left: 0%; /* alkup- -10% */
  transform: rotate(45deg);

  background: var(--valmentajan_tehostevari);   /* valmentajan väri */
  opacity: .35;                          /* läpikuultava */
  filter: blur(200px);                   /* pehmeä reuna */
  z-index: -1;
  pointer-events: none;
}


/* 3. Oikean reunan toinen läiskä, eri värillä */
.nd-section-blur::before {
  content:'';
  position:absolute;
  width:29vmax; height:29vmax;
  margin-top: -10%;
  right:0;                   /* siirrä oikeaan laitaan, alunpein -8% */
  transform:rotate(35deg);
  background: var(--valmentajan_vari);  /* esim. tehosteoranssi */
  opacity:.30;
  filter:blur(180px);                    /* hieman pienempi blur ok */
  z-index:-1;
  pointer-events:none;
}
/* 1. Ankkuri sectionille */ 
.section-blur-nd::after {
  background: var(--valmentajan_vari) !important;
  margin-top: -20% !important;
}
.nd-section-blur-nd::before {
  background: var(--valmentajan_tehostevari) !important;
  margin-top: -20% !important;
}
/* ==========================================================
   TEKSTIPALSTA
   ========================================================== */

/* 1) Kaksi palstaa – flex + väli   ------------------------- */
#sisaltoalueet .tekstipalsta .row.kaksipalstaa {
  display: flex;            /* pakottaa vierekkäin */
  flex-wrap: wrap;
  gap: 3rem;                /* tilaa palstojen väliin (≈ 48px) */
}

/* palstojen leveydet: 50 % – gap/2 (jotta mahtuvat samalle riville) */
#sisaltoalueet .tekstipalsta .row.kaksipalstaa > .content {
  flex: 1 1 calc(50% - 1.5rem);
  max-width: calc(50% - 1.5rem);
}

/* 2) Yksi palsta – rajoita max-leveys ja keskitä ------------- */
#sisaltoalueet .tekstipalsta .row:not(.kaksipalstaa) > .content,
#sisaltoalueet .tekstipalsta .row:not(.kaksipalstaa) > .cta_footer {
  max-width: 750px;
  margin: 0 auto;
}
#sisaltoalueet .tekstipalsta .row:not(.kaksipalstaa) > .cta_footer { padding-top:20px; }

/* 3) Mobiili: pinotaan palstat, poista gap ------------------- */
@media (max-width: 768px) {
  #sisaltoalueet .tekstipalsta .row.kaksipalstaa {
    display: block;   /* pinoon */
    gap: 0;
  }
  #sisaltoalueet .tekstipalsta .row.kaksipalstaa > .content {
    max-width: 100%;
  }
}


#sisaltoalueet h4.valmentaja-ei-loytynyt {
  display: flex;
  align-items: center; /* Pystysuuntainen keskitys */
  gap: 20px; /* väli ikonille ja tekstille, voi säätää */
  font-size: 1.5rem; /* Säädä tekstikoko tarvittaessa */
  font-weight: 700;
}

/* Video */

#sisaltoalueet section.ytvideo {
  max-width: 1920px;
  width: calc(100% - 40px);
}

.ytvideo__placeholder {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  border: 0;
  cursor: pointer;
}

.ytvideo__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 91px;           /* sama koko kuin aiemmin */
  height: 59px;
  transform: translate(-50%, -50%);
  transition: transform .2s;
}

#sisaltoalueet section.ytvideo {
  overflow-y: visible;
  margin-top: calc(var(--video_overflow) - 5vw) !important;
  margin-bottom:  calc(var(--video_overflow) - 5vw) !important;
}
section.ytvideo div.ytvideo__wrapper {
  border-radius: calc(0.5 * var(--kulmat));
    /* X-offset | Y-offset | blur | spread | väri */
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.15);
  /* Pyöristetyt kulmat antavat modernin ilmeen – säädä tarpeen mukaan */
  border-radius: 8px;
}

section.ytvideo .row {
  margin-top: calc(-1 * var(--video_overflow)) !important;
  margin-bottom: calc(-1 * var(--video_overflow)) !important;
}

.ytvideo__placeholder:hover .ytvideo__icon,
.ytvideo__placeholder:focus-visible .ytvideo__icon {
  transform: translate(-50%, -50%) scale(1.1);
}

/* wrapper pitää yllä 16:9-kuvasuhteen */
.ytvideo__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ytvideo--loaded {
  padding-bottom: 56.25% !important; /* 9 / 16 * 100% */
  border-radius: 6px;
}

/* iframe täyttää wrapperin */
.ytvideo__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* LOMAKE kahdessa palstassa */
#sisaltoalueet .lomake__row {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

#sisaltoalueet .lomake__row > .lomake__info,
#sisaltoalueet .lomake__row > .lomake__form {
  flex: 0 0 calc(50% - 1.5rem); /* 50 % miinus puolet gapista */
  max-width: calc(50% - 1.5rem);
  box-sizing: border-box;
}

#sisaltoalueet .lomake__row.form_alone > .lomake__form {
  flex: 0 0 calc(70% - 1.5rem); /* 50 % miinus puolet gapista */
  max-width: calc(70% - 1.5rem);
}

#sisaltoalueet .lomake__row.form_alone {
  display: flex;
  justify-content: center; /* keskittää rivin vaakasuunnassa */
  align-items: center;     /* keskittää pystysuunnassa rivin sisällä */
  gap: 3rem;               /* lisää väliä palstojen väliin */
}

#sisaltoalueet .lomake__form {
  background: var(--valmentajan_vari);
  border-radius: var(--kulmat);
  padding: 2.5rem 2rem;
  color: #fff;
}
#sisaltoalueet .gform_wrapper.gravity-theme input[type=color], .gform_wrapper.gravity-theme input[type=date], .gform_wrapper.gravity-theme input[type=datetime-local], .gform_wrapper.gravity-theme input[type=datetime], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=month], .gform_wrapper.gravity-theme input[type=number], .gform_wrapper.gravity-theme input[type=password], .gform_wrapper.gravity-theme input[type=search], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=time], .gform_wrapper.gravity-theme input[type=url], .gform_wrapper.gravity-theme input[type=week], .gform_wrapper.gravity-theme select, .gform_wrapper.gravity-theme textarea {
 border-radius: calc(0.25 * var(--kulmat)) !important;
}
#sisaltoalueet .gform_wrapper.gravity-theme .gform_footer {
  padding: 0px;
  margin: 0px;
}
#sisaltoalueet .gform_wrapper .gform_footer input[type=submit].gform_button {
  margin-top: 0px;
}

#sisaltoalueet h4.lomake-otsikko,
#sisaltoalueet h3.lomake-otsikko,
#sisaltoalueet p.lomake-ingressi {
  color: #ffffff !important;
} 
#sisaltoalueet p.lomake-ingressi {
  font-size: 14px;
}
/* Mobiili: pinotaan */
@media (max-width: 768px) {
  #sisaltoalueet .lomake__row > .lomake__info,
  #sisaltoalueet .lomake__row > .lomake__form,
  #sisaltoalueet .lomake__row.form_alone > .lomake__form {
    flex: 1 1 100%;
    max-width: 100%;
  }

}

/* Taksonomia */

#sisaltoalueet .palvelu-kuvaus {
  max-width: 850px;
  padding-top: 0px;
}
#sisaltoalueet .palvelu-kuvaus a {
  color: var(--valmentajan_vari) !important;
  text-decoration: underline;
}

/* -----------------------------------------------
   Valmentajakortti (lomake-osiossa)
   ----------------------------------------------- */
#sisaltoalueet .valmentaja-card {
  margin-top: 2.5rem;
}

#sisaltoalueet .lomake__info .valmentaja-card div.valmentaja-meta {
  width: calc(100% - 140px);
}

#sisaltoalueet .valmentaja-img {
  width: 140px;
  height: 140px;
  object-fit: cover;
    border-radius: calc(var(--kulmat)/2);
  background: #e9e9e9;            /* placeholder-väri jos kuvaa ei ole */
  border: 1px solid #ebf6f8;
}

#sisaltoalueet .valmentaja-meta {
  flex: 1 1 auto;
  font-size: 14px;
}
#sisaltoalueet .valmentaja-meta p {
  padding: 0px;
}
#sisaltoalueet .valmentaja-meta h3.valmentaja-nimi {
  font-size: 20px !important;
  color: #000000 !important;
}
#sisaltoalueet .valmentaja-meta i.fa-location-dot {
  margin-right: 12px;
}
#sisaltoalueet .valmentaja-meta span.location {
  margin-top: -5px;
  padding-top: 0px;
  display: block;
}

#sisaltoalueet .valmentaja-nimi {
  margin: 0 0 .25rem;
  font-size: 1.35rem;
  font-weight: 600;
}

#sisaltoalueet .valmentaja-taxon {
  margin: 0 0 0;
  font-style: italic;
  color: #6c6c6c;
  line-height: 1.65;
  margin-bottom: 10px;
}

#sisaltoalueet p.paikkakunnat {
  font-style: normal;
  margin-top: 10px;
  color: var(--valmentajan_vari);
  font-weight: 500;
}
#sisaltoalueet p.paikkakunnat::before {
    content: "\f3c5";
    font-family: 'Font Awesome 6 Pro' !important;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    /* color: var(--asiakasvari); */
    padding-right: 0.5em;
    /* padding-left: 1em; */
    position: relative;
    margin-right: 2px;
    color: var(--valmentajan_vari);
}

#sisaltoalueet .valmentaja-tieto,
#sisaltoalueet .valmentaja-tieto a {
  font-size: 14px;
  color: #000000 !important;
  font-weight: 600;
}
#sisaltoalueet .valmentaja-tieto a::before {
  color: var(--valmentajan_tehostevari) !important;
}

#sisaltoalueet .valmentaja-tieto i {
  color: var(--valmentajan_tehostevari);
  font-size: 1rem;
  min-width: 1rem;
}

/* ==========================================================
   POINTTINOSTOT
   ========================================================== */

#sisaltoalueet section.pointtinostot {
  box-shadow: 0 8px 40px -6px rgba(0, 0, 0, .05);
  background-color: #ffffff;
}

/* Grid hoitaa 1–3 kolumnia automaattisesti (≥ 300 px) */
#sisaltoalueet .point-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;                /* ilmaa korttien väliin */
  margin-top: 40px !important;
}

/* Kortti itsessään – perii fontit, leveydet gridiltä */
#sisaltoalueet .point-item {
  display: flex;
  flex-direction: column;
}

/* Otsikko + numeerinen ikoni */
#sisaltoalueet .point-heading {
  display: flex;
  align-items: flex-start;
  column-gap: 1rem;
  margin-bottom: 1rem;
}

#sisaltoalueet .point-num {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-weight: 600;
  border: 2px solid var(--valmentajan_tehostevari);
  border-radius: 50%;
  color: var(--valmentajan_tehostevari);
  font-size: 0.95rem;
  line-height: 1;
  margin-top: -7px;

}

#sisaltoalueet .row.narrow_area .preheader,
#sisaltoalueet .row.narrow_area .ingressi,
#sisaltoalueet .row.narrow_area h2 {
  max-width: 750px;
}

/* H4 otsikolle valmiiksi musta / tumma teksti */
#sisaltoalueet .point-heading h4 {
  margin: 0;
  font-size: 16px;
}

/* Ingressin alapuolella olevan gridin palstat vastaa kuvaa: 
   – 1 palsta mobiilissa, 2 kun tilaa, max 3 rinnakkain */
@media (max-width: 768px) {
  #sisaltoalueet .point-grid { grid-template-columns: 1fr; }
}

/* Hero */

#sisaltoalueet .ylatunniste.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 8vw 0 10vw;
  overflow: hidden;
}
#sisaltoalueet .ylatunniste .overlay {
  position: absolute; inset: 0;
}
#sisaltoalueet .overlay--brand  { background: var(--valmentajan_vari); opacity: .15; }
#sisaltoalueet .overlay--shade  { background: #282828; opacity: .5;   }
#sisaltoalueet .hero__inner     { position: relative; z-index: 1; max-width: 650px; margin-left: min(8vw, 4rem); }
#sisaltoalueet .hero__logo      { width: 110px; height: 110px; object-fit: cover; margin-bottom: 2rem; border-radius: 50%; }
#sisaltoalueet .ylatunniste .preheader,
#sisaltoalueet .ylatunniste .preheader a,
.et-db #et-boc .et-l #sisaltoalueet .ylatunniste .preheader a  { color: #ffffff; }
#sisaltoalueet .hero__title     { font-size: clamp(2.5rem, 4vw + 1.5rem, 4.5rem); line-height: 1.1; margin: 0 0 1rem; color: #ffffff; }
#sisaltoalueet .hero__intro     { font-size: 1.15rem; max-width: 40ch; margin: 0 0 2.5rem; }
#sisaltoalueet .ctabtn {
  display: inline-block;
  padding: .65rem 2.3rem;
  background: var(--valmentajan_tehostevari);
  color: #fff; border-radius: .3rem; font-weight: 600; text-decoration: none;
  transition: opacity .2s;
}
.title_area {
  display: flex;
  flex-direction: column;
}

/* Näytä preheader ensin, otsikko toisena */
.title_area .preheader {
  order: 1;
  margin-bottom: 20px;
}
.title_area .hero__title {
  order: 2;
}
#sisaltoalueet .ctabtn.second {
  padding: 0px;
  color: #000000;
  font-weight: 600;
  background: rgba(0, 0, 0, .0);
  font-size: 16px;
}
#sisaltoalueet .dark .ctabtn.second {
  color: #ffffff;
} 

#sisaltoalueet div.toiminta_alue {
  font-size: 12px;
  padding-top: 30px;
}
#sisaltoalueet div.toiminta_alue span {
  color: rgba(255, 255, 255, .75);
  padding-right: 10px;
}
#sisaltoalueet div.toiminta_alue ul.paikkakunnat-list {
  margin-top: 0px !important;
  padding-top: 0px !important;

}
#sisaltoalueet div.toiminta_alue ul.paikkakunnat-list li a {
  padding: 3px 10px;         
  font-size: 12px; 
  border-color: rgba(255, 255, 255, .25) !important;
  background-color: rgba(0, 0, 0, .0) !important; 
  color: #ffffff !important;
}

#sisaltoalueet .ctabtn.second::after {
    content: "\f178";
    font-family: 'Font Awesome 6 Pro' !important;
    font-style: normal;
    font-weight: 600;
    text-decoration: inherit;
    /* color: var(--asiakasvari); */
    padding-right: 0.5em;
    /* padding-left: 1em; */
    position: relative;
    top: 1px; 
    left: 6px;
    color: var(--valmentajan_tehostevari);
}
#sisaltoalueet .hero__cta:hover { opacity: .9; }
/* Osoite + puhelin oikeaan yläkulmaan */
#sisaltoalueet .hero__contact {
  position: absolute;
  top: 2rem;
  right: min(8vw, 4rem);
  z-index: 2;                 /* yli kalvojen */
  color: #fff;
  font-style: normal;
  font-size: .9rem;
  line-height: 1.4;
  text-align: right;
  max-width: 240px;
}
#sisaltoalueet .hero__contact span { display: block; }
#sisaltoalueet .hero__contact a {
  color: #ffffff;
  font-weight: 500;
}
#sisaltoalueet .hero__contact a:before {
  color: var(--valmentajan_tehostevari);
}

#sisaltoalueet .addr {
  padding-top: 10px;
}


/* Teksti ja kuva / kuva ja teksti  */

#sisaltoalueet section.teksti-ja-kuva .content a.ctabtn {
  margin-top: 25px;
}

#sisaltoalueet section.teksti-ja-kuva,
#sisaltoalueet section.kuva-ja-teksti {
  padding: 4vw 0;
}

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

/* 1) OLETUS: kuva vasemmalle, teksti oikealle  */
#sisaltoalueet .teksti-ja-kuva .row:not(.oikealla),
#sisaltoalueet .kuva-ja-teksti .row:not(.oikealla) {
  flex-direction: row-reverse;           /* käännä järjestys */
}

/* 2) LUOKKA "oikealla": kuva oikealle, teksti vasemmalle  */
#sisaltoalueet .teksti-ja-kuva .row.oikealla,
#sisaltoalueet .kuva-ja-teksti .row.oikealla {
  flex-direction: row;                   /* normaali järjestys */
}

/* Sarakeleveys ja laatikon malli */
#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;
}

/* Sisällön paddaukset – eri suunnat tilanteen mukaan */
#sisaltoalueet .teksti-ja-kuva .row.oikealla .content,
#sisaltoalueet .kuva-ja-teksti .row.oikealla .content {
  padding: 5vw 5vw 5vw 0;               /* teksti vasemmalla → padding oikealle */
}

#sisaltoalueet .teksti-ja-kuva .row:not(.oikealla) .content,
#sisaltoalueet .kuva-ja-teksti .row:not(.oikealla) .content {
  padding: 5vw 0 5vw 5vw;               /* teksti oikealla → padding vasemmalle */
}

#sisaltoalueet .teksti-ja-kuva .content,
#sisaltoalueet .kuva-ja-teksti .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Kuva-elementin perusasetukset */
#sisaltoalueet .teksti-ja-kuva .kuva,
#sisaltoalueet .kuva-ja-teksti .kuva {
  background-size: cover;
  background-position: center;
  min-height: 100%;
  border-radius: calc(var(--kulmat) / 2);
}

/* Accessibility: piilotettu teksti */
#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;
}

#sisaltoalueet section.valmentaja-arkisto.hero {
  padding-bottom: 0px;
}
#sisaltoalueet section.valmentaja-arkisto p.valmentaja-tieto {
  font-weight: 300;
  line-height: 1.7;
}
#sisaltoalueet section.valmentaja-arkisto p.preheader {
  margin-bottom: 20px;
}
/* ==========================================================
   Valmentajalista – 3 korttia rinnakkain (1 mobiilissa)
   ========================================================== */
.valmentaja-list {
  display: grid;
  gap: 2.5rem;                                   /* yhtenäinen väli */
  grid-template-columns: repeat(4, 1fr);
}
/* Mobiili: 1 kortti / rivi */
@media (max-width: 1340px) {
  .valmentaja-list { grid-template-columns: repeat(3, 1fr); }
}
/* Mobiili: 1 kortti / rivi */
@media (max-width: 768px) {
  .valmentaja-list { grid-template-columns: 1fr; }
}

/* Valmentaja-kortti – kuva yläreunaan, flex-pino alas */
.valmentaja-card {
  display: flex;
  flex-direction: column;                      /* kuva -> meta -> nappi */
  align-items: stretch;
  background: #fff;
  border-radius: var(--kulmat);
  box-shadow: 0 6px 17px -8px rgba(0,0,0,.07);
  backdrop-filter: blur(50px);
  background: rgba(255, 255, 255, 0.4);
  padding: 1.5rem;
}

section.lomake .valmentaja-card {
  padding: 0px;
  box-shadow: 0 0px 0px 0px rgba(0,0,0,.0);
  background: rgba(255, 255, 255, .0);
}

.valmentaja-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: calc(var(--kulmat)/1.2);
  margin-bottom: 1rem;
}

/* nappi täyteen leveyteen pienissä ruuduissa */
.valmentaja-card .ctabtn.second {
  margin-top: auto;           /* painike kortin alaosaan */
  display: inline-block;
}

.paikkakunnat-list {
  list-style: none;
  padding: 20px 0px 0px 0px !important;
  margin: 0 !important;
  display: inline-block;
}

.paikkakunnat-list li {
  display: inline-block;
  margin: 0 2px 4px 0;       /* väli tagien väliin */
}

.paikkakunnat-list li a {
  display: inline-block;
  padding: 1px 12px;         /* sisämarginaalit */
  background-color: rgba(0, 0, 0, .0); /* haluamasi taustaväri */

  border: 1px solid; /* huom! ei väriä tähän */
  border-color: color-mix(in srgb, var(--valmentajan_vari) 25%, transparent) !important;
  color: var(--valmentajan_vari) !important;            /* haluamasi tekstiväri */
  border-radius: 999px;      /* pyöreät päät */
  text-decoration: none;
  font-size: 14px;          /* pienempi fonttikoko tagille */
  transition: background-color 0.2s ease;
  margin-bottom: 5px;
  margin-right: 2px;
}

.paikkakunnat-list li a:hover,
.paikkakunnat-list li a:focus {
  opacity: .9;
}

/* Valmentajalistaus */

  /* Tee gridistä siisti (voit laittaa tämän themes.css:ään, mutta toimii tässäkin) */
      .palvelu-list {
        display: grid;
        gap: 2.1rem;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        padding: 0 !important;
        list-style: none;
      }
      .palvelu-list .valmentaja-card {
        min-height: 170px;
        padding: 35px;
      }
      .palvelu-list .kuvaus {
        font-size: 15px !important;
        line-height: 1.7;
      }
      .palvelu-list .kuvaus a {
        color: var(--asiakasvari) !important;
        text-decoration: underline;
      }
      div#page-container div#main-content .palvelu-list .valmentaja-card h3 {
        font-size: 22px;
      }
      #sisaltoalueet section.mainhero {
        padding-bottom: 0px;
      }
      #sisaltoalueet section.palvelut-ruudukko-section {
        padding-top: 2vw;
      }

/* Mobiilissa 1 kortti / rivi */
@media (max-width: 768px) {
  .valmentaja-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

    #sisaltoalueet p.preheader {
      /*padding-bottom: 0px;
      margin-bottom: 0px; */
    } 
    #sisaltoalueet .kaksipalstaa .content {
      padding-bottom: 50px;
    }
    #sisaltoalueet .ylatunniste.hero {

      padding: 14vh 0 10vh;
      margin-bottom: 30px;
    }
    #sisaltoalueet section.float.tayslevea_kuva {
      margin-bottom: 0px;
    }
    #sisaltoalueet .teksti-ja-kuva .content,
    #sisaltoalueet .kuva-ja-teksti .content {
      padding: 50px 0vw 50px 0vw !important; 
    }
    #sisaltoalueet .teksti-ja-kuva .row,
    #sisaltoalueet .kuva-ja-teksti {
        flex-direction: column;
    }
    #sisaltoalueet .teksti-ja-kuva .kuva {
      margin-top: 10px;
    }
    #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) {

}