/* Blog: single article, post cards (Insights page + archives). Uses the design-system tokens from base.css. */

/* ---------- Post cards ---------- */
.so-prose--wide { max-width: none; }
.so-posts.so-posts--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 0; max-width: none; }
.so-pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.so-pcard:hover { transform: translateY(-3px); border-color: oklch(0.8 0.05 260); box-shadow: 0 22px 40px -26px oklch(0.3 0.1 265 / .45); }
.so-pcard__img { display: block; aspect-ratio: 16 / 9; background: var(--tint); overflow: hidden; }
.so-pcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.so-pcard__b { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.so-pcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 400 12px/1.2 var(--mono); letter-spacing: .08em; color: var(--sub); text-transform: uppercase; }
.so-pcard__meta .cat { color: var(--blue); font-weight: 600; }
.so-pcard h2 { margin: 0; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -.02em; line-height: 1.2; }
.so-pcard h2 a { color: var(--ink); text-decoration: none; }
.so-pcard h2 a:hover { color: var(--blue); }
.so-pcard p { margin: 0; color: var(--body); font-size: 15px; line-height: 1.6; }
.so-pcard__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--blue); text-decoration: none; }
.so-pcard__more:hover { color: var(--ink); }
.so-prose .so-pcard a { text-decoration: none; }
.so-pcard__more svg { width: 16px; height: 16px; }

/* ---------- Single article ---------- */
.so-article { padding-block: clamp(40px, 5vw, 72px) 0; }
.so-article__head, .so-article__hero { max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; }
.so-article__body, .so-article__tags { max-width: 760px; margin-inline: auto; }
.so-article__hero { margin-bottom: 0; }
.so-article__back { display: inline-block; margin-bottom: 22px; font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none; }
.so-article__back:hover { color: var(--ink); }
.so-article__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.so-article__cat { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--tint); color: var(--blue); font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.so-article__title { margin: 0; font-size: clamp(30px, 4.2vw, 52px); letter-spacing: -.035em; line-height: 1.08; color: var(--ink); text-wrap: balance; }
.so-article__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font: 400 13px/1.3 var(--mono); letter-spacing: .04em; color: var(--sub); }
.so-article__hero { margin-block: 32px 8px; }
.so-article__hero img { display: block; max-width: 100%; height: auto; border-radius: 16px; margin-inline: 0; }
.so-article__body { padding-block: 28px clamp(48px, 6vw, 88px); }
.so-article__tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 clamp(40px, 5vw, 72px); list-style: none; margin-block: 0; }
.so-article__tags a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--body); text-decoration: none; }
.so-article__tags a:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- Article body typography ---------- */
.so-article__body.so-prose { max-width: 760px; }
.so-article__body > * + * { margin-top: 1.1em; }
.so-article__body h2 { margin-top: 2em; font-size: clamp(24px, 2.6vw, 32px); }
.so-article__body h3 { margin-top: 1.7em; font-size: clamp(20px, 2vw, 24px); letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.so-article__body h4 { margin-top: 1.5em; font-size: 18px; color: var(--ink); }
.so-article__body ul, .so-article__body ol { padding-left: 1.4em; }
.so-article__body li + li { margin-top: .45em; }
.so-article__body a { color: var(--blue); }
.so-article__body a:hover { color: var(--ink); }
.so-article__body blockquote { margin-inline: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--blue); color: var(--ink); }
.so-article__body img { max-width: 100%; height: auto; border-radius: 12px; }
.so-article__body figure { margin-inline: 0; }
.so-article__body figcaption { margin-top: 8px; font-size: 14px; color: var(--sub); }
.so-article__body .wp-block-image, .so-article__body p:has(> img:only-child) { text-align: center; }
.so-article__body :is(h1, h2, h3):empty { display: none; }
.so-article__body :is(h2, h3):has(> img:only-child) { margin-top: 1.2em; font-size: inherit; }
.so-article__body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.so-article__body iframe, .so-article__body video { max-width: 100%; }
.so-article__body { overflow-wrap: anywhere; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.so-posts.so-posts--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.so-posts.so-posts--cards { grid-template-columns: 1fr; gap: 18px; }
	.so-pcard__b { padding: 18px 18px 20px; }
	.so-article__body { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.so-pcard { transition: none; }
	.so-pcard:hover { transform: none; }
}