/* -----------------------------------------------------------------------
   ScrollMagic pin-spacer & full-bleed pinning styles
   Ported from the legacy nzgeo theme (style.css)
   ----------------------------------------------------------------------- */

/* Base full-bleed sizing */
figure.wp-caption.full-bleed,
figure.wp-caption.full-bleed img.full-bleed,
p.full-bleed,
p.full-bleed img.full-bleed {
	width: 100% !important;
	height: 100vh;
	object-fit: cover;
	padding-bottom: 0;
	transform: translate3d(0px, 0px, 0px);
}

div.full-bleed {
	width: 100vw;
	height: 100vh;
}

div.full-bleed.pinnable iframe {
	width: 100% !important;
	height: 100% !important;
}

/* Spacing between pinned full-bleed slides */
div.full-bleed,
figure.full-bleed,
p.full-bleed {
	margin-bottom: 60vh;
}

div.centered.full-bleed,
figure.centered.full-bleed {
	margin-bottom: 0;
	text-align: center;
	height: auto;
}

div.centered.full-bleed img,
figure.centered.full-bleed img {
	max-height: 95vh;
	height: auto;
	float: none;
	object-fit: contain;
	-moz-object-fit: contain;
}

/* Pinned state set by ScrollMagic */

.pinned div.scroll-down {
	opacity: 1;
}

figure.wp-caption.full-bleed .scroll-down img,
p.full-bleed .scroll-down img {
	width: 15px !important;
	height: auto !important;
	float: none;
}

/* Scrollmagic pin-spacer overrides
   ScrollMagic's setPin() auto-wraps whatever it pins in a generic
   .scrollmagic-pin-spacer div, inserted right where the original element sat
   in the DOM - i.e. still nested inside this rebuild's content column/flex
   wrappers (unlike whatever flatter structure this rule was written against
   originally). Forcing width:100vw here without also repositioning the
   spacer's LEFT edge just makes it 100vw wide *starting from its normal
   in-column X position* - overflowing off the right side of the viewport by
   however far that column was inset, while leaving a gap on the left where
   whatever's underneath shows through. This was invisible for as long as
   nzgeo-scrollmagic.css's enqueue was accidentally disabled (functions.php);
   re-enabling it exposed the gap. The position:relative;left:50%;
   margin:-50vw breakout below is the same trick nzgeo-article.css uses for
   the non-pinned fallback case - needed here too, on the spacer itself,
   since nzgeo-scrollmagic.js only ever calls setPin() on .pinnable.full-bleed
   elements, so scoping this unconditionally to .scrollmagic-pin-spacer is
   safe. Confirmed against
   https://staging.nzgeo.com/stories/choose-your-own-adventure/, where the
   panorama images sit flush with the viewport edges with no gap/overflow. */
.scrollmagic-pin-spacer {
	min-width: 100% !important;
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}

article > .scrollmagic-pin-spacer:nth-child(2) {
	margin-bottom: 300px !important;
}

/* dl8 / VR video inside pinnable */
.pinnable dl8-video {
	height: 100vh !important;
}

/* Mobile-pinned container */
body.mobile .full-bleed.pinnable.kowhai-mobile-container.active {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000000;
}

/* Horizontally-scrolling full-bleed figures */
.full-bleed-no-fit,
figure.wp-caption.full-bleed-no-fit,
figure.wp-caption.full-bleed-no-fit img,
figure.full-bleed-no-fit {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	width: 100vw !important;
}

.full-bleed-no-fit {
	left: calc(50% + 162px);
}

.scrolling.full-bleed {
	margin-bottom: 0;
	height: auto;
	width: auto;
	overflow-x: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.scrolling.full-bleed::-webkit-scrollbar {
	display: none;
}

.scrolling.full-bleed img.scrolling-full-bleed {
	width: auto;
	height: auto;
}

figure.scrolling,
figure.scrolling.wp-caption.full-bleed {
	overflow-x: scroll;
	height: 100vh !important;
	width: auto !important;
}

figure.scrolling img,
figure.scrolling.wp-caption.full-bleed img {
	height: 100vh !important;
	width: auto !important;
}

/* -----------------------------------------------------------------------
   Feature article header: hero image + archive-intro pinning
   Mirrors the old nzgeo theme CSS that made the full-screen header work.
   ----------------------------------------------------------------------- */

/* Hero image sits fixed behind the page on desktop.
   .archive-hero-img targets the new Elementor shortcode output;
   article.format-content > .wfull targets the old nzgeo theme structure. */
article.format-content > .wfull,
.archive-hero-img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 501px) {
	article.format-content > .wfull,
	.archive-hero-img {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		object-fit: cover;
		height: 100vh;
		z-index: 0;
	}
}

