/* =========================================================
   Attachment
   Shared by attachment singles and curated-media modal
   ========================================================= */
@media (min-width: 769px) {
	body.attachment .jm-attachment:not(.is-fullscreen) {
		padding-right: var(--wp--style--root--padding-right);    
		padding-left: var(--wp--style--root--padding-left);
	}
}

.jm-attachment {
	width: 100%;
	max-width: 100%;
}


.jm-attachment__stage {
	width: 100%;
	max-width: 100%;
}


.jm-attachment__media {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.jm-attachment__mobile-details {
	display: none;
}


.jm-attachment__media figure {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
}


.jm-attachment__media img,
.jm-attachment__media video {
	display: block;

	width: auto;
	height: auto;

	max-width: 100%;
	max-height: 100%;

	object-fit: contain;
}


/* =========================================================
   Desktop Attachment Layout
   ========================================================= */

@media (min-width: 769px) {

	.jm-attachment {
		height: 100%;
	}


	.jm-attachment__stage {
		display: grid;
		grid-template-columns: 33% 57%;
		gap: 10%;

		align-items: center;

		width: 100%;
		height: 100%;
	}


	.jm-attachment__info {
		order: 1;

		width: 100%;
		height: 100%;
		max-height: 100%;

		min-width: 0;
		min-height: 0;

		display: flex;
		flex-direction: column;

		box-sizing: border-box;

		overflow-x: hidden;
		overflow-y: auto;			
	}

	.jm-attachment__info-inner {
		width: 100%;
		box-sizing: border-box;

		margin-block: auto;
	}	


	.jm-attachment__info::-webkit-scrollbar {
		display: none;
	}


	.jm-attachment__title {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}


	.jm-attachment__caption {
		margin-bottom: 1rem;
	}


	.jm-attachment__description {
		opacity: 0.75;
	}


	.jm-attachment__media {
		order: 2;

		display: flex;
		align-items: center;
		justify-content: flex-end;

		min-height: 0;
		height: 100%;

		overflow: hidden;
	}


	.jm-attachment__media figure {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		height: 100%;
	}


	.jm-attachment__media audio {
		width: 100%;
	}

}

/* =========================================================
   Attachment Single — Fullscreen
   ========================================================= */

body.attachment .jm-attachment.is-fullscreen {
	position: fixed;
	inset: 0;

	width: 100vw;
	height: 100vh;

	z-index: 9999;

	background: #000;

	cursor: crosshair;
}


body.attachment .jm-attachment.is-fullscreen .jm-attachment__info {
	display: none;
}


body.attachment .jm-attachment.is-fullscreen .jm-attachment__stage {
	display: block;

	width: 100%;
	height: 100%;
	max-width: none;
}


body.attachment .jm-attachment.is-fullscreen .jm-attachment__media,
body.attachment .jm-attachment.is-fullscreen .jm-attachment__media figure {
	width: 100%;
	height: 100%;
}


body.attachment .jm-attachment.is-fullscreen .jm-attachment__media img {
	display: block;

	width: calc(100% + 60px);
	height: calc(100% + 60px);
	margin: -30px;

	max-width: none;
	max-height: none;

	object-fit: cover;
	object-position: 50% 50%;
}


body.has-attachment-fullscreen {
	overflow: hidden;
}


/* Attachment image interaction */

body.attachment .jm-attachment__media img {
	cursor: zoom-in;

	transition:
		transform 0.3s ease,
		filter 0.3s ease;
}


body.attachment .jm-attachment__media img:hover {
	transform: scale(1.015);
	filter: brightness(0.92);
}


body.attachment .jm-attachment.is-fullscreen,
body.attachment .jm-attachment.is-fullscreen .jm-attachment__media img {
	cursor: zoom-out;
}


/* body.attachment .jm-attachment.is-fullscreen .jm-attachment__media img {
	transform: none;
	filter: none;
} */

body.attachment .jm-attachment.is-fullscreen .jm-attachment__media img {
  transform: translate3d(
    var(--jm-wiggle-x, 0px),
    var(--jm-wiggle-y, 0px),
    0
  );
  filter: none;
}


/* Header / footer treatment while fullscreen */

body.has-attachment-fullscreen .header-wrapper,
body.has-attachment-fullscreen .footer-wrapper {
	display: none;
}


body.has-attachment-fullscreen .custom-logo {
	filter: invert(1);
}


.attachment-content-inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);

	margin-left: auto;
	margin-right: auto;

	box-sizing: border-box;
}

@media (min-width: 769px) {

	.attachment-content-inner {
		height: 100%;
		padding-left: 0;
		padding-right: 0;
	}


	.attachment-content-inner .wp-block-post-content {
		width: 100%;
		height: 100%;
	}

}

@media (max-width: 768px) {

	/* Hide desktop copies of caption + description. */
	.jm-attachment__info .jm-attachment__caption,
	.jm-attachment__info .jm-attachment__description {
		display: none;
	}


	/* Show duplicated content beneath the image. */
	.jm-attachment__mobile-details {
		display: block;

		width: 100%;
		
		padding: 1rem;

		box-sizing: border-box;
	}


	/* Don't add extra space when only one field exists. */
	.jm-attachment__mobile-caption:last-child,
	.jm-attachment__mobile-description:last-child {
		margin-block-end: 0;
	}

}