
/**
 * Jetpack related posts
 */

/**
 * The Gutenberg block
 */
.jp-related-posts-i2 {
	margin-top: 1.5rem;
}

.jp-related-posts-i2__list {
	--hgap: 1rem;
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--hgap);
	row-gap: 2rem;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.jp-related-posts-i2__post {
	display: flex;
	flex-direction: column;
	/* Default: 2 items by row */
	flex-basis: calc(( 100% - var(--hgap) ) / 2);
}

/* Quantity qeuries: see https://alistapart.com/article/quantity-queries-for-css/ */
.jp-related-posts-i2__post:nth-last-child(n+3):first-child, .jp-related-posts-i2__post:nth-last-child(n+3):first-child ~ * {
	/* From 3 total items on, 3 items by row */
	flex-basis: calc(( 100% - var(--hgap) * 2 ) / 3);
}

.jp-related-posts-i2__post:nth-last-child(4):first-child, .jp-related-posts-i2__post:nth-last-child(4):first-child ~ * {
	/* Exception for 4 total items: 2 items by row */
	flex-basis: calc(( 100% - var(--hgap) ) / 2);
}

.jp-related-posts-i2__post-link {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
	width: 100%;
	margin-bottom: 1rem;
	line-height: 1.2;
}

.jp-related-posts-i2__post-link:focus-visible {
	outline-offset: 2px;
}

.jp-related-posts-i2__post-img {
	order: -1;
	max-width: 100%;
}

.jp-related-posts-i2__post-defs {
	margin: 0;
	list-style-type: unset;
}

/* Hide, except from screen readers */
.jp-related-posts-i2__post-defs dt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.jp-related-posts-i2__post-defs dd {
	margin: 0;
}

/* List view */
.jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__list {
	display: block;
}

.jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__post {
	margin-bottom: 2rem;
}

/* Breakpoints */
@media only screen and (max-width: 640px) {
	.jp-related-posts-i2__list {
		display: block;
	}
	
	.jp-related-posts-i2__post {
		margin-bottom: 2rem;
	}
}

/* Container */
#jp-relatedposts {
	display: none;
	padding-top: 1em;
	margin: 1em 0;
	position: relative;
	clear: both;
}

.jp-relatedposts::after {
	content: "";
	display: block;
	clear: both;
}

/* Headline above related posts section, labeled "Related" */
#jp-relatedposts h3.jp-relatedposts-headline {
	margin: 0 0 1em 0;
	display: inline-block;
	float: left;
	font-size: 9pt;
	font-weight: 700;
	font-family: inherit;
}

#jp-relatedposts h3.jp-relatedposts-headline em::before {
	content: "";
	display: block;
	width: 100%;
	min-width: 30px;
	border-top: 1px solid rgba(0, 0, 0, .2);
	margin-bottom: 1em;
}

#jp-relatedposts h3.jp-relatedposts-headline em {
	font-style: normal;
	font-weight: 700;
}

/* Related posts items (wrapping items) */
#jp-relatedposts .jp-relatedposts-items {
	clear: left;
}

#jp-relatedposts .jp-relatedposts-items-visual {
	margin-right: -20px;
}

/* Related posts item */
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
	float: left;
	width: 33%;
	margin: 0 0 1em;
	/* Needs to be same as the main outer wrapper for Related Posts */
	box-sizing: border-box;
}

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
	padding-right: 20px;
	filter: alpha(opacity=80);
	-moz-opacity: .8;
	opacity: .8;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
	clear: both;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
	text-decoration: underline;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

/* Related posts item content */
#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title, #jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts .jp-relatedposts-items time {
	font-size: 14px;
	line-height: 20px;
	margin: 0;
}

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs {
	position: relative;
}

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	border-bottom: 0;
}

#jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts .jp-relatedposts-items time {
	margin-bottom: 0;
}

