/**
 * Ministry Ink — Portfolio Gallery Styles
 *
 * Enhances the native WordPress Gallery block for portfolio display.
 * Works with WP 6.4+ built-in lightbox.
 */

/* Portfolio gallery grid */
.ministry-ink-portfolio {
	gap: var(--wp--preset--spacing--20, 1rem) !important;
}

.ministry-ink-portfolio .wp-block-image {
	overflow: hidden;
	border-radius: 4px;
	transition: transform 0.3s ease;
}

.ministry-ink-portfolio .wp-block-image:hover {
	transform: scale(1.02);
}

.ministry-ink-portfolio .wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100% !important;
	height: 100% !important;
	transition: filter 0.3s ease;
}

.ministry-ink-portfolio .wp-block-image:hover img {
	filter: brightness(1.1);
}

/* Artist photo — circular crop */
.artist-photo img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 200px;
	height: 200px;
}

/* Filigree images — no border radius override */
.filigree-divider img,
.filigree-left img,
.filigree-right img {
	border-radius: 0 !important;
}

/* Filigree mirror for right-side ornament */
.filigree-right img {
	transform: scaleX(-1);
}

/* Sticky header z-index */
.wp-block-group[style*="position:sticky"] {
	z-index: 100;
}

/* Responsive layout */
@media (max-width: 768px) {
	/* Stack artist card columns vertically */
	.wp-block-columns {
		flex-wrap: wrap;
	}

	.wp-block-column {
		flex-basis: 100% !important;
	}

	/* Portfolio galleries: 2 columns on tablet */
	.ministry-ink-portfolio.columns-3 .wp-block-image {
		flex-basis: calc(50% - 0.5rem) !important;
		max-width: calc(50% - 0.5rem) !important;
	}
}

@media (max-width: 480px) {
	/* Full portfolio galleries: single column on small phones */
	.ministry-ink-portfolio.columns-3 .wp-block-image {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

/* Lightbox overlay dark theme */
.wp-lightbox-overlay {
	--wp--lightbox-background-color: rgba(26, 26, 26, 0.95);
}

.wp-lightbox-overlay .close-button {
	color: var(--wp--preset--color--text-primary, #f5f0e8);
}

/* Map iframe responsive */
.wp-block-html iframe {
	max-width: 100%;
}