/* ---- Cursor reveal grid --------------------------------------------- */

.ava-rg {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: var(--rg-bg, #fff);
	touch-action: pan-y;
	cursor: crosshair;
}

/*
 * True fullscreen: one full viewport, edge to edge, on any monitor. The grid
 * stays in the page flow so the footer keeps its place below it and the page
 * scrolls normally.
 */
.ava-rg.is-fullscreen {
	height: 100vh;
	height: 100dvh;
}

/*
 * Header floating over the grid. Absolute rather than fixed, so it scrolls
 * away with the rest of the page.
 */
body.ava-rg-overlay-header .bhfb-header,
body.ava-rg-overlay-header .site-header,
body.ava-rg-overlay-header #masthead,
body.ava-rg-overlay-header .elementor-location-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	background: transparent !important;
	box-shadow: none !important;
	border-bottom: 0 !important;
}

/* Botiga builds its header in rows, and the white sits on the rows. */
body.ava-rg-overlay-header .bhfb-header .bhfb-row-wrapper,
body.ava-rg-overlay-header .bhfb-header .bhfb-row-content {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* The grid begins at the very top, underneath that header. */
body.ava-rg-overlay-header .site-content,
body.ava-rg-overlay-header #content,
body.ava-rg-overlay-header .content-area,
body.ava-rg-overlay-header .site-main,
body.ava-rg-overlay-header #primary {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.ava-rg__grid {
	display: grid;
	/* Placement stays left to right in every language. */
	direction: ltr;
	width: 100%;
	align-content: start;
	overflow: hidden;
	gap: 0;
	grid-template-columns: repeat(var(--rg-cols-d, 5), 1fr);
	grid-auto-rows: calc(100vw / var(--rg-cols-d, 5));
}

.ava-rg__tile {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	opacity: 0;
	filter: grayscale(var(--rg-gray, 1));
	transition: opacity var(--rg-out, 1000ms) ease, filter var(--rg-out, 1000ms) ease;
	will-change: opacity;
}

.ava-rg__img {
	display: block;
	width: 100%;
	height: 100%;
	/* Square crop happens here. Upload any shape, in colour. */
	object-fit: cover;
}

.ava-rg__label {
	/* Text still reads in its own direction, Farsi included. */
	unicode-bidi: plaintext;
	text-align: start;
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 8px 10px;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: #fff;
	background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}

/*
 * Three states, in ascending order of specificity:
 * hidden, residue (a fading trace, still grey), and live (in colour).
 */
.ava-rg.is-ready .ava-rg__tile {
	opacity: 0;
	filter: grayscale(var(--rg-gray, 1));
}

.ava-rg.is-ready .ava-rg__tile.is-res {
	opacity: calc(var(--rg-res-top, 0.6) * var(--rg-res-f, 1));
}

.ava-rg.is-ready .ava-rg__tile.is-on,
.ava-rg.is-ready .ava-rg__tile:focus-visible {
	opacity: 1;
	/* 0 by default: colour arrives with the cursor. Set to 1 to stay grey. */
	filter: grayscale(var(--rg-gray-on, 0));
	transition: opacity 80ms ease, filter 260ms ease;
}

.ava-rg__tile:focus-visible {
	outline: 1px solid #000;
	outline-offset: -1px;
	z-index: 2;
}

@media (max-width: 1024px) {
	.ava-rg__grid {
		grid-template-columns: repeat(var(--rg-cols-t, 4), 1fr);
		grid-auto-rows: calc(100vw / var(--rg-cols-t, 4));
	}
}

@media (max-width: 600px) {
	.ava-rg__grid {
		grid-template-columns: repeat(var(--rg-cols-m, 2), 1fr);
		grid-auto-rows: calc(100vw / var(--rg-cols-m, 2));
	}
}

/* Reduced motion, and the no-JavaScript case: the full grid, static. */
@media (prefers-reduced-motion: reduce) {
	.ava-rg { cursor: auto; }
	.ava-rg__tile { opacity: 1; filter: grayscale(0); transition: none; }
}

.ava-rg:not(.is-ready) .ava-rg__tile { opacity: 1; filter: grayscale(0); }

/* ---- Editor preview -------------------------------------------------- */

.ava-rg-editor { border: 1px dashed #c3c4c7; padding: 16px; background: #fff; }
.ava-rg-editor__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ava-rg-editor__list { display: grid; gap: 10px; }
.ava-rg-editor__row {
	display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: start;
	padding: 8px; background: #f6f7f7; border-radius: 2px;
}
.ava-rg-editor__row img {
	width: 74px; height: 74px; object-fit: cover; display: block;
	border-radius: 2px; filter: grayscale(1);
}
.ava-rg-editor__empty { color: #757575; margin: 0; }

/* Tiles in a row that cannot fit whole are not rendered at all. */
.ava-rg__tile.is-clipped {
	display: none !important;
}