/* =============================================================================
   SINGLE POST & ARTICLE TYPOGRAPHY
   Typography, meta information, content styling for single posts
   ============================================================================= */

/* ===== ARTICLE STRUCTURE ===== */
/* High specificity to override Bootstrap grid constraints */
.single-post-main .container .row .single-article,
.single-article {
  max-width: 1200px !important;
  margin: 0 auto;
  padding: var(--houtini-spacing-xl) 0;
}

/* Override Bootstrap column constraints for single posts */
.single-post-main .container .row .col-xl-11,
.single-post-main .container .row .col-lg-10,
.single-post-main .container .row .col-md-11 {
  max-width: 1200px !important;
  flex: 0 0 auto;
}

/* Ensure container doesn't limit us on large screens */
.single-post-main .container {
  max-width: 1240px !important; /* 1200px content + 20px padding each side */
}

.houtini-post-header {
  text-align: center;
  margin-bottom: var(--houtini-spacing-xl);
  padding-bottom: var(--houtini-spacing-lg);
  border-bottom: 1px solid var(--houtini-gray-200);
}

/* ===== CATEGORY BADGES ===== */
.category-badge {
  display: inline-block;
  padding: var(--houtini-spacing-xs) var(--houtini-spacing-sm);
  border-radius: var(--houtini-radius-full);
  font-size: var(--houtini-font-size-sm);
  font-weight: var(--houtini-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  margin-bottom: var(--houtini-spacing-md);
}

.category-badge.badge-primary {
  background: var(--houtini-primary);
  color: white;
}

.category-badge.badge-success {
  background: var(--houtini-secondary);
  color: white;
}

.category-badge.badge-dark {
  background: var(--houtini-gray-800);
  color: white;
}

/* ===== ARTICLE TITLES ===== */
.article-title {
  font-size: var(--houtini-font-size-4xl);
  font-weight: var(--houtini-font-weight-bold);
  line-height: var(--houtini-line-height-tight);
  margin-bottom: var(--houtini-spacing-sm);
}

.article-title.has-code-style {
  font-family: var(--houtini-font-mono);
  background: var(--houtini-gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article-subtitle {
  font-size: var(--houtini-font-size-xl);
  color: var(--houtini-gray-600);
  margin-bottom: var(--houtini-spacing-lg);
  line-height: var(--houtini-line-height-relaxed);
}

/* ===== ARTICLE META ===== */
.article-meta {
  display: flex;
  gap: var(--houtini-spacing-md);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: var(--houtini-font-size-sm);
  color: var(--houtini-gray-600);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--houtini-spacing-xs);
}

.meta-icon {
  color: var(--houtini-gray-500);
}

.author-link {
  color: var(--houtini-primary);
  text-decoration: none;
  font-weight: var(--houtini-font-weight-medium);
}

.author-link:hover {
  text-decoration: underline;
}

.reading-time {
  color: var(--houtini-gray-600);
}

.updated-time {
  font-style: italic;
  color: var(--houtini-gray-500);
}

/* ===== ARTICLE CONTENT ===== */
.article-content {
  margin-top: var(--houtini-spacing-xl);
}

.article-content h2 {
  font-size: var(--houtini-font-size-3xl);
  font-weight: var(--houtini-font-weight-semibold);
  margin-top: var(--houtini-spacing-3xl);
  margin-bottom: var(--houtini-spacing-lg);
  color: var(--houtini-primary);
}

.article-content h3 {
  font-size: var(--houtini-font-size-2xl);
  font-weight: var(--houtini-font-weight-semibold);
  margin-top: var(--houtini-spacing-2xl);
  margin-bottom: var(--houtini-spacing-md);
}

.article-content h4 {
  font-size: var(--houtini-font-size-xl);
  font-weight: var(--houtini-font-weight-semibold);
  margin-top: var(--houtini-spacing-xl);
  margin-bottom: var(--houtini-spacing-sm);
}

.article-content p {
  font-size: var(--houtini-font-size-lg);
  line-height: var(--houtini-line-height-relaxed);
  color: var(--houtini-gray-700);
  margin-bottom: var(--houtini-spacing-md);
}

.article-content ul,
.article-content ol {
  margin-bottom: var(--houtini-spacing-md);
  padding-left: var(--houtini-spacing-lg);
}

.article-content li {
  margin-bottom: var(--houtini-spacing-xs);
  line-height: var(--houtini-line-height-relaxed);
}

.article-content blockquote {
  border-left: 4px solid var(--houtini-primary);
  padding-left: var(--houtini-spacing-lg);
  margin: var(--houtini-spacing-lg) 0;
  font-style: italic;
  color: var(--houtini-gray-600);
  background: var(--houtini-gray-50);
  padding: var(--houtini-spacing-md) var(--houtini-spacing-lg);
  border-radius: 0 var(--houtini-radius-sm) var(--houtini-radius-sm) 0;
}

.article-content code {
  background: var(--houtini-gray-100);
  padding: var(--houtini-spacing-xs) var(--houtini-spacing-xs);
  border-radius: var(--houtini-radius-xs);
  font-family: var(--houtini-font-mono);
  font-size: 0.9em;
  color: var(--houtini-primary);
}

.article-content pre {
  background: var(--houtini-gray-900);
  color: var(--houtini-gray-100);
  padding: var(--houtini-spacing-lg);
  border-radius: var(--houtini-radius-md);
  overflow-x: auto;
  margin: var(--houtini-spacing-lg) 0;
  font-family: var(--houtini-font-mono);
  line-height: 1.6;
}

.article-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .single-article {
    padding: var(--houtini-spacing-lg) var(--houtini-spacing-md);
  }
  
  .article-title {
    font-size: var(--houtini-font-size-3xl);
  }
  
  .article-meta {
    flex-direction: column;
    gap: var(--houtini-spacing-xs);
  }
  
  .article-content h2 {
    font-size: var(--houtini-font-size-2xl);
  }
  
  .article-content h3 {
    font-size: var(--houtini-font-size-xl);
  }
}