/* =============================================================================
   NARROW PAGE TEMPLATE STYLES
   Matches single post layout for consistent page styling
   ============================================================================= */

/* ===== PAGE STRUCTURE ===== */
.narrow-page-main .container {
  max-width: 1240px !important;
}

.narrow-page-main .container .row .narrow-page-article,
.narrow-page-article {
  max-width: 1200px !important;
  margin: 0 auto;
  padding: var(--houtini-spacing-xl) 0;
}

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

/* ===== PAGE HEADER ===== */
.narrow-page-article .article-header {
  text-align: center;
  padding-bottom: var(--houtini-spacing-lg);
  border-bottom: 1px solid var(--houtini-gray-200);
}

.narrow-page-article .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);
  color: var(--houtini-gray-900);
}

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

.narrow-page-article .article-meta {
  font-size: var(--houtini-font-size-sm);
  color: var(--houtini-gray-500);
}

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

/* Typography - inherit from single-post.css styles */
.narrow-page-article .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);
}

.narrow-page-article .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);
}

.narrow-page-article .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);
}

.narrow-page-article .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);
}

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

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

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

.narrow-page-article .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);
}

.narrow-page-article .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;
}

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

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .narrow-page-article {
    padding: var(--houtini-spacing-lg) var(--houtini-spacing-md);
  }
  
  .narrow-page-article .article-title {
    font-size: var(--houtini-font-size-3xl);
  }
  
  .narrow-page-article .article-content h2 {
    font-size: var(--houtini-font-size-2xl);
  }
  
  .narrow-page-article .article-content h3 {
    font-size: var(--houtini-font-size-xl);
  }
}

/* ===== DARK MODE ===== */
.dark-theme .narrow-page-article .article-header {
  border-bottom-color: var(--houtini-gray-800);
}

.dark-theme .narrow-page-article .article-title {
  color: var(--houtini-gray-100);
}

.dark-theme .narrow-page-article .article-subtitle {
  color: var(--houtini-gray-400);
}

.dark-theme .narrow-page-article .article-content p {
  color: var(--houtini-gray-300);
}

.dark-theme .narrow-page-article .article-content blockquote {
  background: var(--houtini-gray-800);
  color: var(--houtini-gray-300);
}

.dark-theme .narrow-page-article .article-content code {
  background: var(--houtini-gray-800);
  color: var(--houtini-primary-light);
}