/* Single-listing landing page — responsive shell.
   Mobile-first (matches the source "Zuberec Offer Landing" design:
   single column, full-bleed swipe gallery, sticky bottom CTA bar).
   Desktop reflow (≥900px) is our own extension, not in the source
   design: two-column layout with a sticky booking card on the right,
   a photo-grid gallery instead of swipe, and the bottom CTA bar hidden
   since the sticky card already keeps price+booking in view. */

.zb-scrollbar-none {
	scrollbar-width: none;
}
.zb-scrollbar-none::-webkit-scrollbar {
	display: none;
}

.zb-lp-container {
	max-width: 560px;
	margin: 0 auto;
	background: #f7f3ea;
	position: relative;
	padding-bottom: 88px;
}

.zb-lp-gallery-overlap {
	margin-top: -56px;
	position: relative;
}

.zb-lp-gallery-grid {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.zb-lp-gallery-grid > div {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

/* No-photos fallback (single illustration, no <img>s to grid) — needs
   its own responsive ratio since it isn't part of .zb-lp-gallery-grid. */
.zb-lp-gallery-placeholder {
	aspect-ratio: 4 / 5;
}

.zb-lp-price-strip-desktop {
	display: none;
}

.zb-lp-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	max-width: 560px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-top: 1px solid #e4ddcc;
	padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	box-shadow: 0 -4px 16px rgba(20, 26, 17, 0.08);
}

@media (min-width: 900px) {
	.zb-lp-container {
		max-width: 1100px;
		padding-bottom: 60px;
	}

	.zb-lp-gallery-overlap {
		margin-top: 0;
		padding: 20px 40px 0;
	}

	/* Photo count varies a lot early on (a fresh listing might have just 1-2
	   photos) — a fixed 1-large+2x2 grid leaves ugly empty cells when fewer
	   than 5 exist, so the grid shape is picked per actual count
	   (.zb-lp-gallery-grid gets a count-N class from PHP, capped at 5+). */
	.zb-lp-gallery-grid {
		display: grid;
		gap: 8px;
		aspect-ratio: 21/9;
		border-radius: 20px;
		overflow: hidden;
	}
	.zb-lp-gallery-grid > div {
		flex: none;
		scroll-snap-align: none;
	}
	.zb-lp-gallery-grid img {
		aspect-ratio: auto !important;
		height: 100% !important;
	}

	.zb-lp-gallery-grid.zb-count-1 {
		grid-template-columns: 1fr;
	}

	.zb-lp-gallery-grid.zb-count-2 {
		grid-template-columns: 1fr 1fr;
	}

	.zb-lp-gallery-grid.zb-count-3 {
		grid-template-columns: 1.4fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
	.zb-lp-gallery-grid.zb-count-3 > div:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
	.zb-lp-gallery-grid.zb-count-3 > div:nth-child(2) { grid-column: 2; grid-row: 1; }
	.zb-lp-gallery-grid.zb-count-3 > div:nth-child(3) { grid-column: 2; grid-row: 2; }

	.zb-lp-gallery-grid.zb-count-4 {
		grid-template-columns: 1.4fr 1fr;
		grid-template-rows: repeat(3, 1fr);
	}
	.zb-lp-gallery-grid.zb-count-4 > div:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
	.zb-lp-gallery-grid.zb-count-4 > div:nth-child(2) { grid-column: 2; grid-row: 1; }
	.zb-lp-gallery-grid.zb-count-4 > div:nth-child(3) { grid-column: 2; grid-row: 2; }
	.zb-lp-gallery-grid.zb-count-4 > div:nth-child(4) { grid-column: 2; grid-row: 3; }

	.zb-lp-gallery-grid.zb-count-5plus {
		grid-template-columns: 1.4fr 1fr 1fr;
		grid-template-rows: repeat(2, 1fr);
	}
	.zb-lp-gallery-grid.zb-count-5plus > div:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
	.zb-lp-gallery-grid.zb-count-5plus > div:nth-child(2) { grid-column: 2; grid-row: 1; }
	.zb-lp-gallery-grid.zb-count-5plus > div:nth-child(3) { grid-column: 3; grid-row: 1; }
	.zb-lp-gallery-grid.zb-count-5plus > div:nth-child(4) { grid-column: 2; grid-row: 2; }
	.zb-lp-gallery-grid.zb-count-5plus > div:nth-child(5) { grid-column: 3; grid-row: 2; }
	.zb-lp-gallery-grid.zb-count-5plus > div:nth-child(n+6) { display: none; }

	#zb-lp-dots {
		display: none !important;
	}

	.zb-lp-gallery-placeholder {
		aspect-ratio: 21 / 9;
		border-radius: 20px;
	}

	/* 22px here + each inner section's own 18px inline padding = 40px,
	   matching the gallery/title/disclaimer's 40px below — those live
	   outside .zb-lp-main (title/disclaimer span above and below the
	   two-column split) so they need the full 40px in one step instead
	   of stacking with a wrapper. Getting this arithmetic wrong is
	   exactly what caused the left edges to visibly disagree before. */
	.zb-lp-main {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 40px;
		padding: 28px 22px 0;
	}

	.zb-lp-outer-pad {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	.zb-lp-col-left {
		flex: 1 1 auto;
		min-width: 0;
	}
	.zb-lp-col-right {
		flex: 0 0 380px;
	}
	.zb-lp-booking-card {
		position: sticky;
		top: 96px;
		margin: 0 !important;
	}

	.zb-lp-price-strip-mobile {
		display: none;
	}
	.zb-lp-price-strip-desktop {
		display: block;
	}

	.zb-lp-sticky-cta {
		display: none;
	}

	.zb-lp-title {
		font-size: 32px !important;
	}
}