/* ======================================================
ETN.fi – override.css (FINAL, V10 - ABSOLUTE/FIXED NUKE)
====================================================== */

/* ======================================================
KRIITTINEN GLOBAALI ESTO - VAHVISTETTU LEVEYS JA YLIVUOTO
====================================================== */
html, body {
    /* Pakota globaali leveys ja estä vaakaskrollaus */
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; 
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
}
#nackskinnet { 
    /* Pääkääre: Vahvistettu esto ja nollamarginaalit */
    width: 100% !important; 
    max-width: 100% !important;
    overflow-x: hidden !important; 
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    /* TÄRKEÄ VAHVISTUS ABSOLUUTTISILLE ELEMENTEILLE */
    position: relative !important; 
    display: block !important;
}
body { overflow-y: scroll !important; } /* Salli pystysuuntainen skrollaus */


/* Perustausta ja header-viiva pois */
html, body, #nackskinnet { background:#00384d !important; color:#fff; }
body, #header, header.site-header, .navbar, .navbar-inverse, .navbar-inner {
  border-top:none !important; box-shadow:none !important;
}

/* Otsikot (ei kosketa .custom .tag-category -palkkeja) */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:#00384d !important; text-decoration:none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color:#12606F !important; text-decoration:underline; }
.custom .tag-category h1, .custom .tag-category h1 a { color:inherit !important; }

/* Palstat läpinäkyviksi (gap näkyy) */
.row, .row-fluid, [class*="col-"], [class*="span"] { background:transparent !important; border:0 !important; box-shadow:none !important; }

/* ------------------- BLOGI / FEATURED ------------------- */
.blog, .blog-featured,
.blog .items-leading, .blog-featured .items-leading,
.blog .items-row,    .blog-featured .items-row,
.blog .items-row > div, .blog-featured .items-row > div { background:transparent !important; }

.blog .items-leading, .blog .items-row,
.blog-featured .items-leading, .blog-featured .items-row {
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr)) !important;
  gap:22px !important; align-items:stretch; padding:8px 6px !important;
}