#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
	text-transform: none;
	margin: 0;
	font-family: inherit;
	display: block;
	max-width: 100%;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
	font-size: inherit;
	font-weight: 400;
	text-decoration: none;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover {
	text-decoration: underline;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post span {
	display: block;
	max-width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post span {
	height: auto;
	max-width: 100%;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date, #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
	opacity: .6;
}

/* Hide the date by default, but leave the element there if
 * a theme wants to use css to make it visible. */
.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date {
	display: none;
}

/* Behavior when there are thumbnails in visual mode */
#jp-relatedposts .jp-relatedposts-items-visual div.jp-relatedposts-post-thumbs p.jp-relatedposts-post-excerpt {
	display: none;
}

/* Behavior when there are no thumbnails in visual mode */
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt {
	overflow: hidden;
}

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs span {
	margin-bottom: 1em;
}

/* List Layout */
#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post {
	clear: both;
	width: 100%;
}

#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img {
	float: left;
	overflow: hidden;
	max-width: 33%;
	margin-right: 3%;
}

#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
	display: inline-block;
	max-width: 63%;
}

/*
 * Responsive
 */
@media only screen and (max-width: 640px) {
	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
		width: 50%;
	}
	
	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) {
		clear: left;
	}
	
	#jp-relatedposts .jp-relatedposts-items-visual {
		margin-right: 20px;
	}
}

@media only screen and (max-width: 320px) {
	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
		width: 100%;
		clear: both;
		margin: 0 0 1em;
	}
	
	#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
		float: none;
		max-width: 100%;
		margin-right: 0;
	}
}

/*
 * Hide the related post section in the print view of a post
 */
@media print {
	.jp-relatedposts {
		display: none !important;
	}
}

.wp-block-image > a, .wp-block-image > figure > a {
	color: inherit;
	display: inline-block;
}

.wp-block-image img {
	box-sizing: border-box;
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}

@media not (prefers-reduced-motion) {
	.wp-block-image img.hide {
		visibility: hidden;
	}
	
	.wp-block-image img.show {
		animation: show-content-image .4s;
	}
}

.wp-block-image[style*=border-radius] img, .wp-block-image[style*=border-radius] > a {
	border-radius: inherit;
}

.wp-block-image.has-custom-border img {
	box-sizing: border-box;
}

.wp-block-image.aligncenter {
	text-align: center;
}

.wp-block-image.alignfull > a, .wp-block-image.alignwide > a {
	width: 100%;
}

.wp-block-image.alignfull img, .wp-block-image.alignwide img {
	height: auto;
	width: 100%;
}

.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.aligncenter, .wp-block-image.alignleft, .wp-block-image.alignright {
	display: table;
}

.wp-block-image .aligncenter > figcaption, .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption, .wp-block-image.aligncenter > figcaption, .wp-block-image.alignleft > figcaption, .wp-block-image.alignright > figcaption {
	caption-side: bottom;
	display: table-caption;
}

.wp-block-image .alignleft {
	float: left;
	margin: .5em 1em .5em 0;
}

.wp-block-image .alignright {
	float: right;
	margin: .5em 0 .5em 1em;
}

.wp-block-image .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.wp-block-image :where(figcaption) {
	margin-bottom: 1em;
	margin-top: .5em;
}

.wp-block-image.is-style-circle-mask img {
	border-radius: 9999px;
}

@supports (mask-image:none) or (-webkit-mask-image:none) {
	.wp-block-image.is-style-circle-mask img {
		border-radius: 0;
		mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/svg%3E");
		mask-mode: alpha;
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
	}
	
	.wp-block-image.is-style-circle-mask img.nitro-lazy {
		mask-image: none !important;
	}
}

:root :where(.wp-block-image.is-style-rounded img,.wp-block-image .is-style-rounded img) {
	border-radius: 9999px;
}

.wp-block-image figure {
	margin: 0;
}

.wp-lightbox-container {
	display: flex;
	flex-direction: column;
	position: relative;
}

.wp-lightbox-container img {
	cursor: zoom-in;
}

