/**
 * Gallery page — the masonry grid of photographs.
 *
 * Loaded on the Gallery page only (see bananchal_assets()). Depends on the tokens
 * in assets/css/style.css, which is always enqueued first.
 *
 * The viewer the tiles open into is NOT here: it lives in sections/lightbox.css,
 * because Facilities and Amenities open the same viewer from their own photographs.
 *
 * The one rgba() literal is deliberate: the tokens are hex, and a translucent
 * layer cannot be built from one without a separate channel token.
 *
 * 1. Masonry grid
 * 2. Tiles
 * 3. Prose
 * 4. Responsive
 * 5. Reduced motion
 */

/* ==========================================================================
   1. Masonry grid — CSS columns, so tall and wide photographs sit together
   ========================================================================== */

.bf-gallery__grid {
	column-count: 1;
	column-gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.bf-gallery__cell {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   2. Tiles
   ========================================================================== */

.bf-gallery__tile {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--bf-radius-lg);
	background-color: var(--bf-sand);
	box-shadow: var(--bf-shadow-sm);
	overflow: hidden;
	cursor: pointer;
	/* Per-tile ratio comes from the template; the image keeps its own shape where
	   aspect-ratio is unsupported, because it is not taken out of the flow. */
	aspect-ratio: var(--bf-tile-ratio, 4 / 3);
	transition: transform var(--bf-transition), box-shadow var(--bf-transition);
}

.bf-gallery__tile:hover {
	transform: translateY(-6px);
	box-shadow: var(--bf-shadow);
}


.bf-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--bf-ease);
}

.bf-gallery__tile:hover .bf-gallery__img,
.bf-gallery__tile:focus-visible .bf-gallery__img {
	transform: scale(1.06);
}

.bf-gallery__zoom {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--bf-green-dark);
	font-size: 0.95rem;
	line-height: 1;
	opacity: 0;
	transform: scale(0.82);
	transition: opacity var(--bf-transition), transform var(--bf-transition), background-color var(--bf-transition);
	pointer-events: none;
}

.bf-gallery__tile:hover .bf-gallery__zoom,
.bf-gallery__tile:focus-visible .bf-gallery__zoom {
	opacity: 1;
	transform: none;
}

.bf-gallery__tile:focus-visible .bf-gallery__zoom {
	background-color: var(--bf-amber);
}

/* ==========================================================================
   3. Prose
   ========================================================================== */

.bf-gallery__prose {
	margin-top: 3.5rem;
}

/* ==========================================================================
   4. Responsive
   ========================================================================== */

@media (min-width: 576px) {
	.bf-gallery__grid {
		column-count: 2;
	}
}

@media (min-width: 992px) {
	.bf-gallery__grid {
		column-count: 3;
		column-gap: 1.5rem;
	}

	.bf-gallery__cell {
		margin-bottom: 1.5rem;
	}
}

@media (min-width: 1400px) {
	.bf-gallery__grid {
		column-count: 4;
	}
}

@media (max-width: 575.98px) {
	.bf-gallery__zoom {
		width: 36px;
		height: 36px;
		top: 0.6rem;
		right: 0.6rem;
	}
}

/* Nothing to hover with — leave the only hint that these open showing. */
@media (hover: none) {
	.bf-gallery__zoom {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   5. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bf-gallery__tile,
	.bf-gallery__img,
	.bf-gallery__zoom {
		transition: none;
	}

	.bf-gallery__tile:hover,
	.bf-gallery__tile:hover .bf-gallery__img,
	.bf-gallery__tile:focus-visible .bf-gallery__img {
		transform: none;
	}

	.bf-gallery__zoom {
		transform: none;
	}
}