/*
 * Modality content: post lists, single posts, pages, comments, search and the 404.
 * Handle `modality-content`. Shared tokens and buttons come from core.css.
 */

/* Long words and URLs must wrap rather than widen the page. */
.mty-post__title,
.mty-entry__title,
.mty-cover__title,
.mty-adjacent__title {
	overflow-wrap: anywhere;
}

.entry-content,
.mty-comment__text {
	overflow-wrap: break-word;
}

.mty-area__content {
	min-width: 0;
}

/* Details line: a dimmed middle dot between items. */
.mty-details {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin-block-end: var(--mty-space-s);
}

.mty-details__item + .mty-details__item::before {
	content: "\00b7";
	margin-inline: .5em;
	opacity: .55;
}

.mty-details a {
	color: inherit;
	text-decoration: none;
}

.mty-details a:hover,
.mty-details a:focus {
	color: var(--mty-color-link-hover, var(--mty-color-accent));
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* Post lists */
.mty-post-list--grid,
.mty-post-list--masonry {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: 40px 32px;
}

.mty-post-list--cols-2 {
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

@media (min-width: 701px) {
	.mty-post-list--cols-2 {
		grid-template-columns: repeat(auto-fit, minmax(max(240px, calc(50% - 16px)), 1fr));
	}

	.mty-post-list--cols-3 {
		grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(33.333% - 22px)), 1fr));
	}

	.mty-post-list--cols-4 {
		grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(25% - 24px)), 1fr));
	}
}

.mty-post-list--masonry {
	align-items: start;
}

.mty-post-list--classic {
	display: grid;
	gap: 56px;
}

.mty-post {
	min-width: 0;
}

.mty-post__media {
	display: block;
	overflow: hidden;
	margin-block-end: var(--mty-space-s);
	border-radius: var(--mty-radius);
}

.mty-post__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--mty-post-ratio);
	object-fit: cover;
	transition: transform .4s ease;
}

.mty-post__media:hover .mty-post__image {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.mty-post__media:hover .mty-post__image {
		transform: none;
	}
}

.mty-motion--reduce .mty-post__media:hover .mty-post__image {
	transform: none;
}

.mty-post-list--natural .mty-post__image {
	aspect-ratio: auto;
}

.mty-post .mty-post__title {
	margin-block-end: .4em;
	font-size: clamp(calc(var(--mty-h3) * .85), calc(var(--mty-h3) * .7 + .5vw), var(--mty-h3));
}

.mty-post__title a {
	color: inherit;
	text-decoration: none;
}

.mty-post__title a:hover,
.mty-post__title a:focus {
	color: var(--mty-color-link-hover, var(--mty-color-accent));
}

.mty-post__meta {
	margin-block-end: .6rem;
}

.mty-post__excerpt {
	margin-block-end: .6rem;
}

.mty-post__more {
	display: inline-block;
	padding-block: .55em;
	font-family: var(--mty-font-accent);
	font-size: .95rem;
	font-weight: 500;
	text-underline-offset: .2em;
}

.mty-post__content > :last-child {
	margin-block-end: 0;
}

.mty-post.mty-post--large .mty-post__title {
	font-size: clamp(calc(var(--mty-h2) * .7), calc(var(--mty-h2) * .55 + 1.2vw), var(--mty-h2));
}

.mty-post--large .mty-post__media {
	margin-block-end: var(--mty-space-m);
}

/* The default list: date, text, small image, split by hairlines. */
.mty-post-list--list {
	border-block-end: 1px solid var(--mty-color-line);
}

.mty-post-list--list > .mty-post {
	padding-block: var(--mty-space-l);
	border-block-start: 1px solid var(--mty-color-line);
}

.mty-post--row {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 15rem);
	gap: var(--mty-space-xs) var(--mty-space-l);
	align-items: start;
}

.mty-area--left .mty-post--row,
.mty-area--right .mty-post--row {
	grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 11rem);
	column-gap: var(--mty-space-m);
}

.mty-post--row:not(:has(.mty-post__media)) .mty-post__body {
	grid-column: 2 / -1;
	max-width: 46rem;
}

