/* ============================================================
   Jersey Jump — Homepage / Hero
   ============================================================ */

.hero {
	position: relative;
	/* Fluid, no breakpoints — ~70% of viewport height on mobile (narrow,
     tall screens) scaling up to a full 100vh on desktop (wide, short
     screens), minus the sticky header's own height (ours takes space
     in normal flow, unlike Heron Lakes' fixed/overlaid header) so
     header + hero add up to one viewport at the desktop end. The vw
     term is what makes it grow with width; clamp caps it at 100vh once
     the screen is wide enough. 400px floor for very short viewports. */
	min-height: max(400px, calc(clamp(70vh, 60vh + 25vw, 100vh) - var(--header-height)));
	display: flex;
	align-items: flex-end;
	padding-bottom: 80px;
	overflow: hidden;
}

/* Background — video or image fills the section */
.hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Slideshow — multiple .hero-slide elements stacked in the same box,
   crossfaded by assets/js/hero-slideshow.js toggling .is-active.
   Shared by both the background images AND their matching per-slide
   headings below — a single slide just sits at opacity 1, no JS needed. */
.hero-slide {
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hero-slide.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hero-slide {
		transition: none;
	}

	.hero-bg--video {
		animation-play-state: paused;
	}
}

/* Overlay — darken the background for text readability. Currently
   disabled (opacity: 0) per designer decision — flip back to 0.5 (or
   whatever's needed) if this is revisited, no markup changes needed. */
.hero-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--color-primary);
	opacity: 0;
}

/* Hero Content — sits above background and overlay */
.hero-content {
	position: relative;
	z-index: 1;
	width: 100%;
	text-align: center;
}

.hero-text {
	max-width: 1139px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

/* Per-slide headings — stacked via CSS Grid (all in the same cell)
   instead of position:absolute, so the container auto-sizes to the
   TALLEST slide's actual wrapped height (grid track sizing considers
   every item in the cell, including the inactive/opacity:0 ones) —
   no guessed min-height, so it can't overflow onto the subtitle/CTA
   below no matter how many lines a given heading wraps to. */
.hero-heading-slides {
	display: grid;
	width: 100%;
}

.hero-heading-slides .hero-title {
	grid-area: 1 / 1;
}

.hero-title {
	font-family: var(--font-accent);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	font-size: clamp(28px, 5vw, 56px);
	margin: 0;
}

/* ============================================================
   Jersey Jump — Homepage / About
   Mobile-first: content on top, media (left/right images side by
   side) below. Full-bleed 3-column row (image | content | image)
   from 1024px — same layout/functionality as Heron Lakes' About Us
   section, minus its wave divider and background texture (plain
   white here instead).
   ============================================================ */
.about-section {
	/* So the footer's "About" anchor jump lands with the section's own
	   top padding intact instead of tucked under the sticky header. */
	scroll-margin-top: var(--header-height);
	position: relative;
	background-color: var(--color-white);
}

.about-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
}

.about-content {
	order: 1;
	text-align: center;
	max-width: 640px;
	padding-inline: 24px;
	position: relative;
	z-index: 1;
}

.about-cta {
	margin-block-start: 1.5rem;
}

/* Media group — both images shown side by side at every width */
.about-media-group {
	order: 2;
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.about-media {
	flex: 1;
	overflow: hidden;
}

/* Inner corners (facing the center content) rounded; outer corners
   (flush against the screen edge) stay square — same rule at every
   width, since each image is always flush to its own screen edge. */
.about-media--left {
	border-radius: 0 20px 20px 0;
}

.about-media--right {
	border-radius: 20px 0 0 20px;
}

.about-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.about-content {
		padding-inline: 16px;
	}
}

/* Desktop — full-bleed 3-column row: image | content | image */
@media (min-width: 1024px) {
	.about-row {
		flex-direction: row;
		align-items: center;
		gap: 0;
	}

	.about-content {
		order: 2;
		flex: 0 1 720px;
		padding-inline: 48px;
	}

	.about-media-group {
		display: contents;
	}

	.about-media--left {
		order: 1;
	}

	.about-media--right {
		order: 3;
	}

	.about-media {
		flex: 1;
		align-self: stretch;
	}
}

