/**
 * Blog layouts.
 *
 * The layout class sits on the element wrapping the loop; the item markup is
 * identical for all four layouts. content.php renders the image as a sibling of
 * the body rather than inside the header, which is what makes that possible.
 */

/* ==========================================================================
   Shared item
   ========================================================================== */

.veatal-post {
	min-width: 0;
	margin-bottom: var(--veatal-space-lg);
}

.veatal-post__thumb {
	margin: 0 0 var(--veatal-space-sm);
}

.veatal-post__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-box);
}

.veatal-post .entry-title {
	margin: 0 0 var(--veatal-space-2xs);
	font-size: var(--veatal-text-xl);
	line-height: var(--veatal-leading-snug);
}

.veatal-post .entry-summary {
	margin: var(--veatal-space-2xs) 0 0;
}

.veatal-post .entry-summary p:last-child {
	margin-bottom: 0;
}

.veatal-post .read-more {
	margin: var(--veatal-space-sm) 0 0;
}

/* ==========================================================================
   Meta line
   ========================================================================== */

/*
 * A flex row with a gap rather than the pipe characters the theme used to hard
 * code between the fields. The separators were markup, so switching a field off
 * would have left a stray divider behind.
 */
.veatal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--veatal-space-3xs) var(--veatal-space-sm);
	align-items: baseline;
	margin: var(--veatal-space-2xs) 0 0;
	font-size: var(--veatal-text-sm);
	color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
}

.veatal-meta__item + .veatal-meta__item::before {
	content: "·";
	margin-right: var(--veatal-space-sm);
	color: var(--color-base-300);
}

.veatal-meta a {
	color: inherit;
	text-decoration: none;
}

.veatal-meta a:hover,
.veatal-meta a:focus-visible {
	color: var(--color-primary);
	text-decoration: underline;
}

.veatal-meta--taxonomy {
	margin-top: var(--veatal-space-md);
}

/* ==========================================================================
   List — image above the text
   ========================================================================== */

.veatal-blogroll--list .veatal-post {
	padding-bottom: var(--veatal-space-lg);
	border-bottom: 1px solid var(--color-base-300);
}

.veatal-blogroll--list .veatal-post:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* ==========================================================================
   Grid — cards in columns
   ========================================================================== */

.veatal-blogroll--grid {
	display: grid;
	gap: var(--veatal-space-lg);
	align-items: start;
	grid-template-columns: minmax(0, 1fr);
}

.veatal-blogroll--grid .veatal-post {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-bottom: 0;
	padding: var(--veatal-space-sm);
	background-color: var(--color-base-200);
	border-radius: var(--radius-box);
}

.veatal-blogroll--grid .veatal-post__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* The read-more link is pinned to the bottom so cards of different lengths
   still line their calls to action up. */
.veatal-blogroll--grid .read-more {
	margin-top: auto;
	padding-top: var(--veatal-space-sm);
}

.veatal-blogroll--grid .entry-title {
	font-size: var(--veatal-text-lg);
}