.mty-post--row .mty-post__when {
	padding-block-start: .4em;
}

.mty-post--row .mty-post__media {
	margin: 0;
}

.mty-post--row .mty-post__excerpt {
	max-width: 42rem;
}

/* Media formats in the list style keep the date's column, with the media above the text. */
.mty-post-list--list > .mty-post--card {
	padding-inline-start: calc(8.5rem + var(--mty-space-l));
}

.mty-area--left .mty-post-list--list > .mty-post--card,
.mty-area--right .mty-post-list--list > .mty-post--card {
	padding-inline-start: calc(7rem + var(--mty-space-m));
}

@media (max-width: 700px) {
	.mty-post--row,
	.mty-area--left .mty-post--row,
	.mty-area--right .mty-post--row {
		grid-template-columns: minmax(0, 1fr);
	}

	.mty-post--row:not(:has(.mty-post__media)) .mty-post__body {
		grid-column: auto;
	}

	.mty-post--row .mty-post__media {
		order: -1;
		margin-block-end: var(--mty-space-xs);
	}

	.mty-post--row .mty-post__when {
		padding: 0;
	}

	.mty-post--row .mty-post__when:empty {
		display: none;
	}

	.mty-post-list--list > .mty-post {
		padding-block: var(--mty-space-m);
	}

	.mty-post-list--list > .mty-post--card,
	.mty-area--left .mty-post-list--list > .mty-post--card,
	.mty-area--right .mty-post-list--list > .mty-post--card {
		padding-inline-start: 0;
	}
}

/* Post formats in lists */
.mty-post--format-aside .mty-post__body {
	padding: var(--mty-space-m);
	border-radius: var(--mty-radius);
	background: var(--mty-color-surface);
}

.mty-post--format-aside .mty-post__content {
	color: var(--mty-color-heading);
	font-family: var(--mty-font-heading);
	font-size: 1.1em;
}

.mty-post--format-aside .mty-post__meta,
.mty-post--format-aside .mty-post__more {
	margin-block-start: .6rem;
}

.mty-post--format-aside .mty-post__meta {
	margin-block-end: 0;
}

.mty-post--format-image .mty-post__media {
	margin-block-end: var(--mty-space-xs);
}

.mty-post__player {
	overflow: hidden;
	margin-block-end: var(--mty-space-s);
	border-radius: var(--mty-radius);
}

.mty-post__player--video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--mty-color-heading);
}

.mty-post__player--video iframe,
.mty-post__player--video video,
.mty-post__player--video object,
.mty-post__player--video embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mty-post__player--audio {
	padding: var(--mty-space-s);
	background: var(--mty-color-surface);
}

.mty-post__player--audio audio,
.mty-post__player--audio iframe {
	display: block;
	width: 100%;
}

.mty-post__tiles {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
	overflow: hidden;
	margin-block-end: var(--mty-space-s);
	border-radius: var(--mty-radius);
	aspect-ratio: 3 / 2;
}

.mty-post__tiles img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
}

.mty-post__tiles--1 {
	grid-template-columns: 1fr;
}

.mty-post__tiles--3 img:first-child {
	grid-row: span 2;
}

.mty-post__tiles-more {
	position: absolute;
	inset-block-end: .5rem;
	inset-inline-end: .5rem;
	padding: .1em .6em;
	border-radius: var(--mty-radius-pill);
	background: var(--mty-color-heading);
	color: #fff;
	font-family: var(--mty-font-accent);
	font-size: .85rem;
}

/* Pagination */
.mty-pagination,
.mty-pagination--adjacent {
	margin-block-start: var(--mty-space-l);
	font-family: var(--mty-font-accent);
}

.mty-pagination .nav-links,
.mty-pagination--adjacent .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	align-items: center;
}

.mty-pagination .page-numbers,
.mty-page-links .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: .6em;
	border-radius: var(--mty-button-radius);
	text-decoration: none;
}

.mty-pagination a.page-numbers:hover,
.mty-page-links a.post-page-numbers:hover {
	background: var(--mty-color-surface);
}

