/* Reels Gallery front end. Inherits the theme's text color and font. */

.rg {
	--rg-accent: #1c6a58;
	--rg-accent-ink: #ffffff;
	--rg-line: rgba(128, 128, 128, 0.4);
	--rg-tile-bg: #2b3138;
	box-sizing: border-box;
	width: 100%;
}
.rg *,
.rg *::before,
.rg *::after { box-sizing: inherit; }

.rg-empty { opacity: 0.7; font-size: 14px; }

/* filter chips */
.rg-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 0 0 20px; }
.rg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-chip {
	min-height: 40px; padding: 0 14px; border-radius: 6px; cursor: pointer;
	border: 1px solid var(--rg-line); background: transparent; color: inherit; font: inherit;
}
.rg-chip:hover { border-color: currentColor; }
.rg-chip[aria-pressed="true"] { background: var(--rg-accent); border-color: var(--rg-accent); color: var(--rg-accent-ink); }
.rg-chip small { margin-left: 6px; font-size: 12px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.rg-chip:focus-visible { outline: 3px solid var(--rg-accent); outline-offset: 2px; }

/* play / pause previews button: colors and font come from Settings */
.rg .rg-motion {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; padding: 0 18px; margin: 0 0 0 auto; border: 0; border-radius: 6px; cursor: pointer;
	background: var(--rg-mbtn-bg, #1c6a58); color: var(--rg-mbtn-ink, #ffffff);
	font-family: inherit; font-size: var(--rg-mbtn-size, 16px); font-weight: var(--rg-mbtn-weight, 700); line-height: 1.2;
	text-transform: none; letter-spacing: normal; box-shadow: none;
}
.rg .rg-motion:hover, .rg .rg-motion:focus { background: var(--rg-mbtn-bg, #1c6a58); color: var(--rg-mbtn-ink, #ffffff); filter: brightness(1.12); }
.rg .rg-motion:focus-visible { outline: 3px solid var(--rg-mbtn-bg, #1c6a58); outline-offset: 2px; }

/* videos beyond the per-device limit */
.rg .rg-grid > li.rg-over { display: none !important; }

/* grid */
.rg-grid {
	list-style: none; margin: 0; padding: 0; display: grid;
	row-gap: var(--rg-gap-y, 16px);
	column-gap: var(--rg-gap-x, 16px);
	grid-template-columns: repeat(var(--rg-cols, 4), minmax(0, 1fr));
}
.rg-grid > li { margin: 0; padding: 0; min-width: 0; }

/* Themes often style "ul li" (side margins, bullets, bottom margins) and "button" (margins, widths).
   These rules keep the spacing controlled only by the gap settings. */
.rg .rg-grid { margin: 0 !important; padding: 0 !important; list-style: none !important; width: 100%; max-width: none; }
.rg .rg-grid > li { margin: 0 !important; padding: 0 !important; list-style: none !important; width: auto; max-width: none; min-width: 0; }
.rg .rg-grid > li::before,
.rg .rg-grid > li::after { content: none !important; display: none !important; }
.rg .rg-grid > li::marker { content: none; }
.rg .rg-tile { margin: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; }
@media (max-width: 900px) {
	.rg-grid { grid-template-columns: repeat(var(--rg-cols-t, 3), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.rg-grid { grid-template-columns: repeat(var(--rg-cols-m, 2), minmax(0, 1fr)); row-gap: var(--rg-gap-y-m, 10px); column-gap: var(--rg-gap-x-m, 10px); }
}

.rg-tile {
	position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; cursor: pointer;
	aspect-ratio: var(--rg-ratio, 1 / 1);
	border-radius: var(--rg-radius, 8px); overflow: hidden;
	background: var(--rg-tile-bg); color: #fff; text-align: left; font: inherit;
	-webkit-appearance: none; appearance: none;
}
.rg-tile:focus-visible { outline: 3px solid var(--rg-accent); outline-offset: 3px; }
.rg .rg-grid { row-gap: var(--rg-gap-y, 16px); column-gap: var(--rg-gap-x, 16px); }
@media (max-width: 560px) {
	.rg .rg-grid { row-gap: var(--rg-gap-y-m, 10px); column-gap: var(--rg-gap-x-m, 10px); }
}
.rg-scene { position: absolute; inset: 0; overflow: hidden; display: block; }
.rg-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-scene iframe { transition: opacity 0.3s ease; }

.rg-pill {
	position: absolute; padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.5);
	font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; color: #fff;
}
.rg-dur { top: 10px; right: 10px; }
.rg-cap {
	position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 5px 9px; border-radius: 5px;
	background: rgba(0, 0, 0, 0.5); font-size: 13px; line-height: 1.35; color: #fff;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rg-tile:hover .rg-cap { background: rgba(0, 0, 0, 0.68); }

/* popup */
.rg-lb {
	position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center;
	background: rgba(7, 10, 13, 0.9);
	padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	font-family: inherit;
}
.rg-lb[hidden] { display: none !important; }
.rg-lb-inner { position: relative; display: flex; align-items: center; gap: 20px; }
.rg-stage {
	--vw: 9; --vh: 16;
	position: relative;
	width: min(calc(86dvh * var(--vw) / var(--vh)), 92vw, 960px);
	aspect-ratio: var(--vw) / var(--vh);
	overflow: hidden; border-radius: 14px; background: #11161b; color: #fff; touch-action: pan-y;
}
@supports not (height: 1dvh) {
	.rg-stage { width: min(calc(86vh * var(--vw) / var(--vh)), 92vw, 960px); }
}
.rg-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rg-meta {
	position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 10px; align-items: flex-start;
	justify-content: space-between; pointer-events: none; z-index: 2;
}
.rg-meta-title { padding: 6px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); font-size: 14px; line-height: 1.35; min-width: 0; }
.rg-meta-title small { display: block; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.rg-meta-title em { display: block; font-style: normal; font-size: 12.5px; opacity: 0.85; margin-top: 2px; }
.rg-meta-count { flex: none; padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.rg-nav, .rg-close {
	width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
	background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; flex: none;
}
.rg-nav:hover, .rg-close:hover { background: rgba(255, 255, 255, 0.26); }
.rg-nav:focus-visible, .rg-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rg-nav[hidden] { display: none !important; }
.rg-close { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
@media (max-width: 640px) {
	.rg-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.45); width: 44px; height: 44px; z-index: 3; }
	.rg-nav.rg-prev { left: 6px; }
	.rg-nav.rg-next { right: 6px; }
}
html.rg-lock { overflow: hidden; }