/* Public blog pages — theme-aware (dark + light) */

body.gsmos-public-blog {
  min-height: 100vh;
  color: var(--text-primary);
  background: var(--bg-gradient-dark);
}

[data-theme="light"] body.gsmos-public-blog {
  background: linear-gradient(160deg, #f8fafc 0%, #e2e8f0 45%, #f1f5f9 100%);
}

.gsmos-public-blog .blog-wrap,
.gsmos-public-blog .post-wrap {
  max-width: 960px;
  margin: calc(var(--floating-navbar-height, 72px) + 1.5rem) auto 3rem;
  padding: 0 1.25rem;
}

.gsmos-public-blog .post-wrap {
  max-width: 760px;
}

.gsmos-public-blog .blog-wrap h1,
.gsmos-public-blog .post-wrap h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 1.25rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.gsmos-public-blog .blog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gsmos-public-blog .blog-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
  align-items: start;
}

.gsmos-public-blog .blog-card__media {
  border-radius: 0.65rem;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--card-bg);
}

.gsmos-public-blog .blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gsmos-public-blog .blog-card__title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  line-height: 1.35;
}

.gsmos-public-blog .blog-card__title a {
  color: #a5b4fc;
  text-decoration: none;
  font-weight: 600;
}

[data-theme="light"] .gsmos-public-blog .blog-card__title a {
  color: #4338ca;
}

.gsmos-public-blog .blog-card__title a:hover {
  color: #c7d2fe;
}

[data-theme="light"] .gsmos-public-blog .blog-card__title a:hover {
  color: #6366f1;
}

.gsmos-public-blog .blog-card__desc {
  margin: 0;
  color: var(--text-on-surface-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.gsmos-public-blog .blog-date {
  font-size: 0.8rem;
  color: var(--text-on-surface-hint);
  display: block;
  margin-bottom: 0.35rem;
}

.gsmos-public-blog .blog-empty {
  color: var(--text-on-surface-muted);
  line-height: 1.6;
}

.gsmos-public-blog .post-meta {
  color: var(--text-on-surface-hint);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.gsmos-public-blog .post-cover {
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 2rem;
  aspect-ratio: 16/9;
  background: var(--card-bg);
}

.gsmos-public-blog .post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gsmos-public-blog .post-back {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--text-on-surface-muted);
  text-decoration: none;
}

.gsmos-public-blog .post-back:hover {
  color: var(--text-primary);
}

.gsmos-public-blog .post-content {
  color: var(--text-on-surface-secondary);
  line-height: 1.75;
}

.gsmos-public-blog .post-content h2 {
  color: #c7d2fe;
  margin: 2rem 0 0.75rem;
  font-size: 1.35rem;
}

.gsmos-public-blog .post-content h3 {
  color: #a5b4fc;
  margin: 1.5rem 0 0.5rem;
  font-size: 1.1rem;
}

[data-theme="light"] .gsmos-public-blog .post-content h2 {
  color: #4338ca;
}

[data-theme="light"] .gsmos-public-blog .post-content h3 {
  color: #6366f1;
}

.gsmos-public-blog .post-content p,
.gsmos-public-blog .post-content li,
.gsmos-public-blog .post-content td,
.gsmos-public-blog .post-content th {
  margin: 0 0 1rem;
  color: inherit;
}

.gsmos-public-blog .post-content ul,
.gsmos-public-blog .post-content ol {
  margin: 0 0 1rem 1.25rem;
}

.gsmos-public-blog .post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.gsmos-public-blog .post-content a {
  color: #818cf8;
}

[data-theme="light"] .gsmos-public-blog .post-content a {
  color: #4f46e5;
}

.gsmos-public-blog .post-content blockquote {
  border-left: 3px solid rgba(129, 140, 248, 0.5);
  margin: 1rem 0;
  padding-left: 1rem;
  color: var(--text-on-surface-muted);
}

/* Syndicated HTML from TechBlog may ship light-on-light inline styles */
[data-theme="light"] .gsmos-public-blog .post-content,
[data-theme="light"] .gsmos-public-blog .post-content p,
[data-theme="light"] .gsmos-public-blog .post-content li,
[data-theme="light"] .gsmos-public-blog .post-content span,
[data-theme="light"] .gsmos-public-blog .post-content div {
  color: #334155 !important;
}

[data-theme="light"] .gsmos-public-blog .post-content strong,
[data-theme="light"] .gsmos-public-blog .post-content b {
  color: #1e293b !important;
}

@media (max-width: 600px) {
  .gsmos-public-blog .blog-card {
    grid-template-columns: 1fr;
  }

  .gsmos-public-blog .blog-card__media {
    max-height: 200px;
  }
}