/* Kortit */
.blog .items-leading > .item,
.blog .items-row > div .item,
.blog-featured .items-leading > .item,
.blog-featured .items-row > div .item,
.blog .items-leading > article.item,
.blog .items-row > div > article.item {
  background:#fff !important; color:#111 !important;
  border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.15);
  overflow:hidden; display:flex !important; flex-direction:column !important;
  min-width:0; /* estää sisällön venytyksen */
}
.blog .item .content, .blog .item .article-content { padding:14px 16px; background:#fff; }
.blog .item h2 a { color:#00384d !important; }

/* Estä sisäylivuoto laajentamasta näkymää (säilyttää zoomin) */
.blog .items-leading > .item,
.blog .items-row > div .item,
.blog-featured .items-leading > .item,
.blog-featured .items-row > div .item,
.item-page,
#IN_FOCUS .newsflash,
.well.jmoddiv .newsflash,
.newsflash.jmoddiv.jmodinside {
  overflow-x: clip !important; /* Estää vaakasuuntaisen ylivuodon tässä konteissa */
  min-width: 0 !important;
}

/* ------------------- ITEM-PAGE ------------------- */
.item-page {
  background:#fff !important; color:#111 !important;
  border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.15);
  padding:20px; max-width:860px; margin:20px auto; min-width:0;
}
.item-page h1, .item-page h2, .item-page h3, .item-page h4, .item-page h5, .item-page h6 { color:#00384d !important; }
.item-page a { color:#00384d; text-decoration:underline; }
.item-page a:hover { color:#12606F; }

/* ------------------- IN FOCUS ------------------- */
#IN_FOCUS .newsflash {
  background:#fff !important; color:#111 !important;
  border-radius:10px; padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.12); min-width:0;
}
#IN_FOCUS .newsflash, #IN_FOCUS .newsflash * { color:#111 !important; font-style:normal !important; }
#IN_FOCUS .newsflash .newsflash-title,
#IN_FOCUS .newsflash .newsflash-title a,
#IN_FOCUS .newsflash a.readmore { color:#00384d !important; font-weight:600; text-decoration:none; }
#IN_FOCUS .newsflash .newsflash-title a:hover,
#IN_FOCUS .newsflash a.readmore:hover { color:#12606F !important; text-decoration:underline; }

/* Vaihtoehtoinen newsflash-rakenne */
.newsflash.jmoddiv.jmodinside {
  background:#fff !important; color:#111 !important;
  border-radius:10px; padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.12); min-width:0;
}
.newsflash.jmoddiv.jmodinside, .newsflash.jmoddiv.jmodinside * { color:#111 !important; }
.newsflash.jmoddiv.jmodinside .newsflash-title,
.newsflash.jmoddiv.jmodinside .newsflash-title a,
.newsflash.jmoddiv.jmodinside a.readmore { color:#00384d !important; font-weight:600; text-decoration:none; }
.newsflash.jmoddiv.jmodinside .newsflash-title a:hover,
.newsflash.jmoddiv.jmodinside a.readmore:hover { color:#12606F !important; text-decoration:underline; }

/* ------------------- TECHNICAL / OPINION listakortit ------------------- */
.well.jmoddiv .newsflash {
  background:#fff !important; color:#111 !important;
  border-radius:10px; padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.12); min-width:0;
}
/* leipäteksti mustaksi (voittaa inline-tyylit, Safari) */
.well.jmoddiv .newsflash p,
.well.jmoddiv .newsflash span,
.well.jmoddiv .newsflash div,
.well.jmoddiv .newsflash td,
.well.jmoddiv .newsflash li,
.well.jmoddiv .newsflash dd,
.well.jmoddiv .newsflash dt { color:#111 !important; font-style:normal !important; }
/* otsikot/linkit */
.well.jmoddiv .newsflash h1, .well.jmoddiv .newsflash h2,
.well.jmoddiv .newsflash h3, .well.jmoddiv .newsflash h4,
.well.jmoddiv .newsflash h5, .well.jmoddiv .newsflash h6,
.well.jmoddiv .newsflash h1 a, .well.jmoddiv .newsflash h2 a,
.well.jmoddiv .newsflash h3 a, .well.jmoddiv .newsflash h4 a,
.well.jmoddiv .newsflash h5 a, .well.jmoddiv .newsflash h6 a,
.well.jmoddiv .newsflash a.readmore { color:#00384d !important; font-weight:600; text-decoration:none !important; }
.well.jmoddiv .newsflash a:hover { color:#12606F !important; text-decoration:underline !important; }

/* latest-news / mod-list otsikot */
.latest-news.mod-list h1, .latest-news.mod-list h2, .latest-news.mod-list h3,
.latest-news.mod-list h4, .latest-news.mod-list h5, .latest-news.mod-list h6,
.latest-news.mod-list h1 a, .latest-news.mod-list h2 a, .latest-news.mod-list h3 a,
.latest-news.mod-list h4 a, .latest-news.mod-list h5 a, .latest-news.mod-list h6 a {
  color:#00384d !important; text-decoration:none;
}
.latest-news.mod-list h1 a:hover, .latest-news.mod-list h2 a:hover,
.latest-news.mod-list h3 a:hover, .latest-news.mod-list h4 a:hover,
.latest-news.mod-list h5 a:hover, .latest-news.mod-list h6 a:hover {
  color:#12606F !important; text-decoration:underline;
}

/* Article meta (dl.article-info.muted): responsiivinen + brändiväri */
dl.article-info.muted {
  display:grid !important; grid-template-columns:max-content 1fr;
  gap:4px 12px; align-items:center; width:100%; max-width:100%;
  margin:0 0 12px 0; padding:0; box-sizing:border-box;
  color:#12606F; background:transparent; border:0; overflow:hidden;
}
dl.article-info.muted dt, dl.article-info.muted dd {
  margin:0; padding:0; float:none !important; white-space:normal !important;
  min-width:0; overflow-wrap:anywhere; word-break:break-word; font-style:normal !important;
}
dl.article-info.muted dd::after { content:"•"; margin:0 8px; opacity:.6; }
dl.article-info.muted dd:last-of-type::after { content:none; }

/* inte-span3 periytti valkoisen → käännä korteissa mustaksi */
.inte-span3 .newsflash, .inte-span3 .newsflash *, .inte-span3 .item, .inte-span3 .item * {
  color:#111 !important; font-style:normal !important; background:#fff !important;
}

/* Tag-labelit sirommiksi, päävärillä (#00348d) */
a.label.label-info {
  background-color:#00348d !important; color:#fff !important;
  font-size:.75rem !important; font-weight:600; line-height:1.2;
  padding:1px 6px !important; border-radius:3px;
  box-shadow:none !important; background-image:none !important; border:none !important;
  display:inline-block;
}
a.label.label-info:hover { background-color:#12606F !important; color:#fff !important; text-decoration:none; }

/* ------------------- MEDIA FIX (kevyt ja turvallinen) ------------------- */
/* Skaalaa media sisällöissä – ei pakoteta 100% leveäksi desktopissa */
.item-page img, .newsflash img, .blog .item img { display:block; max-width:100%; height:auto; }
.item-page iframe, .newsflash iframe, .banner iframe, .ad iframe, .advert iframe, .ad-container iframe {
  display:block; max-width:100% !important; width:100% !important; height:auto;
}
/* 468px kovaleveät upotukset (myös inline style) */
.item-page [style*="width:468px"], .newsflash [style*="width:468px"] { max-width:100% !important; width:100% !important; }
/* Taulukot eivät työnnä yli */
.item-page table, .newsflash table { width:100%; table-layout:fixed; }
.item-page td, .newsflash td { width:auto; }
/* Pitkät sanat/URL:t rivittyvät */
.item-page, .newsflash, .blog .item .content { overflow-wrap:anywhere; word-break:break-word; white-space:normal; }

/* ------------------- Mobiili ------------------- */
@media (max-width:640px){
  /* Blogi: 1 palsta + maltillinen gap */
  .blog .items-leading, .blog .items-row,
  .blog-featured .items-leading, .blog-featured .items-row { grid-template-columns:1fr !important; gap:14px !important; }

  /* Nollaa sisältökuvien floatit/marginaalit (legacy align/float) */
  .item-page img, .newsflash img, .blog .item img { float:none !important; margin:0 0 10px 0 !important; }

  /* Meta yksipalstaiseksi mobiilissa */
  dl.article-info.muted { grid-template-columns:1fr; gap:4px 0; font-size:.85rem; }
}


/* ======================================================
Etusivun ensimmäisen artikkelin yläväli pois
====================================================== */

.blog .items-leading.clearfix,
.blog-featured .items-leading.clearfix {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.blog .items-leading.clearfix::before,
.blog .items-leading.clearfix::after,
.blog-featured .items-leading.clearfix::before,
.blog-featured .items-leading.clearfix::after {
  content: none !important;
}

.blog .items-leading,
.blog-featured .items-leading {
  padding: 0 6px 8px !important;
}

.blog .items-leading > .item:first-child,
.blog .items-leading > article.item:first-child,
.blog-featured .items-leading > .item:first-child,
.blog-featured .items-leading > article.item:first-child {
  margin-top: 0 !important;
}


/* ======================================================
Mobiilikuvat kuntoon (468px + hspace/vspace/align)
====================================================== */
@media (max-width: 640px) {
  /* Skaalaa artikkelisisällön kuvat täsmälleen palstaan */
  .newsflash img,
  .item-page img,
  .blog .item img {
    width: 100% !important;     
    max-width: 100% !important;
    height: auto !important;
    display: block;
    float: none !important;
    margin: 0 0 10px 0 !important;  
    box-sizing: border-box;         
  }

  /* Nollaa vanhat presentaatioattribuutit */
  .newsflash img[hspace], .item-page img[hspace], .blog ..item img[hspace],
  .newsflash img[vspace], .item-page img[vspace], .blog .item img[vspace],
  .newsflash img[align],  .item-page img[align],  .blog .item img[align] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Yleinen varmistus kovaleveille kuville */
  .newsflash img[width="468"],
  .item-page  img[width="468"],
  .blog .item img[width="468"],
  .newsflash [style*="width:468px"],
  .item-page  [style*="width:468px"],
  .blog .item [style*="width:468px"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Sama bannereille/iframeille */
  .newsflash iframe,
  .item-page iframe,
  .banner iframe, .ad iframe, .advert iframe, .ad-container iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
  }
}

/* ======================================================
Mobiili V5: 468px-kuvat ja -wrapperit kiinni palstan leveyteen kaikkialla
====================================================== */
@media (max-width: 640px) {
  /* 1) 468-kuvat kaikkialla (myös moduuleissa) täysleveiksi */
  img[width="468"],
  img[style*="width:468px"],
  .moduletable img,
  .custom img,
  .banner img,
  .ad img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
    box-sizing: border-box;
  }

  /* 2) Jos KIINTEÄ leveys on wrapperissa (div tms.), löysää se */
  .moduletable[style*="width:468px"],
  .custom[style*="width:468px"],
  .banner[style*="width:468px"],
  .ad[style*="width:468px"],
  [style*="width:468px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3) Nollaa legacy-attribuutit */
  img[hspace], img[vspace], img[align] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
  }
}

/* ======================================================
Fix: .rounded ei saa työntää kuvaa yli kortin reunan
====================================================== */
.newsflash img.rounded,
.item-page img.rounded,
.blog .item img.rounded {
  box-sizing: border-box;        
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mobiilissa nollaa .roundedin floatit/marginaalit/paddingit täysin */
@media (max-width: 640px) {
  .newsflash img.rounded,
  .item-page img.rounded,
  .blog .item img.rounded {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    float: none !important;
    margin: 0 0 10px 0 !important;   
    padding: 0 !important;           
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }
}

/* ======================================================
Mobile fix: .span12 / column-1 ei saa venyä yli blogissa/featuredeissä
====================================================== */
@media (max-width: 640px) {
  .blog .items-leading [class*="span"],
  .blog .items-row    [class*="span"],
  .blog-featured .items-leading [class*="span"],
  .blog-featured .items-row    [class*="span"],
  .latest-news.mod-list [class*="span"],
  .category-list [class*="span"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
    box-sizing: border-box;
  }

  .item.column-1.span12 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box;
    overflow-x: clip !important;
  }

  .columns-1, .column-1, .items-row .item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* ======================================================
MOBILE HARDENING (index.php aware)
Korjaa #ETNfrontpage 468px-inline-leveyden ja taulukkokontin
====================================================== */
@media (max-width: 640px) {
  /* 1) Kumoa index.php:n inline width:468px ja pakota 100% */
  #ETNfrontpage {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box;
    min-width: 0 !important;
    overflow-x: clip !important;
    padding: 0 5px !important; /* Lisää pieni sisäpuskuri sivulle */
  }

  /* 2) Tee sisältökontti fluidiksi */
  table.editorialspace {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  table.editorialspace td {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* 3) Sisällä olevat kuvat/iframet eivät saa venyttää yli */
  #ETNfrontpage img,
  #ETNfrontpage iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
    box-sizing: border-box;
    min-width: 0 !important;
  }
  
  /* 4) Varalta: mainospalstojen wrapperit eivät saa olla kiinteäleweyksiä */
  #annonsspalt, .leftads, .rightads {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
}

/* ======================================================
MOBILE HOTFIX — artikkelikuvat 100%, ikonit ei paisu
====================================================== */
@media (max-width: 640px) {
  /* 0) Nollaa liian laaja sääntö (#ETNfrontpage img) */
  #ETNfrontpage img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* 1) Artikkelisisällön kuvat täyteen leveyteen (voittaa edellisen spesifisyydellä) */
  #ETNfrontpage .newsflash img,
  #ETNfrontpage .item-page img,
  #ETNfrontpage .blog .item img,
  #ETNfrontpage table.editorialspace img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 0 10px 0 !important;
  }

  /* 2) 468px kovaleveydet varmasti fluidiksi */
  #ETNfrontpage img[width="468"],
  #ETNfrontpage img[style*="width:468px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3) Rounded ei saa lisätä yli menevää “paksuutta” */
  #ETNfrontpage img.rounded {
    padding: 0 !important;
    border-radius: 8px; /* jos haluat pyöristyksen */
  }

  /* 4) Some-logot / ikonit pidä luonnollisessa koossa */
  #ETNfrontpage .social img,
  #ETNfrontpage .social-icons img,
  #ETNfrontpage .icons img,
  #ETNfrontpage img.icon,
  #ETNfrontpage img.logo,
  header img, .header img,
  footer img, .footer img,
  a[href*="facebook"] img,
  a[href*="instagram"] img,
  a[href*="twitter"] img,
  a[href*="x.com"] img {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    display: inline-block !important;
  }
}

/* ======================================================
Share-napit: .button-container ei paisuta ikonit
====================================================== */
/* Yleiset korjaukset somenapeille */
.button-container {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; width: auto; overflow: hidden; box-sizing: border-box;
}
.button-container[style*="width"] { width: auto !important; max-width: 100% !important; }
.newsflash .button-container img,
.item-page .button-container img,
.blog .item .button-container img,
.button-container img {
  width: auto !important; max-width: none !important; height: 24px !important; display: inline-block !important; float: none !important; margin: 0 !important; box-sizing: border-box;
}
.button-container svg { width: 24px !important; height: 24px !important; }

/* ======================================================
MOBILE OVERFLOW FIX V9: Annonsspalt - ULTIMATE MARGIN KILL SWITCH
Mainosalueen ylivuodon esto
====================================================== */
@media (max-width: 1000px) {

    /* 1. Pakotetaan annosspalt (oikea palsta) käyttäytymään kuin flex-lohko */
    #annonsspalt {
        display: flex !important;
        flex-direction: column !important; /* Pakottaa sisällön pinoutumaan pystysuoraan */
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
        overflow-x: hidden !important; /* Estää ylivuodon tässä palstassa */
        min-width: 0 !important;
    }

    /* 2. Varmistetaan, että sisäiset ad-wrapperit vievät täyden leveyden */
    #annonsspalt > div,
    .leftads,
    .rightads,
    .fullads {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important; 
        margin: 0 0 10px 0 !important; 
        padding: 0 !important;
        box-sizing: border-box;
        overflow-x: hidden !important;
        min-width: 0 !important; 
    }
    
    /* 3. ⭐ ULTIMATE OVERFLOW KILL SWITCH (KRITIIKKI) ⭐ */
    /* Nuke any fixed width element inside the ad column (the most likely culprit) */
    #annonsspalt * {
        max-width: 100% !important; /* Pakota KAIKKI lapset olemaan max 100% */
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        /* Ylikirjoitetaan mahdolliset inline-leveyden asettaneet tyylit */
        width: 100% !important; 
        min-width: 0 !important;
    }
    /* ------------------------------------------------------------------- */


    /* 4. Varmistetaan, että itse mainossisältö (kuvat/iframet) skaalautuu */
    #annonsspalt img,
    #annonsspalt iframe,
    #annonsspalt object,
    #annonsspalt embed {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        min-width: 0 !important;
    }

    /* 5. Mainos/banner-moduulien sisäiset taulukot / div-kääreet */
    #annonsspalt table,
    #annonsspalt .moduletable,
    #annonsspalt .custom {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        overflow-x: hidden !important;
        min-width: 0 !important;
    }
    
    /* ⭐ UUSI YDINASE-VALITSIN: PAKOTA KAIKKI SISÄLLÖT SKAALAUTUMAAN ⭐ */
    /* Tämä kohdistaa säännön jokaiseen elementtiin (#nackskinnetin sisällä) */
    #nackskinnet *, .site-container * {
        max-width: 100% !important; 
        box-sizing: border-box !important;
        min-width: 0 !important;
        padding: 0 0 0 0 !important; /* Kokeillaan nollata paddingit vain oikealta */
        margin: 0 0 0 0 !important;  /* Kokeillaan nollata marginaalit vain oikealta */
        /* Poistetaan 'overflow-x: hidden' täältä, koska se hidastaa, luotetaan globaaliin estoon */
    }
}


