/* ─── Fall-o-ween Slide ──────────────────────────────────────────────────────
   Event spotlight slide based on the Taza Website 2026 Figma design
   (node 1642:20). Self-contained (no webpack rebuild needed), written as flat
   CSS so it works in all browsers when enqueued directly. */

.falloween-slide {
	position: relative;
	overflow: hidden;
	display: flex !important;
	align-items: center !important;
	background-color: #12284c;
}

.falloween-slide .falloween-slide__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
}

/* Mobile-specific background is hidden on desktop */
.falloween-slide .falloween-slide__bg--mobile {
	display: none;
}

.falloween-slide .falloween-slide__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--site-header-container-width, 85rem);
	margin: 0 auto;
	padding: 200px 2rem 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.falloween-slide .falloween-slide__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 540px;
	flex: 1 1 50%;
}

.falloween-slide .falloween-slide__logo {
	display: block;
	width: auto;
	max-width: 230px;
	max-height: 150px;
	height: auto;
	margin-bottom: 40px;
}

.falloween-slide .falloween-slide__heading-img {
	display: block;
	width: clamp(220px, 26vw, 358px);
	height: auto;
	margin: 0 0 44px;
}

.falloween-slide .falloween-slide__heading {
	font-family: var(--wp--preset--font-family--aquawax, "Aquawax", sans-serif);
	font-size: 64px;
	line-height: 1;
	margin: 0 0 40px;
	color: var(--fow-accent, #cf982a);
}

.falloween-slide .falloween-slide__description {
	font-family: "Nunito Sans", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: #ffffff;
	margin: 0 0 32px;
	max-width: 460px;
}

.falloween-slide .falloween-slide__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 32px;
	background-color: var(--fow-accent, #cf982a);
	color: #12284c;
	font-family: "Nunito Sans", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.15px;
	text-decoration: none;
	text-transform: capitalize;
	border: none;
}

.falloween-slide .falloween-slide__cta:hover {
	opacity: 0.9;
}

/* ── Right-hand media (single image: photo + frame supplied by editor) ──
   Anchored to the bottom-right corner of the banner, flush to the browser edge. */
.falloween-slide .falloween-slide__media {
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	width: 55%;
	z-index: 1;
	pointer-events: none;
}

.falloween-slide .falloween-slide__media-img {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 90%;
	object-fit: contain;
	object-position: right bottom;
	display: block;
	max-width: none;
}

@media screen and (max-width: 1300px) {
	.falloween-slide .falloween-slide__heading {
		font-size: 52px;
	}
}

@media screen and (max-width: 900px) {
	.falloween-slide .falloween-slide__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0;
	}

	.falloween-slide .falloween-slide__content {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
		align-items: center;
		text-align: center;
	}

	.falloween-slide .falloween-slide__media {
		top: auto;
		left: 0;
		right: 0;
		width: 100%;
		height: 52%;
	}

	.falloween-slide .falloween-slide__media-img {
		height: 100%;
		object-position: center bottom;
	}
}

@media screen and (max-width: 699px) {
	/* Swap to the mobile background image */
	.falloween-slide .falloween-slide__bg--desktop {
		display: none;
	}

	.falloween-slide .falloween-slide__bg--mobile {
		display: block;
	}

	.falloween-slide .falloween-slide__inner {
		padding: 76px 1.25rem 0;
		align-items: center;
		text-align: center;
	}

	.falloween-slide .falloween-slide__logo {
		max-width: 200px;
		margin: 0 auto 20px;
	}

	.falloween-slide .falloween-slide__heading-img {
		width: 230px;
		margin: 0 auto 18px;
	}

	.falloween-slide .falloween-slide__heading {
		font-size: 44px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.falloween-slide .falloween-slide__description {
		font-size: 16px;
		max-width: 100%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.falloween-slide .falloween-slide__cta {
		margin-left: auto;
		margin-right: auto;
	}

	/* Hide the media image on mobile, like the other slides */
	.falloween-slide .falloween-slide__media {
		display: none;
	}
}

/* Phones force every homepage slide to a fixed 530px. The Fall-o-ween slide
   also carries a (variable-length) description, so 530px isn't always enough:
   the content gets clipped and the CTA ends up under the shared pagination,
   making it unclickable. Let the slides size to their content (the whole row
   stretches together so shorter slides don't leave a gap) and lift the CTA
   clear of the pagination, which is pinned to the bottom-centre of the slider. */
@media screen and (max-width: 599px) {
	.homepage-slider-banner .swiper .swiper-wrapper > .swiper-slide {
		height: auto;
		min-height: 530px;
	}

	.falloween-slide .falloween-slide__inner {
		padding-bottom: 64px;
	}
}