/* Category-arkistojen perusilme – kevyt ja vaalea */
.category-archive-content{
  background: var(--body-bg,#fff);
  color: var(--text-color,#222);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hero-kaista (kevyt) */
.category-archive-content .hk-category__header{
  background: var(--section-bg,linear-gradient(145deg,#EAF2F7 0%,#FFFFFF 70%));
  padding: clamp(8px,2.5vw,18px) var(--spacing-medium,16px);
}

/* Typografia kategoriasisällössä (category_contents.* tulostaa semanttista HTML:ää) */
.category-archive-content h1,
.category-archive-content h2,
.category-archive-content h3{
  font-family: var(--font-family-heading,'Montserrat',sans-serif);
  color: var(--primary-color,#004080);
  line-height: 1.25;
  margin: 1.2rem 0 .6rem;
}
.category-archive-content h1{ font-size: clamp(26px,2.4vw,36px); margin-top:.8rem; }
.category-archive-content h2{ font-size: clamp(20px,2vw,28px); }
.category-archive-content h3{ font-size: clamp(18px,1.6vw,22px); }

.category-archive-content p,
.category-archive-content li{
  font-family: var(--font-family,'Open Sans',sans-serif);
  color: var(--text-color,#222);
  font-size: clamp(15px,1vw,18px);
}

.category-archive-content a{
  color: var(--secondary-color,#0077B6);
  text-decoration: underline;
}
.category-archive-content a:hover{ color: var(--accent-color,#FF6A00); }

/* Leveydet */
.category-archive-content .page-container{
  max-width: min(var(--max-width-content,1200px),1100px);
  margin: 0 auto;
  padding: 0 var(--spacing-medium,16px);
}
@media (min-width:1440px){
  .category-archive-content .page-container{ max-width: 980px; }
}

/* Info/CTA -laatikko */
.category-archive-content .info-box,
.category-archive-content .service-cta{
  background:#f7fbff;
  border:1px solid #e3efff;
  border-left:4px solid var(--secondary-color,#0077B6);
  border-radius:10px;
  padding:1rem 1.1rem;
  margin:1.5rem 0;
}

/* Artikkelilista (sama logiikka kuin tageissa) */
.category-archive-content .tag-article-list{ margin:28px 0 36px; }
.category-archive-content .hk-post-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: var(--spacing-medium,16px);
}
.category-archive-content .blog-post-item{
  background: var(--box-bg,#fff);
  padding: var(--spacing-medium,16px);
  border-radius: var(--border-radius,8px);
  box-shadow: var(--box-shadow,0 2px 8px rgba(0,0,0,.05));
  border:1px solid #eef2f7;
}
.category-archive-content .blog-post-item h2{ margin:0 0 .35rem; line-height:1.35; font-size: clamp(18px,1.8vw,22px); }
.category-archive-content .blog-post-item h2 a{
  color: var(--primary-color,#004080);
  text-decoration:none;
}
.category-archive-content .blog-post-item h2 a:hover{
  color: var(--accent-color,#FF6A00);
  text-decoration:underline;
}
.category-archive-content .read-more{
  display:inline-block;
  margin-top:.35rem;
  background: var(--button-bg,linear-gradient(90deg,#004080,#0077B6));
  color: var(--button-text-color,#fff);
  padding:.4rem .7rem;
  border-radius: var(--border-radius,8px);
  text-decoration:none;
  font-weight:600;
}

/* Kuvat */
.category-archive-content img{ width:100%; height:auto; display:block; }

/* Mobiili */
@media (max-width:768px){
  .category-archive-content{ background:#fff; color:#111; }
  .category-archive-content .page-container{ max-width:100%; padding:0 14px; }
  .category-archive-content h1{ font-size: clamp(22px,5vw,28px); }
  .category-archive-content h2{ font-size: clamp(18px,4.2vw,22px); }
  .category-archive-content h3{ font-size: clamp(16px,3.8vw,18px); }
}

/* Turvakytkimet */
.category-archive-content,
.category-archive-content .page-container,
.category-archive-content .tag-article-list{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:1;
}

/* iOS/Safari varmistus */
@supports (-webkit-touch-callout:none){
  .category-archive-content{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
}

/* Erotus navigaation ja otsikon väliin */
.category-archive-content {
  padding-top: clamp(20px, 4vh, 60px);
}