/* --- Mobiiliskaalaus-fix (alle 1000px) --- */
@media screen and (max-width: 1000px) {

    /* 1. Pakotetaan taulukot käyttäytymään kuin normaalit lohkot */
    table, thead, tbody, th, td, tr {
        display: block;
        width: 100% !important; 
        box-sizing: border-box; 
        height: auto !important; 
        min-width: 0 !important;
    }

    /* 2. Piilotetaan turhat sarakkeet mobiilissa tilan säästämiseksi */
    .horimarg, .vertimarg, #spaltLeft, #R_vertimarg {
        display: none !important;
    }

    /* 3. Korjataan pääsisällön leveys (kumoaa index.php:n 468px) */
    #ETNfrontpage {
        width: 100% !important;
        padding: 10px !important;
        min-width: 0 !important;
    }

    /* 4. Oikean laidan mainospalkki (annonsspalt) */
    #annonsspalt {
        width: 100% !important;
        padding: 10px;
        text-align: center; 
        min-width: 0 !important;
    }

    /* 5. Varmistetaan, että kuvat eivät levähdä ruudun yli */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 6. Header ja Logo */
    #header, #logoOchTopbanner {
        width: 100% !important;
    }
    
    /* Logot usein on taulukon sisällä, keskitetään ne */
    #logo {
        text-align: center;
        width: 100% !important;
        display: block !important;
    }
}

