/* inkPad / Photo Grid - class-driven + tokens */

.inkpad-scope .inkpad-logo-cloud,
.editor-styles-wrapper .inkpad-logo-cloud {
	--inkpad-photo-gap: var(--inkpad-space-md);
	--inkpad-photo-inner-pad-y: var(--inkpad-space-sm);
	--inkpad-photo-inner-pad-x: var(--inkpad-space-sm);
	--inkpad-photo-radius: var(--inkpad-radius-md, var(--inkpad-radius));
	--inkpad-photo-item-pad: 0;
	--inkpad-photo-item-bg: transparent;
	--inkpad-photo-item-border: none;
	--inkpad-photo-item-shadow: none;
	--inkpad-photo-item-blur: 0px;
	--inkpad-photo-max-width: var(--inkpad-container-width, 64rem);
	--inkpad-photo-opacity: 1;
	--inkpad-photo-opacity-hover: 1;
	--inkpad-photo-min-height: 11rem;
	--inkpad-photo-aspect: 4 / 3;

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

.inkpad-scope .inkpad-logo-cloud .inkpad-inner,
.editor-styles-wrapper .inkpad-logo-cloud .inkpad-inner {
	padding: var(--inkpad-photo-inner-pad-y) var(--inkpad-photo-inner-pad-x);
	box-sizing: border-box;
	max-width: var(--inkpad-photo-max-width);
	width: 100%;
}

.editor-styles-wrapper .inkpad-logo-cloud .inkpad-inner {
	padding-top: calc(var(--inkpad-photo-inner-pad-y) + var(--inkpad-space-sm));
}

.inkpad-scope .inkpad-logo-cloud--align-left .inkpad-inner,
.editor-styles-wrapper .inkpad-logo-cloud--align-left .inkpad-inner {
	margin-inline-start: 0;
	margin-inline-end: auto;
}

.inkpad-scope .inkpad-logo-cloud--align-center .inkpad-inner,
.editor-styles-wrapper .inkpad-logo-cloud--align-center .inkpad-inner {
	margin-inline: auto;
}

.inkpad-scope .inkpad-logo-cloud--align-right .inkpad-inner,
.editor-styles-wrapper .inkpad-logo-cloud--align-right .inkpad-inner {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

.inkpad-scope .inkpad-logo-cloud__grid,
.editor-styles-wrapper .inkpad-logo-cloud__grid {
	display: grid;
	gap: var(--inkpad-photo-gap);
	width: 100%;
	box-sizing: border-box;
	align-items: start;
	justify-items: stretch;
}

.inkpad-scope .inkpad-logo-cloud--cols-2 .inkpad-logo-cloud__grid,
.editor-styles-wrapper .inkpad-logo-cloud--cols-2 .inkpad-logo-cloud__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inkpad-scope .inkpad-logo-cloud--cols-3 .inkpad-logo-cloud__grid,
.editor-styles-wrapper .inkpad-logo-cloud--cols-3 .inkpad-logo-cloud__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inkpad-scope .inkpad-logo-cloud--cols-4 .inkpad-logo-cloud__grid,
.editor-styles-wrapper .inkpad-logo-cloud--cols-4 .inkpad-logo-cloud__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inkpad-scope .inkpad-logo-cloud--cols-5 .inkpad-logo-cloud__grid,
.editor-styles-wrapper .inkpad-logo-cloud--cols-5 .inkpad-logo-cloud__grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.inkpad-scope .inkpad-logo-cloud--cols-6 .inkpad-logo-cloud__grid,
.editor-styles-wrapper .inkpad-logo-cloud--cols-6 .inkpad-logo-cloud__grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 50em) {
	.inkpad-scope .inkpad-logo-cloud--cols-6 .inkpad-logo-cloud__grid,
	.editor-styles-wrapper .inkpad-logo-cloud--cols-6 .inkpad-logo-cloud__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.inkpad-scope .inkpad-logo-cloud--cols-5 .inkpad-logo-cloud__grid,
	.editor-styles-wrapper .inkpad-logo-cloud--cols-5 .inkpad-logo-cloud__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.inkpad-scope .inkpad-logo-cloud--cols-4 .inkpad-logo-cloud__grid,
	.editor-styles-wrapper .inkpad-logo-cloud--cols-4 .inkpad-logo-cloud__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.inkpad-scope .inkpad-logo-cloud--cols-3 .inkpad-logo-cloud__grid,
	.editor-styles-wrapper .inkpad-logo-cloud--cols-3 .inkpad-logo-cloud__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 32em) {
	.inkpad-scope .inkpad-logo-cloud--cols-2 .inkpad-logo-cloud__grid,
	.inkpad-scope .inkpad-logo-cloud--cols-3 .inkpad-logo-cloud__grid,
	.inkpad-scope .inkpad-logo-cloud--cols-4 .inkpad-logo-cloud__grid,
	.inkpad-scope .inkpad-logo-cloud--cols-5 .inkpad-logo-cloud__grid,
	.inkpad-scope .inkpad-logo-cloud--cols-6 .inkpad-logo-cloud__grid,
	.editor-styles-wrapper .inkpad-logo-cloud--cols-2 .inkpad-logo-cloud__grid,
	.editor-styles-wrapper .inkpad-logo-cloud--cols-3 .inkpad-logo-cloud__grid,
	.editor-styles-wrapper .inkpad-logo-cloud--cols-4 .inkpad-logo-cloud__grid,
	.editor-styles-wrapper .inkpad-logo-cloud--cols-5 .inkpad-logo-cloud__grid,
	.editor-styles-wrapper .inkpad-logo-cloud--cols-6 .inkpad-logo-cloud__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.inkpad-scope .inkpad-logo-cloud__item,
.editor-styles-wrapper .inkpad-logo-cloud__editor-preview {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: var(--inkpad-photo-item-pad);
	border-radius: var(--inkpad-photo-radius);
	background: var(--inkpad-photo-item-bg);
	border: var(--inkpad-photo-item-border);
	box-shadow: var(--inkpad-photo-item-shadow);
	backdrop-filter: blur(var(--inkpad-photo-item-blur));
	-webkit-backdrop-filter: blur(var(--inkpad-photo-item-blur));
	box-sizing: border-box;
	transition:
		transform var(--inkpad-transition-medium),
		box-shadow var(--inkpad-transition-medium),
		border-color var(--inkpad-transition-fast),
		background var(--inkpad-transition-fast);
}

.inkpad-scope .inkpad-logo-cloud__item {
	text-decoration: none;
	color: inherit;
}

.inkpad-scope .inkpad-logo-cloud__item:focus-visible {
	outline: none;
	box-shadow:
		var(--inkpad-photo-item-shadow),
		var(--inkpad-shadow-focus);
}

.inkpad-scope .inkpad-logo-cloud__media,
.editor-styles-wrapper .inkpad-logo-cloud__editor-image,
.editor-styles-wrapper .inkpad-logo-cloud__editor-empty {
	display: block;
	width: 100%;
	min-height: var(--inkpad-photo-min-height);
	aspect-ratio: var(--inkpad-photo-aspect);
	border-radius: calc(var(--inkpad-photo-radius) - 2px);
}

.inkpad-scope .inkpad-logo-cloud__media {
	overflow: hidden;
}

.inkpad-scope .inkpad-logo-cloud__item img,
.editor-styles-wrapper .inkpad-logo-cloud__editor-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--inkpad-photo-opacity);
	transform: scale(1.001);
	transition:
		opacity var(--inkpad-transition-medium),
		transform var(--inkpad-transition-medium),
		filter var(--inkpad-transition-medium);
}

