/* ========================================
   Bruviti Article Component System
   Unified styling for all content types
   BEM methodology with design system compliance
   ======================================== */

/* ========================================
   1. BASE ARTICLE CONTAINER
   ======================================== */

.article {
  width: 100%;
  max-width: var(--container-md);
  margin: 0 auto;
  padding: var(--space-11) var(--space-4) var(--space-9);
  color: var(--text-white);
}

.article__container {
  max-width: 1000px;  /* Unified width for all content types */
  margin: 0 auto;
}

/* ========================================
   2. TYPOGRAPHY HIERARCHY
   ======================================== */

/* Heading Styles */
.article h1,
.article__title {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-white);
  margin: 0 0 var(--space-6) 0;
  letter-spacing: -0.02em;
}

.article h2,
.article__heading--secondary {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--text-white);
  margin: var(--space-8) 0 var(--space-5) 0;
  letter-spacing: -0.01em;
}

.article h3,
.article__heading--tertiary {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--text-white);
  margin: var(--space-6) 0 var(--space-4) 0;
}

.article h4,
.article__heading--quaternary {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--text-white);
  margin: var(--space-5) 0 var(--space-3) 0;
}

.article h5,
.article__heading--quinary {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--text-subtle);
  margin: var(--space-4) 0 var(--space-3) 0;
}

.article h6 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  color: var(--text-subtle);
  margin: var(--space-4) 0 var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Body Text */
.article p,
.article__paragraph {
  font-size: var(--text-lg);  /* 1.125rem - 18px to match main.css */
  line-height: 1.75;  /* Match main.css paragraph line-height */
  color: var(--light-gray);
  margin: 0 0 var(--space-5) 0;
  font-weight: 300;  /* Match main.css paragraph weight */
  letter-spacing: 0.01em;  /* Match main.css paragraph letter-spacing */
}

.article__lead {
  font-size: var(--text-xl);  /* 1.25rem - Larger than body text */
  line-height: 1.75;
  color: var(--text-subtle);
  margin: 0 0 var(--space-6) 0;
  font-weight: var(--font-normal);
}

/* Lists */
.article ul,
.article ol,
.article__list {
  margin: 0 0 var(--space-5) 0;
  padding-left: var(--space-6);
  color: var(--light-gray);
  font-size: var(--text-lg);  /* 1.125rem - Match paragraph size */
  line-height: 1.75;  /* Match paragraph line-height */
}

.article li,
.article__list-item {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-lg);  /* 1.125rem - Explicit size to match paragraphs */
  line-height: 1.75;  /* Match paragraph line-height */
  color: var(--light-gray);  /* Explicit color for consistency */
  font-weight: 300;  /* Match paragraph weight */
  letter-spacing: 0.01em;  /* Match paragraph letter-spacing */
}

.article ul ul,
.article ol ol,
.article ul ol,
.article ol ul {
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* Links */
.article a,
.article__link {
  color: var(--accent-orange);
  text-decoration: none;  /* No underline by default */
  transition: opacity 0.2s ease;
}

.article a:hover,
.article__link:hover {
  opacity: 0.8;
  text-decoration: underline;  /* Simple underline on hover */
}

/* Blockquotes */
.article blockquote,
.article__blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--secondary-dark);
  border-left: 4px solid var(--accent-orange);
  font-style: italic;
  color: var(--text-subtle);
  font-size: var(--text-lg);  /* Match body text size */
  line-height: 1.75;  /* Match paragraph line-height */
}

.article blockquote p:last-child {
  margin-bottom: 0;
}

/* Code */
.article code,
.article__code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--secondary-dark);
  padding: var(--space-1) var(--space-2);
  border-radius: 0;  /* Sharp corners */
  color: var(--accent-orange);
  border: 1px solid var(--medium-gray);
}

.article pre,
.article__code-block {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  background: var(--secondary-dark);
  border-radius: 0;  /* Sharp corners */
  overflow-x: auto;
  border: 1px solid var(--medium-gray);
  border-left-width: 3px;
  border-left-color: var(--accent-orange);
}

