/* ===== ARTICLE DETAIL STYLES ===== */
/* Override navbar for article pages to always be solid */
.navbar {
  background: rgba(255, 249, 245, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  padding: 0.8rem 0 !important;
  box-shadow: var(--shadow-sm);
}

.article-hero { position:relative; overflow:hidden; }
.article-hero img { width:100%; height:400px; object-fit:cover; }
.article-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(45,45,45,0.7), transparent); display:flex; flex-direction:column; justify-content:flex-end; padding:3rem; }
.article-hero-overlay .tag { display:inline-block; width:fit-content; padding:0.3rem 1rem; background:rgba(232,180,184,0.85); backdrop-filter:blur(10px); color:white; border-radius:50px; font-size:0.7rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:1rem; }
.article-hero-overlay h1 { color:white; font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:1rem; max-width:700px; }
.article-hero-overlay .meta { color:rgba(255,255,255,0.8); font-size:0.85rem; display:flex; gap:1.5rem; flex-wrap:wrap; }
.article-hero-overlay .meta span { display:flex; align-items:center; gap:0.4rem; }

.article-layout { display:grid; grid-template-columns:1fr 350px; gap:3rem; align-items:start; }
.article-content { background:var(--white); border-radius:var(--radius-lg); padding:3rem; box-shadow:var(--shadow-sm); }
.article-content h2 { font-size:1.5rem; margin:2rem 0 1rem; color:var(--dark); }
.article-content h3 { font-size:1.2rem; margin:1.5rem 0 0.8rem; color:var(--dark); }
.article-content p { font-size:0.95rem; line-height:1.9; margin-bottom:1.2rem; color:var(--text); }
.article-content ul, .article-content ol { margin:1rem 0 1.5rem 1.5rem; }
.article-content li { margin-bottom:0.6rem; font-size:0.95rem; line-height:1.7; color:var(--text); }
.article-content blockquote { border-left:3px solid var(--pink); padding:1rem 1.5rem; margin:1.5rem 0; background:rgba(247,209,205,0.15); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic; color:var(--text); }
.article-content .tip-box { background:linear-gradient(135deg, var(--ivory), rgba(247,209,205,0.2)); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:1.5rem; margin:1.5rem 0; }
.article-content .tip-box h4 { color:var(--rose-gold); margin-bottom:0.5rem; display:flex; align-items:center; gap:0.5rem; }
.article-content img { border-radius:var(--radius-md); margin:1.5rem 0; box-shadow:var(--shadow-sm); }

.article-tags { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:2rem; padding-top:2rem; border-top:1px solid rgba(232,180,184,0.15); }
.article-tags a { padding:0.3rem 1rem; border-radius:50px; border:1px solid var(--pink); font-size:0.75rem; color:var(--rose-gold); transition:var(--transition-fast); }
.article-tags a:hover { background:var(--pink); color:white; }

.article-share { display:flex; align-items:center; gap:1rem; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid rgba(232,180,184,0.15); }
.article-share span { font-size:0.9rem; font-weight:500; color:var(--dark); }
.article-share a { width:38px; height:38px; border-radius:50%; border:1px solid rgba(232,180,184,0.3); display:flex; align-items:center; justify-content:center; color:var(--rose-gold); transition:var(--transition-fast); }
.article-share a:hover { background:var(--pink); color:white; }

.article-sidebar { position:sticky; top:6rem; }
.sidebar-widget { background:var(--white); border-radius:var(--radius-lg); padding:1.8rem; margin-bottom:1.5rem; box-shadow:var(--shadow-sm); border:1px solid rgba(232,180,184,0.08); }
.sidebar-widget h4 { font-size:1rem; margin-bottom:1.2rem; padding-bottom:0.8rem; border-bottom:2px solid var(--champagne); }
.sidebar-post { display:flex; gap:1rem; margin-bottom:1.2rem; align-items:center; }
.sidebar-post:last-child { margin-bottom:0; }
.sidebar-post img { width:70px; height:70px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0; }
.sidebar-post h5 { font-size:0.85rem; line-height:1.4; margin-bottom:0.2rem; }
.sidebar-post h5 a { color:var(--dark); }
.sidebar-post h5 a:hover { color:var(--rose-gold); }
.sidebar-post .meta { font-size:0.7rem; color:var(--text-light); }

.sidebar-cta { background:var(--hero-gradient); text-align:center; }
.sidebar-cta h4 { border:none; color:var(--dark); }
.sidebar-cta p { font-size:0.85rem; margin-bottom:1rem; }

.article-author { display:flex; gap:1.5rem; align-items:center; background:var(--white); border-radius:var(--radius-lg); padding:2rem; margin-top:2rem; box-shadow:var(--shadow-sm); }
.article-author img { width:80px; height:80px; border-radius:50%; object-fit:cover; }
.article-author h4 { font-size:1rem; margin-bottom:0.3rem; }
.article-author .role { font-size:0.8rem; color:var(--rose-gold); font-style:italic; margin-bottom:0.5rem; display:block; }
.article-author p { font-size:0.85rem; margin:0; }

.related-articles { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem; }

@media (max-width:992px) { .article-layout { grid-template-columns:1fr; } .article-sidebar { position:static; } }
@media (max-width:768px) { .article-hero img { height:280px; } .article-hero-overlay { padding:1.5rem; } .article-content { padding:1.5rem; } }