/* ==========================================================================
   Page Banner — hero section for the following page templates:
   - Banner with Heading       (.page-banner--with-heading)
   - Banner with Breadcrumbs   (.page-banner--with-breadcrumbs)
   Generations Outdoor Design
   ========================================================================== */

/*  Section 
 * Mirrors .home-banner layout but uses a fixed min-height (512 px) instead
 * of 100svh — interior pages frame the image without pushing content below
 * the fold. Content anchors to the bottom so the heading reads over the
 * darkest part of the gradient overlay.
 *  */
.page-banner {
	position: var(--jewelrystudio-banner-position);
	display: var(--jewelrystudio-banner-display);
	align-items: var(--jewelrystudio-banner-align-items); /* page banner pins content to bottom — overrides --jewelrystudio-banner-align-items: center */
	width: var(--jewelrystudio-banner-width);
	min-height: 512px;
	background-color: var(--wp--preset--color--dark); /* navy fallback when no image */
	background-size: var(--jewelrystudio-banner-bg-size);
	background-position: var(--jewelrystudio-banner-bg-position);
	background-repeat: var(--jewelrystudio-banner-bg-repeat);
	overflow: var(--jewelrystudio-banner-overflow);
}

.page-banner--with-heading {
    text-align: center;
}

/*  Dark overlay 
 * Flat 70 % black — same treatment as .banner-overlay in banner.css (media banner section).
 * The mobile breakpoint below switches to a bottom-weighted gradient so
 * portrait images remain legible at the top.
 *  */
.page-banner__overlay {
	position: var(--jewelrystudio-banner-overlay-position);
	inset: var(--jewelrystudio-banner-overlay-inset);  
	background: var(--jewelrystudio-banner-bg-overlay);
	z-index: var(--jewelrystudio-banner-overlay-zi);
}

/*  Content wrapper 
 * .container handles max-width and horizontal padding; this rule adds only
 * the vertical breathing room and stacking context.
 *  */
.page-banner__content {
	color: var(--wp--preset--color--white);
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 80px;
	padding-bottom: 80px;
}

.page-banner--with-heading .page-banner__content {
	max-width: 1170px;
}

/*  Heading 
 * Fluid scale: 28 px (mobile) → 48 px (wide desktop).
 * Mirrors the weight, transform, and letter-spacing of .banner-heading.
 *  */
.page-banner__heading {
	font-size: var(--wp--preset--font-size--75);
	font-weight: var(--jewelrystudio-banner-heading-font-weight);
	line-height: var(--jewelrystudio-banner-heading-line-height);
	color: var(--jewelrystudio-banner-heading-color);
	text-transform: var(--jewelrystudio-banner-heading-text-transform);
    margin-top: 0.5rem
}

/*  Sup-heading — Layout 1 (Banner with Heading) 
 * Appears above the main heading. Styled like .banner-paragraph: italic,
 * uppercase, brand-primary colour so it reads as a label / eyebrow.
 *  */
.page-banner__sup-heading {
	font-weight: var(--jewelrystudio-banner-eyebrow-font-weight);
	text-transform: var(--jewelrystudio-banner-eyebrow-text-transform);
	color: var(--wp--preset--color--primary);      /* brand orange — page-specific */
}

/*  Breadcrumbs — Layout 2 (Banner with Breadcrumbs) 
 * Muted white so it reads as wayfinding, not a competing headline.
 *  */
.page-banner__breadcrumbs {
	font-size: 1.239rem;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 0.75em;
}

.page-banner__breadcrumbs a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color 0.15s ease;
}

