/* Public blog styles — linked by the MINTED pages on top of the live
   terrabyte.ai stylesheet. Served as a static asset at /blog/styles.css. */

/* Header fade + mobile nav come from the site's own /js/main.js on the
   production domain (plus an inline fallback for the scroll fade), so the
   real transparent→scrolled behavior applies — no overrides needed. */

/* ---- Single post ---- */
.post-inner { max-width: 760px; }
.post-byline { color: var(--text-secondary); margin-top: 10px; font-size: 0.95rem; }
.post-cover {
  width: 100%; border-radius: 16px; border: 1px solid var(--panel-border);
  margin: 8px 0 8px; display: block;
}
.post-tags { display: flex; gap: 8px; margin: 16px 0 0; flex-wrap: wrap; }
.post-tag {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); border: 1px solid var(--panel-border);
  border-radius: 100px; padding: 3px 12px;
}
.draft-banner {
  border: 1px solid var(--focus); background: rgba(255, 209, 102, 0.08);
  color: var(--focus); border-radius: 12px; padding: 10px 16px; margin: 0 0 20px;
  font-size: 0.9rem;
}
.post-body { margin: 28px 0 0; font-size: 1.08rem; line-height: 1.75; color: var(--text-secondary); }
.post-body h2 { color: var(--text-primary); font-size: 1.5rem; margin: 1.7em 0 .4em; }
.post-body h3 { color: var(--text-primary); font-size: 1.2rem; margin: 1.4em 0 .3em; }
.post-body p { margin: 0 0 1.15em; }
.post-body strong { color: var(--text-primary); }
.post-body ul, .post-body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.post-body li { margin: 0 0 .5em; }
.post-body a { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 3px; }
.post-body blockquote {
  margin: 1.5em 0; padding: 6px 0 6px 20px; border-left: 3px solid var(--accent-primary);
  color: var(--text-primary); font-size: 1.15rem;
}
.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 1px 6px;
}
.post-back { display: inline-block; margin: 40px 0 0; color: var(--text-secondary); }
.post-back:hover { color: var(--accent-primary); }

/* ---- Apple-style blog (news) layout ---- */
.news { padding: 8px 0 48px; }
.news-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.blog-empty { padding: 48px; border-radius: 20px; text-align: center; }

.news-featured, .news-card {
  text-decoration: none; color: inherit; display: block; overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.news-featured { border-radius: 24px; margin-bottom: 26px; }
.news-featured:hover { border-color: var(--panel-border-hover); box-shadow: 0 10px 34px rgba(0,0,0,0.45); }
.news-featured-media, .news-media { overflow: hidden; background: var(--bg-deep); }
.news-featured-media { aspect-ratio: 21 / 9; }
.news-media { aspect-ratio: 16 / 9; }
.news-featured-media img, .news-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.news-featured:hover .news-featured-media img,
.news-card:hover .news-media img { transform: scale(1.04); }
.news-featured-body { padding: 26px 32px 32px; }
.news-featured-body h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.1; margin: 12px 0 12px; color: var(--text-primary); }
.news-featured-body p { color: var(--text-secondary); max-width: 62ch; margin: 0 0 14px; font-size: 1.05rem; }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.news-card { border-radius: 18px; display: flex; flex-direction: column; }
.news-card:hover { border-color: var(--panel-border-hover); box-shadow: 0 10px 34px rgba(0,0,0,0.45); }
.news-card-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.news-title { font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.25; margin: 0; color: var(--text-primary); }
.news-card:hover .news-title { color: var(--accent-primary); }
.news-excerpt { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin: 0; }

.news-cat { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-primary); font-weight: 600; }
.news-date { font-size: 0.85rem; color: var(--text-secondary); margin-top: auto; padding-top: 4px; }

/* ---- Pagination ---- */
.pagination {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  margin: 44px auto 0; max-width: 720px; flex-wrap: wrap;
}
.pagination a, .pagination span {
  padding: 8px 15px; border-radius: 100px; border: 1px solid var(--panel-border);
  color: var(--text-secondary); font-size: 0.9rem; line-height: 1;
}
.pagination a:hover { border-color: var(--panel-border-hover); color: var(--text-primary); }
.pagination .current { background: var(--accent-primary); color: #02040a; border-color: transparent; font-weight: 600; }
.pagination .disabled { opacity: 0.35; }