/* LPA Image Gallery — frontend styles */

.lpa-gallery {
	--lpa-gap: 16px;
	--lpa-row-gap: 16px;
	--lpa-image-size: 140px;
	--lpa-tile-width: max(180px, calc(var(--lpa-image-size) + 40px));
	--lpa-max-cols: 4;
	--lpa-justify: start;
	--lpa-btn-bg: #1f2937;
	--lpa-btn-color: #ffffff;
	--lpa-btn-border: #1f2937;
	--lpa-btn-bg-hover: #111827;
	--lpa-btn-color-hover: #ffffff;
	--lpa-btn-border-hover: #111827;
	--lpa-btn-radius: 4px;
	--lpa-btn-font-weight: 500;
	--lpa-btn-padding-y: 10px;
	--lpa-btn-padding-x: 18px;
	--lpa-btn-font-size: 0.9rem;
	--lpa-title-color: inherit;
	--lpa-title-color-hover: inherit;
	--lpa-title-size: 1rem;
	--lpa-title-weight: 600;
	--lpa-title-margin: calc(0.75em - 3px) 0 calc(0.5em + 3px);
	--lpa-transition: 200ms ease;

	box-sizing: border-box;
	width: 100%;
}

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

.lpa-gallery__grid {
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--lpa-row-gap);
	column-gap: var(--lpa-gap);
	justify-content: var(--lpa-justify);
	max-width: calc(var(--lpa-max-cols) * var(--lpa-tile-width) + (var(--lpa-max-cols) - 1) * var(--lpa-gap));
}

/* Default tile width — fill-row mode overrides this with flex-basis below. */
.lpa-gallery__grid > .lpa-gallery__item {
	width: var(--lpa-tile-width);
	flex: 0 0 var(--lpa-tile-width);
}

/* Align the grid container itself when not full-width.
   width: fit-content shrinks the grid to just what its tiles need (so the
   centering happens around the actual visible content rather than around
   an invisible max-cols-sized region), but caps at the parent's width so
   the grid never overflows when content is wider than the container. */
.lpa-gallery--justify-center .lpa-gallery__grid {
	width: fit-content;
	margin-inline: auto;
}
.lpa-gallery--justify-end .lpa-gallery__grid {
	width: fit-content;
	margin-inline-start: auto;
}

/* Fill-row mode: each tile takes one "column" of the row at any width.
   - Every tile is the same width: (100% − all gaps) / max-cols.
   - Row 1's gap pattern is preserved in row 2 because the basis is fixed.
   - flex-grow is 0, so partial rows DON'T stretch; instead the leftover
     space is distributed by justify-content (Left / Center / Right). */
.lpa-gallery--fill .lpa-gallery__grid {
	max-width: none;
}

.lpa-gallery--fill .lpa-gallery__grid > .lpa-gallery__item {
	width: auto;
	flex: 0 0 calc((100% - (var(--lpa-max-cols) - 1) * var(--lpa-gap)) / var(--lpa-max-cols));
	max-width: 100%;
}

.lpa-gallery,
.lpa-gallery__grid,
.lpa-gallery__media-frame,
.lpa-gallery__media,
.lpa-gallery__item {
	/* Defensive resets — themes often style <a>, content blocks, or images
	   with borders/outlines. Force these wrappers to stay border-free so the
	   only visible border is the user-configured button border. */
	border: 0;
}

.lpa-gallery__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.lpa-gallery__item--linked {
	cursor: pointer;
}

.lpa-gallery__media-frame {
	position: relative;
	width: var(--lpa-image-size);
	height: var(--lpa-image-size);
	margin: 0 auto;
	/* overflow visible by default — lets the shape spill on hover */
}

.lpa-gallery__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: transparent;
	z-index: 1;
}

.lpa-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
}

.lpa-gallery__img--hover {
	opacity: 0;
	pointer-events: none;
}

/* Effect: instant swap */
.lpa-gallery--effect-swap .lpa-gallery__img--hover {
	transition: none;
}
.lpa-gallery--effect-swap .lpa-gallery__item:hover .lpa-gallery__img--hover,
.lpa-gallery--effect-swap .lpa-gallery__item:focus-within .lpa-gallery__img--hover {
	opacity: 1;
}