.wp-lightbox-container:has(img:hover) button {
	opacity: 1;
}

.wp-lightbox-container button {
	align-items: center;
	backdrop-filter: blur(16px) saturate(180%);
	background-color: rgba(90, 90, 90, .25);
	border: none;
	border-radius: 4px;
	cursor: zoom-in;
	display: flex;
	height: 20px;
	justify-content: center;
	opacity: 0;
	padding: 0;
	position: absolute;
	right: 16px;
	text-align: center;
	top: 16px;
	width: 20px;
	z-index: 100;
}

@media not (prefers-reduced-motion) {
	.wp-lightbox-container button {
		transition: opacity .2s ease;
	}
}

.wp-lightbox-container button:focus-visible {
	outline: 3px auto rgba(90, 90, 90, .25);
	outline: 3px auto -webkit-focus-ring-color;
	outline-offset: 3px;
}

.wp-lightbox-container button:hover {
	cursor: pointer;
	opacity: 1;
}

.wp-lightbox-container button:focus {
	opacity: 1;
}

.wp-lightbox-container button:focus, .wp-lightbox-container button:hover, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
	background-color: rgba(90, 90, 90, .25);
	border: none;
}

.wp-lightbox-overlay {
	box-sizing: border-box;
	cursor: zoom-out;
	height: 100vh;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	visibility: hidden;
	width: 100%;
	z-index: 100000;
}

.wp-lightbox-overlay .wp-lightbox-close-button {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	gap: 8px;
	justify-content: center;
	line-height: 1;
	min-height: 40px;
	min-width: 40px;
	padding: 0 4px;
	position: absolute;
	right: calc(env(safe-area-inset-right) + 16px);
	top: calc(env(safe-area-inset-top) + 16px);
	z-index: 5000000;
}

.wp-lightbox-overlay .wp-lightbox-close-button:focus, .wp-lightbox-overlay .wp-lightbox-close-button:hover, .wp-lightbox-overlay .wp-lightbox-close-button:not(:hover):not(:active):not(.has-background) {
	background: none;
	border: none;
}

.wp-lightbox-overlay .wp-lightbox-close-button:has(.wp-lightbox-close-text:not([hidden])) .wp-lightbox-close-icon svg {
	height: 1em;
	width: 1em;
}

.wp-lightbox-overlay .wp-lightbox-close-icon svg {
	display: block;
}

.wp-lightbox-overlay .wp-lightbox-navigation-button-next, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
	align-items: center;
	bottom: 16px;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	gap: 4px;
	justify-content: center;
	line-height: 1;
	min-height: 40px;
	min-width: 40px;
	padding: 0 8px;
	position: absolute;
	z-index: 2000002;
}

.wp-lightbox-overlay .wp-lightbox-navigation-button-next[hidden], .wp-lightbox-overlay .wp-lightbox-navigation-button-prev[hidden] {
	display: none;
}

@media (min-width:960px) {
	.wp-lightbox-overlay .wp-lightbox-navigation-button-next, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
		bottom: 50%;
		transform: translateY(-50%);
	}
}

.wp-lightbox-overlay .wp-lightbox-navigation-button-next:focus, .wp-lightbox-overlay .wp-lightbox-navigation-button-next:hover, .wp-lightbox-overlay .wp-lightbox-navigation-button-next:not(:hover):not(:active):not(.has-background), .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:focus, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:hover, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:not(:hover):not(:active):not(.has-background) {
	background: none;
	border: none;
	padding: 0 8px;
}

.wp-lightbox-overlay .wp-lightbox-navigation-button-next:has(.wp-lightbox-navigation-text:not([hidden])) .wp-lightbox-navigation-icon svg, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:has(.wp-lightbox-navigation-text:not([hidden])) .wp-lightbox-navigation-icon svg {
	display: block;
	height: 1.5em;
	width: 1.5em;
}

.wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
	left: calc(env(safe-area-inset-left) + 16px);
}