.article pre code {
  background: none;
  padding: 0;
  color: var(--text-white);
}

/* ========================================
   3. CONTENT COMPONENTS
   ======================================== */

/* Article Header */
.article__header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--medium-gray);
}

/* Article Category Tag - Matches use-case-badge styling */
.article__header .article__tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 107, 53, 0.1);  /* 10% opacity of accent-orange */
  border: 1px solid var(--accent-orange);
  color: var(--accent-orange);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: flex-start;
  margin-bottom: var(--space-3);
}

/* Article Meta */
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--light-gray);
}

.article__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.article__meta-label {
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.article__meta-value {
  color: var(--text-subtle);
}

/* Article Intro */
.article__intro {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--text-subtle);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--medium-gray);
}

/* Article Body */
.article__body {
  margin-bottom: var(--space-8);
}

/* Article Section */
.article__section {
  margin: var(--space-8) 0;
}

.article__section-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-white);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--medium-gray);
}

/* Article Footer */
.article__footer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--medium-gray);
}

/* Navigation */
.article__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--space-8) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--medium-gray);
  border-bottom: 1px solid var(--medium-gray);
}

.article__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--accent-orange);
  text-decoration: none;
  transition: opacity 0.2s ease;
  max-width: 45%;
}

.article__nav-link:hover {
  opacity: 0.8;
}

.article__nav-label {
  font-size: var(--text-sm);
  color: var(--light-gray);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article__nav-title {
  font-size: var(--text-base);
  color: var(--text-white);
  line-height: var(--leading-snug);
}

/* Breadcrumb */
.article__breadcrumb {
  max-width: var(--container-md);
  margin: 80px auto var(--space-6) auto;
  padding: var(--space-4) var(--space-4);
  font-size: var(--text-sm);
}

.article__breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.article__breadcrumb-item {
  margin: 0;
}

.article__breadcrumb-link {
  color: var(--light-gray);
  text-decoration: none;
  transition: color 0.2s ease;
}

.article__breadcrumb-link:hover {
  color: var(--accent-orange);
  border-bottom: none;
}

.article__breadcrumb-separator {
  color: var(--medium-gray);
}

.article__breadcrumb-current {
  color: var(--text-white);
}

/* Featured Image */
.article__featured-image {
  width: 100%;
  height: auto;
  margin-bottom: var(--space-6);
  border-radius: 0;  /* Sharp corners for minimal aesthetic */
}

/* Call to Action */
.article__cta {
  background: var(--secondary-dark);
  padding: var(--space-6);
  border-radius: 0;  /* Sharp corners for minimal aesthetic */
  margin: var(--space-8) 0;
  text-align: center;
  border: 1px solid var(--medium-gray);
  border-bottom-width: 2px;
}

.article__cta-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-white);
  margin-bottom: var(--space-3);
}

.article__cta-text {
  font-size: var(--text-base);
  color: var(--light-gray);
  margin-bottom: var(--space-5);
}

.article__cta-button {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: var(--accent-orange);
  color: var(--text-white);
  text-decoration: none;
  border-radius: 0;  /* Sharp corners */
  font-weight: var(--font-medium);
  transition: background-color 0.2s ease;
  border: 1px solid var(--accent-orange);
}

.article__cta-button:hover {
  background: transparent;
  color: var(--accent-orange);
  border-color: var(--accent-orange);
}

/* Highlight Box */
.article__highlight {
  background: var(--secondary-dark);
  padding: var(--space-5);
  border-radius: 0;  /* Sharp corners for minimal aesthetic */
  margin: var(--space-6) 0;
  border-left: 4px solid var(--accent-orange);
  border-top: 1px solid var(--medium-gray);
  border-right: 1px solid var(--medium-gray);
  border-bottom: 1px solid var(--medium-gray);
}

.article__highlight-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--accent-orange);
  margin-bottom: var(--space-3);
}

.article__highlight-text {
  color: var(--text-subtle);
  margin: 0;
}

/* Tags */
.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0;
}

