/* =========================================================
   EDIUSFA — 17-ARTICLE
   Page-specific styles for the single article (single.php).
   -----------------------------------------------------------------
   Source of truth: ediusfa-article.html (ARTICLE DETAIL PAGE-SPECIFIC
   STYLES block, lines 812–950)
   -----------------------------------------------------------------
   NOTE: The following rules live in earlier files and are NOT
   redefined here (no duplication):
     - .pdp-container, .pdp-header, .pdp-breadcrumb-bar,
       .header-search-toggle, .comp-mobile-searchbar
       (03-components.css, 04-header.css, 12-archive.css)
     - .comp-footer overrides, .mobile-sticky-nav,
       body padding-bottom (05-footer.css)
     - .prod-card-cover, .prod-card .add-btn (03-components.css)
     - .article-thumb, .article-body, .article-date (03-components.css)
     - .article-card (03-components.css)
     - .accordion-item, .accordion-header, .accordion-icon,
       .accordion-panel (03-components.css)
     - .b-avatar (inline on byline + author-box; defined inline)
     - .badge, .track-tag, .btn, .icon-btn, .link-more, .price,
       .stars, .price-old, .price-free, .price-wrap (03-components.css)
     - .cta-banner, .cta-banner-left, .cta-banner-icon,
       .cta-banner-actions (11-homepage.css — overridden here with
       max-width:1040px)
     - .section-head (11-homepage.css)
   -----------------------------------------------------------------

   @package    EdiusFA
   @subpackage assets/css
   @since      0.7.0
   @version    0.7.0
   ========================================================= */

