/**
 * ============================================================================
 * ARTICLE DISPLAY - FULL ARTICLE CONTENT STYLING
 * ============================================================================
 * Styles for displaying complete article content with rich text formatting.
 * Includes header, metadata, content area with typography, and empty state.
 * 
 * CONTENT SUPPORT:
 * - Headings (h1-h6)
 * - Paragraphs with proper spacing
 * - Lists (ordered and unordered)
 * - Links with custom styling
 * - Images with responsive sizing
 * - Blockquotes
 * - Code blocks (inline and multi-line)
 * - Text formatting (bold, italic, underline)
 * - Horizontal rules
 * ============================================================================
 */

/* ========================================================================== */
/* MAIN CONTAINER - ARTICLE WRAPPER */
/* ========================================================================== */
.article-display {
  background-color: #191919; /* Dark gray background */
  padding: 40px; /* Internal spacing */
  max-width: 100%; /* Prevent overflow */
}

/* ========================================================================== */
/* ARTICLE HEADER - TITLE, CATEGORY, METADATA SECTION */
/* ========================================================================== */
.article-display__header {
  margin-bottom: 30px; /* Space before content */
}

/* CATEGORY BADGE - ARTICLE CLASSIFICATION */
.article-display__category {
  display: inline-block; /* Inline but with block properties */
  background-color: #000000; /* Black background */
  color: #ffffff; /* White text */
  padding: 8px 16px; /* Internal spacing */
  font-size: 11px; /* Small text */
  font-weight: 500; /* Medium weight */
  text-transform: uppercase; /* ALL CAPS */
  letter-spacing: 1px; /* Spaced letters */
  margin-bottom: 16px; /* Space below */
}

/* ARTICLE TITLE - MAIN HEADING */
.article-display__title {
  font-size: 42px; /* Large, prominent */
  font-weight: 900; /* Heavy weight */
  line-height: 1.2; /* Tight line spacing */
  color: #ffffff; /* White text */
  margin: 0 0 20px 0; /* Bottom margin only */
}

/* METADATA SECTION - DATE AND AUTHOR */
.article-display__meta {
  display: flex; /* Horizontal layout */
  align-items: center; /* Vertically center */
  gap: 20px; /* Space between items */
  color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
  font-size: 13px; /* Small text */
  font-weight: 400; /* Regular weight */
}

.article-display__date {
  display: block; /* Block-level */
}

.article-display__author {
  display: block; /* Block-level */
}

/* ========================================================================== */
/* THUMBNAIL IMAGE WRAPPER */
/* ========================================================================== */
.article-display__thumbnail-wrapper {
  margin: 30px 0; /* Vertical spacing */
  width: 100%; /* Full width */
  overflow: hidden; /* Hide excess */
  background-color: #000000; /* Black background for loading state */
}

/* Featured image */
.article-display__thumbnail {
  width: 100%; /* Full width */
  height: auto; /* Maintain aspect ratio */
  max-height: 500px; /* Limit height */
  object-fit: cover; /* Crop to fit */
  display: block; /* Remove inline spacing */
}

/* ========================================================================== */
/* ARTICLE CONTENT - RICH TEXT AREA */
/* ========================================================================== */
.article-display__content {
  font-size: 16px; /* Readable base size */
  line-height: 1.8; /* Generous line spacing for readability */
  color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
  margin-top: 30px; /* Space from header */
}

/* PARAGRAPHS */
.article-display__content p {
  margin: 0 0 20px 0; /* Bottom spacing between paragraphs */
}

.article-display__content p:last-child {
  margin-bottom: 0; /* Remove margin from last paragraph */
}

/* HEADINGS - H1 AND H2 */
.article-display__content h1,
.article-display__content h2 {
  font-size: 28px; /* Large section headings */
  font-weight: 900; /* Heavy weight */
  margin: 40px 0 20px 0; /* Extra top spacing for visual separation */
  color: #ffffff; /* Pure white for emphasis */
}

/* HEADING - H3 */
.article-display__content h3 {
  font-size: 22px; /* Medium heading */
  font-weight: 700; /* Bold */
  margin: 30px 0 15px 0; /* Moderate spacing */
  color: #ffffff; /* White text */
}