.article__tags .article__tag {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: var(--secondary-dark);
  color: var(--light-gray);
  font-size: var(--text-sm);
  border-radius: 0;  /* Sharp corners for minimal aesthetic */
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  border: 1px solid var(--medium-gray);
}

.article__tags .article__tag:hover {
  background: var(--accent-orange);
  color: var(--text-white);
  border-color: var(--accent-orange);
}

/* Author Bio */
.article__author {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--secondary-dark);
  border-radius: 0;  /* Sharp corners for minimal aesthetic */
  margin: var(--space-6) 0;
  border: 1px solid var(--medium-gray);
}

.article__author-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.article__author-info {
  flex: 1;
}

.article__author-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-white);
  margin-bottom: var(--space-2);
}

.article__author-bio {
  font-size: var(--text-sm);
  color: var(--light-gray);
  line-height: var(--leading-relaxed);
}

/* ========================================
   4. CONTENT-TYPE MODIFIERS
   ======================================== */

/* =========================
   Blog Modifier - Functional Components Only
   ========================= */
/* No visual overrides - uses unified base styles */

/* Blog-specific functional component: featured image */
.article__featured-image {
  width: 100%;
  height: auto;  /* Allow natural height */
  max-width: 100%;  /* Responsive scaling */
  margin-bottom: var(--space-6);
  border-radius: 0;  /* Sharp corners */
  display: block;  /* Ensure proper display */
}

/* Blog-specific reading time component */
.article__reading-time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--secondary-dark);
  border-radius: 0;  /* Sharp corners */
  font-size: var(--text-sm);
  color: var(--light-gray);
  border: 1px solid var(--medium-gray);
}

/* Blog series navigation */
.article__series {
  padding: var(--space-5);
  background: var(--secondary-dark);
  border-radius: 0;  /* Sharp corners */
  margin-bottom: var(--space-6);
  border-left: 3px solid var(--accent-orange);
  border-top: 1px solid var(--medium-gray);
  border-right: 1px solid var(--medium-gray);
  border-bottom: 1px solid var(--medium-gray);
}

.article__series-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.article__series-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article__series-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--medium-gray);
}

.article__series-item:last-child {
  border-bottom: none;
}

.article__series-link {
  color: var(--light-gray);
  font-size: var(--text-sm);
}

.article__series-link--current {
  color: var(--text-white);
  font-weight: var(--font-medium);
}

/* =========================
   Impact Story Modifier - Functional Components Only
   ========================= */
/* No visual overrides - uses unified base styles */

/* Impact metrics showcase */
.article__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
  margin: var(--space-8) 0;
}

.article__metric {
  text-align: center;
  padding: var(--space-5);
  background: var(--secondary-dark);
  border-radius: 0;  /* Sharp corners */
  border: 1px solid var(--medium-gray);
  border-bottom-width: 2px;
  transition: border-color 0.2s ease;
}

.article__metric:hover {
  border-color: var(--light-gray);
  border-bottom-color: var(--light-gray);
}

.article__metric-value {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--text-white);
  margin-bottom: var(--space-2);
}

.article__metric-label {
  font-size: var(--text-sm);
  color: var(--light-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Functional component: Results section (usable by all content types) */
.article__results {
  background: var(--secondary-dark);
  border: 1px solid var(--medium-gray);
  border-left-width: 4px;
  padding: var(--space-6);
  margin: var(--space-8) 0;
  border-radius: 0;  /* Sharp corners */
}

.article__results-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-white);
  margin-bottom: var(--space-4);
}

.article__results-text {
  font-size: var(--text-lg);
  color: var(--text-white);
  line-height: var(--leading-relaxed);
}

/* Results Grid - Matching email-automation.html styling */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.result-metric {
  text-align: center;
  padding: var(--space-6);
  background: var(--secondary-dark);
  border: 1px solid var(--medium-gray);
  border-radius: 0;
}

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: var(--space-2);
  line-height: 1;
}

.metric-label {
  font-size: var(--text-sm);
  color: var(--light-gray);
  line-height: 1.4;
}

/* Article Subsection */
.article__subsection {
  margin-bottom: var(--space-8);
}