.mty-pagination .page-numbers.current,
.mty-page-links .post-page-numbers.current {
	background: var(--mty-color-primary);
	color: #fff;
}

.mty-pagination--adjacent .nav-links {
	justify-content: space-between;
}

.mty-pagination--adjacent a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.mty-pagination--adjacent .nav-next {
	margin-inline-start: auto;
}

.mty-load-more {
	margin-block-start: var(--mty-space-l);
	text-align: center;
}

.mty-load-more[hidden],
.mty-load-more [hidden] {
	display: none;
}

/* Nothing found */
.mty-nothing {
	max-width: 40rem;
}

/* Single post and page */
.mty-entry__header {
	margin-block-end: var(--mty-space-m);
}

.mty-entry__title {
	margin-block-end: .35em;
}

.mty-entry__details {
	margin-block-end: 0;
}

.mty-entry-figure {
	margin-block: 0 var(--mty-space-l);
}

.mty-entry-figure img {
	display: block;
	width: 100%;
	max-height: 80vh;
	border-radius: var(--mty-radius);
	object-fit: cover;
}

.mty-entry-figure--top {
	margin-block-end: var(--mty-space-l);
}

/* With the image first, the title bar sits inside the main area and owns the gap below it. */
.mty-entry-top + .mty-titlebar {
	margin-block-end: var(--mty-space-l);
}

.mty-entry-top:not(:has(+ .mty-titlebar)) .mty-entry-figure--top {
	margin-block-end: var(--mty-space-m);
}

.mty-entry__content::after {
	content: "";
	display: table;
	clear: both;
}

.mty-entry__content > :last-child {
	margin-block-end: 0;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-block-start: 1.6em;
}

.entry-content > :first-child {
	margin-block-start: 0;
}

.entry-content .wp-block-image,
.entry-content .wp-block-gallery,
.entry-content .wp-block-embed {
	margin-block: var(--mty-space-m);
}

.entry-content .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
}

/* Video embeds keep their shape as the column changes. */
.entry-content :not(.wp-block-embed__wrapper) > iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vimeo"], [src*="videopress"], [src*="wordpress.tv"]) {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.entry-content .gallery-item img {
	display: block;
	width: 100%;
}

/* Core's gallery styles reset the side margins wide and full-width blocks need. */
:where(.entry-content) .wp-block-gallery.alignfull {
	margin-inline: calc(50% - 50vw);
}

:where(.entry-content) .wp-block-gallery.alignwide {
	margin-inline: calc((100% - min(var(--mty-container), 100vw - 2 * var(--mty-gutter-safe))) / 2);
}

/* In a list or beside a sidebar there is no room to break out of the column. */
.mty-post__content .alignwide,
.mty-post__content .alignfull,
.mty-post__content .wp-block-gallery:is(.alignwide, .alignfull),
.mty-area--left .wp-block-gallery:is(.alignwide, .alignfull),
.mty-area--right .wp-block-gallery:is(.alignwide, .alignfull),
.mty-area--left .alignwide,
.mty-area--right .alignwide,
.mty-area--left .alignfull,
.mty-area--right .alignfull {
	width: 100%;
	margin-inline: 0;
}

/* Post formats on the single view: the media is the point, so it takes more room. */
@media (min-width: 900px) {
	.mty-area--none .mty-entry--format-image .entry-content > :is(figure, p):has(img):first-child,
	.mty-area--none .mty-entry--format-video .entry-content > :is(figure, p):has(video, iframe):first-child {
		margin-inline: calc(-1 * clamp(0px, (100vw - var(--mty-container-narrow)) / 2 - var(--mty-gutter-safe), 120px));
	}

	.mty-area--none .mty-entry--format-image .entry-content > :is(figure, p):has(img):first-child img {
		width: 100%;
	}
}

.mty-entry--format-aside .entry-content {
	padding: var(--mty-space-m);
	border-radius: var(--mty-radius);
	background: var(--mty-color-surface);
	color: var(--mty-color-heading);
	font-family: var(--mty-font-heading);
	font-size: 1.15em;
}