.editor-styles-wrapper .inkpad-logo-cloud__editor-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--inkpad-space-sm);
	background:
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--inkpad-color-surface) 82%, transparent),
			color-mix(in srgb, var(--inkpad-color-accent) 12%, transparent)
		);
	border: 1px dashed color-mix(in srgb, var(--inkpad-color-text) 16%, transparent);
	color: var(--inkpad-color-text-muted, var(--inkpad-text-muted));
	font-size: var(--inkpad-font-sm);
	text-align: center;
	box-sizing: border-box;
}

.inkpad-scope .inkpad-logo-cloud__zoom {
	position: absolute;
	right: var(--inkpad-space-sm);
	bottom: var(--inkpad-space-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--inkpad-space-xs) * 0.9) var(--inkpad-space-sm);
	border-radius: 999px;
	background: color-mix(in srgb, var(--inkpad-color-surface, #ffffff) 88%, transparent);
	border: 1px solid color-mix(in srgb, var(--inkpad-color-text, #111111) 10%, transparent);
	color: var(--inkpad-color-text, var(--inkpad-text, #111111));
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	opacity: 0;
	transform: translateY(0.35rem);
	transition:
		opacity var(--inkpad-transition-fast),
		transform var(--inkpad-transition-fast),
		background var(--inkpad-transition-fast);
	pointer-events: none;
}

.inkpad-scope .inkpad-logo-cloud__item:hover .inkpad-logo-cloud__zoom,
.inkpad-scope .inkpad-logo-cloud__item:focus-visible .inkpad-logo-cloud__zoom {
	opacity: 1;
	transform: translateY(0);
}

.inkpad-scope .inkpad-logo-cloud__item:hover img,
.inkpad-scope .inkpad-logo-cloud__item:focus-visible img {
	opacity: var(--inkpad-photo-opacity-hover);
	transform: scale(1.04);
}

.inkpad-scope .inkpad-logo-cloud__item[data-fx="lift"]:hover,
.editor-styles-wrapper .inkpad-logo-cloud__editor-preview[data-fx="lift"]:hover {
	transform: translateY(var(--inkpad-motion-lift, -4px));
	box-shadow: var(--inkpad-shadow-elevation, var(--inkpad-photo-item-shadow));
}

.inkpad-scope .inkpad-logo-cloud__item[data-fx="glow"]:hover,
.editor-styles-wrapper .inkpad-logo-cloud__editor-preview[data-fx="glow"]:hover {
	box-shadow: var(--inkpad-shadow-glow, var(--inkpad-photo-item-shadow));
}

.inkpad-scope .inkpad-logo-cloud__item[data-fx="press"]:active,
.editor-styles-wrapper .inkpad-logo-cloud__editor-preview[data-fx="press"]:active {
	transform: translateY(var(--inkpad-motion-active, 2px)) scale(var(--inkpad-motion-press-scale, 0.985));
}

.inkpad-scope .inkpad-logo-cloud__item[data-fx="sheen"]::before,
.editor-styles-wrapper .inkpad-logo-cloud__editor-preview[data-fx="sheen"]::before {
	content: '';
	position: absolute;
	inset: -25%;
	background: linear-gradient(
		120deg,
		transparent 18%,
		color-mix(in srgb, var(--inkpad-color-sheen, #ffffff) 72%, transparent) 48%,
		transparent 78%
	);
	transform: translateX(-135%) skewX(-18deg);
	transition: transform 520ms ease;
	pointer-events: none;
}

.inkpad-scope .inkpad-logo-cloud__item[data-fx="sheen"]:hover::before,
.inkpad-scope .inkpad-logo-cloud__item[data-fx="sheen"]:focus-visible::before,
.editor-styles-wrapper .inkpad-logo-cloud__editor-preview[data-fx="sheen"]:hover::before {
	transform: translateX(135%) skewX(-18deg);
}

.inkpad-scope .inkpad-logo-cloud--size-sm,
.editor-styles-wrapper .inkpad-logo-cloud--size-sm {
	--inkpad-photo-gap: var(--inkpad-space-sm);
	--inkpad-photo-radius: var(--inkpad-radius-sm, var(--inkpad-radius));
	--inkpad-photo-min-height: 8.5rem;
}

.inkpad-scope .inkpad-logo-cloud--size-md,
.editor-styles-wrapper .inkpad-logo-cloud--size-md {
	--inkpad-photo-gap: var(--inkpad-space-md);
	--inkpad-photo-radius: var(--inkpad-radius-md, var(--inkpad-radius));
	--inkpad-photo-min-height: 10.5rem;
}

.inkpad-scope .inkpad-logo-cloud--size-lg,
.editor-styles-wrapper .inkpad-logo-cloud--size-lg {
	--inkpad-photo-gap: var(--inkpad-space-lg);
	--inkpad-photo-radius: var(--inkpad-radius-lg, var(--inkpad-radius));
	--inkpad-photo-min-height: 13rem;
}

.inkpad-scope .inkpad-logo-cloud--variant-primary,
.inkpad-scope .inkpad-logo-cloud--variant-default,
.editor-styles-wrapper .inkpad-logo-cloud--variant-primary,
.editor-styles-wrapper .inkpad-logo-cloud--variant-default {
	--inkpad-photo-item-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 92%,
		var(--inkpad-color-accent, var(--inkpad-accent, currentcolor)) 8%
	);
	--inkpad-photo-item-border: none;
	--inkpad-photo-item-shadow: var(--inkpad-shadow-sm, none);
	--inkpad-photo-item-blur: 0px;
}

.inkpad-scope .inkpad-logo-cloud--variant-outlined,
.editor-styles-wrapper .inkpad-logo-cloud--variant-outlined {
	--inkpad-photo-item-bg: transparent;
	--inkpad-photo-item-border: 1px solid color-mix(
		in srgb,
		var(--inkpad-color-accent, var(--inkpad-accent, currentcolor)) 28%,
		var(--inkpad-color-text, var(--inkpad-text, #111111))
	);
	--inkpad-photo-item-shadow: none;
	--inkpad-photo-item-blur: 0px;
}

.inkpad-scope .inkpad-logo-cloud--variant-glass,
.inkpad-scope .inkpad-logo-cloud--variant-surface,
.editor-styles-wrapper .inkpad-logo-cloud--variant-glass,
.editor-styles-wrapper .inkpad-logo-cloud--variant-surface {
	--inkpad-photo-item-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 78%,
		transparent
	);
	--inkpad-photo-item-border: 1px solid color-mix(
		in srgb,
		var(--inkpad-color-text, var(--inkpad-text, #111111)) 12%,
		transparent
	);
	--inkpad-photo-item-shadow: var(--inkpad-shadow-sm, none);
	--inkpad-photo-item-blur: 16px;
}

.inkpad-scope .inkpad-logo-cloud--variant-clay,
.inkpad-scope .inkpad-logo-cloud--variant-minimal,
.editor-styles-wrapper .inkpad-logo-cloud--variant-clay,
.editor-styles-wrapper .inkpad-logo-cloud--variant-minimal {
	--inkpad-photo-item-bg: var(--inkpad-color-surface, var(--inkpad-surface, #ffffff));
	--inkpad-photo-item-border: 1px solid color-mix(
		in srgb,
		var(--inkpad-color-text, var(--inkpad-text, #111111)) 10%,
		transparent
	);
	--inkpad-photo-item-shadow: var(--inkpad-shadow-sm, none);
	--inkpad-photo-item-blur: 0px;
}

.inkpad-scope .inkpad-logo-cloud--padding-none .inkpad-inner,
.editor-styles-wrapper .inkpad-logo-cloud--padding-none .inkpad-inner {
	padding: 0;
}

.inkpad-scope .inkpad-logo-cloud--padding-sm .inkpad-inner,
.editor-styles-wrapper .inkpad-logo-cloud--padding-sm .inkpad-inner {
	--inkpad-photo-inner-pad-y: var(--inkpad-space-xs);
	--inkpad-photo-inner-pad-x: var(--inkpad-space-xs);
}

.inkpad-scope .inkpad-logo-cloud--padding-md .inkpad-inner,
.editor-styles-wrapper .inkpad-logo-cloud--padding-md .inkpad-inner {
	--inkpad-photo-inner-pad-y: var(--inkpad-space-sm);
	--inkpad-photo-inner-pad-x: var(--inkpad-space-sm);
}

.inkpad-scope .inkpad-logo-cloud--padding-lg .inkpad-inner,
.editor-styles-wrapper .inkpad-logo-cloud--padding-lg .inkpad-inner {
	--inkpad-photo-inner-pad-y: var(--inkpad-space-md);
	--inkpad-photo-inner-pad-x: var(--inkpad-space-md);
}

.editor-styles-wrapper .inkpad-logo-cloud__editor-card {
	display: flex;
	flex-direction: column;
	gap: var(--inkpad-space-sm);
	min-width: 0;
}

.editor-styles-wrapper .inkpad-logo-cloud__editor-actions {
	position: absolute;
	left: var(--inkpad-space-sm);
	right: var(--inkpad-space-sm);
	bottom: var(--inkpad-space-sm);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--inkpad-space-sm);
	padding: calc(var(--inkpad-space-xs) * 0.8);
	border-radius: calc(var(--inkpad-photo-radius) - 4px);
	background: color-mix(in srgb, var(--inkpad-color-surface, #ffffff) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-sizing: border-box;
}

.editor-styles-wrapper .inkpad-logo-cloud__editor-action.components-button {
	min-height: 2rem;
	padding-inline: var(--inkpad-space-sm);
}

.editor-styles-wrapper .inkpad-logo-cloud__editor-remove.components-button {
	margin-left: auto;
}

.editor-styles-wrapper .inkpad-logo-cloud__editor-alt {
	display: flex;
	flex-direction: column;
	gap: calc(var(--inkpad-space-xs) * 0.65);
	min-width: 0;
}

.editor-styles-wrapper .inkpad-logo-cloud__editor-alt-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--inkpad-color-text-muted, var(--inkpad-text-muted));
}

.editor-styles-wrapper .inkpad-logo-cloud__editor-input {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.7rem 0.8rem;
	border-radius: calc(var(--inkpad-photo-radius) - 6px);
	border: 1px solid color-mix(in srgb, var(--inkpad-color-text) 14%, transparent);
	background: color-mix(in srgb, var(--inkpad-color-surface, #ffffff) 94%, transparent);
	color: var(--inkpad-color-text, var(--inkpad-text, #111111));
	box-sizing: border-box;
}

.editor-styles-wrapper .inkpad-logo-cloud__editor-input:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--inkpad-color-accent, currentcolor) 48%, transparent);
	box-shadow: var(--inkpad-shadow-focus);
}

body.inkpad-photo-lightbox-open {
	overflow: hidden;
}

.inkpad-scope .inkpad-logo-cloud-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--inkpad-space-lg);
	background: color-mix(in srgb, var(--inkpad-color-text, #111111) 72%, transparent);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--inkpad-transition-medium);
}

.inkpad-scope .inkpad-logo-cloud-lightbox[data-open="true"] {
	opacity: 1;
	pointer-events: auto;
}

.inkpad-scope .inkpad-logo-cloud-lightbox__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--inkpad-space-sm);
	width: min(92vw, 70rem);
	max-height: 90vh;
}

.inkpad-scope .inkpad-logo-cloud-lightbox__close {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--inkpad-color-surface, #ffffff) 14%, transparent);
	color: #ffffff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.inkpad-scope .inkpad-logo-cloud-lightbox__close:hover {
	background: color-mix(in srgb, var(--inkpad-color-surface, #ffffff) 22%, transparent);
}

.inkpad-scope .inkpad-logo-cloud-lightbox__figure {
	margin: 0;
	padding: 0;
	border-radius: var(--inkpad-photo-radius);
	overflow: hidden;
	background: color-mix(in srgb, var(--inkpad-color-surface, #ffffff) 10%, transparent);
	box-shadow: var(--inkpad-shadow-elevation);
}

.inkpad-scope .inkpad-logo-cloud-lightbox__figure img {
	display: block;
	width: 100%;
	max-width: 100%;
	max-height: calc(90vh - 5.5rem);
	object-fit: contain;
	background: color-mix(in srgb, #000000 22%, transparent);
}

.inkpad-scope .inkpad-logo-cloud-lightbox__caption {
	margin: 0;
	padding: 0 var(--inkpad-space-xs);
	color: #ffffff;
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: center;
}