/* 5G Male blog styles — 5gmaale.com */

.reading-progress { position: sticky; top: 0; height: 5px; background: var(--border-light); z-index: 99; }
.reading-progress-bar { height: 100%; width: 0%; background: var(--red); transition: width .1s ease; }

.breadcrumbs { font-size: 15px; padding: 20px 0 0; color: var(--black); }
.breadcrumbs a { color: var(--red); }
.breadcrumbs .sep { margin: 0 6px; }

.article-header { padding: 24px 0 40px; }
.article-header .eyebrow { margin-bottom: 14px; }
.article-meta { font-size: 15px; margin-bottom: 20px; }
.article-hero-img { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 8px; }

.article-layout { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 980px) { .article-layout { grid-template-columns: 260px 1fr; } }

.toc { background: var(--section-tint); border-radius: var(--border-radius); padding: 24px; align-self: start; position: sticky; top: 90px; }
.toc h2 { font-size: 17px; margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 20px; font-size: 16px; }
.toc li { margin-bottom: 8px; }
.toc a { color: var(--black); }
.toc a:hover { color: var(--red); }

.article-body h2 { margin-top: 40px; }
.article-body h3 { margin-top: 28px; }
.article-body ul, .article-body ol { padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote { border-left: 4px solid var(--red); margin: 24px 0; padding: 4px 20px; background: var(--section-tint); border-radius: 0 12px 12px 0; font-style: normal; }

.article-cta { background: var(--section-tint); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px; text-align: center; margin: 40px 0; }
.article-cta img { max-width: 150px; margin: 0 auto 16px; }

.prev-next { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 40px 0; }
@media (min-width: 700px) { .prev-next { grid-template-columns: 1fr 1fr; } }
.prev-next a { display: block; border: 1px solid var(--border-light); border-radius: var(--border-radius); padding: 20px; color: var(--black); }
.prev-next a:hover { border-color: var(--red); }
.prev-next .direction { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--red); }

.blog-hero { background: var(--section-tint); padding: 48px 0; text-align: center; }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 48px 0; }
@media (min-width: 700px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }