/**
 * Page template: fullscreen gallery or animated gradient behind content.
 *
 * Add as first block in page content:
 * - Gallery → style "Fullscreen background" (carousel when 2+ images)
 *   Captions: Media Library caption field, shown as corner title (block sidebar → Background caption).
 * - OR Group → style "Animated gradient background"
 *
 * On the main page group: block style "Light text on dark background" / "Dark text on light background".
 */

.jofei-page-gallery-fullscreen {
	position: relative;
	z-index: 1;
}

/* Content fills at least one viewport; footer scrolls in below. */
.jofei-page-gallery-fullscreen__layout {
	min-height: 100dvh;
	min-height: 100vh;
	position: relative;
	z-index: 1;
}

/* Footer sits below the viewport fold (not inside the 100vh content area). */
body:has(.jofei-page-gallery-fullscreen) .jofei-page-wrapper ~ .wp-block-template-part {
	position: relative;
	z-index: 2;
}

/* Viewport layer (blocks relocated via inc/gallery-fullscreen-background.php) */
.jofei-page-gallery-fullscreen__bg-fixed {
	inset: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
	position: fixed;
	width: 100%;
	z-index: 0;
}

.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg,
.jofei-page-gallery-fullscreen__bg-fixed .wp-block-group.is-style-jofei-animated-gradient-bg {
	display: block;
	height: 100dvh;
	height: 100vh;
	inset: 0;
	left: 0;
	margin: 0 !important;
	max-width: none;
	padding: 0;
	position: fixed;
	top: 0;
	width: 100vw;
}

/* Before JS: show first slide only (fullscreen style has no masonry columns) */
.wp-block-gallery.is-style-artwork-fullscreen-bg.has-nested-images {
	display: block;
	flex-wrap: nowrap;
}

.wp-block-gallery.is-style-artwork-fullscreen-bg.has-nested-images:not(.is-carousel-ready)
	> figure.wp-block-image:not(#individual-image) {
	display: block;
	margin: 0 !important;
	position: relative;
	width: 100% !important;
}

.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg:not(.is-carousel-ready) > figure.wp-block-image:first-child,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg:not(.is-carousel-ready) > figure.wp-block-image:first-child {
	height: 100%;
}

.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg:not(.is-carousel-ready) > figure.wp-block-image:first-child img,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg:not(.is-carousel-ready) > figure.wp-block-image:first-child img {
	flex: none !important;
	height: 100% !important;
	max-height: none !important;
	max-width: none !important;
	min-height: 100%;
	min-width: 100%;
	object-fit: cover !important;
	object-position: center;
	width: 100% !important;
}

.wp-block-gallery.is-style-artwork-fullscreen-bg.has-nested-images:not(.is-carousel-ready)
	> figure.wp-block-image:nth-child(n + 2) {
	display: none;
}

/* Fullscreen background: crossfade — slides stay in gallery, stacked absolutely */
.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg.jofei-artwork-carousel--fade,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg.jofei-artwork-carousel--fade {
	--jofei-fs-fade-duration: 1.4s;
	display: block !important;
	height: 100dvh;
	height: 100vh;
	min-height: 100dvh;
	min-height: 100vh;
	overflow: hidden;
	position: relative;
}

.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg.jofei-artwork-carousel--fade.is-carousel-ready > figure.jofei-fs-slide,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg.jofei-artwork-carousel--fade.is-carousel-ready > figure.jofei-fs-slide {
	display: block !important;
	height: 100%;
	inset: 0;
	margin: 0 !important;
	opacity: 0;
	position: absolute;
	transition: opacity var(--jofei-fs-fade-duration, 1.4s) ease;
	width: 100% !important;
	z-index: 0;
}

.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg.jofei-artwork-carousel--fade.is-carousel-ready > figure.jofei-fs-slide.is-active,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg.jofei-artwork-carousel--fade.is-carousel-ready > figure.jofei-fs-slide.is-active {
	opacity: 1;
	z-index: 1;
}

.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg.jofei-artwork-carousel--fade.is-carousel-ready > figure.jofei-fs-slide .jofei-artwork-carousel__media,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg.jofei-artwork-carousel--fade.is-carousel-ready > figure.jofei-fs-slide .jofei-artwork-carousel__media {
	background: transparent;
	display: block !important;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* Fullscreen background: always cover the viewport (including images smaller than the screen). */
.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg figure.jofei-fs-slide,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg figure.jofei-fs-slide,
.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg:not(.is-carousel-ready) > figure.wp-block-image,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg:not(.is-carousel-ready) > figure.wp-block-image {
	height: 100%;
	margin: 0 !important;
	overflow: hidden;
}

.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg .jofei-artwork-carousel__media,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg .jofei-artwork-carousel__media,
.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg figure.jofei-fs-slide > a,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg figure.jofei-fs-slide > a,
.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg:not(.is-carousel-ready) > figure.wp-block-image > a,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg:not(.is-carousel-ready) > figure.wp-block-image > a {
	align-items: stretch !important;
	display: block !important;
	height: 100%;
	justify-content: stretch !important;
	width: 100%;
}

.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg img,
.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg .jofei-artwork-carousel__media,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg img,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg .jofei-artwork-carousel__media {
	display: block;
	height: 100%;
	width: 100%;
}

.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg img,
.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg .jofei-artwork-carousel__media img,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg img,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg .jofei-artwork-carousel__media img {
	flex: none !important;
	height: 100% !important;
	max-height: none !important;
	max-width: none !important;
	min-height: 100%;
	min-width: 100%;
	object-fit: cover !important;
	object-position: center;
	width: 100% !important;
}

.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg .jofei-artwork-carousel__btn,
.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg .jofei-artwork-carousel__thumbs,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg .jofei-artwork-carousel__btn,
.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg .jofei-artwork-carousel__thumbs {
	display: none !important;
}

/* —— Media captions as corner titles (from Media Library caption field) —— */
.wp-block-gallery.is-style-artwork-fullscreen-bg[data-jofei-caption-corner] {
	--jofei-fs-caption-inset: clamp(1rem, 3vw, 2.5rem);
	--jofei-fs-caption-max-width: min(42ch, 72vw);
}

.wp-block-gallery.is-style-artwork-fullscreen-bg[data-jofei-caption-corner="none"] .jofei-fs-caption {
	display: none !important;
}

.wp-block-gallery.is-style-artwork-fullscreen-bg figure.jofei-fs-slide .jofei-fs-caption,
.wp-block-gallery.is-style-artwork-fullscreen-bg:not(.is-carousel-ready) > figure.wp-block-image .jofei-fs-caption {
	backdrop-filter: none;
	background: none;
	color: var(--jofei-fs-caption-color, var(--wp--preset--color--base, #fff8e5));
	font-family: var(--wp--preset--font-family--futura-pt, inherit);
	font-size: clamp(1.25rem, 2.8vw, 2.25rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.15;
	margin: 0;
	max-height: none;
	max-width: var(--jofei-fs-caption-max-width);
	overflow: visible;
	padding: 0;
	pointer-events: none;
	position: absolute;
	text-shadow: 0 1px 18px rgb(0 0 0 / 55%);
	transition: opacity var(--jofei-fs-fade-duration, 1.4s) ease;
	z-index: 2;
}

.wp-block-gallery.is-style-artwork-fullscreen-bg:not(.is-carousel-ready) > figure.wp-block-image:not(:first-child) .jofei-fs-caption {
	display: none;
}

.wp-block-gallery.is-style-artwork-fullscreen-bg figure.jofei-fs-slide:not(.is-active) .jofei-fs-caption {
	opacity: 0;
}

.wp-block-gallery.is-style-artwork-fullscreen-bg figure.jofei-fs-slide.is-active .jofei-fs-caption {
	opacity: 1;
}

.wp-block-gallery.is-style-artwork-fullscreen-bg[data-jofei-caption-corner="bottom-left"] figure.jofei-fs-slide .jofei-fs-caption,
.wp-block-gallery.is-style-artwork-fullscreen-bg[data-jofei-caption-corner="bottom-left"]:not(.is-carousel-ready) > figure.wp-block-image:first-child .jofei-fs-caption {
	bottom: var(--jofei-fs-caption-inset);
	left: var(--jofei-fs-caption-inset);
	right: auto;
	text-align: left;
	top: auto;
}

.wp-block-gallery.is-style-artwork-fullscreen-bg[data-jofei-caption-corner="bottom-right"] figure.jofei-fs-slide .jofei-fs-caption,
.wp-block-gallery.is-style-artwork-fullscreen-bg[data-jofei-caption-corner="bottom-right"]:not(.is-carousel-ready) > figure.wp-block-image:first-child .jofei-fs-caption {
	bottom: var(--jofei-fs-caption-inset);
	left: auto;
	right: var(--jofei-fs-caption-inset);
	text-align: right;
	top: auto;
}

.wp-block-gallery.is-style-artwork-fullscreen-bg[data-jofei-caption-corner="top-left"] figure.jofei-fs-slide .jofei-fs-caption,
.wp-block-gallery.is-style-artwork-fullscreen-bg[data-jofei-caption-corner="top-left"]:not(.is-carousel-ready) > figure.wp-block-image:first-child .jofei-fs-caption {
	bottom: auto;
	left: var(--jofei-fs-caption-inset);
	right: auto;
	text-align: left;
	top: var(--jofei-fs-caption-inset);
}

.wp-block-gallery.is-style-artwork-fullscreen-bg[data-jofei-caption-corner="top-right"] figure.jofei-fs-slide .jofei-fs-caption,
.wp-block-gallery.is-style-artwork-fullscreen-bg[data-jofei-caption-corner="top-right"]:not(.is-carousel-ready) > figure.wp-block-image:first-child .jofei-fs-caption {
	bottom: auto;
	left: auto;
	right: var(--jofei-fs-caption-inset);
	text-align: right;
	top: var(--jofei-fs-caption-inset);
}

.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-light-bg .wp-block-gallery.is-style-artwork-fullscreen-bg figure.jofei-fs-slide .jofei-fs-caption {
	--jofei-fs-caption-color: var(--wp--preset--color--contrast, #423f3e);
	text-shadow: 0 1px 14px rgb(255 248 229 / 85%);
}

/* —— Animated gradient layer (alternative to gallery) —— */
.jofei-page-gallery-fullscreen .wp-block-group.is-style-jofei-animated-gradient-bg {
	animation: jofei-fs-gradient-shift 45s ease infinite;
	background: linear-gradient(135deg, hsl(36deg 38% 18%) 39%, hsl(35deg 72% 21%) 60%, hsl(35deg 89% 29%) 82%, hsl(35deg 87% 41%) 100%);
	background-size: 400% 400%;
	height: 100dvh;
	height: 100vh;
	inset: 0;
	margin: 0;
	pointer-events: none;
	position: fixed;
	width: 100vw;
	z-index: 0;
}

/* Foreground columns: transparent so the fixed layer shows through */
.jofei-page-gallery-fullscreen .jofei-page-gallery-fullscreen__layout,
.jofei-page-gallery-fullscreen .wp-block-columns,
.jofei-page-gallery-fullscreen .jofei-work-content-column,
.jofei-page-gallery-fullscreen .jofei-section-content-column,
.jofei-page-gallery-fullscreen .jofei-work-sidebar-column,
.jofei-page-gallery-fullscreen .jofei-section-sidebar-column,
.jofei-page-gallery-fullscreen .wp-block-post-content {
	background: transparent !important;
}

/* Mobile: hide sidebar, let content use full width (matches gallery template). */
@media (max-width: 1023px) {
	.jofei-page-gallery-fullscreen .jofei-section-sidebar-column,
	.jofei-page-gallery-fullscreen .jofei-work-sidebar-column,
	.jofei-page-gallery-fullscreen .jofei-section-sidebar {
		display: none !important;
	}

	.jofei-page-gallery-fullscreen .wp-block-columns > .jofei-section-sidebar-column,
	.jofei-page-gallery-fullscreen .wp-block-columns > .jofei-work-sidebar-column {
		display: none !important;
	}

	.jofei-page-gallery-fullscreen .jofei-section-content-column,
	.jofei-page-gallery-fullscreen .jofei-work-content-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

@keyframes jofei-fs-gradient-shift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* —— Overlay scrim (readability over busy backgrounds) ——
 *
 * Controlled by --jofei-fs-scrim on the main group (.jofei-page-gallery-fullscreen).
 * Defaults per tone block style below; override in Additional CSS, e.g.:
 *   .jofei-page-gallery-fullscreen { --jofei-fs-scrim: rgba(0, 0, 0, 0.5); }
 */
.jofei-page-gallery-fullscreen::before {
	background: var(--jofei-fs-scrim, rgba(0, 0, 0, 0.35));
	content: "";
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: 0;
}

body:has(.jofei-page-gallery-fullscreen) .jofei-page-gallery-fullscreen__bg-fixed {
	z-index: 0;
}

body:has(.jofei-page-gallery-fullscreen) .jofei-page-gallery-fullscreen::before {
	z-index: 1;
}

body:has(.jofei-page-gallery-fullscreen) .jofei-page-gallery-fullscreen {
	z-index: 2;
}

body:has(.jofei-page-gallery-fullscreen) .jofei-page-wrapper > .jofei-header {
	position: relative;
	z-index: 3;
}

/* —— Tone: light fonts on dark / busy backgrounds —— */
.jofei-page-wrapper:has(.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-dark-bg),
.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-dark-bg {
	--jofei-fs-scrim: rgba(0, 0, 0, 0.4);
	--jofei-fs-text: var(--wp--preset--color--base, #fff8e5);
	--jofei-fs-heading: var(--wp--preset--color--accent-1, #fffbce);
	--jofei-fs-link: var(--wp--preset--color--accent-3, #f5a511);
	--jofei-fs-muted: var(--wp--preset--color--accent-5, #fbfaf3);
}

/* —— Tone: dark fonts on light backgrounds —— */
.jofei-page-wrapper:has(.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-light-bg),
.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-light-bg {
	--jofei-fs-scrim: rgba(255, 248, 229, 0.55);
	--jofei-fs-text: var(--wp--preset--color--contrast, #423f3e);
	--jofei-fs-heading: var(--wp--preset--color--contrast, #423f3e);
	--jofei-fs-link: var(--wp--preset--color--accent-2, #dd4242);
	--jofei-fs-muted: var(--wp--preset--color--accent-4, #686868);
}

.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-dark-bg .jofei-work-content-column,
.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-light-bg .jofei-work-content-column,
.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-dark-bg .jofei-section-content-column,
.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-light-bg .jofei-section-content-column {
	color: var(--jofei-fs-text);
}

.jofei-page-gallery-fullscreen .jofei-work-content-column :is(h1, h2, h3, h4, h5, h6, .wp-block-post-title),
.jofei-page-gallery-fullscreen .jofei-section-content-column :is(h1, h2, h3, h4, h5, h6, .wp-block-post-title) {
	color: var(--jofei-fs-heading);
}

.jofei-page-gallery-fullscreen .jofei-work-content-column a:where(:not(.wp-element-button)),
.jofei-page-gallery-fullscreen .jofei-section-content-column a:where(:not(.wp-element-button)) {
	color: var(--jofei-fs-link);
}

.jofei-page-gallery-fullscreen .jofei-work-content-column :is(figcaption, .wp-block-post-date, .wp-block-post-author),
.jofei-page-gallery-fullscreen .jofei-section-content-column :is(figcaption, .wp-block-post-date, .wp-block-post-author) {
	color: var(--jofei-fs-muted);
}

/* Header sits in .jofei-page-wrapper (sibling of main), so target via :has on the wrapper. */
.jofei-page-wrapper:has(.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-dark-bg) .jofei-header,
.jofei-page-wrapper:has(.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-light-bg) .jofei-header {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.jofei-page-wrapper:has(.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-dark-bg) .jofei-header .site-title a,
.jofei-page-wrapper:has(.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-light-bg) .jofei-header .site-title a {
	color: var(--jofei-fs-heading) !important;
}

.jofei-page-wrapper:has(.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-dark-bg) .jofei-header .jofei-nav-main .wp-block-navigation-item__content,
.jofei-page-wrapper:has(.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-light-bg) .jofei-header .jofei-nav-main .wp-block-navigation-item__content {
	color: var(--jofei-fs-text);
}

.jofei-page-wrapper:has(.jofei-page-gallery-fullscreen) .jofei-header .jofei-nav-main .wp-block-navigation-item {
	text-shadow: 0 0 6px rgb(0 0 0 / 45%);
}

.jofei-page-wrapper:has(.jofei-page-gallery-fullscreen.is-style-jofei-tone-on-light-bg) .jofei-header .jofei-nav-main .wp-block-navigation-item {
	text-shadow: 0 0 6px rgb(255 248 229 / 70%);
}

/* Editor: approximate fixed layers inside the canvas */
.editor-styles-wrapper .jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg,
.editor-styles-wrapper .jofei-page-gallery-fullscreen .wp-block-group.is-style-jofei-animated-gradient-bg {
	height: 100%;
	inset: 0;
	margin: 0;
	max-width: none;
	position: absolute;
	width: 100%;
	z-index: 0;
}

.editor-styles-wrapper .jofei-page-gallery-fullscreen {
	min-height: 80vh;
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	.jofei-page-gallery-fullscreen .wp-block-group.is-style-jofei-animated-gradient-bg {
		animation: none;
	}

	.jofei-page-gallery-fullscreen__bg-fixed .wp-block-gallery.is-style-artwork-fullscreen-bg > figure.jofei-fs-slide,
	.jofei-page-gallery-fullscreen .wp-block-gallery.is-style-artwork-fullscreen-bg > figure.jofei-fs-slide {
		transition: none;
	}
}