/* ══════════════════════════════════════════════
   Minimal Gallery – Shared Styles (editor + frontend)
   Loaded via block.json "style" field
   ══════════════════════════════════════════════ */

.wp-block-minimal-gallery-gallery {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;

	/* Override theme .is-layout-constrained max-width */
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;

	/* CSS custom properties – set via inline style by block attributes */
	--mg-icon-color: #1A1A1A;
	--mg-hover-color: #555555;
	--mg-active-color: #999999;
	--mg-disabled-color: #CCCCCC;
	--mg-max-width: 960px;
	--mg-aspect-ratio: 3/2;
}

.minimal-gallery-controls {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-bottom: 32px;
}

.minimal-gallery-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	border: none;
	background: transparent;
	color: var(--mg-icon-color, #1A1A1A);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	outline: none;
	transition: color 200ms ease-out, transform 200ms ease-out;
	-webkit-user-select: none;
	user-select: none;
}

.minimal-gallery-btn svg {
	flex-shrink: 0;
}

.minimal-gallery-btn:not(.is-disabled):hover {
	color: var(--mg-hover-color, #555555);
}

.minimal-gallery-btn:not(.is-disabled):active {
	color: var(--mg-active-color, #999999);
	transform: scale(0.95);
}

.minimal-gallery-btn:not(.is-disabled):focus-visible {
	color: var(--mg-hover-color, #555555);
	outline: 1px solid #D4D4D4;
	outline-offset: 4px;
	border-radius: 2px;
}

.minimal-gallery-btn.is-disabled {
	color: var(--mg-disabled-color, #CCCCCC);
	cursor: not-allowed;
	pointer-events: none;
}

.minimal-gallery-viewport {
	position: relative;
	width: 100%;
	max-width: var(--mg-max-width, 960px);
	aspect-ratio: var(--mg-aspect-ratio, 3/2);
	overflow: hidden;
}

.minimal-gallery-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease-out;
}

.minimal-gallery-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.minimal-gallery-slide img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}