:root {
	--jm-shell-header: 10vh;
	--jm-shell-content: 80vh;
	--jm-shell-footer: 8vh;
}

@media (max-width: 768px) {
	:root {
		--jm-shell-header: 10vh;
		--jm-shell-content: 80vh;
		--jm-shell-footer: 10svh;
	}
}

body.page-template-jm-patterns-single .entry-content {
	position: relative;
	height: 100%;
}



/* attachment single has the shell for desktop and mobile, 
* curated-media has its mobile styles defined at the bottom,
* some might overlap this but for now just leave it as is.
*/
	
	body.attachment {
		margin: 0;
		overflow: hidden;
	}


	
	body.attachment .header-wrapper {
		position: fixed;
		inset: 0 0 auto;

		height: var(--jm-shell-header);

		z-index: 100;
	}


	
	body.attachment .content-wrapper {
		position: fixed;

		top: var(--jm-shell-header);
		left: 0;

		width: 100%;
		height: var(--jm-shell-content);

		overflow: hidden;
	}



	
	body.attachment .footer-wrapper {
		position: fixed;
		inset: auto 0 0;

		height: var(--jm-shell-footer);

		z-index: 100;
	}

@media (min-width: 769px) {

	body.page-template-jm-patterns-single header .has-base-background-color {
		background: transparent !important;
	}

	body.page-template-jm-patterns-single,
	body.page-template-jm-patterns-landing{
		margin: 0;
		overflow: hidden;
	}


	body.page-template-jm-patterns-single .header-wrapper,
	body.page-template-jm-patterns-landing .header-wrapper{
		position: fixed;
		inset: 0 0 auto;

		height: var(--jm-shell-header);

		z-index: 100;
	}


	body.page-template-jm-patterns-single .content-wrapper,
	body.page-template-jm-patterns-landing .content-wrapper{
		position: fixed;

		top: var(--jm-shell-header);
		left: 0;

		width: 100%;
		height: var(--jm-shell-content);

		overflow: hidden;
	}



	body.page-template-jm-patterns-single .footer-wrapper,
	body.page-template-jm-patterns-landing .footer-wrapper,
	body.attachment .footer-wrapper {
		position: fixed;
		inset: auto 0 0;

		height: var(--jm-shell-footer);

		z-index: 100;
	}

	.footer-wrapper {		
		display: flex;				
		flex-direction: column;
		align-items: center;
		justify-content: end;
		width: 100%;
	}
	.footer-wrapper footer {
		width: 100%;
		padding: 0 !important;		
	}

	body.page-template-jm-patterns-single .content-wrapper .jm-carousel {
		height: 100%;
		max-height: 80svh;
	}


	body.page-template-jm-patterns-single .content-wrapper .jm-carousel__stage {
		height: 66svh;
	}

}

.jm-carousel {
	position: relative;
	height: 100%;
}	

.jm-attachment-modal {
	position: absolute;
	inset: 0;

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

	margin: 0;

	z-index: 90;

	background: var(
		--wp--preset--color--base,
		#fff
	);
}

.jm-attachment-modal[hidden] {
	display: none;
}



@media (max-width: 768px) {

	.jm-attachment-modal {
		position: fixed;
		inset: 0;

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

		overflow: hidden;
	}

	.jm-attachment-modal__content {
		width: 100%;
		height: 100%;

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

		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}	


	body.has-attachment-modal .header-wrapper,
	body.has-attachment-modal .footer-wrapper {
		visibility: hidden;
		pointer-events: none;
	}
	

}

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

/* =========================================================
   Curated Media → Attachment Modal
   ========================================================= */

::view-transition-group(attachment-image) {
	animation-duration: 800ms;
	animation-timing-function:
		cubic-bezier(0.22, 1, 0.36, 1);
}


::view-transition-old(attachment-image) {
	animation: none;
	mix-blend-mode: normal;
	opacity: 1;
}


::view-transition-new(attachment-image) {
	animation: none;
	mix-blend-mode: normal;
	opacity: 0;
}


/*
 * Keep modal UI out of the way while the
 * photograph moves into its new position.
 */
.jm-attachment-modal.is-transitioning
.jm-attachment__info {
	opacity: 0;
}


