/**
 * Photo grid — a row of photographs under a block of content.
 *
 * Used by the per-category panels on Facilities and Amenities and by the Pool &
 * Lounge panel on Accommodation, so it lives apart from any one of their
 * stylesheets. Every tile opens the shared viewer, which is built by
 * assets/js/gallery.js and styled in sections/lightbox.css — enqueue all three
 * together (see bananchal_assets()).
 *
 * Depends on the tokens in assets/css/style.css, which is enqueued first.
 *
 * 1. Grid
 * 2. Tile
 * 3. Zoom hint
 * 4. Reduced motion
 */

/* ==========================================================================
   1. Grid
   ========================================================================== */

/*
 * auto-fill with a minmax track rather than a fixed column count: the client
 * decides how many pictures a panel gets, and this way one photograph sits on its
 * own at a sensible size while six wrap into rows, with no per-count rules.
 *
 * Min raised from 180px to 240px so the thumbnails read as photographs rather
 * than icons. With object-fit: contain further down, a portrait upload still
 * fills the cell width — only the row height grows to match the image.
 */
.bf-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.15rem;
	margin: 2rem 0 0;
	padding: 2rem 0 0;
	border-top: 1px solid var(--bf-line);
	list-style: none;
}

/* ==========================================================================
   2. Tile
   ========================================================================== */

.bf-photos__item {
	overflow: hidden;
	border-radius: var(--bf-radius);
	background-color: var(--bf-sand);
	box-shadow: var(--bf-shadow-sm);
}

/* A real button, so Enter and Space open the viewer without any key handling. */
.bf-photos__open {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/*
 * No forced aspect-ratio and no object-fit cover: every uploaded photograph
 * is shown in its own proportions, full image, no centre-crop. The cell sizes
 * itself to the image's natural ratio, so a row of mixed-orientation shots
 * ends up uneven in height — accepted, because clipping the picture is worse
 * than a slightly ragged row. background-color on the parent (sand) shows
 * through any minor gap the rounded corners leave.
 */
.bf-photos__item img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	transition: transform 0.8s var(--bf-ease);
}

.bf-photos__open:hover img,
.bf-photos__open:focus-visible img {
	transform: scale(1.05);
}

/* The tile clips its own overflow, so an outset focus ring would be shaved. */
.bf-photos__open:focus-visible {
	outline: 2px solid var(--bf-amber-dark);
	outline-offset: -3px;
}

/* ==========================================================================
   3. Zoom hint
   ========================================================================== */

/*
 * The one hint that these open. Kept out of the accessibility tree — the button
 * already carries "Open this photograph" — and revealed on hover or focus.
 */
.bf-photos__zoom {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--bf-green-dark);
	font-size: 0.78rem;
	line-height: 1;
	opacity: 0;
	transform: scale(0.82);
	transition: opacity var(--bf-transition), transform var(--bf-transition);
	pointer-events: none;
}

.bf-photos__open:hover .bf-photos__zoom,
.bf-photos__open:focus-visible .bf-photos__zoom {
	opacity: 1;
	transform: none;
}

/* Nothing to hover with — leave the hint showing. */
@media (hover: none) {

	.bf-photos__zoom {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   4. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.bf-photos__item img,
	.bf-photos__zoom {
		transition: none;
	}

	.bf-photos__open:hover img,
	.bf-photos__open:focus-visible img,
	.bf-photos__zoom {
		transform: none;
	}
}