/* ==========================================================================
   Tandem Article Page Styles (`article.css`)
   ========================================================================== */

/* --- 1. Article Page Layout & Container --- */
.article-page-content {
  padding-top: calc(80px + var(--space-3xl));
  padding-bottom: var(--space-4xl);
  position: relative;
}

/* Breadcrumbs Bar */
.article-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xl);
  font-size: 14px;
  text-transform: uppercase;
}

.article-breadcrumbs a {
  color: var(--text-white);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.article-breadcrumbs a:hover {
  opacity: 1;
  color: var(--primary-purple);
}

.article-breadcrumbs-separator {
  color: var(--secondary-grey-purple);
  opacity: 0.5;
}

.article-breadcrumbs-current {
  color: var(--secondary-grey-purple);
  opacity: 0.9;
}

/* --- 2. Main Article Grid Layout --- */
.article-layout-grid {
  display: flex;
  gap: var(--space-3xl);
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.article-main-column {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Right sidebar column - width: 360px */
.article-sidebar-column {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: sticky;
  top: 100px;
}

@media (max-width: 1200px) {
  .article-layout-grid {
    flex-direction: column;
    gap: var(--space-3xl);
  }

  .article-sidebar-column {
    width: 100%;
    position: static;
  }
}

/* --- 3. Featured Main Article Banner --- */
.article-featured-media {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sharp);
  border: 1px solid var(--border-glass);
  margin-bottom: var(--space-md);
}

.article-featured-media img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

.article-header-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.article-category-tag {
  color: var(--primary-purple);
  text-transform: uppercase;
  margin: 0;
}

/* Standard paragraph meta info with opacity */
.article-meta-info {
  margin: 0;
  opacity: 0.7;
}

/* --- 4. Article Body Content & Headings Hierarchy --- */
.article-body {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.article-body div,
.article-body section,
.article-body article {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

/* H2 - Main Section Titles (Clean Normal Case, 32px, bold reading hierarchy) */
.article-body h2 {
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.3;
  color: var(--text-white);
  text-transform: none;
  letter-spacing: normal;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}

@media (max-width: 768px) {
  .article-body h2 {
    font-size: 24px;
  }
}

/* H3 - Subsections (Expressive & bold, 22px) */
.article-body h3 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  color: var(--text-white);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
}

/* H4 - Feature & Step Section Headers (Clean White/SemiBold 18px) */
.article-body h4 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-white);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.article-body p {
  margin: 0 0 var(--space-md) 0;
}

/* Quote Box / Gutenberg Blockquote */
.article-quote-box,
.article-body blockquote {
  background: var(--bg-card-glass);
  border-left: 3px solid var(--primary-purple);
  border-top: 1px solid var(--border-glass);
  border-right: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  border-radius: var(--radius-sharp);
  padding: var(--space-xl);
  margin: var(--space-md) 0;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.article-quote-box p,
.article-body blockquote p {
  font-style: italic;
  margin: 0;
  color: var(--text-white);
}

/* Article Lists (Ordered & Unordered) */
.article-body li {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-white);
}

.article-body ol {
  list-style: none;
  counter-reset: article-counter;
  padding-left: 0;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.article-body ol li {
  counter-increment: article-counter;
  position: relative;
  padding-left: calc(32px + var(--space-sm));
  margin-bottom: var(--space-md);
  line-height: 1.35;
}

.article-body ol li::before {
  content: counter(article-counter);
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: rgba(var(--primary-purple-rgb), 0.1);
  border: 1px solid rgba(var(--primary-purple-rgb), 0.3);
  border-radius: var(--radius-sharp);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--primary-purple);
  position: absolute;
  left: 0;
  top: calc((1em * 1.35 - 32px) / 2);
}

.article-body ul {
  list-style: none;
  padding-left: 0;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.article-body ul li {
  list-style-type: none;
  line-height: 1.35;
  margin-bottom: var(--space-md);
  padding-left: calc(32px + var(--space-sm));
  position: relative;
}

.article-body ul li::before {
  position: absolute;
  content: "";
  width: 32px;
  height: 32px;
  left: 0;
  top: calc((1em * 1.35 - 32px) / 2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Crect width='32' height='32' fill='%23923AFF' fill-opacity='0.1'/%3E%3Crect x='0.5' y='0.5' width='31' height='31' stroke='%23923AFF' stroke-opacity='0.3'/%3E%3Cpath d='M22.5692 13.4456L15.2046 20.5859C14.91 20.8572 14.5418 21 14.1589 21C13.7759 21 13.4077 20.8572 13.1131 20.5859L9.43083 17.0157C8.85639 16.4588 8.85639 15.5448 9.43083 14.9879C10.0053 14.4309 10.9479 14.4309 11.5224 14.9879L14.1589 17.5584L20.4776 11.4177C21.0521 10.8608 21.9947 10.8608 22.5692 11.4177C23.1436 11.9747 23.1436 12.8886 22.5692 13.4456Z' fill='%23923AFF'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.article-body ul li strong {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--text-white);
  margin: 0;
  line-height: 1.2;
  display: inline-block;
  margin-bottom: var(--space-xs);
}

@media (max-width: 768px) {

  .article-body ol li,
  .article-body ul li {
    padding-left: calc(24px + var(--space-sm));
  }

  .article-body ol li::before,
  .article-body ul li::before {
    width: 24px;
    height: 24px;
    top: calc((1em * 1.35 - 24px) / 2);
  }
}

/* Article Body Images */
.article-body img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* WordPress Tables & Block Table */
.article-body .wp-block-table,
.article-body figure {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: var(--space-xl) 0;
  padding-bottom: var(--space-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-purple) rgba(255, 255, 255, 0.05);
}

.article-body .wp-block-table::-webkit-scrollbar,
.article-body figure::-webkit-scrollbar {
  height: 6px;
}

.article-body .wp-block-table::-webkit-scrollbar-track,
.article-body figure::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sharp);
}

.article-body .wp-block-table::-webkit-scrollbar-thumb,
.article-body figure::-webkit-scrollbar-thumb {
  background: var(--primary-purple);
  border-radius: var(--radius-sharp);
}

.article-body table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
  border: none;
  margin: 0;
}

.article-body figure table {
  margin: 0;
}

.article-body thead th,
.article-body th {
  background: var(--bg-card-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-sharp);
  border: none;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text-white);
  text-align: left;
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: break-word;
}