.mty-entry--format-audio .entry-content > :is(figure, p):has(audio, iframe):first-child {
	padding: var(--mty-space-s);
	border-radius: var(--mty-radius);
	background: var(--mty-color-surface);
}

.mty-entry--format-gallery .entry-content .gallery,
.mty-entry--format-gallery .entry-content .wp-block-gallery {
	margin-block-start: 0;
}

.entry-content .wp-block-video,
.entry-content video,
.entry-content .wp-video {
	max-width: 100%;
}

/* Cover header: the image fills a dark title area, flush under the header. */
.mty-has-post-cover .mty-main {
	padding-block-start: 0;
}

.mty-cover {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(360px, 60vh, 640px);
	margin-block-end: var(--mty-space-l);
	overflow: hidden;
	background: #17201d;
	color: #fff;
}

.mty-header-floats .mty-cover {
	padding-block-start: var(--mty-masthead-flow, var(--mty-header-height, 0px));
}

.mty-cover__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mty-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 50%, rgba(0, 0, 0, .12));
}

.mty-cover__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--mty-space-xl) var(--mty-space-l);
}

.mty-cover__title {
	color: #fff;
}

.mty-cover__details {
	margin: 0;
	color: rgba(255, 255, 255, .92);
}

/* After the content */
.mty-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	align-items: center;
	margin-block-start: var(--mty-space-m);
	font-family: var(--mty-font-accent);
}

.mty-page-links__label {
	margin-inline-end: .5rem;
	color: var(--mty-color-muted);
	font-size: .85rem;
}

.mty-entry__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-block-start: var(--mty-space-m);
}

.mty-entry__tags a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding-inline: .8em;
	border: 1px solid var(--mty-color-line);
	border-radius: var(--mty-radius-pill);
	font-family: var(--mty-font-accent);
	font-size: .8rem;
	text-decoration: none;
}

.mty-entry__tags a:hover {
	border-color: currentColor;
}

.mty-author {
	display: flex;
	gap: var(--mty-space-m);
	margin-block-start: var(--mty-space-l);
	padding: var(--mty-space-m);
	border-radius: var(--mty-radius);
	background: var(--mty-color-surface);
}

.mty-author__avatar {
	flex: none;
	width: 88px;
	height: 88px;
	border-radius: 50%;
}

.mty-author .mty-author__name {
	margin-block-end: .3em;
	font-size: var(--mty-h4);
}

.mty-author__bio > :last-child {
	margin-block-end: .5rem;
}

.mty-author__link {
	display: inline-block;
	padding-block: .4em;
	font-family: var(--mty-font-accent);
	font-size: .95rem;
}

.mty-adjacent {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mty-space-m);
	margin-block-start: var(--mty-space-l);
	padding-block: var(--mty-space-m);
	border-block: 1px solid var(--mty-color-line);
}

.mty-adjacent__slot--next {
	text-align: end;
}