@media screen and (min-width: 700px) {
	.veatal-blogroll--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (min-width: 1000px) {
	.veatal-blogroll--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * A three column grid inside a sidebar layout has roughly 280px per column,
 * which is narrower than the two column grid on a tablet. Drop back to two.
 */
@media screen and (min-width: 1000px) and (max-width: 1200px) {
	.veatal-content--sidebar-right .veatal-blogroll--cols-3,
	.veatal-content--sidebar-left .veatal-blogroll--cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Media — image beside the text
   ========================================================================== */

.veatal-blogroll--media .veatal-post {
	padding-bottom: var(--veatal-space-lg);
	border-bottom: 1px solid var(--color-base-300);
}

.veatal-blogroll--media .veatal-post:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

@media screen and (min-width: 700px) {
	.veatal-blogroll--media .veatal-post > article {
		display: grid;
		gap: var(--veatal-space-md);
		align-items: start;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.veatal-blogroll--media .veatal-post__thumb {
		margin-bottom: 0;
	}

	/*
	 * Alternating puts the image second visually while it stays first in the
	 * markup, which keeps the image next to the headline it belongs to for
	 * anyone reading in source order.
	 */
	.veatal-blogroll--alternate .veatal-post:nth-child(even) > article {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.veatal-blogroll--alternate .veatal-post:nth-child(even) .veatal-post__thumb {
		grid-column: 2;
		grid-row: 1;
	}
}

/* ==========================================================================
   Compact — title and meta only
   ========================================================================== */

.veatal-blogroll--compact .veatal-post {
	margin-bottom: 0;
	padding: var(--veatal-space-sm) 0;
	border-bottom: 1px solid var(--color-base-300);
}

.veatal-blogroll--compact .veatal-post:last-child {
	border-bottom: 0;
}

.veatal-blogroll--compact .entry-title {
	font-size: var(--veatal-text-lg);
}

.veatal-blogroll--compact .read-more {
	display: none;
}

/* ==========================================================================
   Single post
   ========================================================================== */

.veatal-single__thumb {
	margin: 0 0 var(--veatal-space-md);
}

.veatal-single__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-box);
}

.veatal-single--thumb-above-title .veatal-single__thumb {
	margin-bottom: var(--veatal-space-lg);
}

/*
 * "Full width" means the width of the content column, not of the viewport. The
 * column is a grid track, so breaking out of it would collide with the sidebar
 * whenever one is shown.
 */
.veatal-single--thumb-full-bleed .veatal-single__thumb img {
	border-radius: 0;
}

.veatal-single .entry-header {
	margin-bottom: var(--veatal-space-md);
}

.veatal-single .entry-title {
	margin: 0 0 var(--veatal-space-2xs);
}

/* ==========================================================================
   Author box
   ========================================================================== */

.veatal-author-box {
	display: flex;
	gap: var(--veatal-space-sm);
	align-items: flex-start;
	margin: var(--veatal-space-xl) 0 0;
	padding: var(--veatal-space-md);
	background-color: var(--color-base-200);
	border-radius: var(--radius-box);
}

.veatal-author-box__avatar img {
	display: block;
	border-radius: 50%;
}

.veatal-author-box__name {
	margin: 0 0 var(--veatal-space-3xs);
	font-size: var(--veatal-text-lg);
}

.veatal-author-box__bio {
	margin: 0;
	font-size: var(--veatal-text-sm);
	line-height: var(--veatal-leading-normal);
}

/* ==========================================================================
   Related posts
   ========================================================================== */

.veatal-related {
	margin: var(--veatal-space-xl) 0 0;
	padding-top: var(--veatal-space-lg);
	border-top: 1px solid var(--color-base-300);
}

.veatal-related__title {
	margin: 0 0 var(--veatal-space-md);
	font-size: var(--veatal-text-xl);
}

.veatal-related__items {
	display: grid;
	gap: var(--veatal-space-md);
	align-items: start;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.veatal-related__item {
	min-width: 0;
}

.veatal-related__thumb img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--veatal-space-2xs);
	border-radius: var(--radius-box);
}

.veatal-related__item-title {
	margin: 0;
	font-size: var(--veatal-text-base);
	line-height: var(--veatal-leading-snug);
}

.veatal-related__item-title a {
	text-decoration: none;
}

.veatal-related__item-title a:hover,
.veatal-related__item-title a:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   Post navigation
   ========================================================================== */

/*
 * the_post_navigation() emits .nav-links with one or two .nav-previous /
 * .nav-next children. Two equal cards rather than two bare links: the previous
 * and next post are a pair of destinations, and a pair reads as a pair.
 */
.post-navigation {
	margin: var(--veatal-space-xl) 0 0;
	padding-top: var(--veatal-space-lg);
	border-top: 1px solid var(--color-base-300);
}

.post-navigation .nav-links {
	display: grid;
	gap: var(--veatal-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	display: block;
	height: 100%;
	padding: var(--veatal-space-md);
	background-color: var(--color-base-200);
	border-radius: var(--radius-box);
	text-decoration: none;
	transition:
		background-color var(--veatal-duration) var(--veatal-ease),
		box-shadow var(--veatal-duration) var(--veatal-ease);
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover,
.post-navigation .nav-previous a:focus-visible,
.post-navigation .nav-next a:focus-visible {
	box-shadow: var(--veatal-shadow-md);
}

/* The next card aligns right, so the pair reads outward from the centre. */
.post-navigation .nav-next {
	text-align: right;
}

.veatal-post-nav__label {
	display: block;
	margin-bottom: var(--veatal-space-3xs);
	font-size: var(--veatal-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
}

.veatal-post-nav__title {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--veatal-text-base);
	line-height: var(--veatal-leading-snug);
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comments-area {
	margin: var(--veatal-space-xl) 0 0;
	padding-top: var(--veatal-space-lg);
	border-top: 1px solid var(--color-base-300);
}

.comments-title,
.comment-reply-title {
	margin: 0 0 var(--veatal-space-md);
	font-size: var(--veatal-text-xl);
}

.comment-list {
	margin: 0 0 var(--veatal-space-xl);
	padding: 0;
	list-style: none;
}

.comment-list .comment-body {
	margin-bottom: var(--veatal-space-md);
	padding: var(--veatal-space-md);
	background-color: var(--color-base-200);
	border-radius: var(--radius-box);
}

.comment-list .children {
	margin-left: var(--veatal-space-md);
	padding-left: var(--veatal-space-md);
	border-left: 2px solid var(--color-base-300);
	list-style: none;
}

.comment-meta {
	margin-bottom: var(--veatal-space-2xs);
	font-size: var(--veatal-text-sm);
}

.comment-form p {
	margin-bottom: var(--veatal-space-sm);
}

.comment-form label {
	display: block;
	margin-bottom: var(--veatal-space-3xs);
	font-size: var(--veatal-text-sm);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
}

/* ==========================================================================
   Nothing found
   ========================================================================== */

.veatal-no-results {
	padding: var(--veatal-space-xl) 0;
}

.veatal-no-results .entry-title {
	margin-bottom: var(--veatal-space-sm);
}

/* ==========================================================================
   Archive and search headers
   ========================================================================== */

.page-header {
	margin-bottom: var(--veatal-space-lg);
	padding-bottom: var(--veatal-space-sm);
	border-bottom: 1px solid var(--color-base-300);
}

.page-header .page-title {
	margin: 0;
	font-size: var(--veatal-text-2xl);
}

.archive-description {
	margin-top: var(--veatal-space-2xs);
	color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
}