/* Effect: crossfade */
.lpa-gallery--effect-crossfade .lpa-gallery__img--normal,
.lpa-gallery--effect-crossfade .lpa-gallery__img--hover {
	transition: opacity var(--lpa-transition);
}
.lpa-gallery--effect-crossfade .lpa-gallery__item:hover .lpa-gallery__img--hover,
.lpa-gallery--effect-crossfade .lpa-gallery__item:focus-within .lpa-gallery__img--hover {
	opacity: 1;
}

/* Effect: zoom on hover (single image, scales up) */
.lpa-gallery--effect-zoom .lpa-gallery__img--normal {
	transition: transform var(--lpa-transition);
}
.lpa-gallery--effect-zoom .lpa-gallery__item:hover .lpa-gallery__img--normal,
.lpa-gallery--effect-zoom .lpa-gallery__item:focus-within .lpa-gallery__img--normal {
	transform: scale(1.05);
}

.lpa-gallery__title {
	margin: var(--lpa-title-margin);
	color: var(--lpa-title-color);
	font-size: var(--lpa-title-size);
	font-weight: var(--lpa-title-weight);
	line-height: 1.3;
	max-width: 100%;
	overflow-wrap: anywhere;
	transition: color var(--lpa-transition);
}

.lpa-gallery__item:hover .lpa-gallery__title,
.lpa-gallery__item:focus-within .lpa-gallery__title {
	color: var(--lpa-title-color-hover);
}

.lpa-gallery .lpa-gallery__button {
	display: inline-block;
	margin-top: auto;
	padding: var(--lpa-btn-padding-y) var(--lpa-btn-padding-x);
	background-color: var(--lpa-btn-bg);
	color: var(--lpa-btn-color);
	border-style: solid;
	border-width: var(--lpa-btn-border-width, 1px);
	border-color: var(--lpa-btn-border);
	border-radius: var(--lpa-btn-radius);
	font-size: var(--lpa-btn-font-size);
	font-weight: var(--lpa-btn-font-weight);
	line-height: 1;
	text-decoration: none;
	/* !important guards against theme CSS that targets <a>/<span>/.button
	   with its own transition shorthand — common cause of mismatched timing
	   between the button color fade and the shape transform. */
	transition:
		background-color var(--lpa-transition),
		color var(--lpa-transition),
		border-color var(--lpa-transition) !important;
}

.lpa-gallery__item:hover .lpa-gallery__button,
.lpa-gallery__item:focus-within .lpa-gallery__button {
	background-color: var(--lpa-btn-bg-hover);
	color: var(--lpa-btn-color-hover);
	border-color: var(--lpa-btn-border-hover);
}

.lpa-gallery__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ============================================================
   Background Shape
   ============================================================ */

.lpa-gallery__shape-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--lpa-shape-size, 80%);
	height: var(--lpa-shape-size, 80%);
	transform: translate(-50%, -50%) scale(1) rotate(var(--lpa-shape-rotate-initial, 0deg));
	transition: transform var(--lpa-transition);
	z-index: 0;
	pointer-events: none;
}

.lpa-gallery__shape {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(0deg);
	transform-origin: center;
	transition:
		transform var(--lpa-transition),
		background-color var(--lpa-transition);
	will-change: transform;
}

.lpa-gallery--shape-circle .lpa-gallery__shape {
	background-color: var(--lpa-shape-bg);
	border-radius: 50%;
}

.lpa-gallery--shape-square .lpa-gallery__shape {
	background-color: var(--lpa-shape-bg);
}

.lpa-gallery--shape-hexagon .lpa-gallery__shape {
	background-color: var(--lpa-shape-bg);
	clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}

.lpa-gallery--shape-triangle .lpa-gallery__shape {
	background-color: var(--lpa-shape-bg);
	clip-path: polygon(50% 5%, 95% 95%, 5% 95%);
}

.lpa-gallery--shape-trapezoid .lpa-gallery__shape {
	background-color: var(--lpa-shape-bg);
	clip-path: polygon(20% 10%, 80% 10%, 100% 90%, 0% 90%);
}

