/*
 * CampFlow Pro — Gallery Style variants.
 *
 * All 7 styles restyle the EXACT SAME gallery markup PropertyPageRenderer
 * already outputs (up to 5 `.pfp-gallery__tile` buttons + a
 * `.pfp-gallery__more` overlay button, inside `.pfp-gallery__grid`) —
 * nothing here needs new PHP or new HTML structure. The active style is
 * applied via a `.pfp-gallery-style-{name}` class alongside the existing
 * `.pfp-gallery__grid--N` tile-count class, so these rules are additive
 * on top of the base classic grid defined in property-page.css, not a
 * replacement for it.
 *
 * Always enqueued (unlike the page-layout skins, which load conditionally
 * per property_page_template) since this is a small, single file and the
 * active style is selected purely by which class is present.
 */

/* ---------- Masonry: staggered tile heights ---------- */
.pfp-gallery-style-masonry.pfp-gallery__grid--5 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 90px;
	gap: 8px;
	height: auto;
}

.pfp-gallery-style-masonry.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 4; }
.pfp-gallery-style-masonry.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 3; }
.pfp-gallery-style-masonry.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
.pfp-gallery-style-masonry.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(4) { grid-column: 3 / 5; grid-row: 3 / 5; }
.pfp-gallery-style-masonry.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(5) { grid-column: 1 / 3; grid-row: 4 / 5; }

/* ---------- Hero + Filmstrip: one big photo, horizontal strip below ---------- */
.pfp-gallery-style-hero-strip.pfp-gallery__grid--5 {
	display: block;
	height: auto;
}

.pfp-gallery-style-hero-strip.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(1) {
	display: block;
	width: 100%;
	height: 380px;
	margin-bottom: 8px;
}

.pfp-gallery-style-hero-strip.pfp-gallery__grid--5::after {
	content: "";
	display: table;
	clear: both;
}

.pfp-gallery-style-hero-strip.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(n+2) {
	display: inline-block;
	width: calc(25% - 6px);
	height: 100px;
	margin-right: 8px;
	vertical-align: top;
}

/* ---------- Magazine Split: one dominant photo, others stacked beside it ---------- */
.pfp-gallery-style-magazine.pfp-gallery__grid--5 {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: repeat(4, 1fr);
	height: 480px;
	gap: 8px;
}

.pfp-gallery-style-magazine.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(1) { grid-column: 1; grid-row: 1 / 5; }
.pfp-gallery-style-magazine.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.pfp-gallery-style-magazine.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(3) { grid-column: 2; grid-row: 2; }
.pfp-gallery-style-magazine.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(4) { grid-column: 2; grid-row: 3; }
.pfp-gallery-style-magazine.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(5) { grid-column: 2; grid-row: 4; }

/* ---------- Full-Width Carousel: one photo visible at a time ---------- */
.pfp-gallery-style-carousel.pfp-gallery__grid--5 {
	display: block;
	height: 460px;
	position: relative;
}

.pfp-gallery-style-carousel.pfp-gallery__grid--5 .pfp-gallery__tile {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.pfp-gallery-style-carousel.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(1) {
	opacity: 1;
	z-index: 2;
}

.pfp-gallery-style-carousel.pfp-gallery__grid--5 .pfp-gallery__more {
	position: absolute;
	bottom: 16px;
	right: 16px;
	z-index: 3;
}

/* ---------- Polaroid Scatter: rotated, overlapping, white-bordered tiles ---------- */
.pfp-gallery-style-polaroid.pfp-gallery__grid--5 {
	display: block;
	height: 420px;
	position: relative;
	padding: 20px 0;
}

.pfp-gallery-style-polaroid.pfp-gallery__grid--5 .pfp-gallery__tile {
	position: absolute;
	width: 220px;
	height: 220px;
	background: #fff;
	padding: 10px 10px 30px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	border-radius: 3px;
	transition: transform 0.2s ease, z-index 0s;
}

.pfp-gallery-style-polaroid.pfp-gallery__grid--5 .pfp-gallery__tile:hover {
	transform: scale(1.06) rotate(0deg) !important;
	z-index: 10;
}

.pfp-gallery-style-polaroid.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(1) { left: 2%; top: 10%; transform: rotate(-6deg); z-index: 5; }
.pfp-gallery-style-polaroid.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(2) { left: 22%; top: 0; transform: rotate(4deg); z-index: 4; }
.pfp-gallery-style-polaroid.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(3) { left: 42%; top: 12%; transform: rotate(-3deg); z-index: 3; }
.pfp-gallery-style-polaroid.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(4) { left: 62%; top: 2%; transform: rotate(7deg); z-index: 2; }
.pfp-gallery-style-polaroid.pfp-gallery__grid--5 .pfp-gallery__tile:nth-child(5) { left: 78%; top: 14%; transform: rotate(-5deg); z-index: 1; }

/* ---------- Uniform Grid: equal square tiles, Instagram-style ---------- */
.pfp-gallery-style-uniform.pfp-gallery__grid--5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: 1fr;
	height: 220px;
	gap: 6px;
}

.pfp-gallery-style-uniform.pfp-gallery__grid--5 .pfp-gallery__tile {
	aspect-ratio: 1 / 1;
	height: 100%;
}

/* Every non-classic style: on narrow viewports, fall back to the same
   single-photo mobile treatment the classic grid already uses, rather
   than each experimental layout needing its own mobile rules — a
   masonry/polaroid/carousel arrangement on a 375px-wide screen is
   unreadable regardless of how carefully it's built. */
@media (max-width: 640px) {
	.pfp-gallery-style-masonry.pfp-gallery__grid--5,
	.pfp-gallery-style-hero-strip.pfp-gallery__grid--5,
	.pfp-gallery-style-magazine.pfp-gallery__grid--5,
	.pfp-gallery-style-carousel.pfp-gallery__grid--5,
	.pfp-gallery-style-polaroid.pfp-gallery__grid--5,
	.pfp-gallery-style-uniform.pfp-gallery__grid--5 {
		display: block;
		height: 280px;
		padding: 0;
	}

	.pfp-gallery-style-masonry.pfp-gallery__grid--5 .pfp-gallery__tile,
	.pfp-gallery-style-hero-strip.pfp-gallery__grid--5 .pfp-gallery__tile,
	.pfp-gallery-style-magazine.pfp-gallery__grid--5 .pfp-gallery__tile,
	.pfp-gallery-style-polaroid.pfp-gallery__grid--5 .pfp-gallery__tile,
	.pfp-gallery-style-uniform.pfp-gallery__grid--5 .pfp-gallery__tile {
		position: static;
		width: 100%;
		height: 280px;
		transform: none !important;
		box-shadow: none;
		padding: 0;
		border-radius: var(--pfp-radius-sm, 8px);
	}

	.pfp-gallery-style-masonry.pfp-gallery__grid--5 .pfp-gallery__tile:not(:first-child),
	.pfp-gallery-style-magazine.pfp-gallery__grid--5 .pfp-gallery__tile:not(:first-child),
	.pfp-gallery-style-polaroid.pfp-gallery__grid--5 .pfp-gallery__tile:not(:first-child),
	.pfp-gallery-style-uniform.pfp-gallery__grid--5 .pfp-gallery__tile:not(:first-child) {
		display: none;
	}
}