/* ==========================================================================
   WALENT — blog.css (index + single článok)
   ========================================================================== */

/* --- Index --- */
.blog-section { background: var(--color-cream); }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); }
@media (min-width: 576px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card {
  display: flex; flex-direction: column;
  background: var(--color-white); border-radius: var(--border-radius);
  overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
.blog-card-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.blog-card-body { display: flex; flex-direction: column; flex-grow: 1; padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md); }
.blog-card-date { font-size: 0.875rem; color: var(--color-medium-brown); margin-bottom: 0.5rem; }
.blog-card h3 { font-size: 1.375rem; margin-bottom: 0.5rem; line-height: 1.3; }
.blog-card p { font-size: var(--font-size-small); color: var(--color-medium-brown); margin-bottom: var(--spacing-sm); flex-grow: 1; }
.blog-card-more { font-size: var(--font-size-small); font-weight: 600; color: var(--color-dark-brown); text-decoration: underline; text-underline-offset: 4px; }
.blog-card:hover .blog-card-more { color: var(--color-medium-brown); }

/* --- Single článok --- */
.article-section { background: var(--color-cream); }
.article-box {
  max-width: 50rem; margin: 0 auto;
  background: var(--color-white); border-radius: var(--border-radius);
  padding: var(--spacing-lg); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.article-back { display: inline-block; font-size: var(--font-size-small); color: var(--color-medium-brown); margin-bottom: var(--spacing-sm); transition: color 0.2s; }
.article-back:hover { color: var(--color-dark-brown); }
.article-date { font-size: 0.875rem; color: var(--color-medium-brown); margin-bottom: 0.5rem; }
.article-box h1 { font-size: clamp(1.75rem, 3vw + 0.5rem, 2.375rem); margin-bottom: var(--spacing-md); }
.article-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--border-radius); margin-bottom: var(--spacing-md); }
.article-content h2 { font-size: clamp(1.375rem, 2vw + 0.25rem, 1.75rem); margin: var(--spacing-md) 0 var(--spacing-xs); }
.article-content p { color: var(--color-dark-brown); line-height: 1.75; margin-bottom: 1rem; }
.article-content ul, .article-content ol { margin: 0 0 1rem 1.25rem; color: var(--color-dark-brown); }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { line-height: 1.7; margin-bottom: 0.375rem; }
.article-content a { color: var(--color-medium-brown); text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: var(--color-dark-brown); }
.article-content strong { color: var(--color-dark-brown); }
.article-content img { border-radius: var(--border-radius); margin: var(--spacing-sm) 0; max-width: 100%; height: auto; }
.article-cta {
  max-width: 50rem; margin: var(--spacing-md) auto 0; text-align: center;
  background: var(--color-light-brown); border-radius: var(--border-radius); padding: var(--spacing-lg);
}
.article-cta h2 { margin-bottom: var(--spacing-xs); }
.article-cta p { color: var(--color-medium-brown); margin-bottom: var(--spacing-sm); }