/* =========================================================
   Attachment Modal — Close
   ========================================================= */

.jm-attachment-modal .jm-attachment__close {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;

	margin: 0;
	padding: 0;

	border: 0;
	background: transparent;

	color: black;
	font: inherit;
	font-size: 2rem;
	line-height: 1;

	cursor: pointer;

	opacity: 0.6;

	transition:
		opacity 250ms ease,
		transform 250ms ease;
}


.jm-attachment-modal .jm-attachment__close::before {
	content: "X";

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

	width: 2rem;
	height: 3rem;

	border-radius: 50%;

	font-size: 2rem;
	font-weight: 300;
	line-height: 1;

	transition:
		transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}


.jm-attachment-modal .jm-attachment__close:hover,
.jm-attachment-modal .jm-attachment__close:focus-visible {
	opacity: 1;
	transform: translateX(0.2rem);
}


.jm-attachment-modal .jm-attachment__close:hover::before,
.jm-attachment-modal .jm-attachment__close:focus-visible::before {
	transform: rotate(90deg);
}


.jm-attachment-modal .jm-attachment__close:focus-visible {
	outline: 2px solid black;
	outline-offset: 0.4rem;
}


.jm-attachment-modal__content {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	height: 100%;

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

	box-sizing: border-box;
}

/* =========================================================
   Curated Media UI choreography
   ========================================================= */

.jm-carousel__info,
.jm-carousel__thumbnails {
	opacity: 1;

	transition:
		opacity 250ms ease;
}


.jm-carousel.is-opening-attachment
.jm-carousel__info,
.jm-carousel.is-opening-attachment
.jm-carousel__thumbnails {
	opacity: 0;
	pointer-events: none;
}



/*
 * Patterns Single — Mobile Viewport Shell
 *
 * Keep Curated Media inside the same fixed
 * header / content / footer architecture as desktop.
 */
@media (max-width: 768px) {


	body.page-template-jm-patterns-single {
		margin: 0;
		height: 100svh;
		overflow: hidden;
	}

	body.page-template-jm-patterns-single .header-wrapper {
		position: fixed;
		inset: 0 0 auto;

		width: 100%;
		height: var(--jm-shell-header);

		z-index: 100;
	}

	body.page-template-jm-patterns-single .content-wrapper {
		position: fixed;

		top: var(--jm-shell-header);
		left: 0;

		width: 100%;
		height: var(--jm-shell-content);

		overflow: hidden;
	}

	body.page-template-jm-patterns-single .footer-wrapper {
		position: fixed;
		inset: auto 0 0;

		width: 100%;
		height: var(--jm-shell-footer);

		z-index: 100;
	}

	body.page-template-jm-patterns-single .jm-carousel {
		width: 100%;
		height: 100%;
		min-height: 0;

		overflow: hidden;
	}


	
}




/* Desktop fullscreen exploration for REST-loaded attachment modals. */
@media (min-width: 769px) and (pointer: fine) {
  .jm-attachment-modal .jm-attachment__media img { cursor: zoom-in; }
  .jm-attachment-modal .jm-attachment.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    background: #000;
    overflow: hidden;
  }
  .jm-attachment-modal .jm-attachment.is-fullscreen .jm-attachment__info,
  .jm-attachment-modal .jm-attachment.is-fullscreen .jm-attachment__mobile-details,
  .jm-attachment-modal .jm-attachment.is-fullscreen .jm-attachment__close { display: none; }
  .jm-attachment-modal .jm-attachment.is-fullscreen .jm-attachment__stage,
  .jm-attachment-modal .jm-attachment.is-fullscreen .jm-attachment__media,
  .jm-attachment-modal .jm-attachment.is-fullscreen .jm-attachment__media figure {
    display: block;
    width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; padding: 0; overflow: hidden;
  }
  .jm-attachment-modal .jm-attachment.is-fullscreen .jm-attachment__media img {
    display: block;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    max-width: none;
    max-height: none;
    margin: -30px;
    object-fit: cover;
    object-position: 50% 50%;
    transform: translate3d(var(--jm-wiggle-x, 0px), var(--jm-wiggle-y, 0px), 0);
    filter: none;
    cursor: zoom-out;
  }
}