.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
	right: calc(env(safe-area-inset-right) + 16px);
}

.wp-lightbox-overlay .wp-lightbox-navigation-icon svg {
	vertical-align: middle;
}

.wp-lightbox-overlay .lightbox-image-container {
	cursor: default;
	height: var(--wp--lightbox-container-height);
	left: 50%;
	overflow: hidden;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: top left;
	width: var(--wp--lightbox-container-width);
	z-index: 2000001;
}

.wp-lightbox-overlay .wp-block-image {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	height: 100%;
	justify-content: center;
	margin: 0;
	position: relative;
	transform-origin: 0 0;
	width: 100%;
	z-index: 3000000;
}

.wp-lightbox-overlay .wp-block-image img {
	height: var(--wp--lightbox-image-height);
	min-height: var(--wp--lightbox-image-height);
	min-width: var(--wp--lightbox-image-width);
	width: var(--wp--lightbox-image-width);
}

.wp-lightbox-overlay .wp-block-image figcaption {
	display: none;
}

.wp-lightbox-overlay .lightbox-thumbnail-container {
	--wp--lightbox-image-width: var(--wp--lightbox-thumbnail-width);
	--wp--lightbox-image-height: var(--wp--lightbox-thumbnail-height);
}

.wp-lightbox-overlay button {
	background: none;
	border: none;
}

.wp-lightbox-overlay .scrim {
	background-color: #fff;
	height: 100%;
	opacity: .9;
	position: absolute;
	width: 100%;
	z-index: 2000000;
}

.wp-lightbox-overlay.active {
	visibility: visible;
}

@media not (prefers-reduced-motion) {
	.wp-lightbox-overlay.active {
		animation: turn-on-visibility .25s both;
	}
	
	.wp-lightbox-overlay.active img {
		animation: turn-on-visibility .35s both;
	}
	
	.wp-lightbox-overlay.show-closing-animation:not(.active) {
		animation: turn-off-visibility .35s both;
	}
	
	.wp-lightbox-overlay.show-closing-animation:not(.active) img {
		animation: turn-off-visibility .25s both;
	}
	
	.wp-lightbox-overlay.zoom.active {
		animation: none;
		opacity: 1;
		visibility: visible;
	}
	
	.wp-lightbox-overlay.zoom.active .lightbox-image-container {
		animation: lightbox-zoom-in .4s;
	}
	
	.wp-lightbox-overlay.zoom.active .lightbox-image-container img {
		animation: none;
	}
	
	.wp-lightbox-overlay.zoom.active .scrim {
		animation: turn-on-visibility .4s forwards;
	}
	
	.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) {
		animation: none;
	}
	
	.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container {
		animation: lightbox-zoom-out .4s;
	}
	
	.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img {
		animation: none;
	}
	
	.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim {
		animation: turn-off-visibility .4s forwards;
	}
}

@keyframes show-content-image {
	0% {
		visibility: hidden;
	}
	
	99% {
		visibility: hidden;
	}
	
	to {
		visibility: visible;
	}
}

@keyframes turn-on-visibility {
	0% {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
}

@keyframes turn-off-visibility {
	0% {
		opacity: 1;
		visibility: visible;
	}
	
	99% {
		opacity: 0;
		visibility: visible;
	}
	
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes lightbox-zoom-in {
	0% {
		clip-path: var(--wp--lightbox-initial-clip);
		transform: translate(calc(( -100vw + var(--wp--lightbox-scrollbar-width) ) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
	}
	
	to {
		clip-path: inset(0);
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes lightbox-zoom-out {
	0% {
		clip-path: inset(0);
		transform: translate(-50%, -50%) scale(1);
		visibility: visible;
	}
	
	99% {
		visibility: visible;
	}
	
	to {
		clip-path: var(--wp--lightbox-initial-clip);
		transform: translate(calc(( -100vw + var(--wp--lightbox-scrollbar-width) ) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
		visibility: hidden;
	}
}
