/* =========================================================
Tech Journey
article.css

Article Page
========================================================= */

/* =========================================================
Article Container
========================================================= */

.article-container {
  max-width: 1000px;
}

/* =========================================================
Breadcrumb
========================================================= */

.article-breadcrumb {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

  padding: 30px 0;

  font-size: 13px;

  opacity: 0.6;
}

.article-breadcrumb a {
  text-decoration: none;
}

/* =========================================================
Article
========================================================= */

.article {
  max-width: 820px;

  margin: 0 auto;
}

/* =========================================================
Article Header
========================================================= */

.article-header {
  padding: 80px 0 90px;
}

.article-category {
  margin-bottom: 22px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.14em;

  color: #667eea;

  opacity: 0.9;
}

.article-header h1 {
  margin-bottom: 32px;

  font-size: clamp(42px, 6vw, 72px);

  line-height: 1.2;

  letter-spacing: -0.04em;
}

.article-lead {
  max-width: 700px;

  font-size: 18px;

  line-height: 2;

  opacity: 0.7;
}

/* =========================================================
Meta
========================================================= */

.article-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 30px;
}

.article-meta span {
  padding: 7px 12px;

  border: 1px solid rgba(102, 126, 234, 0.25);

  border-radius: 999px;

  font-size: 11px;

  letter-spacing: 0.06em;

  color: #667eea;

  background: rgba(102, 126, 234, 0.06);
}

/* =========================================================
Article Body
========================================================= */

.article-body {
  font-size: 16px;

  line-height: 2;
}

.article-body section {
  margin-bottom: 100px;
}

.article-body p {
  margin-bottom: 24px;
}

/* =========================================================
Article Label
========================================================= */

.article-label {
  display: inline-block;

  margin-bottom: 14px !important;

  padding: 6px 12px;

  border-left: 3px solid #6b7cff;

  border-radius: 4px;

  background: rgba(107, 124, 255, 0.08);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.14em;

  line-height: 1.4;

  opacity: 0.85;
}

/* =========================================================
Heading
========================================================= */

.article-body h2 {
  margin-bottom: 32px;

  font-size: clamp(30px, 4vw, 44px);

  line-height: 1.4;

  letter-spacing: -0.03em;
}

/* =========================================================
Inline Code
========================================================= */

.article-body code {
  padding: 2px 6px;

  border-radius: 5px;

  background: rgba(102, 126, 234, 0.08);

  color: #5b6fd8;

  font-family: Consolas, "Courier New", monospace;

  font-size: 0.9em;
}

/* =========================================================
Code Block
========================================================= */

.article-body pre {
  position: relative;

  margin: 35px 0;

  padding: 28px 30px;

  overflow-x: auto;

  border-radius: 14px;

  border: 1px solid rgba(102, 126, 234, 0.18);

  background: #17191d;

  color: #f4f4f4;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Code block accent */

.article-body pre::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 3px;

  background: linear-gradient(90deg, #667eea, #764ba2);
}

/* Code block code */

.article-body pre code {
  padding: 0;

  background: transparent;

  color: inherit;

  font-size: 14px;

  line-height: 1.8;
}

/* =========================================================
Blockquote
========================================================= */

.article-body blockquote {
  margin: 35px 0;

  padding: 25px 30px;

  border-left: 4px solid #667eea;

  background: rgba(102, 126, 234, 0.06);

  font-size: 17px;

  line-height: 2;
}

/* =========================================================
Note
========================================================= */

.article-note {
  margin: 35px 0;

  padding: 28px 30px;

  border: 1px solid rgba(102, 126, 234, 0.22);

  border-radius: 14px;

  background: rgba(102, 126, 234, 0.05);
}

.article-note strong {
  display: block;

  margin-bottom: 10px;

  font-size: 13px;

  letter-spacing: 0.08em;

  color: #667eea;
}

.article-note p {
  margin-bottom: 0;
}

.article-note.warning {
  border-color: rgba(180, 140, 70, 0.3);

  background: rgba(180, 140, 70, 0.05);
}

/* =========================================================
Comparison
========================================================= */

.comparison {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;

  margin: 35px 0;
}

.comparison > div {
  padding: 28px;

  border: 1px solid rgba(102, 126, 234, 0.18);

  border-radius: 14px;

  background: rgba(102, 126, 234, 0.035);
}

.comparison span {
  display: block;

  margin-bottom: 12px;

  font-family: Consolas, "Courier New", monospace;

  font-size: 14px;

  color: #667eea;

  opacity: 0.75;
}

.comparison strong {
  font-size: 20px;
}

/* =========================================================
Field Note
========================================================= */

.article-field-note {
  margin-top: 120px;

  padding: 60px;

  border: 1px solid rgba(102, 126, 234, 0.15);

  border-radius: 24px;

  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1),
    rgba(118, 75, 162, 0.05)
  );
}

.article-field-note h2 {
  margin-bottom: 30px;
}

.article-field-note .large-text {
  font-size: 22px;

  line-height: 1.8;
}

/* =========================================================
Links
========================================================= */

.article-body a,
.article-body a:visited,
.intro a,
.intro a:visited,
.story a,
.story a:visited {
  color: #667eea;

  text-decoration: underline;

  text-decoration-color: rgba(102, 126, 234, 0.35);

  text-underline-offset: 3px;
}

/* =========================================================
Article Navigation
========================================================= */

.article-navigation {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin: 100px 0 40px;

  padding-top: 30px;

  border-top: 1px solid rgba(127, 127, 127, 0.18);
}

.article-navigation a {
  font-size: 14px;

  font-weight: 600;

  color: inherit;

  text-decoration: none;
}

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

/* =========================================================
Code Block
========================================================= */

.code-block {
  margin: 32px 0;

  border: 1px solid #2d3748;

  border-radius: 10px;

  overflow: hidden;

  background: #111827;
}

.code-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10px 16px;

  background: #1f2937;

  border-bottom: 1px solid #374151;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.08em;

  color: #9ca3af;
}

.code-block pre {
  margin: 0;

  padding: 20px;

  overflow-x: auto;

  background: transparent;
}

.code-block code {
  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;

  font-size: 14px;

  line-height: 1.8;

  color: #e5e7eb;

  white-space: pre;
}

/* =========================================================
Inline Code
========================================================= */

.intro p code,
.story p code {
  padding: 2px 6px;

  border-radius: 4px;

  background: #f1f5f9;

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;

  font-size: 0.9em;

  color: #1e293b;
}

/* =========================================================
Responsive
========================================================= */

@media (max-width: 700px) {

  .article-breadcrumb {
    padding: 20px 0;
  }

  .article-header {
    padding: 55px 0 65px;
  }

  .article-header h1 {
    font-size: 42px;
  }

  .article-lead {
    font-size: 15px;
  }

  .article-body {
    font-size: 15px;
  }

  .article-body section {
    margin-bottom: 70px;
  }

  .article-body h2 {
    font-size: 30px;
  }

  .article-body pre {
    padding: 22px;

    margin: 28px 0;
  }

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

  .article-field-note {
    padding: 35px 25px;

    border-radius: 18px;
  }

  .article-field-note .large-text {
    font-size: 19px;
  }

  .article-navigation {
    flex-direction: column;

    margin-top: 70px;
  }

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