.mty-adjacent a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.mty-adjacent__label {
	display: flex;
	align-items: center;
	gap: .35em;
	margin-block-end: .35rem;
	color: var(--mty-color-muted);
	font-family: var(--mty-font-accent);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.mty-adjacent__slot--next .mty-adjacent__label {
	justify-content: flex-end;
}

.mty-adjacent__title {
	display: block;
	color: var(--mty-color-heading);
	font-family: var(--mty-font-heading);
	font-size: 1.15em;
	font-weight: var(--mty-weight-heading);
	line-height: 1.3;
	transition: color var(--mty-transition);
}

.mty-adjacent a:hover .mty-adjacent__title {
	color: var(--mty-color-link-hover, var(--mty-color-accent));
}

@media (max-width: 560px) {
	.mty-author {
		flex-direction: column;
	}

	.mty-adjacent {
		grid-template-columns: minmax(0, 1fr);
	}

	.mty-adjacent__slot--next {
		text-align: start;
	}

	.mty-adjacent__slot--next .mty-adjacent__label {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.mty-adjacent__slot:empty {
		display: none;
	}
}

/* Related posts */
.mty-related {
	margin-block-start: var(--mty-space-xl);
	padding-block-start: var(--mty-space-l);
	border-block-start: 1px solid var(--mty-color-line);
}

.mty-related .mty-related__title {
	font-size: var(--mty-h3);
}

.mty-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 40px 32px;
}

@media (min-width: 701px) {
	.mty-related__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mty-related__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 901px) {
	.mty-related__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mty-post.mty-post--related .mty-post__title {
	font-size: var(--mty-h4);
}

.mty-post--related .mty-post__tiles,
.mty-post--related .mty-post__player {
	margin-block-end: var(--mty-space-xs);
}

/* Comments */
.mty-comments {
	margin-block-start: var(--mty-space-l);
}

.mty-comments__list,
.mty-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mty-comments__list .children {
	padding-inline-start: 32px;
}

.mty-comment__body {
	padding-block: var(--mty-space-m);
	border-block-start: 1px solid var(--mty-color-line);
}

.mty-comment__head {
	display: flex;
	gap: .75rem;
	align-items: center;
	margin-block-end: .6rem;
}

.mty-comment__avatar {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.mty-comment__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mty-comment__who .fn {
	color: var(--mty-color-heading);
	font-weight: 600;
}

.mty-comment__who .fn a {
	color: inherit;
}

.mty-comment__when {
	text-decoration: none;
}

.mty-comment__text > :last-child {
	margin-block-end: .4rem;
}

.mty-comment__reply a,
.mty-comment__edit a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-family: var(--mty-font-accent);
	font-size: .9rem;
}

.mty-comment__edit {
	margin-inline-start: .75rem;
}

.mty-comment__moderation {
	font-style: italic;
}

.mty-comment--ping {
	padding-block: .6rem;
	border-block-start: 1px solid var(--mty-color-line);
	overflow-wrap: anywhere;
}

.mty-comment__ping {
	margin: 0;
}

.mty-pagination--comments {
	margin-block-start: var(--mty-space-m);
}

.mty-comments .navigation.mty-pagination--comments .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	align-items: center;
}

.mty-comments .navigation.mty-pagination--comments .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: .6em;
	border-radius: var(--mty-button-radius);
	font-family: var(--mty-font-accent);
	text-decoration: none;
}

.mty-comments .navigation.mty-pagination--comments .page-numbers.current {
	background: var(--mty-color-primary);
	color: #fff;
}

.comment-respond {
	margin-block-start: var(--mty-space-l);
}

.comment-reply-title small {
	margin-inline-start: .75rem;
	font-family: var(--mty-font-accent);
	font-size: .9rem;
	font-weight: 400;
	letter-spacing: 0;
}

.mty-comment .comment-respond {
	margin-block: var(--mty-space-s) var(--mty-space-m);
}

.comment-form label {
	display: block;
}

.comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: baseline;
}

.comment-notes,
.logged-in-as {
	color: var(--mty-color-muted);
	font-size: .9em;
}

/* Password form */
.post-password-form input[type="password"] {
	max-width: 22rem;
	margin-block-start: .25em;
}

/* 404 */
.mty-not-found {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: 64px;
	text-align: center;
}

.mty-not-found__code {
	color: var(--mty-color-line);
	font-family: var(--mty-font-heading);
	font-size: clamp(7rem, 22vw, 14rem);
	font-weight: var(--mty-weight-heading);
	line-height: 1;
}

.mty-not-found__image {
	width: 100%;
	max-width: 420px;
	margin-block-end: var(--mty-space-m);
	border-radius: var(--mty-radius);
}

.mty-not-found__text {
	max-width: 560px;
}

.mty-not-found__search {
	width: 100%;
	max-width: 480px;
	margin-block-end: var(--mty-space-m);
	text-align: start;
}

/* Full Width and Canvas: the content runs edge to edge. */
.mty-full-width > .alignfull,
.mty-canvas > .alignfull {
	width: 100%;
	margin-inline: 0;
}

.mty-full-width > :first-child,
.mty-canvas > :first-child {
	margin-block-start: 0;
}