/* ============================================

   CABLYS Blog Styles

   ============================================ */



.blog-section { padding: 120px 0 80px; background: var(--gray-50); }

.blog-header { text-align: center; margin-bottom: 3rem; }



.blog-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

  gap: 2rem;

  margin-top: 2rem;

}



.blog-card {

  background: white;

  border-radius: var(--radius-xl);

  border: 1px solid var(--gray-200);

  overflow: hidden;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  display: flex;

  flex-direction: column;

}



.blog-card:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-xl);

}



.blog-card-content {

  padding: 1.5rem;

  flex: 1;

  display: flex;

  flex-direction: column;

}



.blog-card-title {

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--gray-900);

  margin-bottom: 0.5rem;

  line-height: 1.3;

}



.blog-card-meta {

  font-size: 0.875rem;

  color: var(--gray-500);

  margin-bottom: 1rem;

  display: flex;

  gap: 0.75rem;

  align-items: center;

}



.blog-card-excerpt {

  font-size: 1rem;

  color: var(--gray-600);

  line-height: 1.6;

  margin-bottom: 1.5rem;

  flex: 1;

}



.blog-card-tags {

  display: flex;

  gap: 0.5rem;

  flex-wrap: wrap;

  margin-bottom: 1rem;

}



.blog-tag {

  font-size: 0.75rem;

  font-weight: 600;

  padding: 0.25rem 0.75rem;

  background: var(--gray-100);

  color: var(--gray-700);

  border-radius: var(--radius-full);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.blog-card-footer {

  padding: 1rem 1.5rem;

  border-top: 1px solid var(--gray-100);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.blog-read-more {

  font-weight: 600;

  color: var(--primary);

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 0.25rem;

}



.blog-read-more:hover { color: var(--primary-dark); }



.blog-post-section { padding: 140px 0 80px; background: white; }

.blog-post-header { max-width: 800px; margin: 0 auto 3rem; text-align: center; }

.blog-post-title {

  font-size: 2.5rem;

  font-weight: 800;

  color: var(--gray-900);

  margin-bottom: 1rem;

  line-height: 1.2;

}



.blog-post-meta {

  font-size: 1rem;

  color: var(--gray-500);

  display: flex;

  justify-content: center;

  gap: 1rem;

  flex-wrap: wrap;

}



.blog-post-content {

  max-width: 800px;

  margin: 0 auto;

  font-size: 1.125rem;

  line-height: 1.8;

  color: var(--gray-800);

}



.blog-post-content h2 {

  font-size: 1.75rem;

  font-weight: 700;

  color: var(--gray-900);

  margin: 2.5rem 0 1rem;

}



.blog-post-content p { margin-bottom: 1.5rem; }

.blog-post-content ul { margin-bottom: 1.5rem; padding-left: 1.5rem; }

.blog-post-content li { margin-bottom: 0.5rem; }



.blog-post-content .post-lead {

  font-size: 1.25rem;

  color: var(--gray-600);

  font-weight: 500;

  margin-bottom: 2rem;

}



.blog-back-link {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  margin-bottom: 2rem;

  color: var(--gray-500);

  text-decoration: none;

  font-weight: 500;

}



.blog-back-link:hover { color: var(--primary); }



/* Dark Theme */

[data-theme="dark"] .blog-section { background: #0b1220; }

[data-theme="dark"] .blog-card { background: #0f172a; border-color: #1f2a44; }

[data-theme="dark"] .blog-card-title { color: #e5e7eb; }

[data-theme="dark"] .blog-card-excerpt { color: #a8b2c1; }

[data-theme="dark"] .blog-card-footer { border-top-color: #1f2a44; }

[data-theme="dark"] .blog-post-section { background: #0b1220; }

[data-theme="dark"] .blog-post-title { color: #e5e7eb; }

[data-theme="dark"] .blog-post-content { color: #a8b2c1; }

[data-theme="dark"] .blog-post-content h2 { color: #e5e7eb; }

[data-theme="dark"] .blog-tag { background: #1f2a44; color: #94a3b8; }



/* Responsive */

@media (max-width: 768px) {

  .blog-post-title { font-size: 1.75rem; }

  .blog-grid { grid-template-columns: 1fr; }

  .blog-section { padding: 100px 0 60px; }

}