/**
 * Single portfolio project image grid — stable layout (STEP 2F / 2G-FIX).
 * Scoped to .single-portfolio only; does not change home/category isotope grids.
 */

.single.single-portfolio {
	--project-shell-width: min(92vw, 1240px);
	--project-grid-gap: clamp(16px, 2vw, 24px);
}

.single.single-portfolio .main-container .main-content {
	max-width: none !important;
	padding-left: clamp(0.75rem, 2vw, 1.25rem) !important;
	padding-right: clamp(0.75rem, 2vw, 1.25rem) !important;
}

.single-portfolio-container {
	width: var(--project-shell-width);
	max-width: var(--project-shell-width);
	margin-left: auto;
	margin-right: auto;
}

.single-portfolio-container .the-content {
	width: 100%;
}

.single-portfolio-container .the-content > style {
	display: none !important;
}

/* Compact museum artwork grid overrides legacy editorial image rules */
.single-portfolio-container .portfolio-museum-artworks__grid img {
	float: none !important;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	margin: 0 !important;
}

.single-portfolio-container .portfolio-museum-artworks__grid .portfolio-museum-artworks__thumb {
	float: none !important;
	width: auto;
}

/* Legacy inline editorial images (fallback when old markup is present) */
.single-portfolio-container .the-content:not(.portfolio-museum-artworks) img {
	float: none !important;
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(72vh, 900px);
	object-fit: contain;
	margin-left: auto !important;
	margin-right: auto !important;
}

.single-portfolio-container .the-content p:has(> img) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--project-grid-gap);
	align-items: start;
	margin: 0 0 var(--project-grid-gap);
}

.single-portfolio-container .the-content p:has(> img:only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.single-portfolio-container .the-content p img {
	margin-bottom: 0 !important;
}

/* WordPress [gallery] shortcode */
.single-portfolio-container .gallery,
.single-portfolio-container [id^="gallery-"].gallery {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-flow: row;
	gap: var(--project-grid-gap);
	width: 100% !important;
	float: none !important;
	clear: both !important;
	position: static !important;
	margin: 0 auto var(--project-grid-gap) !important;
	column-count: auto !important;
	columns: auto !important;
	transform: none !important;
}

.single-portfolio-container .gallery-columns-2,
.single-portfolio-container [id^="gallery-"].gallery-columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.single-portfolio-container .gallery-columns-4,
.single-portfolio-container [id^="gallery-"].gallery-columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.single-portfolio-container .gallery-columns-5,
.single-portfolio-container [id^="gallery-"].gallery-columns-5 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.single-portfolio-container .gallery-columns-6,
.single-portfolio-container [id^="gallery-"].gallery-columns-6 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.single-portfolio-container .gallery .gallery-item,
.single-portfolio-container [id^="gallery-"] .gallery-item {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	transform: none !important;
	text-align: left !important;
	grid-column: auto !important;
}

.single-portfolio-container .gallery br {
	display: none !important;
}

.single-portfolio-container .gallery .gallery-icon {
	width: 100%;
	line-height: 0;
	position: relative;
	overflow: hidden;
}

.single-portfolio-container .gallery .gallery-icon img {
	display: block;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: min(72vh, 900px);
	margin: 0 auto !important;
	object-fit: contain;
	border: none !important;
}

.single-portfolio-container .gallery .gallery-caption {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	text-align: center;
}

/* Gutenberg gallery blocks */
.single-portfolio-container .wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--project-grid-gap);
}

.single-portfolio-container .wp-block-gallery.columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.single-portfolio-container .wp-block-gallery.columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.single-portfolio-container .wp-block-gallery .wp-block-image {
	margin: 0 !important;
}

.single-portfolio-container .wp-block-gallery .wp-block-image img {
	width: 100%;
	height: auto;
	max-height: min(72vh, 900px);
	object-fit: contain;
}

/* Video embeds — leave full width, no grid interference */
.single-portfolio-container .the-content .wp-block-embed,
.single-portfolio-container .the-content iframe,
.single-portfolio-container .the-content .fluid-width-video-wrapper {
	grid-column: 1 / -1;
	max-width: 100%;
}

@media only screen and (max-width: 1200px) {
	.single-portfolio-container .gallery-columns-4,
	.single-portfolio-container [id^="gallery-"].gallery-columns-4,
	.single-portfolio-container .gallery-columns-5,
	.single-portfolio-container [id^="gallery-"].gallery-columns-5,
	.single-portfolio-container .gallery-columns-6,
	.single-portfolio-container [id^="gallery-"].gallery-columns-6,
	.single-portfolio-container .wp-block-gallery.columns-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 1024px) {
	.single-portfolio-container .gallery,
	.single-portfolio-container [id^="gallery-"].gallery,
	.single-portfolio-container .wp-block-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-portfolio-container .the-content p:has(> img) {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	}
}

@media only screen and (max-width: 640px) {
	.single.single-portfolio {
		--project-shell-width: min(92vw, 1320px);
	}

	.single-portfolio-container .gallery,
	.single-portfolio-container [id^="gallery-"].gallery,
	.single-portfolio-container .gallery-columns-2,
	.single-portfolio-container [id^="gallery-"].gallery-columns-2,
	.single-portfolio-container .gallery-columns-4,
	.single-portfolio-container [id^="gallery-"].gallery-columns-4,
	.single-portfolio-container .wp-block-gallery,
	.single-portfolio-container .wp-block-gallery.columns-2,
	.single-portfolio-container .wp-block-gallery.columns-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.single-portfolio-container .the-content p:has(> img) {
		grid-template-columns: minmax(0, 1fr);
	}
}