/* Article Detail - FocusActu premium newsroom styles
   Scoped under .article-detail to avoid global conflicts.
*/
.article-detail { font-family: var(--focus-font-sans); color: var(--focus-black); }

/* Reading progress */
.reading-progress { position: fixed; left: 0; right: 0; top: var(--header-height); height: 4px; background: rgba(0,0,0,0.04); z-index: 1205; pointer-events: none; }
.reading-progress .bar { height: 100%; transform-origin: left center; transform: scaleX(0); transition: transform 150ms linear; background: linear-gradient(90deg, var(--focus-primary), #ffd95a); }

/* Hero */
.article-hero { position: relative; width: 100%; min-height: 56vh; display:flex; align-items:flex-end; overflow:hidden; }
.article-hero .hero-media { position:absolute; inset:0; z-index:0; }
.article-hero .hero-media img { width:100%; height:100%; object-fit:cover; display:block; }
.article-hero .hero-overlay { position: absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.82) 100%); backdrop-filter: saturate(1.05) blur(1px); }
.article-hero .hero-content { position:relative; z-index:2; width:100%; padding: 1.25rem; }
.article-hero .container-hero { max-width:1200px; margin:0 auto; }
.article-breadcrumb { color: rgba(255,255,255,0.85); font-size:0.95rem; margin-bottom:0.5rem; }
.article-category-badge { display:inline-block; background: rgba(0,0,0,0.35); color:var(--focus-primary); padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.85rem; margin-bottom:0.6rem; }
.article-title { color: var(--focus-white); font-weight:800; line-height:1.02; margin:0 0 0.6rem 0; font-size: clamp(1.6rem, 6.5vw, 3.25rem); }
.article-subtitle { color: rgba(255,255,255,0.92); font-size:1rem; margin-bottom:0.8rem; }
.article-meta { color: rgba(255,255,255,0.8); font-size:0.95rem; display:flex; gap:12px; align-items:center; }

/* Layout */
.article-layout { display:block; padding: 2rem 1rem; max-width:1200px; margin:0 auto; }
@media(min-width: 992px){ .article-layout { display:grid; grid-template-columns: 1fr 340px; gap: 36px; } }

.article-body { font-size:1.02rem; line-height:1.85; color:var(--focus-black); background: var(--focus-white); padding: 1rem 0; }
.article-body p { margin: 0 0 1.25rem 0; }
.article-body h2 { font-size:1.35rem; margin: 1.6rem 0 0.6rem 0; color:var(--focus-black); }
.article-body h3 { font-size:1.1rem; margin: 1.1rem 0 0.6rem 0; }
.article-body img { max-width:100%; height:auto; display:block; margin:1rem 0; border-radius:8px; }
.article-body figure figcaption { font-size:0.9rem; color: #6b7280; margin-top: 0.4rem; }

/* Drop cap */
.article-body p:first-of-type::first-letter { float:left; font-size:3.4rem; line-height:1; padding-right:10px; padding-top:4px; font-weight:700; color:var(--focus-primary); }

/* Sidebar */
.article-sidebar .card { border-radius:12px; box-shadow: var(--focus-shadow-sm); }
.article-sidebar .sticky { position: sticky; top: calc(var(--header-height) + 16px); }

/* Share bar */
.share-vertical { position:fixed; left:18px; top:50%; transform:translateY(-50%); z-index:1200; display:flex; flex-direction:column; gap:8px; }
.share-vertical .share-btn { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:#fff; color:var(--focus-black); box-shadow:var(--focus-shadow-sm); cursor:pointer; transition: transform .15s ease, box-shadow .15s ease; }
.share-vertical .share-btn:hover { transform: translateY(-3px); box-shadow:var(--focus-shadow-md); }
.share-bottom { position:fixed; left:50%; transform:translateX(-50%); bottom:12px; z-index:1200; display:flex; gap:8px; }

/* Related grid */
.related-grid { display:grid; grid-template-columns: repeat(1,1fr); gap:12px; }
@media(min-width:768px){ .related-grid { grid-template-columns: repeat(3,1fr); } }
.related-card { border-radius:10px; overflow:hidden; background:#fff; box-shadow:var(--focus-shadow-sm); }
.related-card img { width:100%; height:160px; object-fit:cover; display:block; }
.related-card .card-body { padding:12px; }

/* Article navigation (prev/next) */
.article-nav { display:flex; gap:12px; justify-content:space-between; margin:1.5rem 0; }
.article-nav .nav-card { display:flex; gap:12px; align-items:center; min-width:48%; background:#fff; border-radius:10px; padding:10px; box-shadow:var(--focus-shadow-sm); }
.article-nav .nav-thumb { width:84px; height:60px; border-radius:6px; overflow:hidden; flex-shrink:0; }
.article-nav .nav-thumb img { width:100%; height:100%; object-fit:cover; }

/* TOC */
.article-toc { font-size:0.95rem; background: rgba(249,250,251,0.5); padding:10px; border-radius:8px; }
.article-toc a { display:block; color:var(--focus-black); padding:6px 0; text-decoration:none; }
.article-toc a.active { color:var(--focus-primary); font-weight:700; }

/* Misc */
.muted { color:#6b7280; }

/* Accessibility: focus */
.article-detail a:focus, .article-detail button:focus { outline: 3px solid rgba(244,197,66,0.25); outline-offset: 2px; }

/* Minimal responsive tweaks */
@media(max-width:991px){
  .share-vertical { display:none; }
  .article-hero { min-height: 44vh; }
  .article-layout { padding: 1rem; }
}