/**
 * Flavors Mask Gallery - static widget styles.
 *
 * All per-instance theming (colors, columns, gap, ratio, radius, speed, scale,
 * custom mask) arrives via CSS custom properties set by Elementor `selectors`
 * or escaped inline vars on the wrapper. This file holds only the structural
 * layout, the mask-shape definitions, hover effects, and the lightbox chrome.
 *
 * @package Flavors Engine
 */

.flavor-mask-gallery {
	--flavor-mg-columns: 3;
	--flavor-mg-gap: 16px;
	--flavor-mg-ratio: 1 / 1;
	--flavor-mg-speed: 400ms;
	--flavor-mg-scale: 1.08;
	box-sizing: border-box;
}

.flavor-mask-gallery *,
.flavor-mask-gallery *::before,
.flavor-mask-gallery *::after {
	box-sizing: border-box;
}

/* ----------------------------------------------------------------- Layouts */
.flavor-mg--grid {
	display: grid;
	grid-template-columns: repeat(var(--flavor-mg-columns), minmax(0, 1fr));
	gap: var(--flavor-mg-gap);
}

.flavor-mg--masonry {
	column-count: var(--flavor-mg-columns);
	column-gap: var(--flavor-mg-gap);
}

.flavor-mg--masonry .flavor-mg-item {
	display: block;
	width: 100%;
	margin: 0 0 var(--flavor-mg-gap);
	break-inside: avoid;
}

/* ------------------------------------------------------------------- Item */
.flavor-mg-item {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: default;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	color: inherit;
	text-align: inherit;
}

button.flavor-mg-item,
a.flavor-mg-item {
	cursor: pointer;
}

a.flavor-mg-item {
	text-decoration: none;
}

.flavor-mg-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* The frame carries the mask/clip + aspect ratio so the radius/overflow and
   mask never fight over the same box. */
.flavor-mg-frame {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}

.flavor-mg--grid .flavor-mg-frame {
	aspect-ratio: var(--flavor-mg-ratio);
}

.flavor-mg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--flavor-mg-speed) ease, filter var(--flavor-mg-speed) ease;
	will-change: transform;
}

.flavor-mg--masonry .flavor-mg-img {
	height: auto;
}

/* -------------------------------------------------------------- Hover FX */
.flavor-mg-hover--zoom .flavor-mg-item:hover .flavor-mg-img,
.flavor-mg-hover--zoom .flavor-mg-item:focus-visible .flavor-mg-img {
	transform: scale(var(--flavor-mg-scale));
}

.flavor-mg-hover--grayscale .flavor-mg-img {
	filter: grayscale(1);
}

.flavor-mg-hover--grayscale .flavor-mg-item:hover .flavor-mg-img,
.flavor-mg-hover--grayscale .flavor-mg-item:focus-visible .flavor-mg-img {
	filter: grayscale(0);
}

/* --------------------------------------------------------- Hover overlay */
.flavor-mg-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 14px;
	opacity: 0;
	transition: opacity var(--flavor-mg-speed) ease;
	pointer-events: none;
}

.flavor-mg-item:hover .flavor-mg-overlay,
.flavor-mg-item:focus-visible .flavor-mg-overlay {
	opacity: 1;
}

.flavor-mg-caption {
	font-size: 0.9em;
	line-height: 1.35;
	text-align: center;
}

/* Expand icon (lightbox affordance) */
.flavor-mg-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%) scale(0.8);
	opacity: 0;
	transition: opacity var(--flavor-mg-speed) ease, transform var(--flavor-mg-speed) ease;
	pointer-events: none;
}

.flavor-mg-icon svg {
	width: 100%;
	height: 100%;
}