.article-body tbody td,
.article-body td {
  background: var(--bg-card-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-sharp);
  border: none;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-white);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: break-word;
}

.article-body tbody td strong,
.article-body td strong {
  font-weight: 300;
}

@media (max-width: 768px) {

  .article-body thead th,
  .article-body th,
  .article-body tbody td,
  .article-body td {
    padding: var(--space-sm) var(--space-md);
  }
}

/* Inline Article Image */
.article-inline-image {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sharp);
  border: 1px solid var(--border-glass);
  margin: var(--space-md) 0;
}

.article-inline-image img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  display: block;
}

/* --- 5. Sidebar Related Articles --- */
.article-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.article-sidebar-column .blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: #0f0b12;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sharp);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.article-sidebar-column .blog-card:hover {
  border-color: rgba(146, 58, 255, 0.5);
}

.article-sidebar-column .blog-card-img-wrapper {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.article-sidebar-column .blog-card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.article-sidebar-column .blog-card:hover .blog-card-img-wrapper img {
  transform: scale(1.04);
}

.article-sidebar-column .blog-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  flex: 1;
}

.article-sidebar-column .blog-card-category {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--primary-purple);
  margin: 0;
}

.article-sidebar-column .blog-card-title {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-white);
  margin: 0;
  line-height: 1.3;
}

.article-sidebar-column .blog-card-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: #5c5169;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 13px;
}

.article-sidebar-column .blog-card-meta-dot {
  width: 4px;
  height: 4px;
  background-color: #5c5169;
  border-radius: 50%;
  display: inline-block;
}

.article-sidebar-column .blog-card-excerpt {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  color: #a0a0a0;
  margin: 0;
}

/* Mobile & Tablet (<= 1200px): Strictly override JS inline styles to disable 3D Tilt & Hover completely */
@media (max-width: 1200px),
(hover: none) {

  body .blog-card,
  body .blog-card:hover,
  body .article-sidebar-column .blog-card,
  body .article-sidebar-column .blog-card:hover,
  body .blog-card-img-wrapper img,
  body .blog-card:hover .blog-card-img-wrapper img {
    transform: none !important;
    transition: none !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  body .blog-card .card-border-svg {
    display: none !important;
  }
}