.article__subsection h3 {
  margin-bottom: var(--space-4);
}

/* Article Figure and Image Styles - Clean Natural Presentation */
.article__figure {
  text-align: center;  /* Center images horizontally */
  margin: 0 0 var(--space-6) 0;  /* Bottom margin for spacing between stacked images */
  display: block;  /* Ensure block-level for vertical stacking */
}

.article__image {
  display: inline-block;  /* Allow centering with text-align */
  width: auto;  /* Natural width */
  height: auto;  /* Natural height */
  max-width: 100%;  /* Responsive scaling to prevent overflow */
}

/* Related Use Cases - Simple Vertical Layout */
.article__related-link {
  display: block;  /* Stack links vertically */
  margin-bottom: var(--space-3);  /* Simple spacing between links */
  color: var(--accent-orange);
  text-decoration: none;
}

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

/* Customer quote styling */
.article__quote {
  position: relative;
  padding: var(--space-6);
  margin: var(--space-8) 0;
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--text-subtle);
  text-align: center;
}

.article__quote::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: var(--space-4);
  font-size: var(--text-6xl);
  color: var(--accent-orange);
  opacity: 0.3;
}

.article__quote-author {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-base);
  font-style: normal;
  color: var(--light-gray);
}

/* =========================
   Press Release Modifier - Functional Components Only
   ========================= */
/* No visual overrides - uses unified base styles */

/* Press contact info */
.article__contact {
  background: var(--secondary-dark);
  padding: var(--space-5);
  border-radius: 0;  /* Sharp corners */
  margin-top: var(--space-8);
  border: 1px solid var(--medium-gray);
  border-left-width: 3px;
}

.article__contact-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-white);
  margin-bottom: var(--space-4);
}

.article__contact-info {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--light-gray);
}

.article__contact-link {
  color: var(--accent-orange);
}

/* Boilerplate section */
.article__boilerplate {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 2px solid var(--medium-gray);
}

.article__boilerplate-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--light-gray);
  margin-bottom: var(--space-3);
}

/* =========================
   Webinar Modifier - Functional Components Only
   ========================= */
/* No visual overrides - uses unified base styles */

/* Video embed container */
.article__video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  margin: var(--space-6) 0;
  background: var(--secondary-dark);
  border-radius: 0;  /* Sharp corners */
  overflow: hidden;
  border: 1px solid var(--medium-gray);
}

.article__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Webinar info grid */
.article__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

.article__info-item {
  padding: var(--space-4);
  background: var(--secondary-dark);
  border-radius: 0;  /* Sharp corners */
  border: 1px solid var(--medium-gray);
  border-left-width: 2px;
}

.article__info-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--light-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.article__info-value {
  font-size: var(--text-base);
  color: var(--text-white);
}

/* Speaker profiles */
.article__speakers {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

.article__speaker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--secondary-dark);
  border-radius: 0;  /* Sharp corners */
  border-left: 2px solid var(--medium-gray);
}

.article__speaker-avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.article__speaker-info {
  flex: 1;
}

.article__speaker-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-white);
  margin-bottom: var(--space-1);
}

.article__speaker-title {
  font-size: var(--text-sm);
  color: var(--light-gray);
}

/* Registration CTA - sharp minimal design */
.article__register {
  background: var(--secondary-dark);
  padding: var(--space-6);
  border-radius: 0;  /* Sharp corners */
  text-align: center;
  margin: var(--space-8) 0;
  border: 1px solid var(--accent-orange);
  border-left-width: 4px;
}

.article__register-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-white);
  margin-bottom: var(--space-3);
}

.article__register-text {
  color: var(--light-gray);
  margin-bottom: var(--space-5);
}

.article__register-button {
  display: inline-block;
  padding: var(--space-3) var(--space-8);
  background: var(--accent-orange);
  color: var(--text-white);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border-radius: 0;  /* Sharp corners */
  transition: background-color 0.2s ease, color 0.2s ease;
  border: 2px solid var(--accent-orange);
}

.article__register-button:hover {
  background: transparent;
  color: var(--accent-orange);
}