/* HEADINGS - H4, H5, H6 */
.article-display__content h4,
.article-display__content h5,
.article-display__content h6 {
  font-size: 18px; /* Smaller headings */
  font-weight: 700; /* Bold */
  margin: 25px 0 12px 0; /* Minimal spacing */
  color: #ffffff; /* White text */
}

/* LISTS - ORDERED AND UNORDERED */
.article-display__content ul,
.article-display__content ol {
  margin: 20px 0; /* Vertical spacing */
  padding-left: 30px; /* Indent for bullets/numbers */
  color: rgba(255, 255, 255, 0.8); /* Match body text */
}

/* LIST ITEMS */
.article-display__content li {
  margin-bottom: 10px; /* Space between list items */
}

/* LINKS */
.article-display__content a {
  color: #87ceeb; /* Sky blue for visibility */
  text-decoration: none; /* Remove underline */
  font-weight: 700; /* Bold for emphasis */
}

/* IMAGES IN CONTENT */
.article-display__content img {
  max-width: 100%; /* Responsive - never exceed container */
  height: auto; /* Maintain aspect ratio */
  margin: 20px 0; /* Vertical spacing */
  background-color: #000000; /* Black background while loading */
}

/* BLOCKQUOTES */
.article-display__content blockquote {
  border-left: 3px solid #000000; /* Left accent border */
  padding-left: 20px; /* Indent from border */
  margin: 30px 0; /* Vertical spacing */
  font-style: italic; /* Italicize quoted text */
  color: rgba(255, 255, 255, 0.6); /* Dimmer than body text */
}

/* INLINE CODE */
.article-display__content code {
  background-color: #000000; /* Black background */
  color: #ffffff; /* White text */
  padding: 2px 6px; /* Small internal spacing */
  font-size: 14px; /* Slightly smaller */
}

/* CODE BLOCKS */
.article-display__content pre {
  background-color: #000000; /* Black background */
  color: #ffffff; /* White text */
  padding: 20px; /* Generous internal spacing */
  overflow-x: auto; /* Horizontal scroll for long lines */
  margin: 20px 0; /* Vertical spacing */
}

/* Code inside pre blocks */
.article-display__content pre code {
  background: none; /* Remove background (pre has it) */
  padding: 0; /* Remove padding (pre has it) */
}

/* STRONG/BOLD TEXT */
.article-display__content strong {
  font-weight: 700; /* Bold */
  color: #ffffff; /* Pure white for emphasis */
}

/* ITALIC TEXT */
.article-display__content em {
  font-style: italic; /* Italicize */
}

/* UNDERLINED TEXT */
.article-display__content u {
  text-decoration: underline; /* Underline */
}

/* HORIZONTAL RULE */
.article-display__content hr {
  border: none; /* Remove default border */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle divider */
  margin: 30px 0; /* Vertical spacing */
}

/* ========================================================================== */
/* EMPTY STATE - ARTICLE NOT FOUND */
/* ========================================================================== */
.article-display__empty {
  text-align: center; /* Center all content */
  padding: 80px 20px; /* Generous padding */
}

.article-display__empty-title {
  font-size: 28px; /* Large heading */
  font-weight: 900; /* Heavy weight */
  color: #ffffff; /* White text */
  margin: 0 0 15px 0; /* Bottom spacing */
}

.article-display__empty-message {
  font-size: 16px; /* Readable size */
  color: rgba(255, 255, 255, 0.6); /* Dimmed text */
  margin: 0 0 30px 0; /* Bottom spacing */
}

.article-display__empty-link {
  display: inline-block; /* Inline but with block properties */
  background-color: #000000; /* Black background */
  color: #ffffff; /* White text */
  padding: 12px 30px; /* Button-like padding */
  text-decoration: none; /* Remove underline */
  font-weight: 500; /* Medium weight */
  font-size: 14px; /* Button text size */
  text-transform: uppercase; /* ALL CAPS */
  letter-spacing: 1px; /* Spaced letters */
}