/* =========================================================
   BLOG — YKSINKERTAISTETTU JA SELAINYSTÄVÄLLINEN
   ========================================================= */

/* Valkoinen tausta blogille (listaus + post) */
main.page-content {
  background: var(--color-light);
  color: var(--color-dark);
  max-width: 1100px;
  margin: calc(var(--header-height) + 20px) auto 60px;
  padding: 24px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
}

/* Otsikko ja ingressi */
.blog-section h1 { color: var(--color-coral); margin-bottom: .5rem; }
.blog-section p { color: var(--color-dark); opacity: .85; margin-bottom: 1.5rem; }

/* =========================================================
   POST — yksittäinen artikkeli
   ========================================================= */

#post-content .post-container {
  background: var(--color-light);
  padding: 24px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  max-width: 900px;
  margin: 0 auto;
}

#post-content img { max-width: 100%; border-radius: 10px; margin: 1rem 0; }
#post-content p { margin-bottom: 1rem; line-height: 1.7; }
#post-content h1, 
#post-content h2, 
#post-content h3 { color: var(--color-dark); font-weight: 700; margin: 1.5rem 0 .75rem; }
#post-content blockquote {
  border-left: 4px solid var(--color-coral);
  background: rgba(0,0,0,0.03);
  padding: .75rem 1rem;
  border-radius: 8px;
}

/* =========================================================
   BLOG LISTAUS — kortit
   ========================================================= */

#blog-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}

.blog-post {
  background: var(--color-light);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-light);
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}

.blog-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.blog-post img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.blog-post .overlay {
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.8) 100%);
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.blog-post h2 {
  font-size: 1.1rem;
  margin: 0 0 4px;
  color: var(--color-coral);
}

.blog-post .meta {
  font-size: .8rem;
  opacity: .9;
  margin-bottom: 6px;
}

.blog-post .excerpt {
  font-size: .9rem;
  line-height: 1.4;
  opacity: .9;
}

/* Pienempi marginaali mobiilissa */
@media (max-width: 768px) {
  main.page-content { margin: calc(var(--header-height) + 10px) 10px 40px; padding: 16px; }
}