/**
 * Blanky Nordic — single post.
 *
 * templates/single.html puts the article (patterns/single-main.php) and the
 * sidebar part side by side in .nordic-with-sidebar.
 *
 * @package Blanky_Nordic
 * @since   3.7
 */

/* --- Article + sidebar ----------------------------------------------------- */

/* 750px article + 300px sidebar at the wide size; stacked below 1024px. Core's
   columns block stacks at 782px and cannot be given another breakpoint. */
.nordic-with-sidebar {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: minmax(0, 1fr);
}

.nordic-with-sidebar > * {
	margin-block: 0;
}

@media (width >= 1024px) {

	.nordic-with-sidebar {
		grid-template-columns: minmax(0, 750px) minmax(0, 300px);
		justify-content: space-between;
	}
}

/* --- Header of the article ----------------------------------------------- */

.nordic-entry__term {
	color: var(--wp--preset--color--foreground);
}

.nordic-entry__title {
	font-size: var(--wp--preset--font-size--giant);
	font-style: italic;
}

.nordic-entry-lead {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lg);
}

.nordic-entry-lead .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.nordic-byline {
	align-items: center;
	border-block: var(--nordic-frame);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	padding-block: var(--wp--preset--spacing--30);
}

.nordic-byline .wp-block-avatar img {
	border-radius: 50%;
	display: block;
}

.nordic-byline__author {
	color: var(--wp--preset--color--foreground);
	font-weight: 700;
}

/* Gold slash before the date and the time to read. Empty alt text, so screen readers skip it. */
.nordic-byline-date::before,
.nordic-byline-time::before {
	color: var(--nordic-line);
	content: "/" / "";
	margin-inline-end: var(--wp--preset--spacing--30);
}

/* --- Image and content -------------------------------------------------------- */

.nordic-entry__image {
	margin: 0;
}

.nordic-entry__image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

.nordic-entry__content h2 {
	font-size: var(--wp--preset--font-size--huge);
	margin-block-start: var(--wp--preset--spacing--60);
}

.nordic-entry__content .wp-block-quote {
	border-left: 3px solid var(--nordic-line);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	font-style: italic;
	padding-left: var(--wp--preset--spacing--40);
}

/* --- Tags ---------------------------------------------------------------- */

.nordic-entry__tags {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.nordic-entry__tags .wp-block-post-terms__prefix {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	margin-inline-end: var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

.nordic-entry__tags a {
	border: var(--nordic-frame);
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.25em 0.9em;
	text-decoration: none;
}

@media (hover: hover) {

	.nordic-entry__tags a:hover {
		border-color: var(--wp--preset--color--foreground);
	}
}

/* --- Author box ------------------------------------------------------------ */

.nordic-author-box {
	border-top: var(--nordic-divider);
	padding-top: var(--wp--preset--spacing--40);
}

.nordic-author-box .wp-block-avatar img {
	border-radius: 50%;
	display: block;
}

.nordic-author-box__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	font-style: italic;
}

.nordic-author-box__bio {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* --- Previous / next ------------------------------------------------------- */

.nordic-post-nav {
	border-block: var(--nordic-divider);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--wp--preset--spacing--40);
}

.nordic-post-nav > * {
	margin-block: 0;
}

/* Only post on the site: both links render nothing, so drop the empty ruled box. */
.nordic-post-nav:not(:has(a)) {
	display: none;
}

@media (width >= 600px) {

	.nordic-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nordic-post-nav__next {
		grid-column: 2;
		text-align: right;
	}
}

.nordic-post-nav a {
	display: block;
	text-decoration: none;
}

.nordic-post-nav .post-navigation-link__label {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.nordic-post-nav .post-navigation-link__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xl);
	font-style: italic;
}

.nordic-post-nav [class*="wp-block-post-navigation-link__arrow"] {
	display: none;
}

@media (hover: hover) {

	.nordic-post-nav a:hover .post-navigation-link__title {
		text-decoration: underline;
		text-decoration-color: var(--nordic-line);
	}
}

/* --- Related posts --------------------------------------------------------- */

.nordic-related__title {
	font-size: var(--wp--preset--font-size--xxxl);
	font-style: italic;
}

/* No other posts yet: hide the heading rather than leave it over nothing. */
.nordic-related:not(:has(.wp-block-post)) {
	display: none;
}

/* --- Pages ---------------------------------------------------------------- */

.nordic-page__title {
	font-size: var(--wp--preset--font-size--giant);
	font-style: italic;
}

.nordic-page__image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}