/* Shape color on hover — swaps to --lpa-shape-bg-hover for all colored shape
   types (ignored for image type which uses background-image, not color). */
.lpa-gallery--shape-circle .lpa-gallery__item:hover .lpa-gallery__shape,
.lpa-gallery--shape-circle .lpa-gallery__item:focus-within .lpa-gallery__shape,
.lpa-gallery--shape-square .lpa-gallery__item:hover .lpa-gallery__shape,
.lpa-gallery--shape-square .lpa-gallery__item:focus-within .lpa-gallery__shape,
.lpa-gallery--shape-hexagon .lpa-gallery__item:hover .lpa-gallery__shape,
.lpa-gallery--shape-hexagon .lpa-gallery__item:focus-within .lpa-gallery__shape,
.lpa-gallery--shape-triangle .lpa-gallery__item:hover .lpa-gallery__shape,
.lpa-gallery--shape-triangle .lpa-gallery__item:focus-within .lpa-gallery__shape,
.lpa-gallery--shape-trapezoid .lpa-gallery__item:hover .lpa-gallery__shape,
.lpa-gallery--shape-trapezoid .lpa-gallery__item:focus-within .lpa-gallery__shape {
	background-color: var(--lpa-shape-bg-hover);
}

.lpa-gallery--shape-image .lpa-gallery__shape {
	background-image: var(--lpa-shape-image, none);
	background-color: transparent;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* Transparent-at-rest mode: shape is invisible until hovered/focused.
   Uses opacity so it works for all shape types including image. */
.lpa-gallery--shape-fade .lpa-gallery__shape {
	opacity: 0;
	transition: opacity var(--lpa-transition), transform var(--lpa-transition);
}

.lpa-gallery--shape-fade .lpa-gallery__item:hover .lpa-gallery__shape,
.lpa-gallery--shape-fade .lpa-gallery__item:focus-within .lpa-gallery__shape {
	opacity: 1;
}

/* Hover: scale (on wrapper, preserves centering + initial rotation) */
.lpa-gallery__item:hover .lpa-gallery__shape-wrap,
.lpa-gallery__item:focus-within .lpa-gallery__shape-wrap {
	transform: translate(-50%, -50%) scale(var(--lpa-shape-scale-hover, 1)) rotate(var(--lpa-shape-rotate-initial, 0deg));
}

/* Hover: one-shot rotation */
.lpa-gallery--rotate-90 .lpa-gallery__item:hover .lpa-gallery__shape,
.lpa-gallery--rotate-90 .lpa-gallery__item:focus-within .lpa-gallery__shape,
.lpa-gallery--rotate-180 .lpa-gallery__item:hover .lpa-gallery__shape,
.lpa-gallery--rotate-180 .lpa-gallery__item:focus-within .lpa-gallery__shape,
.lpa-gallery--rotate-360 .lpa-gallery__item:hover .lpa-gallery__shape,
.lpa-gallery--rotate-360 .lpa-gallery__item:focus-within .lpa-gallery__shape {
	transform: rotate(var(--lpa-shape-rotate-hover, 0deg));
}

/* Continuous spin: animation paused by default, runs while hovered */
.lpa-gallery--rotate-continuous .lpa-gallery__shape {
	animation: lpa-spin 4s linear infinite;
	animation-play-state: paused;
}
.lpa-gallery--rotate-continuous .lpa-gallery__item:hover .lpa-gallery__shape,
.lpa-gallery--rotate-continuous .lpa-gallery__item:focus-within .lpa-gallery__shape {
	animation-play-state: running;
}

@keyframes lpa-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ============================================================
   Sort UI (rendered when show_sort is on)
   ============================================================ */

.lpa-gallery__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 0.9rem;
}
.lpa-gallery__sort-label {
	color: #50575e;
}
.lpa-gallery__sort-select {
	padding: 4px 8px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	font-size: 0.9rem;
}

/* ============================================================
   Scroll-into-view animations (gated by --scroll-in class)
   ============================================================ */

