/**
 * Peptide Marketing — blog templates (home.php, archive.php, single.php).
 * Loaded only on those templates (see settings/enqueue.php) — everything
 * here builds on the global tokens/base classes (.pm-kicker, .pm-h1/h2/h3,
 * .pm-lead, .pm-muted, .pm-card, .pm-grid-3, .pm-btn) rather than repeating
 * them.
 */

.pm-blog-hero { padding: 96px 0 72px; border-bottom: 1px solid var(--pm-line); }

/*
 * Hero background — faint grid lines (radial-masked so they fade out
 * toward the edges) plus a soft pulsing blue glow, sitting behind the
 * kicker/title. Matches the original static mockup's .hero::before/::after
 * exactly. Shared by the blog index/archive hero (.pm-blog-hero) and the
 * single-post header (.pm-post-hero) — kept as its own class rather than
 * reusing pm/hero's block-scoped CSS, since neither template is a block.
 */
.pm-hero-bg { position: relative; }
.pm-hero-bg::before {
	content: ""; position: absolute; inset: 0;
	background-image: linear-gradient(#161616 1px, transparent 1px), linear-gradient(90deg, #161616 1px, transparent 1px);
	background-size: 44px 44px;
	/*
	 * Fixed-radius circle rather than a %-sized ellipse: an ellipse sized
	 * as a percentage of the element's own box goes very flat/wide on a
	 * short box (e.g. the single-post header, which is much shorter than
	 * a full hero), so the fade barely applies before hitting the edges
	 * and the grid squares near the border just cut off hard instead of
	 * blending — a fixed pixel radius fades the same way regardless of
	 * how tall the box is.
	 */
	-webkit-mask-image: radial-gradient(circle 480px at 30% 20%, #000 30%, transparent 75%);
	mask-image: radial-gradient(circle 480px at 30% 20%, #000 30%, transparent 75%);
	pointer-events: none;
}
.pm-hero-bg::after {
	content: ""; position: absolute; width: 520px; height: 520px; top: -180px; right: -120px; border-radius: 50%;
	/*
	 * Fading to the `transparent` keyword (= rgba(0,0,0,0), i.e. BLACK at
	 * zero alpha) makes the browser interpolate the blue toward black on
	 * the way to invisible, which shows up as a visible dark ring/edge
	 * instead of blending into the page's own black background. Fading to
	 * the same blue at zero alpha instead only fades the opacity, so it
	 * blends seamlessly regardless of what's behind it.
	 */
	background: radial-gradient(circle, rgba(79, 127, 255, .14), rgba(79, 127, 255, 0) 65%);
	pointer-events: none; animation: pm-hero-bg-glow 7s ease-in-out infinite alternate;
}
@keyframes pm-hero-bg-glow { from { opacity: .6; transform: scale(1); } to { opacity: 1; transform: scale(1.12); } }
.pm-hero-bg > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
	.pm-hero-bg::after { animation: none; }
}

.pm-category-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.pm-category-pills a {
	font-size: 13px; padding: 7px 15px; border-radius: 99px; border: 1px solid var(--pm-line);
	color: #C9C9C4; text-decoration: none; transition: all .2s ease;
}
.pm-category-pills a:hover { border-color: var(--pm-blue); color: var(--pm-white); }
.pm-category-pills a.is-active { background: var(--pm-blue); border-color: var(--pm-blue); color: #0A0A0A; }

.pm-featured-post {
	background: var(--pm-panel); border: 1px solid var(--pm-line); border-radius: 16px;
	padding: 32px; transition: border-color .25s ease;
}
.pm-featured-post:hover { border-color: var(--pm-hairline-hover); }
.pm-featured-post .pm-tag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pm-blue); font-weight: 600; }
.pm-featured-post h2 { margin: 10px 0; }
.pm-featured-post h2 a { color: var(--pm-white); text-decoration: none; }
.pm-featured-post h2 a:hover { color: var(--pm-blue); }

.pm-post-meta { font-size: 12.5px; color: var(--pm-muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.pm-post-card h3 a { color: var(--pm-white); text-decoration: none; }
.pm-post-card h3 a:hover { color: var(--pm-blue); }
.pm-more { color: var(--pm-blue); font-size: 14.5px; font-weight: 500; text-decoration: none; display: inline-block; margin-top: 14px; }
.pm-more:hover { text-decoration: underline; }

.pm-byline { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--pm-line); }
.pm-byline--plain { border: none; padding: 0; margin-top: 18px; }
.pm-avatar {
	width: 46px; height: 46px; border-radius: 50%; background: var(--pm-panel); border: 1px solid var(--pm-line);
	display: flex; align-items: center; justify-content: center; font-family: var(--pm-font-display);
	font-weight: 700; color: var(--pm-blue); flex: none;
}
.pm-byline .who { font-size: 14px; }
.pm-byline .who b { color: var(--pm-white); font-weight: 600; display: block; font-family: var(--pm-font-display); }
.pm-byline .who > span { color: var(--pm-muted); }
.pm-byline .who > span a { color: var(--pm-blue); text-decoration: underline; white-space: nowrap; }

.pm-article { max-width: 760px; margin: 0 auto; }
.pm-article-body { margin-top: 32px; }
.pm-article-body h2 { font-size: 26px; margin-top: 36px; }
.pm-article-body h3 { font-size: 19px; margin-top: 26px; }
.pm-article-body p { margin-top: 14px; color: var(--pm-text-strong); font-size: 17px; line-height: 1.75; }
.pm-article-body ul, .pm-article-body ol { margin: 14px 0 14px 20px; color: var(--pm-text-strong); }
.pm-article-body li { margin: 8px 0; font-size: 16.5px; }
.pm-article-body p a, .pm-article-body li a {
	color: var(--pm-blue); text-decoration: underline; text-decoration-color: rgba(79, 127, 255, .35); text-underline-offset: 2px;
}
.pm-article-body p a:hover, .pm-article-body li a:hover { text-decoration-color: var(--pm-blue); }

.pm-callout { background: var(--pm-panel); border-left: 3px solid var(--pm-blue); border-radius: 0 10px 10px 0; padding: 18px 22px; margin: 24px 0; }
.pm-callout p { margin: 0 !important; font-size: 16px !important; color: var(--pm-text-lead) !important; }
.pm-callout strong { color: var(--pm-white); }