/* Archive intro creates viewport-height space above the content */
section.archive-intro.feature {
	position: relative;
	top: 0;
	height: auto;
}

@media (min-width: 501px) {
	section.archive-intro.feature {
		padding-top: 100vh;
		background: none;
		overflow: hidden;
		margin-top: -80px;
	}

	article.format-content {
		z-index: 10;
		position: relative;
	}
}

section.archive-intro.feature header {
	overflow: hidden;
	bottom: 0;
	width: 100%;
}

/* White title/standfirst block that appears over the hero image */
section.archive-intro.feature header > div:not(.photo-credit-container) {
	background: white;
	padding: 60px;
	padding-bottom: 40px;
}

/* Same white kicker/title/standfirst/byline card, new-template equivalent.
   The old-theme selector above (section.archive-intro.feature header > div)
   doesn't match this rebuild's DOM at all - the hero here is just the first
   full-bleed image in post_content, and this card is a plain Elementor flex
   container from the single-article template, not old-theme markup - so it
   never picked up the padding-bottom:40px above. Its own Elementor-configured
   padding is 60px 60px 0 60px (compared directly against
   https://staging.nzgeo.com/stories/choose-your-own-adventure/, whose
   equivalent box computes to 60px 60px 40px 60px - identical on 3 of 4
   sides), leaving the byline sitting flush against the card's bottom edge
   with no breathing room. elementor-element-429eb0b is this template's
   auto-generated ID for that container - stable across posts using the
   article-single template (Elementor assigns it once, at template-save time,
   not per-post), so scoping to it here is safe sitewide, not a one-off patch
   for this article. */
.elementor-element-429eb0b {
	padding-bottom: 40px !important;
}

@media (max-width: 1500px) {
	section.archive-intro.feature header > div:not(.photo-credit-container) {
		padding: 50px;
		padding-bottom: 35px;
		padding-top: 45px;
	}
}

@media (max-width: 500px) {
	section.archive-intro.feature header > div:not(.photo-credit-container) {
		padding: 10px;
	}
}

.photo-credit-container {
	position: relative;
}

.photo-credit {
	font-family: "proxima-nova", sans-serif;
	font-size: 0.7rem;
	text-transform: uppercase;
	color: white;
	padding: 4px 0;
}

/* -----------------------------------------------------------------------
   Responsive overrides
   ----------------------------------------------------------------------- */

/* Tablet and below — disable pinning, reset sizing */
@media (max-width: 1024px) {
	article.format-content > .wfull,
	.archive-hero-img {
		position: relative !important;
		height: auto !important;
		width: 100% !important;
	}

	section.archive-intro.feature {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	figure.wp-caption,
	figure.wp-caption.full-bleed,
	.scrollmagic-pin-spacer,
	.full-bleed.pinnable:not(.scrolling-sections *),
	.full-bleed.pinnable iframe,
	.video-slideshow {
		width: calc(100% + 20px) !important;
		min-width: 100% !important;
		margin-left: -10px !important;
		margin-bottom: 0px !important;
		position: relative !important;
		height: auto !important;
	}

	div.scrollmagic-pin-spacer {
		margin-bottom: 0px;
	}

	figure.wp-caption.full-bleed,
	figure.wp-caption.full-bleed img,
	p.full-bleed,
	p.full-bleed img {
		height: auto !important;
	}

	div.full-bleed {
		height: auto;
	}

	.scrollmagic-pin-spacer {
		width: calc(100% + 20px) !important;
	}

	.full-bleed-no-fit,
	figure.wp-caption.full-bleed-no-fit,
	figure.wp-caption.full-bleed-no-fit img {
		left: 0;
		right: 0;
		margin-left: 0;
		margin-right: 0;
	}
}