.lpa-gallery--scroll-in .lpa-gallery__item {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 600ms ease, transform 600ms ease;
}
.lpa-gallery--scroll-in .lpa-gallery__item--in-view {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   Active page state — when an item's URL matches the current page,
   apply the same visual treatment as :hover.
   ============================================================ */

.lpa-gallery--effect-swap .lpa-gallery__item--current .lpa-gallery__img--hover,
.lpa-gallery--effect-crossfade .lpa-gallery__item--current .lpa-gallery__img--hover {
	opacity: 1;
}
.lpa-gallery--effect-zoom .lpa-gallery__item--current .lpa-gallery__img--normal {
	transform: scale(1.05);
}
.lpa-gallery__item--current .lpa-gallery__title {
	color: var(--lpa-title-color-hover);
}
.lpa-gallery__item--current .lpa-gallery__button {
	background-color: var(--lpa-btn-bg-hover);
	color: var(--lpa-btn-color-hover);
	border-color: var(--lpa-btn-border-hover);
}
.lpa-gallery__item--current .lpa-gallery__shape-wrap {
	transform: translate(-50%, -50%) scale(var(--lpa-shape-scale-hover, 1)) rotate(var(--lpa-shape-rotate-initial, 0deg));
}
.lpa-gallery--rotate-90 .lpa-gallery__item--current .lpa-gallery__shape,
.lpa-gallery--rotate-180 .lpa-gallery__item--current .lpa-gallery__shape,
.lpa-gallery--rotate-360 .lpa-gallery__item--current .lpa-gallery__shape {
	transform: rotate(var(--lpa-shape-rotate-hover, 0deg));
}
.lpa-gallery--shape-circle .lpa-gallery__item--current .lpa-gallery__shape,
.lpa-gallery--shape-square .lpa-gallery__item--current .lpa-gallery__shape,
.lpa-gallery--shape-hexagon .lpa-gallery__item--current .lpa-gallery__shape,
.lpa-gallery--shape-triangle .lpa-gallery__item--current .lpa-gallery__shape,
.lpa-gallery--shape-trapezoid .lpa-gallery__item--current .lpa-gallery__shape {
	background-color: var(--lpa-shape-bg-hover);
}
.lpa-gallery--rotate-continuous .lpa-gallery__item--current .lpa-gallery__shape {
	animation-play-state: running;
}
.lpa-gallery--shape-fade .lpa-gallery__item--current .lpa-gallery__shape {
	opacity: 1;
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.lpa-gallery__img,
	.lpa-gallery__button,
	.lpa-gallery__shape,
	.lpa-gallery__shape-wrap {
		transition: none !important;
	}
	.lpa-gallery--effect-zoom .lpa-gallery__item:hover .lpa-gallery__img--normal,
	.lpa-gallery--effect-zoom .lpa-gallery__item:focus-within .lpa-gallery__img--normal {
		transform: none;
	}
	.lpa-gallery--rotate-continuous .lpa-gallery__shape {
		animation: none !important;
	}
	.lpa-gallery__item:hover .lpa-gallery__shape-wrap,
	.lpa-gallery__item:focus-within .lpa-gallery__shape-wrap {
		transform: translate(-50%, -50%) scale(1) rotate(var(--lpa-shape-rotate-initial, 0deg));
	}
	.lpa-gallery--rotate-90 .lpa-gallery__item:hover .lpa-gallery__shape,
	.lpa-gallery--rotate-90 .lpa-gallery__item:focus-within .lpa-gallery__shape,
	.lpa-gallery--rotate-180 .lpa-gallery__item:hover .lpa-gallery__shape,
	.lpa-gallery--rotate-180 .lpa-gallery__item:focus-within .lpa-gallery__shape,
	.lpa-gallery--rotate-360 .lpa-gallery__item:hover .lpa-gallery__shape,
	.lpa-gallery--rotate-360 .lpa-gallery__item:focus-within .lpa-gallery__shape {
		transform: rotate(0deg);
	}
	/* Scroll-in animations: no fade/slide, items appear in final state */
	.lpa-gallery--scroll-in .lpa-gallery__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}