/* Single project navigation — layouts other than Classic (Theme Options → Portfolio → Project navigation).
   Loaded only on single projects that use one of them; markup in portfolio/pagination.php.
   Colours come from the Theme Options as custom properties on the nav (--pnav-*); the fallbacks below
   are the defaults. */

.ms-pnav {
	--ms-pnav-ease: cubic-bezier(.22, .61, .36, 1);
	--ms-pnav-radius: var(--border-radius-images, 6px);
	margin: 56px 0 64px;
	color: var(--pnav-text, currentColor);
}
.single-portfolio .container-fluid .ms-pnav:not(.ms-pnav--next) { padding: 0 30px; }
.ms-pnav a,
.ms-pnav a:hover,
.ms-pnav a:focus { color: inherit; text-decoration: none; }
.ms-pnav__item { display: flex; min-width: 0; }
.ms-pnav__item:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.ms-pnav__body { display: flex; flex-direction: column; gap: 0px; min-width: 0; }
.ms-pnav__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.6;
}
.ms-pnav__label i { font-size: 1.15em; transition: transform .45s var(--ms-pnav-ease); }
.ms-pnav__item--prev:hover .ms-pnav__label i { transform: translateX(-6px); }
.ms-pnav__item--next:hover .ms-pnav__label i { transform: translateX(6px); }
.ms-pnav .ms-pnav__title {
	margin: 0;
	line-height: 1.2;
	color: inherit;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ms-pnav__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ms-pnav__all {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 1.35rem;
	transition: background-color .3s ease;
}
.ms-pnav__all:hover { background-color: rgba(127, 127, 127, .12); }
.ms-pnav__side--next { display: flex; justify-content: flex-end; text-align: right; }
.ms-pnav__side--next .ms-pnav__body { align-items: flex-end; }

/* Thumbnails: a small picture beside each title, the grid icon in between. */
.ms-pnav--thumbs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	padding-top: 28px;
}
.ms-pnav--thumbs .ms-pnav__item { align-items: center; gap: 18px; }
.ms-pnav--thumbs .ms-pnav__item--next { flex-direction: row-reverse; }
.ms-pnav__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 84px;
	height: 84px;
	overflow: hidden;
	border-radius: var(--ms-pnav-radius);
	background: rgba(127, 127, 127, .1);
	font-size: 1.4rem;
}
.ms-pnav__thumb .ms-pnav__img { transition: transform .8s var(--ms-pnav-ease); }
.ms-pnav--thumbs .ms-pnav__item:hover .ms-pnav__img { transform: scale(1.08); }
.ms-pnav--thumbs .ms-pnav__title { font-size: 1.6rem; }

/* Large titles: two halves, big titles, an underline that draws on hover. */
.ms-pnav--titles {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: start;
	border-top: 1px solid var(--pnav-line, rgba(127, 127, 127, .25));
	border-bottom: 1px solid var(--pnav-line, rgba(127, 127, 127, .25));
}
.ms-pnav--titles .ms-pnav__side { padding: 40px 0; }
.ms-pnav--titles .ms-pnav__item { width: 100%; }
.ms-pnav--titles .ms-pnav__side--next .ms-pnav__item { justify-content: flex-end; }
.ms-pnav--titles .ms-pnav__body { gap: 14px; }
.ms-pnav--titles .ms-pnav__title {
	font-size: clamp(1.45rem, 2.8vw, 2.6rem);
	line-height: 1.12;
	padding-bottom: 4px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .6s var(--ms-pnav-ease);
}
.ms-pnav--titles .ms-pnav__side--next .ms-pnav__title { background-position: 100% 100%; }
.ms-pnav--titles .ms-pnav__item:hover .ms-pnav__title { background-size: 100% 1px; }
.ms-pnav--titles .ms-pnav__all { align-self: center; margin: 0 24px; }

/* Pictures (Image cards, Next project banner): the image, an overlay that cross-fades to the hover
   overlay, the text on top. */