/* ---------- Article header block ---------- */
.article-header{max-width:760px; margin:36px auto 0; padding:0 4px;}
.article-header .track-tag{margin-bottom:16px;}
.article-header h1{font-size:clamp(24px,3.4vw,34px); font-weight:800; line-height:1.55; margin-bottom:16px;}
.article-excerpt{font-size:16px; color:var(--ink-dim); line-height:1.9; margin-bottom:22px;}
.article-byline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:0;}
.article-byline .b-avatar{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg, var(--cyan), var(--amber)); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--ink-on-accent); flex-shrink:0;}
.article-byline-meta b{font-size:13.5px; display:block;}
.article-byline-meta span{font-size:12px; color:var(--ink-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.article-byline-actions{margin-inline-start:auto; display:flex; gap:8px;}

/* ---------- Hero image ---------- */
.article-hero{max-width:900px; margin:26px auto; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-strong);}
.article-hero-media{aspect-ratio:21/9; background:linear-gradient(135deg, var(--cyan-900), var(--amber-900)); position:relative;}
.article-hero-caption{padding:10px 4px 0; font-size:11.5px; color:var(--ink-faint); text-align:center; max-width:900px; margin:0 auto;}

/* ---------- Content layout: TOC sidebar + reading column ---------- */
.article-layout{display:grid; grid-template-columns:220px 1fr; gap:44px; max-width:1040px; margin:36px auto 0; align-items:flex-start;}
@media (max-width:900px){ .article-layout{grid-template-columns:1fr;} }

.toc-desktop{position:sticky; top:96px; display:flex; flex-direction:column; gap:2px;}
@media (max-width:900px){ .toc-desktop{display:none;} }
.toc-desktop .toc-label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px;}
.toc-desktop a{
  font-size:13px; color:var(--ink-faint); padding:7px 0 7px 14px; border-inline-start:2px solid var(--line);
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.toc-desktop a:hover{color:var(--ink);}
.toc-desktop a.is-active{color:var(--cyan); border-color:var(--cyan); font-weight:600;}

.toc-mobile{display:none; margin:0 auto 8px; max-width:680px;}
@media (max-width:900px){ .toc-mobile{display:block;} }

/* ---------- Reading column ---------- */
.article-content{max-width:680px; margin:0 auto; font-size:16.5px; line-height:1.95; color:var(--ink-dim);}
.article-content h2{font-size:22px; font-weight:800; color:var(--ink); margin:40px 0 16px; scroll-margin-top:96px;}
.article-content h2:first-child{margin-top:0;}
.article-content h3{font-size:17.5px; font-weight:700; color:var(--ink); margin:28px 0 12px; scroll-margin-top:96px;}
.article-content p{margin-bottom:20px;}
.article-content ul, .article-content ol{margin:0 0 20px; padding-inline-start:22px; display:flex; flex-direction:column; gap:9px;}
.article-content li{padding-inline-start:4px;}
.article-content strong{color:var(--ink); font-weight:700;}
.article-content a.inline-link{color:var(--cyan); border-bottom:1px solid var(--line-cyan);}

.callout{
  background:var(--bg-elevated); border:1px solid var(--line); border-inline-start:3px solid var(--amber);
  border-radius:var(--radius-md); padding:18px 20px; margin:26px 0; font-size:14.5px; color:var(--ink-dim);
}
.callout b{color:var(--ink); display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:13.5px;}

/* ---------- Product Recommendation Component (inline) ---------- */
.inline-product-promo{
  display:flex; align-items:center; gap:16px; background:var(--bg-elevated); border:1px solid var(--line);
  border-inline-start:3px solid var(--cyan); border-radius:var(--radius-md); padding:16px; margin:30px 0;
}
@media (max-width:520px){ .inline-product-promo{flex-direction:column; align-items:stretch; text-align:center;} }
.ipp-thumb{
  width:76px; height:76px; border-radius:12px; flex-shrink:0; background:linear-gradient(135deg, var(--cyan-700), var(--amber-600));
  display:flex; align-items:center; justify-content:center; color:#fff;
}
@media (max-width:520px){ .ipp-thumb{margin:0 auto;} }
.ipp-body{flex:1; min-width:0;}
.ipp-eyebrow{font-family:var(--font-mono); font-size:10.5px; color:var(--cyan); letter-spacing:.04em; margin-bottom:4px; display:block;}
.ipp-body h4{font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:6px; line-height:1.6;}
.ipp-meta{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-faint); flex-wrap:wrap;}
@media (max-width:520px){ .ipp-meta{justify-content:center;} }
.ipp-actions{flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
@media (max-width:520px){ .ipp-actions{align-items:center;} }

/* ---------- Related sections ---------- */
.related-section{max-width:1040px; margin:64px auto 0; padding-top:44px; border-top:1px solid var(--line);}
.related-section .section-head{margin-bottom:22px;}
.related-prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .related-prod-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .related-prod-grid{grid-template-columns:1fr 1fr;} }
.related-art-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){ .related-art-grid{grid-template-columns:1fr;} }

/* ---------- Author box ---------- */
.author-box{
  max-width:1040px; margin:44px auto 0; background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px; display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;
}
.author-box .b-avatar{width:56px; height:56px; font-size:19px; border-radius:50%; background:linear-gradient(135deg, var(--cyan), var(--amber)); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--ink-on-accent); flex-shrink:0;}
.author-box-body{flex:1; min-width:220px;}
.author-box-body h4{font-size:15.5px; margin-bottom:4px;}
.author-box-body span.role{font-size:12px; color:var(--ink-faint); display:block; margin-bottom:10px;}
.author-box-body p{font-size:13.5px; color:var(--ink-dim); line-height:1.85; max-width:600px;}
.author-box-social{display:flex; gap:8px; margin-top:12px;}

/* ---------- Community CTA (override the homepage CTA with article-specific max-width) ---------- */
.article-cta{
  max-width:1040px; margin:56px auto 0; border-radius:var(--radius-lg); border:1px solid var(--line-strong); padding:32px;
  background:linear-gradient(120deg, rgba(47,217,236,.10), rgba(237,168,62,.08));
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.article-cta-left{display:flex; align-items:center; gap:16px;}
.article-cta-icon{width:52px; height:52px; border-radius:14px; background:var(--bg-elevated); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;}
.article-cta h3{font-size:18px; font-weight:800; margin-bottom:4px;}
.article-cta p{font-size:13px; color:var(--ink-dim);}
.article-cta-actions{display:flex; gap:10px; flex-wrap:wrap;}

.article-bottom-spacer{height:64px;}