/* =========================
   Use Case Modifier - Functional Components Only
   ========================= */
/* No visual overrides - uses unified base styles */

/* Use case hero with gradient overlay */
.article__hero {
  position: relative;
  margin: calc(var(--space-6) * -1) calc(var(--space-4) * -1) var(--space-8);
  height: 400px;
  background: var(--secondary-dark);
  overflow: hidden;
}

.article__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.article__hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-dark);
  opacity: 0.7;  /* Solid overlay with opacity instead of gradient */
}

.article__hero-content {
  position: absolute;
  bottom: var(--space-8);
  left: var(--space-8);
  right: var(--space-8);
}

/* Technical specifications */
.article__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0;
}

.article__spec-group {
  background: var(--secondary-dark);
  padding: var(--space-5);
  border-radius: 0;  /* Sharp corners */
  border: 1px solid var(--medium-gray);
}

.article__spec-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--accent-orange);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--medium-gray);
}

.article__spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article__spec-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(64, 64, 64, 0.5);
}

.article__spec-item:last-child {
  border-bottom: none;
}

.article__spec-label {
  font-size: var(--text-sm);
  color: var(--light-gray);
}

.article__spec-value {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-white);
}

/* Implementation timeline */
.article__timeline {
  position: relative;
  padding-left: var(--space-8);
  margin: var(--space-8) 0;
}

.article__timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--medium-gray);
}

.article__timeline-item {
  position: relative;
  margin-bottom: var(--space-6);
}

.article__timeline-item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-8) * -1 + 8px);
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent-orange);
  border: 2px solid var(--primary-dark);
}

.article__timeline-date {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.article__timeline-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-white);
  margin-bottom: var(--space-2);
}

.article__timeline-description {
  font-size: var(--text-base);
  color: var(--light-gray);
}

/* Code examples */
.article__code-example {
  background: var(--secondary-dark);
  border: 1px solid var(--medium-gray);
  border-radius: 0;  /* Sharp corners */
  margin: var(--space-6) 0;
  overflow: hidden;
}

.article__code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: rgba(64, 64, 64, 0.3);
  border-bottom: 1px solid var(--medium-gray);
}

.article__code-language {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--accent-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article__code-copy {
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--medium-gray);
  color: var(--light-gray);
  font-size: var(--text-sm);
  border-radius: 0;  /* Sharp corners */
  cursor: pointer;
  transition: all 0.2s ease;
}

.article__code-copy:hover {
  background: var(--accent-orange);
  color: var(--text-white);
  border-color: var(--accent-orange);
}

.article__code-body {
  padding: var(--space-4);
  overflow-x: auto;
}

/* ========================================
   5. RESPONSIVE BEHAVIOR
   ======================================== */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .article {
    padding: var(--space-10) var(--space-5) var(--space-8);
  }

  .article h1,
  .article__title {
    font-size: var(--text-4xl);
  }

  .article h2,
  .article__heading--secondary {
    font-size: var(--text-2xl);
  }

  .article h3,
  .article__heading--tertiary {
    font-size: var(--text-xl);
  }
  
  /* Results grid - tablet stays 3 columns */
  .results-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .article__nav {
    flex-direction: column;
    gap: var(--space-5);
  }

  .article__nav-link {
    max-width: 100%;
    width: 100%;
  }

  .article__author {
    flex-direction: column;
    text-align: center;
  }

  .article__breadcrumb {
    padding: var(--space-4) var(--space-5);
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .article {
    padding: var(--space-9) var(--space-4) var(--space-6);
  }

  .article h1,
  .article__title {
    font-size: var(--text-3xl);
  }

  .article h2,
  .article__heading--secondary {
    font-size: var(--text-2xl);
    margin: var(--space-6) 0 var(--space-4) 0;
  }

  .article h3,
  .article__heading--tertiary {
    font-size: var(--text-xl);
    margin: var(--space-5) 0 var(--space-3) 0;
  }
  
  /* Results grid - mobile responsive */
  .results-grid {
    grid-template-columns: 1fr;
  }
  
  .metric-value {
    font-size: 1.75rem;
  }

  .article p,
  .article__paragraph {
    margin-bottom: var(--space-4);
  }

  .article ul,
  .article ol,
  .article__list {
    padding-left: var(--space-5);
  }

  .article__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .article__cta {
    padding: var(--space-5);
  }

  .article__highlight {
    padding: var(--space-4);
  }

  .article__author-avatar {
    width: 60px;
    height: 60px;
  }

  .article__breadcrumb {
    margin-top: 70px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
  }

  .article blockquote,
  .article__blockquote {
    padding: var(--space-4) var(--space-5);
  }

  .article pre,
  .article__code-block {
    padding: var(--space-4);
    font-size: var(--text-sm);
  }
}