.ms-pnav--cards .ms-pnav__item,
.ms-pnav--next .ms-pnav__item {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.ms-pnav--cards .ms-pnav__img,
.ms-pnav--next .ms-pnav__img {
	position: absolute;
	inset: 0;
	z-index: -3;
	transition: transform 1.2s var(--ms-pnav-ease);
}
.ms-pnav--cards .has-image::before,
.ms-pnav--cards .has-image::after,
.ms-pnav--next .has-image::before,
.ms-pnav--next .has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	transition: opacity .6s ease;
}
.ms-pnav--cards .has-image::before,
.ms-pnav--next .has-image::before { z-index: -2; }
.ms-pnav--cards .has-image::after,
.ms-pnav--next .has-image::after { z-index: -1; opacity: 0; }
.ms-pnav--cards .has-image:hover::after,
.ms-pnav--next .has-image:hover::after { opacity: 1; }
.ms-pnav--cards .has-image,
.ms-pnav--cards .has-image:hover,
.ms-pnav--next .has-image,
.ms-pnav--next .has-image:hover { color: var(--pnav-image-text, #fff); }

/* Image cards: the neighbouring projects as two pictures with their titles on top. */
.ms-pnav--cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.ms-pnav--cards .ms-pnav__side { display: block; text-align: left; }
.ms-pnav--cards .ms-pnav__side--next { grid-column: 2; }
.ms-pnav--cards .ms-pnav__item {
	align-items: flex-end;
	height: clamp(200px, 24vw, 340px);
	border-radius: var(--ms-pnav-radius);
	background: var(--pnav-bg, rgba(127, 127, 127, .1));
}
.ms-pnav--cards .has-image::before { background: linear-gradient(to top, var(--pnav-overlay, rgba(0, 0, 0, .62)), transparent 72%); }
.ms-pnav--cards .has-image::after { background: linear-gradient(to top, var(--pnav-overlay-hover, rgba(84, 70, 55, .78)), transparent 80%); }
.ms-pnav--cards .has-image .ms-pnav__label { opacity: .85; }
.ms-pnav--cards .ms-pnav__body { width: 100%; padding: 26px 28px; }
.ms-pnav--cards .ms-pnav__item--next .ms-pnav__body { align-items: flex-end; text-align: right; }
.ms-pnav--cards .ms-pnav__title { font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
.ms-pnav--cards .ms-pnav__item:hover .ms-pnav__img { transform: scale(1.06); }

/* Next project banner: one wide picture leading to the next project. */
.ms-pnav--next .ms-pnav__item {
	align-items: center;
	justify-content: center;
	min-height: clamp(260px, 42vh, 520px);
	padding: 48px 24px;
	text-align: center;
	background: var(--pnav-bg, #ebe8e2);
}
.single-portfolio .container .ms-pnav--next .ms-pnav__item { border-radius: var(--ms-pnav-radius); }
.ms-pnav--next .ms-pnav__img { transform: scale(1.02); transition-duration: 1.4s; }
.ms-pnav--next .has-image::before { background: var(--pnav-overlay, rgba(0, 0, 0, .4)); }
.ms-pnav--next .has-image::after { background: var(--pnav-overlay-hover, rgba(84, 70, 55, .62)); }
.ms-pnav--next .ms-pnav__item:hover .ms-pnav__img { transform: scale(1.08); }
.ms-pnav--next .ms-pnav__body { align-items: center; gap: 16px; max-width: 900px; }
.ms-pnav--next .ms-pnav__label { opacity: .85; }
.ms-pnav--next .ms-pnav__title { font-size: clamp(1.8rem, 4.4vw, 4rem); line-height: 1.05; -webkit-line-clamp: 3; }
/* The circle is the icon (a 1em square) plus padding, so it always grows around the icon. */
.ms-pnav__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
	padding: 18px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	transition: transform .5s var(--ms-pnav-ease);
}
.ms-pnav__arrow > i { display: block; width: 1em; height: 1em; line-height: 1; text-align: center; }
.ms-pnav__arrow > i::before { display: block; line-height: 1; }
.ms-pnav--next .ms-pnav__item:hover .ms-pnav__arrow { transform: translateX(8px); }

@media (max-width: 767px) {
	.ms-pnav { margin: 40px 0 48px; }
	.single-portfolio .container-fluid .ms-pnav:not(.ms-pnav--next) { padding: 0 20px; }
	/* Thumbnails: picture above the texts, so the label and the title get the whole half. */
	.ms-pnav--thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
	.ms-pnav--thumbs .ms-pnav__all { display: none; }
	.ms-pnav--thumbs .ms-pnav__item,
	.ms-pnav--thumbs .ms-pnav__item--next { flex-direction: column; align-items: flex-start; gap: 12px; }
	.ms-pnav--thumbs .ms-pnav__item--next { align-items: flex-end; }
	.ms-pnav__thumb { width: 64px; height: 64px; }
	.ms-pnav--thumbs .ms-pnav__label { gap: 6px; letter-spacing: .1em; }
	.ms-pnav--thumbs .ms-pnav__title { font-size: .95rem; }
	.ms-pnav--titles { grid-template-columns: minmax(0, 1fr); }
	.ms-pnav--titles .ms-pnav__side { padding: 26px 0; }
	.ms-pnav--titles .ms-pnav__side--prev:not(:empty) { border-bottom: 1px solid var(--pnav-line, rgba(127, 127, 127, .25)); }
	.ms-pnav--titles .ms-pnav__all { display: none; }
	.ms-pnav--cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ms-pnav--cards .ms-pnav__side--next { grid-column: auto; }
	.ms-pnav--cards .ms-pnav__side:empty { display: none; }
	.ms-pnav--cards .ms-pnav__item { height: 200px; }
	.ms-pnav--cards .ms-pnav__body { padding: 20px; }
	.ms-pnav__all { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.ms-pnav *,
	.ms-pnav *::before,
	.ms-pnav *::after { transition: none !important; }
}