/* =========================================================================
   Hund24 — singular content (posts, pages) typography & layout
   ========================================================================= */

.entry { padding-bottom: var(--h24-s4); }
.entry__header { margin-top: var(--h24-s2); }
.entry__cat {
	display: inline-block;
	font-size: var(--h24-fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--h24-primary);
	text-decoration: none;
	margin-bottom: .5rem;
}
.entry__cat:hover { color: var(--h24-primary-dark); }
.entry__title { font-size: var(--h24-fs-h1); font-weight: 800; letter-spacing: -.015em; }
.entry__meta {
	margin-top: var(--h24-s2);
	color: var(--h24-muted);
	font-size: var(--h24-fs-sm);
}
.entry__media {
	margin-block: var(--h24-s3);
	border-radius: var(--h24-radius);
	overflow: hidden;
}
.entry__media img { width: 100%; }
.entry__media--page { margin-inline: 0; }

/* ---- Long-form content -------------------------------------------------- */
.entry__content { font-size: 1.09rem; line-height: 1.7; }
.entry__content > * + * { margin-top: var(--h24-s2); }
.entry__content h2 { font-size: var(--h24-fs-h2); margin-top: var(--h24-s4); }
.entry__content h3 { font-size: var(--h24-fs-h3); margin-top: var(--h24-s3); }
.entry__content h4 { font-size: 1.1rem; margin-top: var(--h24-s3); }
.entry__content a { color: var(--h24-primary-dark); text-underline-offset: 2px; }
.entry__content a:hover { color: var(--h24-primary); }
.entry__content ul,
.entry__content ol { padding-left: 1.4rem; }
.entry__content li + li { margin-top: .35rem; }
.entry__content img { border-radius: var(--h24-radius-sm); }
.entry__content figure { margin-block: var(--h24-s3); }
.entry__content figcaption { font-size: var(--h24-fs-sm); color: var(--h24-muted); margin-top: .4rem; text-align: center; }
.entry__content blockquote {
	margin-block: var(--h24-s3);
	padding: .5rem 0 .5rem 1.25rem;
	border-left: 4px solid var(--h24-primary);
	color: var(--h24-muted);
	font-style: italic;
}
.entry__content blockquote p { font-size: 1.15rem; }
.entry__content pre {
	background: #1b1f1c;
	color: #eef2ee;
	padding: var(--h24-s2);
	border-radius: var(--h24-radius-sm);
	overflow-x: auto;
	font-size: .95rem;
}
.entry__content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.entry__content :not(pre) > code {
	background: var(--h24-surface);
	padding: .15em .4em;
	border-radius: 4px;
	font-size: .92em;
}
.entry__content table {
	width: 100%;
	border-collapse: collapse;
	margin-block: var(--h24-s3);
	font-size: .97rem;
}
.entry__content th,
.entry__content td {
	border: 1px solid var(--h24-border);
	padding: .6rem .75rem;
	text-align: left;
}
.entry__content th { background: var(--h24-surface); }

.page-links { margin-top: var(--h24-s3); display: flex; gap: .4rem; flex-wrap: wrap; }
.page-links a,
.page-links > .post-page-numbers {
	padding: .3rem .7rem;
	border: 1px solid var(--h24-border);
	border-radius: var(--h24-radius-sm);
	text-decoration: none;
}

/* ---- Entry footer (tags) ------------------------------------------------ */
.entry__footer { margin-top: var(--h24-s4); }
.entry__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.entry__tags li { margin: 0; }
.entry__tags a {
	display: inline-block;
	padding: .3rem .7rem;
	background: var(--h24-surface);
	border-radius: 999px;
	font-size: var(--h24-fs-sm);
	text-decoration: none;
	color: var(--h24-muted);
}
.entry__tags a:hover { color: var(--h24-primary); }

/* ---- Related ------------------------------------------------------------ */
.related { margin-top: var(--h24-s5); }
.related__title { font-size: var(--h24-fs-h2); margin-bottom: var(--h24-s3); }

/* ---- Comments ----------------------------------------------------------- */
.comments { margin-top: var(--h24-s5); }
.comments__title { font-size: var(--h24-fs-h3); margin-bottom: var(--h24-s3); }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list ol { list-style: none; padding-left: var(--h24-s3); }
.comment-list .comment-body {
	padding: var(--h24-s2) 0;
	border-bottom: 1px solid var(--h24-border);
}
.comment-list .comment-author { font-weight: 700; }
.comment-list .comment-author img { float: left; margin-right: .75rem; border-radius: 50%; }
.comment-list .comment-meta { font-size: var(--h24-fs-sm); color: var(--h24-muted); }
.comment-list .comment-meta a { color: var(--h24-muted); text-decoration: none; }
.comment-respond { margin-top: var(--h24-s3); }
.comment-form { display: grid; gap: var(--h24-s2); margin-top: var(--h24-s2); }
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
	width: 100%;
	padding: .6rem .8rem;
	border: 1px solid var(--h24-border);
	border-radius: var(--h24-radius-sm);
	background: var(--h24-bg);
}
.comment-form .form-submit .submit {
	background: var(--h24-primary);
	color: #fff;
	border-radius: var(--h24-radius-sm);
	padding: .65rem 1.4rem;
	font-weight: 600;
}
.comments__closed { color: var(--h24-muted); }

@media (min-width: 768px) {
	.entry__title { line-height: 1.1; }
	.entry__content { font-size: 1.125rem; }
}