/* ======================================================
⭐⭐ KRITIIKKI HÄKKI YLIVUOTOMARGINAALIN KORJAAMISEEN (V9/V10 ADDITION) ⭐⭐
Syö pois ylimääräisen pikselin / CSS-bugista johtuvan tilan.
====================================================== */
@media (max-width: 1000px) {
    /* Kohdista pääkääreeseen, joka on syypää sivun leveyteen */
    #nackskinnet, 
    .site-container, 
    body {
        /* Kaventaa kaiken sisällön 99.9% leveyteen. */
        width: 99.9% !important; 
        max-width: 99.9% !important;
        
        /* Negatiivinen marginaali vetää reunan takaisin sisään. */
        margin-right: -2px !important; 
        
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}


/* ======================================================
⭐⭐ KAIKKI: PIILOTA JAKONAPPULAT (.share-buttons) KOKONAAN ⭐⭐
====================================================== */
.share-buttons {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ======================================================
⭐⭐ MOBIILI: JUTTULISTAN OTSIKOT (Riviväli 1.0, Merkkiväli tiukimmilleen) ⭐⭐
====================================================== */
@media (max-width: 640px) {
  
  /* Kohdistaan h2.item-title -elementtiin ja sen sisältämään linkkiin */
  h2.item-title,
  h2.item-title a,
  .blog .item .content h2,
  .blog .item .article-content h2 {
    font-size: 30px !important;       /* Koko pidetään 30px */
    letter-spacing: 0px !important;    /* TIIKENNETTY: 0px (poistaa ylimääräisen välin) */
    line-height: 1.0 !important;       /* ÄÄRIMMÄISEN TIUKKA RIVIVÄLI: 1.0 */
    font-weight: 700 !important;
  }
  
  /* Yksittäisen artikkelin pääotsikkoon sama tiukennus (item-page) */
  .item-page h1,
  .item-page h2,
  h1.page-title,
  h2.page-title {
    letter-spacing: 0px !important;  /* TIIKENNETTY: 0px */
    line-height: 1.0 !important;     /* ÄÄRIMMÄISEN TIUKKA RIVIVÄLI: 1.0 */
  }
}