/* =========================================================
   UP2Digital — Blog styles
   Extends styles.css tokens
   ========================================================= */

/* Hero */
.blog-hero {
  background: var(--up2-black);
  color: var(--on-dark);
  padding: 140px var(--pad-x) 72px;
  position: relative;
  overflow: hidden;
}
.blog-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
  pointer-events: none;
}
.blog-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.blog-hero__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(36px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 24ch;
  text-wrap: balance;
  margin-top: 14px;
  margin-bottom: 18px;
}
.blog-hero__title .accent { color: var(--up2-yellow); }
.blog-hero__sub {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--on-dark-muted);
  max-width: 56ch;
  text-wrap: pretty;
}

/* Post meta (single) */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 22px;
}
.post-meta__cat {
  background: rgba(245,197,24,0.10);
  color: var(--up2-yellow);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.post-meta__sep { opacity: .5; }

/* List */
.blog-list { padding-top: clamp(56px, 7vw, 96px); }
.blog-list .blog,
.blog-more .blog {
  padding: 0 var(--pad-x);
  max-width: var(--container);
  margin: 0 auto;
}

/* Linkified post card */
.post--link {
  text-decoration: none;
  color: inherit;
  transition: transform .25s;
}
.post--link:hover .post__cover { transform: translateY(-4px); }
.post--link:hover .post__title { color: var(--up2-yellow-deep); }
.section-dark .post--link:hover .post__title { color: var(--up2-yellow); }
.post__title { transition: color .2s; }

/* Single article body */
.post-body {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--pad-x) 64px;
}
.post-body__inner {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
}
.post-body__inner > * + * { margin-top: 1.1em; }
.post-body__inner .lead {
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 500;
  margin-bottom: 8px;
  text-wrap: pretty;
}
.post-body__inner h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-top: 2.4em;
  margin-bottom: 0.6em;
  text-wrap: balance;
}
.post-body__inner h2::before {
  content: '↑';
  color: var(--up2-yellow-deep);
  margin-right: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.7em;
  vertical-align: 0.18em;
}
.post-body__inner h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}
.post-body__inner p { text-wrap: pretty; }
.post-body__inner strong { font-weight: 600; color: var(--ink); }
.post-body__inner em { color: var(--ink-2); }
.post-body__inner a {
  color: var(--ink);
  border-bottom: 2px solid var(--up2-yellow);
  padding-bottom: 1px;
  transition: background .2s;
}
.post-body__inner a:hover { background: var(--up2-yellow-soft); }
.post-body__inner code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 6px;
}
.post-body__inner ol,
.post-body__inner ul {
  padding-left: 28px;
}
.post-body__inner ol li,
.post-body__inner ul li {
  margin-bottom: 0.6em;
  padding-left: 4px;
}
.post-body__inner ol { list-style: decimal; }
.post-body__inner ul { list-style: none; }
.post-body__inner ul li {
  position: relative;
  padding-left: 22px;
}
.post-body__inner ul li::before {
  content: '↑';
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--up2-yellow-deep);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9em;
}
.post-body__inner blockquote {
  border-left: 4px solid var(--up2-yellow);
  padding: 12px 0 12px 24px;
  margin: 1.6em 0;
  color: var(--ink-2);
  font-style: italic;
  font-size: 1.05em;
}

/* Article CTA */
.post-cta {
  margin-top: 64px;
  background: var(--up2-black);
  color: var(--on-dark);
  padding: clamp(32px, 5vw, 56px);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.post-cta h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.post-cta p {
  color: var(--on-dark-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 52ch;
}
.post-cta .btn { margin-top: 8px; }

/* "More" bottom block */
.blog-more .section__head { margin-bottom: 40px; }