/* Large Desktop (> 1440px) */
@media (min-width: 1440px) {
  .article__container {
    max-width: 1200px;
  }
}

/* ========================================
   6. UTILITY CLASSES
   ======================================== */

/* Alignment */
.article--center {
  text-align: center;
}

.article--left {
  text-align: left;
}

.article--right {
  text-align: right;
}

/* Spacing Utilities */
.article--compact .article__section {
  margin: var(--space-6) 0;
}

.article--spacious .article__section {
  margin: var(--space-10) 0;
}

/* Dark Mode Variations */
.article--dark-accent {
  background: var(--secondary-dark);
}

.article--dark-accent .article__container {
  background: var(--primary-dark);
  padding: var(--space-6);
  border-radius: 0;  /* Sharp corners for minimal aesthetic */
  border: 1px solid var(--medium-gray);
}

/* Print Styles */
@media print {
  .article {
    background: white;
    color: black;
    padding: 0;
  }

  .article a {
    color: black;
    text-decoration: underline;
  }

  .article__nav,
  .article__cta,
  .article__tags,
  .article__breadcrumb {
    display: none;
  }
}

/* ========================================
   TABLE STYLES - Blog Support
   ======================================== */

.article__table-container {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border: 1px solid var(--medium-gray);
  border-radius: 0; /* Sharp corners */
  background: var(--secondary-dark);
}

.article__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  color: var(--light-gray);
}

.article__table th {
  background: rgba(64, 64, 64, 0.3);
  color: var(--text-white);
  font-weight: var(--font-semibold);
  padding: var(--space-4);
  text-align: left;
  border-bottom: 2px solid var(--medium-gray);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article__table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--medium-gray);
  vertical-align: top;
  line-height: 1.6;
}

.article__table tr:last-child td {
  border-bottom: none;
}

.article__table tr:hover {
  background: rgba(64, 64, 64, 0.2);
}

/* Responsive table behavior */
@media (max-width: 767px) {
  .article__table-container {
    font-size: var(--text-xs);
  }
  
  .article__table th,
  .article__table td {
    padding: var(--space-2) var(--space-3);
  }
}

/* ========================================
   FAQ STYLES - Simple Typography Hierarchy
   ======================================== */

.article__faq {
  margin: var(--space-6) 0;
}

.article__faq-item {
  margin-bottom: var(--space-6);
}

.article__faq-item:last-child {
  margin-bottom: 0;
}

.article__faq-question {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-white);
  margin: 0 0 var(--space-3) 0;
  line-height: var(--leading-snug);
}

.article__faq-answer {
  color: var(--light-gray);
  font-size: var(--text-lg);
  line-height: 1.75;
  margin: 0;
}

.article__faq-answer p {
  margin-bottom: var(--space-4);
}

.article__faq-answer p:last-child {
  margin-bottom: 0;
}

/* ========================================
   7. ANIMATION & TRANSITIONS
   ======================================== */

/* Smooth scroll for anchor links */
.article {
  scroll-behavior: smooth;
}

/* Fade in animation for sections */
.article__section {
  animation: articleFadeIn 0.6s ease-out;
}

@keyframes articleFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover effects with reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .article__section {
    animation: none;
  }
  
  .article a,
  .article__link,
  .article__nav-link,
  .article__cta-button,
  .article__tag {
    transition: none;
  }
}