/* Villa gallery — static teaser + pop-up viewer. Figma 1:6019. */

.ibv-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-md);
	min-width: 0;
}

/* Header row — section-heading + "View all photos" button side-by-side.
   The section-heading component carries a bottom margin by default; reset
   it here so it doesn't push the header row apart. */
.ibv-gallery__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ibv-space-md);
	min-width: 0;
}

.ibv-gallery__header .ibv-section-heading {
	margin-bottom: 0;
}

/* Hero teaser — uniform 3:2 cosmetic crop; the whole tile is a button that
   opens the pop-up viewer. */
.ibv-gallery__main {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	aspect-ratio: 3 / 2;
	border-radius: var(--ibv-radius-md);
	overflow: hidden;
}

/* Single-image villas: the hero isn't interactive (no pop-up). */
.ibv-gallery__main--static {
	cursor: default;
}

.ibv-gallery__main-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Thumb carousel — horizontally scrollable; ~6 visible, rest scroll/swipe.
   Every thumb opens the pop-up at its image. A grid scroller
   (`grid-auto-flow: column` + `grid-auto-columns`) is used instead of a flex
   row: the grid's column width is definite, so the track stays bound to its
   container instead of growing to the thumbs' content width and blowing out
   the page. */
.ibv-gallery__thumbs {
	display: grid;
	grid-auto-flow: column;
	/* ~6 thumbs visible (the teaser look); implicit columns beyond scroll. */
	grid-auto-columns: calc((100% - 5 * var(--ibv-space-xs)) / 6);
	gap: var(--ibv-space-xs);
	overflow-x: auto;
	/* Paint containment. A horizontal scroll container that is a flex item
	   still leaks its scroll content into the document's scrollable width in
	   Chromium (`overflow: hidden`/`auto` clips visually but the page still
	   gains a phantom horizontal scrollbar). `contain: paint` stops the
	   thumbs' overflow contributing to the page width. */
	contain: paint;
	scroll-snap-type: x proximity;
	/* `scroll-snap-align: start` snaps a thumb's edge to the scrollport
	   edge, which would scroll `padding-inline` out of view and clip the
	   thumb's focus outline at the start/end. `scroll-padding-inline`
	   insets the snapport so snapping stops short and keeps the gutter (and
	   the outline) on screen. Must match `padding-inline`. */
	scroll-padding-inline: var(--ibv-space-xs);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	list-style: none;
	margin: 0;
	/* Padding gives the focus outline room: overflow clips at the padding
	   box, so the outline needs clearance or it's shaved. The larger bottom
	   keeps the horizontal scrollbar off the thumbnails. (Inline padding must
	   stay at `--ibv-space-xs` to match `scroll-padding-inline`.) */
	padding: var(--ibv-space-xs) var(--ibv-space-xs) var(--ibv-space-md);
}

.ibv-gallery__thumb-item {
	scroll-snap-align: start;
}

.ibv-gallery__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: var(--ibv-radius-md);
	overflow: hidden;
	opacity: 0.85;
	transition: opacity var(--ibv-duration-normal) var(--ibv-ease-standard);
}

.ibv-gallery__thumb:hover,
.ibv-gallery__thumb:focus-visible {
	opacity: 1;
}

.ibv-gallery__thumb-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Pop-up viewer — source-shape image held at a fixed height (no jump). */
.ibv-gallery__dialog {
	padding: 0;
	border: 0;
	width: auto;
	max-width: 94vw;
	background: var(--ibv-color-bg);
	border-radius: var(--ibv-radius-md);
	/* Center on the viewport. UA stylesheets vary on dialog vertical
	   positioning; `inset: 0` + `margin: auto` is the reliable pattern. */
	inset: 0;
	margin: auto;
}

.ibv-gallery__dialog::backdrop {
	background: rgb(0 0 0 / 0.7);
}

.ibv-gallery__dialog-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ibv-gallery__lightbox-img {
	display: block;
	height: min(80vh, 44rem);
	width: auto;
	max-width: 92vw;
	object-fit: contain;
}

.ibv-gallery__close {
	position: absolute;
	top: var(--ibv-space-sm);
	right: var(--ibv-space-sm);
	z-index: 1;
	display: flex;
	border: 0;
	cursor: pointer;
	background: var(--ibv-color-off-white);
	border-radius: var(--ibv-radius-sm);
	padding: var(--ibv-space-2xs);
	color: var(--ibv-color-text);
}

/* Pop-up prev/next — off-white square, dark chevron (stroke=currentColor). */
.ibv-gallery__lb-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	cursor: pointer;
	background: var(--ibv-color-off-white);
	border-radius: var(--ibv-radius-sm);
	color: var(--ibv-color-text);
}

.ibv-gallery__lb-arrow--prev {
	left: var(--ibv-space-sm);
}

.ibv-gallery__lb-arrow--next {
	right: var(--ibv-space-sm);
}

.ibv-gallery__counter {
	position: absolute;
	bottom: var(--ibv-space-sm);
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: var(--ibv-space-2xs) var(--ibv-space-sm);
	background: var(--ibv-color-off-white);
	border-radius: var(--ibv-radius-pill);
	font-size: var(--ibv-fs-micro);
	color: var(--ibv-color-text);
}