.flavor-mg-item:hover .flavor-mg-icon,
.flavor-mg-item:focus-visible .flavor-mg-icon {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* ============================================================ MASK SHAPES */
/* Shapes apply to the frame. Radius-based shapes use border-radius; complex
   shapes use clip-path (with a mask-image fallback path for custom). */
.flavor-mg-shape--circle .flavor-mg-frame {
	border-radius: 50%;
}

.flavor-mg-shape--squircle .flavor-mg-frame {
	border-radius: 30% / 30%;
	clip-path: path(
		"M 0,0.5 C 0,0 0,0 0.5,0 1,0 1,0 1,0.5 1,1 1,1 0.5,1 0,1 0,1 0,0.5 Z"
	);
	clip-path: none;
}

/* Squircle via superellipse-ish radius (broad support, no path math). */
.flavor-mg-shape--squircle .flavor-mg-frame {
	border-radius: 28%;
}

.flavor-mg-shape--hexagon .flavor-mg-frame {
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.flavor-mg-shape--diamond .flavor-mg-frame {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.flavor-mg-shape--blob .flavor-mg-frame {
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
}

/* Alternate (even-index) shapes for the mosaic. The PHP adds
   .flavor-mg-shape-alt--<shape> on the wrapper and .flavor-mg-item--alt per
   even item; combine the two so only even items pick up the alt shape. */
.flavor-mg-shape-alt--circle .flavor-mg-item--alt .flavor-mg-frame {
	border-radius: 50%;
	clip-path: none;
}

.flavor-mg-shape-alt--rounded .flavor-mg-item--alt .flavor-mg-frame {
	border-radius: 18px;
	clip-path: none;
}

.flavor-mg-shape-alt--squircle .flavor-mg-item--alt .flavor-mg-frame {
	border-radius: 28%;
	clip-path: none;
}

.flavor-mg-shape-alt--hexagon .flavor-mg-item--alt .flavor-mg-frame {
	border-radius: 0;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.flavor-mg-shape-alt--diamond .flavor-mg-item--alt .flavor-mg-frame {
	border-radius: 0;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.flavor-mg-shape-alt--blob .flavor-mg-item--alt .flavor-mg-frame {
	border-radius: 58% 42% 37% 63% / 56% 41% 59% 44%;
	clip-path: none;
}

/* Custom mask: a CSS var holds either a mask-image URL or a clip-path value. */
.flavor-mg-shape--custom .flavor-mg-frame {
	-webkit-mask-image: var(--flavor-mask-image, none);
	mask-image: var(--flavor-mask-image, none);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	clip-path: var(--flavor-mask-clip, none);
}

/* ============================================================== LIGHTBOX */
.flavor-mg-lightbox {
	--flavor-mg-lb-bg: rgba(12, 12, 14, 0.92);
	--flavor-mg-lb-control: #ffffff;
	--flavor-mg-lb-arrow: 44px;
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 56px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 240ms ease, visibility 240ms ease;
}

.flavor-mg-lightbox[hidden] {
	display: none;
}

.flavor-mg-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.flavor-mg-lb-backdrop {
	position: absolute;
	inset: 0;
	background: var(--flavor-mg-lb-bg);
	border: 0;
}

.flavor-mg-lb-stage {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.flavor-mg-lb-img {
	display: block;
	max-width: min(92vw, 1400px);
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	transform: scale(0.97);
	opacity: 0;
	transition: transform 240ms ease, opacity 240ms ease;
}

.flavor-mg-lightbox.is-open .flavor-mg-lb-img {
	transform: scale(1);
	opacity: 1;
}

.flavor-mg-lb-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.flavor-mg-lb-counter {
	font-size: 0.85em;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

.flavor-mg-lb-caption {
	font-size: 1em;
	line-height: 1.4;
	max-width: 60ch;
}

.flavor-mg-lb-caption:empty {
	display: none;
}

/* Controls */
.flavor-mg-lb-close,
.flavor-mg-lb-prev,
.flavor-mg-lb-next {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--flavor-mg-lb-control);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 200ms ease, transform 200ms ease;
}

.flavor-mg-lb-close:hover,
.flavor-mg-lb-prev:hover,
.flavor-mg-lb-next:hover {
	opacity: 0.7;
}

.flavor-mg-lb-close:focus-visible,
.flavor-mg-lb-prev:focus-visible,
.flavor-mg-lb-next:focus-visible {
	outline: 2px solid var(--flavor-mg-lb-control);
	outline-offset: 4px;
}

.flavor-mg-lb-close {
	top: clamp(12px, 3vw, 28px);
	right: clamp(12px, 3vw, 28px);
	width: 40px;
	height: 40px;
}

.flavor-mg-lb-close svg {
	width: 28px;
	height: 28px;
}

.flavor-mg-lb-prev,
.flavor-mg-lb-next {
	top: 50%;
	width: var(--flavor-mg-lb-arrow);
	height: var(--flavor-mg-lb-arrow);
	transform: translateY(-50%);
}

.flavor-mg-lb-prev {
	left: clamp(8px, 2vw, 28px);
}

.flavor-mg-lb-next {
	right: clamp(8px, 2vw, 28px);
}

.flavor-mg-lb-prev:hover {
	transform: translateY(-50%) translateX(-2px);
}

.flavor-mg-lb-next:hover {
	transform: translateY(-50%) translateX(2px);
}

.flavor-mg-lb-prev svg,
.flavor-mg-lb-next svg {
	width: 100%;
	height: 100%;
}

.flavor-mg-lb-prev[disabled],
.flavor-mg-lb-next[disabled] {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

/* Prevent body scroll while the lightbox is open (class added by JS). */
.flavor-mg-no-scroll {
	overflow: hidden;
}

/* --------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.flavor-mask-gallery .flavor-mg-img,
	.flavor-mg-overlay,
	.flavor-mg-icon,
	.flavor-mg-lightbox,
	.flavor-mg-lb-img,
	.flavor-mg-lb-close,
	.flavor-mg-lb-prev,
	.flavor-mg-lb-next {
		transition: none !important;
	}
}