/* IT Support Blog */
.blog-cats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.blog-cats:empty { display: none; }
.chip { display: inline-block; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 500; text-decoration: none; line-height: 1.3; }
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip[aria-pressed="true"] { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.blog-status { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.blog-status:empty { display: none; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.bcard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; }
.bcard__link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }
.bcard__link:hover { color: inherit; box-shadow: var(--shadow-md); }
.bcard__link:hover .bcard__title { color: var(--color-primary); }
.bcard__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-surface-offset); }
.bcard__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.bcard__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.bcard__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; line-height: 1.2; color: var(--color-text); transition: color var(--transition-interactive); }
.bcard__excerpt { font-size: var(--text-sm); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard__more { margin-top: auto; padding-top: var(--space-2); font-weight: 700; font-size: var(--text-sm); color: var(--color-primary); }
.blog-more { display: flex; justify-content: center; margin-top: var(--space-10); }
.post-status { padding-top: var(--space-12); }
.post { padding-block: var(--space-10) var(--space-16); }
.post__back { font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.post__cats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-6) var(--space-3); }
.post__cats:empty { display: none; }
.post__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); margin-top: var(--space-4); }
.post__meta { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-3); }
.post__meta:empty { display: none; }
.post__cover { width: 100%; max-height: min(60vh, 520px); object-fit: cover; border-radius: var(--radius-lg); margin-top: var(--space-8); }
@media (max-width: 640px) { .post__cover { max-height: 220px; } }
.prose { margin-top: var(--space-8); color: var(--color-text); overflow-wrap: anywhere; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; margin-top: var(--space-10); }
.prose h3, .prose h4 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; margin-top: var(--space-8); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }
.prose img { border-radius: var(--radius-md); margin-block: var(--space-6); height: auto; }
.prose figure { margin-block: var(--space-6); }
.prose figcaption { font-size: var(--text-sm); color: var(--color-text-muted); }
.prose blockquote { border-left: 4px solid var(--color-primary); padding-left: var(--space-4); color: var(--color-text-muted); }
.prose table { display: block; overflow-x: auto; font-size: var(--text-sm); }
.prose th, .prose td { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); text-align: left; }
.prose iframe, .prose video { max-width: 100%; }
.post__actions { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); display: flex; gap: var(--space-4); align-items: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.post__like { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); font-weight: 700; font-size: var(--text-sm); }
.post__like:hover { border-color: var(--color-primary); color: var(--color-primary); }
.post__like[aria-pressed="true"] { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-primary); }
.post__like:disabled { opacity: .6; cursor: default; }
.post-cta { background: var(--color-navy); color: var(--color-on-navy); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 4vw, var(--space-10)); margin-top: var(--space-12); display: grid; gap: var(--space-4); }
.post-cta h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: #fff; }
.post-cta p { color: var(--color-on-navy-muted); }
.post-cta .btn { justify-self: start; }
.related__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; margin-bottom: var(--space-8); }