/**
 * Editorial content: articles, pages, listings, pagination, block content.
 */

/* ---- Article ---- */
.c-article__header {
	padding-block: var(--space-7) var(--space-5);
}

.c-article__title {
	margin-bottom: var(--space-3);
}

.c-article__media {
	margin-bottom: var(--space-7);
}

.c-article__media img {
	width: 100%;
	max-height: 560px;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.c-article__footer {
	padding-block: var(--space-6) var(--space-8);
}

.c-article__tags a {
	display: inline-block;
	margin: 0 var(--space-2) var(--space-2) 0;
	padding: 0.2rem 0.75rem;
	border-radius: var(--radius-pill);
	background: var(--color-primary-50);
	color: var(--color-primary);
	font-size: var(--text-small);
	text-decoration: none;
}

.c-article__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-accent-50);
}

.c-article__cta p {
	margin: 0;
	font-weight: var(--weight-semibold);
	color: var(--color-primary);
}

.c-post-meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--text-small);
	color: var(--color-muted);
}

.c-post-card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--color-primary-100);
}

.c-page-header__search {
	max-width: 560px;
	margin-top: var(--space-5);
}

/* ---- Prose (block editor output) ---- */
.c-prose {
	font-size: 1.0625rem;
}

.c-prose > * + * {
	margin-top: var(--space-4);
}

.c-prose :where(h2, h3, h4) {
	margin-top: var(--space-7);
}

.c-prose :where(ul, ol) {
	padding-left: var(--space-5);
}

.c-prose li + li {
	margin-top: var(--space-2);
}

.c-prose img {
	border-radius: var(--radius-md);
}

.c-prose figcaption {
	margin-top: var(--space-2);
	font-size: var(--text-small);
	color: var(--color-muted);
	text-align: center;
}

.c-prose blockquote {
	margin-inline: 0;
	padding: var(--space-4) var(--space-5);
	border-left: 4px solid var(--color-accent);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	background: var(--color-surface-2);
	font-size: var(--text-lead);
}

.c-prose .alignwide {
	width: min(1100px, 100vw - 2 * var(--gutter));
	max-width: none;
	margin-inline: calc(50% - min(550px, 50vw - var(--gutter)));
}

.c-prose .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.c-prose table {
	font-size: var(--text-small);
}

.c-prose th {
	background: var(--color-surface-2);
	font-weight: var(--weight-semibold);
}

/* ---- Pagination ---- */
.c-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin: var(--space-7) 0 0;
	padding: 0;
	list-style: none;
}

.c-pagination a,
.c-pagination span {
	display: inline-grid;
	place-items: center;
	min-width: var(--tap-min);
	height: var(--tap-min);
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
}

.c-pagination a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.c-pagination .current {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-on-primary);
}

/* ---- Photo credits page ([tp_photo_credits]) ---- */
.tp-photo-credits {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

.tp-photo-credits li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-small);
}

.tp-photo-credits img {
	flex: none;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius-md);
}

/* ---- Comments (only when allowed in the Customizer) ---- */
.c-comments {
	margin-block: var(--space-7);
}

.c-comments__title {
	font-size: var(--text-h3);
}

.c-comments__list,
.c-comments__list .children {
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

.c-comments__list .children {
	margin: var(--space-4) 0 0 var(--space-6);
}

.c-comment {
	margin-bottom: var(--space-4);
}

.c-comment__body {
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.c-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin-bottom: var(--space-2);
}

.c-comment__avatar {
	border-radius: 50%;
}

.c-comment__date,
.c-comments__note {
	color: var(--color-muted);
	font-size: var(--text-small);
}

.c-comment__reply {
	margin: var(--space-2) 0 0;
	font-size: var(--text-small);
}

.c-comments .comment-form {
	display: grid;
	gap: var(--space-3);
}