@charset "UTF-8";
/* ===================================================
   BLOG LIST PAGE STYLES
   =================================================== */
/* Blog List Banner - täsmälleen sama kuin services-all sivulla */
#blog-list-banner {
  position: relative;
  min-height: 55vh !important;
  /* 50% näytön korkeudesta */
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Background handling */
  /* Muropolku bannerissa - täsmälleen sama kuin services-all sivulla */ }
  #blog-list-banner.bg-image {
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; }
  #blog-list-banner.bg-svg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-image: var(--svg-pattern);
    opacity: var(--svg-opacity);
    background-repeat: var(--svg-repeat);
    background-size: var(--svg-size);
    background-position: var(--svg-position);
    background-attachment: var(--svg-attachment); }
  #blog-list-banner .fullshow2-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1; }
  #blog-list-banner .fullshow2-content {
    position: relative;
    z-index: 2; }
    #blog-list-banner .fullshow2-content h1 {
      font-size: 3rem;
      margin-bottom: 1.5rem; }
      @media (max-width: 768px) {
        #blog-list-banner .fullshow2-content h1 {
          font-size: 2.5rem; } }
    #blog-list-banner .fullshow2-content .fullshow2-description {
      font-size: 1.2rem;
      max-width: 600px;
      margin: 0 auto; }
      @media (max-width: 768px) {
        #blog-list-banner .fullshow2-content .fullshow2-description {
          font-size: 1rem; } }
  #blog-list-banner .breadcrumb-nav {
    position: relative !important;
    top: 0px !important;
    left: 35px !important;
    z-index: 999 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto;
    display: block !important; }
    #blog-list-banner .breadcrumb-nav ol {
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
      display: flex !important;
      flex-direction: row !important;
      gap: 0;
      align-items: center !important;
      width: auto;
      line-height: 1.2; }
    #blog-list-banner .breadcrumb-nav li {
      display: flex !important;
      align-items: center;
      font-size: 14px !important;
      line-height: 1.4; }
    #blog-list-banner .breadcrumb-nav a {
      color: rgba(255, 255, 255, 0.7) !important;
      text-decoration: none !important;
      transition: all 0.3s ease;
      padding: 4px 8px !important; }
      #blog-list-banner .breadcrumb-nav a:hover {
        color: white !important;
        background: rgba(255, 255, 255, 0.1) !important; }
    #blog-list-banner .breadcrumb-nav .separator {
      color: rgba(255, 255, 255, 0.5) !important;
      margin: 0 8px !important;
      font-size: 14px !important; }
    #blog-list-banner .breadcrumb-nav .active span {
      color: white !important;
      font-weight: 500 !important; }

/* Sectionset-värit blog-list bannerille */
#blog-list-banner.section-lightset {
  background-color: var(--siteset-lightset-bg);
  color: var(--siteset-lightset-color); }
  #blog-list-banner.section-lightset .fullshow2-content h1 {
    color: var(--siteset-lightset-h2); }
  #blog-list-banner.section-lightset .fullshow2-content .fullshow2-description {
    color: var(--siteset-lightset-color); }

#blog-list-banner.section-darkset {
  background-color: var(--siteset-darkset-bg);
  color: var(--siteset-darkset-color); }
  #blog-list-banner.section-darkset .fullshow2-content h1 {
    color: var(--siteset-darkset-h2); }
  #blog-list-banner.section-darkset .fullshow2-content .fullshow2-description {
    color: var(--siteset-darkset-color); }

#blog-list-banner.section-coloriset {
  background-color: var(--siteset-coloriset-bg);
  color: var(--siteset-coloriset-color); }
  #blog-list-banner.section-coloriset .fullshow2-content h1 {
    color: var(--siteset-coloriset-h2); }
  #blog-list-banner.section-coloriset .fullshow2-content .fullshow2-description {
    color: var(--siteset-coloriset-color); }

#blog-list-banner.section-neutralset {
  background-color: var(--siteset-neutralset-bg);
  color: var(--siteset-neutralset-color); }
  #blog-list-banner.section-neutralset .fullshow2-content h1 {
    color: var(--siteset-neutralset-h2); }
  #blog-list-banner.section-neutralset .fullshow2-content .fullshow2-description {
    color: var(--siteset-neutralset-color); }

/* Blog List Content Section */
.blog-list-section {
  padding: 60px 0; }

/* MOBIILI - Piilotetaan muropolut */
@media (max-width: 768px) {
  #blog-list-banner {
    min-height: 40vh; }
    #blog-list-banner .breadcrumb-nav {
      display: none !important;
      /* Katoaa mobiilissa */ }
  .blog-list-section {
    padding: 40px 0; } }

/* =============================================================================
   LISTAUSSIVUN BLOGI-LINKKIEN VÄRIT
   ============================================================================= */
/* Blogikortit listaussivulla käyttävät color-väriä h2/button-värin sijaan */
.blog-list-section .post-block h4, .blog-list-section .post-block h4 a {
  color: var(--siteset-lightset-color) !important; }
  .blog-list-section .post-block h4:hover, .blog-list-section .post-block h4 a:hover {
    color: var(--siteset-lightset-color) !important; }
  .blog-list-section .post-block h4:focus, .blog-list-section .post-block h4 a:focus {
    color: var(--siteset-lightset-color) !important; }
  .blog-list-section .post-block h4:visited, .blog-list-section .post-block h4 a:visited {
    color: var(--siteset-lightset-color) !important; }

.blog-list-section .read-more-link {
  color: var(--siteset-lightset-color) !important; }
  .blog-list-section .read-more-link:hover {
    color: var(--siteset-lightset-color) !important; }