/* ============================================================
   Jersey Jump — Homepage / Rentals
   Section wrapper only — `.rentals-grid`/`.rental-card*` moved to
   main.css since the Party Rentals landing page reuses the exact
   same grid/card component.
   ============================================================ */
.rentals-section {
	background-color: var(--color-blue-150);
}

/* ============================================================
   Jersey Jump — Homepage / Reviews
   Section shell only for now (title/description/image) — same
   3-tier responsive treatment as Packages Promo, mirrored: content
   left, image right. Reviews display itself is deliberately
   deferred — see the note above group_homepage_reviews in
   inc/acf-fields.php.
   ============================================================ */
.reviews-section {
	padding-block: 0;
	background-color: var(--color-white);
}

.reviews-row {
	display: flex;
	flex-direction: column;
}

.reviews-content {
	background-color: var(--color-blue-150);
	padding-block: 2rem;
	padding-inline: clamp(1.25rem, 5vw, 5rem);
}

.reviews-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Reviews widget (Trustindex shortcode, field `reviews_shortcode`) —
   using their "Slider VI." style (style-id 44, set via the plugin's
   own trustindex-google-style-id option, not the shortcode itself —
   see the reviews_shortcode ACF field instructions), the one layout
   in their template set whose .ti-col-2 shows 2 reviews at a time in
   a real nowrap carousel (their JS handles the slide/swipe nav) —
   chosen specifically so it doesn't grow in height like the grid
   layout did (no "Load more", fixed row), which was stretching the
   image column next to it. Their CSS has no mobile breakpoint for
   this either, so same as before: 1 review visible below 667px. */
.reviews-widget {
	margin-block-start: 1.5rem;
}

.reviews-widget .ti-widget.ti-goog .ti-widget-container {
	background-color: var(--color-white) !important;
}

.reviews-widget .ti-widget.ti-goog .ti-col-2 .ti-review-item {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}

@media (min-width: 667px) {
	.reviews-widget .ti-widget.ti-goog .ti-col-2 .ti-review-item {
		flex: 0 0 calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		min-width: 0 !important;
	}
}

/* Tier 2 — contained rounded card, still stacked vertically */
@media (min-width: 768px) and (max-width: 1023px) {
	.reviews-section {
		/* Top padding dropped — Packages Promo above already provides
		   the gap between the two cards on its own bottom side. */
		padding-block: 0 64px;
		padding-inline: 24px;
	}

	.reviews-row {
		max-width: 700px;
		margin-inline: auto;
		border-radius: 24px;
		overflow: hidden;
	}
}

/* Tier 3 — back to flush/edge-to-edge, now horizontal */
@media (min-width: 1024px) {
	.reviews-row {
		flex-direction: row;
	}

	.reviews-content {
		flex: 0 0 50%;
		padding-block: 3rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.reviews-media {
		flex: 0 0 50%;
	}
}

/* ============================================================
   Jersey Jump — Homepage / Service Areas
   Normal contained section (standard .container + section padding,
   no overrides) — navy background. Cities are equal-width white
   pills that wrap naturally via flexbox, centered — no grid/
   breakpoints needed, the row count adjusts itself to the
   available width.
   ============================================================ */
.service-areas-section {
	background-color: var(--color-primary);
}

.service-areas-cities {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.city-pill {
	width: 162px;
	text-align: center;
	padding-block: 0.75rem;
	border-radius: 50px;
	background-color: var(--color-white);
	color: var(--color-blue-800);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
}

.service-areas-footer-text {
	text-align: center;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-body);
	font-size: 1rem;
	margin-block-start: 2.5rem;
}

/* Book Now / booking form section — moved to main.css (.book-now-*),
   shared with each single rental category page's own booking form. */