/**
 * Cartlet blog: posts index, archives and single posts (inc/blog.php).
 * Loads after cartlet.css on blog pages only, and uses its tokens (--ctl-*).
 * Articles reuse the legal pages' prose styles (.ctl-legal); this adds what posts need on top.
 */

.ctl-hero--blog h1,
.ctl-hero--blog .wp-block-query-title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.ctl-hero--blog .ctl-kicker a { color: inherit; text-decoration: none; }
.ctl-hero--blog .ctl-lede:empty { display: none; }

.ctl-hero--post { padding-block-end: clamp(28px, 4vw, 40px); }
.ctl-hero--post h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.ctl-hero--post .ctl-kicker a { color: inherit; text-decoration: none; }
.ctl-hero--post .ctl-lede { margin-inline: auto; max-width: 640px; }

.ctl-post-meta {
	gap: 10px !important;
	color: var(--ctl-muted);
	font-size: 0.88rem;
}

.ctl-post-meta > * { margin: 0 !important; }
.ctl-post-meta > * + *::before { content: "·"; margin-right: 10px; }

.ctl-blog-list { padding-block-start: clamp(40px, 6vw, 64px); background: var(--ctl-surface); border-top: 1px solid var(--ctl-line); }

.ctl-posts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(18px, 2.4vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ctl-posts__grid > li { margin: 0; }

.ctl-postcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--ctl-line);
	border-radius: var(--ctl-radius);
	background: var(--ctl-surface);
	box-shadow: var(--ctl-shadow-sm);
	transition: transform 0.3s var(--ctl-ease), box-shadow 0.3s var(--ctl-ease);
}

.ctl-postcard:hover { transform: translateY(-3px); box-shadow: var(--ctl-shadow); }
.ctl-postcard > * { margin: 0 !important; }
.ctl-postcard__media img { display: block; width: 100%; object-fit: cover; }

.ctl-postcard__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.ctl-postcard__body > * { margin: 0 !important; }
.ctl-postcard__cat { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ctl-brand); }
.ctl-postcard__cat a { color: inherit; text-decoration: none; }
.ctl-page .ctl-postcard__title { font-size: 1.22rem; line-height: 1.25; }
.ctl-postcard__title a { text-decoration: none; }
.ctl-postcard__title a:hover { color: var(--ctl-brand); }
.ctl-postcard__excerpt { color: var(--ctl-ink-2); font-size: 0.95rem; }
.ctl-postcard__excerpt .wp-block-post-excerpt__excerpt { margin: 0; }
.ctl-postcard__excerpt .wp-block-post-excerpt__more-text { display: none; }
.ctl-postcard__date { margin-top: auto !important; color: var(--ctl-muted); font-size: 0.85rem; }

.ctl-posts__empty { color: var(--ctl-muted); }

.ctl-pager { gap: 6px; margin-top: clamp(32px, 4vw, 48px) !important; font-size: 0.95rem; }
.ctl-pager a,
.ctl-pager .current { padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.ctl-pager a:hover { background: var(--ctl-brand-soft); }
.ctl-pager .current { background: var(--ctl-btn); color: #fff; }

.ctl-post-section { padding-block-start: clamp(32px, 5vw, 56px); }
.ctl-post-section > .ctl-post-image { max-width: 880px !important; margin-bottom: clamp(28px, 4vw, 44px) !important; }
.ctl-post-image img { border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-lg); box-shadow: var(--ctl-shadow); }

/* cartlet.css zeroes the top margin of post-content children for the landing pages; posts need
   the prose rhythm back, so these rules carry .ctl-page to win. */
.ctl-page .ctl-post > * + * { margin-block-start: 18px !important; }
.ctl-page .ctl-post > h2 { margin-block-start: 52px !important; }
.ctl-page .ctl-post > h3 { margin-block-start: 32px !important; }
.ctl-page .ctl-post > :is(h2, h3) + * { margin-block-start: 12px !important; }
.ctl-page .ctl-post > .wp-block-details + .wp-block-details { margin-block-start: 10px !important; }

.ctl-post h2 { scroll-margin-top: 110px; }
.ctl-post ol { display: grid; gap: 10px; padding-left: 1.4em; }
.ctl-post ol li::marker { color: var(--ctl-brand); font-weight: 700; }
.ctl-post ul ul,
.ctl-post ol ol { margin-top: 10px; }
.ctl-post figure { margin-block: 28px !important; }
.ctl-post img { height: auto; border-radius: 14px; }
.ctl-post figcaption { margin-top: 8px; color: var(--ctl-muted); font-size: 0.86rem; text-align: center; }

.ctl-post blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--ctl-btn);
	color: var(--ctl-ink);
	font-size: 1.08rem;
}

.ctl-post :not(pre) > code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--ctl-bg);
	font-family: var(--ctl-mono);
	font-size: 0.88em;
}

.ctl-page .ctl-post pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }

.ctl-post pre {
	overflow-x: auto;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--ctl-dark);
	color: var(--ctl-dark-ink);
	font-family: var(--ctl-mono);
	font-size: 0.88rem;
	line-height: 1.6;
}

.ctl-post table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ctl-post th,
.ctl-post td { padding: 10px 12px; border-bottom: 1px solid var(--ctl-line); text-align: left; }
.ctl-post th { color: var(--ctl-ink); }

.ctl-post .wp-block-details { padding: 14px 18px; border: 1px solid var(--ctl-line); border-radius: 14px; }
.ctl-post .wp-block-details summary { color: var(--ctl-ink); font-weight: 700; cursor: pointer; }
.ctl-post .wp-block-details > * + * { margin-top: 10px; }