.page-banner__breadcrumbs a:hover,
.page-banner__breadcrumbs a:focus {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.page-banner__breadcrumbs .current-page-title {
	color: var(--wp--preset--color--primary)
}

/*  Fade-in animation (respects prefers-reduced-motion) 
 * Separate keyframe name from the media banner section below — no collision
 * risk, but naming is explicit.
 *  */
@media (prefers-reduced-motion: no-preference) {
	.page-banner__content {
		animation: pageBannerFadeUp 0.8s ease both;
	}

	@keyframes pageBannerFadeUp {
		from {
			opacity: 0;
			transform: translateY(24px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/*  Desktop (≥ 1200 px)  */
@media (min-width: 1200px) {
	.page-banner--with-breadcrumbs .page-banner__content {
		padding-right: 36%;
	}
}

/*  Tablet (768 px – 1023 px)  */
@media (min-width: 768px) and (max-width: 1023px) {
	.page-banner {
		min-height: 400px;
	}

	.page-banner__content {
		padding-top: 60px;
		padding-bottom: 48px;
	}
}

/*  Mobile (< 768 px)  */
@media (max-width: 767px) {
	.page-banner {
		min-height: 320px;
	}

	/* Switch to a bottom-weighted gradient on portrait images so the
	   subject stays visible at the top while text remains readable. */
	.page-banner__overlay {
		background: linear-gradient(
			to top,
			rgba(3, 28, 49, 0.90) 0%,
			rgba(3, 28, 49, 0.50) 55%,
			rgba(3, 28, 49, 0.10) 100%
		);
	}

	.page-banner__content {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* ==========================================================================
   Media Banner — full-screen image/video hero (parts/banner-media.php)
   ========================================================================== */

.home-banner {
	color: var(--wp--preset--color--white);
	position: relative;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
}

.banner-overlay {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.20;
	z-index: 1;
}

/* ── Background video ─────────────────────────────────────────────────────── */
.home-banner__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.banner-content {
	z-index: 2;
	margin: auto;
	font-size: var(--wp--preset--font-size--22);
	font-weight: 400;
	line-height: 1.55;
	flex-basis: 1920px;
	display: flex;
	padding: 120px 1rem;
}

.banner-heading {
	font-size: var(--wp--preset--font-size--75);
	font-weight: 400;
	line-height: 1.22;
	text-transform: uppercase;
	text-shadow: 0 0 8px grey;
	-webkit-text-stroke-width: 0.78px;
	-webkit-text-stroke-color: currentColor;
}

.banner-heading span {
	color: var(--wp--preset--color--primary);
}

.banner-text {
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: 0;
}

.banner-btn {
	font-size: var(--wp--preset--font-size--22);
	margin-top: var(--wp--preset--spacing--40);
}

/* ── Button / content alignment ───────────────────────────────────────────── */
.banner-content--left {
	text-align: left;
}

.banner-content--center {
	justify-content: center;
	text-align: center;
	align-items: center;
}

@media (min-width: 768px) {
	.banner-content {
		padding-left: 5.125rem;
		padding-right: 5.125rem;
	}

	.banner-content--left .banner-content-inner {
		flex: 0 1 786px
	}
}

@media (min-width: 1024px) {
	.home-banner {
		min-height: 100svh;
	}

	.banner-content--center {
		min-height: 100vh;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.home-banner {
		min-height: 80svh;
	}
	.banner-content--center {
		min-height: 80vh;
	}
}

@media (max-width: 1199px) {
	.home-banner {
		background-size: cover;
	}
}

@media (max-width: 767px) {
	.home-banner {
		min-height: 100svh;
		min-height: 100dvh;
	}

	.banner-content--center {
		min-height: 100vh;
	}
	
	.home-banner .banner-content {
		text-align: center;
	}

	.banner-content {
		padding-top: 150px;
		padding-bottom: 80px;
	}
}

/* ── Scroll-triggered fade-up — banner-heading / banner-text / banner-btn ── */
@media (prefers-reduced-motion: no-preference) {
	.banner-heading.js-animate,
	.banner-text.js-animate,
	.banner-btn.js-animate {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.7s ease, transform 0.7s ease;
		transition-delay: var(--anim-delay, 0ms);
	}

	.banner-heading.js-animate.is-visible,
	.banner-text.js-animate.is-visible,
	.banner-btn.js-animate.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}