/*
 * MacDonald automatic case-study article and gallery layouts.
 *
 * Automatic mode is the missing-meta default. PHP decorates only image-only
 * containers in the current case-study document. Ordinary images, shared
 * templates and the explicit Existing design mode remain untouched.
 */

/* Give the article the available width while keeping prose comfortably readable. */
body.single-case_study {
	--mj-case-logo-width: clamp(140px, 12.5vw, 200px);
	--mj-case-logo-height: clamp(72px, 5.625vw, 90px);
}
body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__body-layout {
	--flex-direction: column !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 1600px !important;
	gap: clamp(32px, 3vw, 48px) !important;
	align-items: flex-start !important;
	padding-top: clamp(12px, 1.5vw, 24px) !important;
	padding-bottom: clamp(24px, 3vw, 48px) !important;
}

/* Match the heading rail to the article/media rail and scale its contents
 * proportionally without changing the mobile stacking behaviour. */
body.single-case_study .case-study-single__hero {
	width: 100% !important;
	max-width: 1600px !important;
}

body.single-case_study .case-study-single__logo {
	flex-basis: var(--mj-case-logo-width) !important;
	width: min(100%, var(--mj-case-logo-width)) !important;
	max-width: 200px !important;
}

body.single-case_study .case-study-single__title {
	max-width: none !important;
}

body.single-case_study .case-study-single__title .elementor-heading-title {
	font-size: clamp(32px, 3vw, 48px) !important;
}

body.single-case_study .case-study-single__hero-divider {
	min-height: clamp(81px, 5.625vw, 90px) !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article {
	flex: 1 1 0 !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article {
	--width: 100% !important;
	--gap: clamp(12px, 1.5vw, 24px) !important;
	--flex-direction: column !important;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	align-items: flex-start !important;
	gap: clamp(12px, 1.5vw, 24px) !important;
}

/* Elementor's tablet container rules can otherwise wrap whole article
 * sections into columns. Keep the article sequence vertical; gallery
 * containers still manage their own internal grid. */
body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article > .elementor-element {
	flex: 0 0 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* A separator is a line, never a layout panel. Elementor's tablet flex
 * calculations previously allowed these one-pixel containers to grow. */
body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article > [class*="__header-divider"] {
	flex: 0 0 1px !important;
	width: 100% !important;
	height: 1px !important;
	min-height: 1px !important;
	max-height: 1px !important;
	overflow: hidden !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .elementor-widget-text-editor {
	--width: 100% !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .elementor-widget-text-editor :is(.elementor-widget-container, p, ul, ol) {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__estimate-column {
	--margin-top: 0px !important;
	position: static !important;
	flex: none !important;
	width: min(100%, 446px) !important;
	max-width: 446px !important;
	margin-top: 0 !important;
}

/* Legacy post sections carry Figma-era fixed widths. Every prose-bearing
 * section follows the full article/media rail at every breakpoint. */
body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article > .e-con,
body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article > .elementor-element,
body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article .e-con:has(> .elementor-widget-text-editor),
body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article .e-con:has(> .elementor-widget-image),
body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .elementor-widget-text-editor {
	--width: 100% !important;
	align-self: stretch !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .elementor-widget-text-editor > .elementor-widget-container {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article > .e-con {
	--gap: clamp(12px, 1.5vw, 24px) !important;
	gap: clamp(12px, 1.5vw, 24px) !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article .elementor-widget-image,
body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article .elementor-widget-image :is(.elementor-widget-container, figure, img) {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* Some legacy articles contain their own branded hero instead of using the
 * shared logo slot. Keep those logo widgets in the same fixed contain box so
 * their natural source dimensions can never make them behave like photos. */
body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article .elementor-widget-image[class*="__logo"] {
	--width: var(--mj-case-logo-width) !important;
	--flex-basis: var(--mj-case-logo-width) !important;
	flex: 0 0 var(--mj-case-logo-width) !important;
	align-self: center !important;
	width: var(--mj-case-logo-width) !important;
	max-width: var(--mj-case-logo-width) !important;
	height: var(--mj-case-logo-height) !important;
	max-height: var(--mj-case-logo-height) !important;
	overflow: hidden !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article .elementor-widget-image[class*="__logo"] :is(.elementor-widget-container, figure, img) {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
}

/* Below a true wide desktop, place the CTA after the article so media is not squeezed. */
@media (max-width: 1499px) {
	body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__body-layout {
		--flex-direction: column !important;
		flex-direction: column !important;
	}

	body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__estimate-column {
		position: static !important;
		flex: none !important;
		width: min(100%, 446px) !important;
		max-width: 446px !important;
	}
}

/* Tablet and mobile need a tighter handoff from the shared heading to the
 * article. The desktop spacing remains unchanged. */
@media (max-width: 1024px) {
	body.single-case_study .case-study-single__hero-divider {
		height: clamp(42px, 6.25vw, 64px) !important;
		min-height: clamp(42px, 6.25vw, 64px) !important;
	}

	body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__body-layout {
		padding-top: 0 !important;
	}
}

/* In the stacked hero, flex-basis controls height rather than width. Release
 * the desktop width basis so the logo wrapper matches the rendered logo
 * instead of reserving a false 140px-tall block. */
@media (max-width: 767px) {
	body.single-case_study .case-study-single__logo {
		--flex-basis: auto !important;
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
}

:is(
	body.single-case_study[class*="mj-case-study-layout-"] .mj-case-study-gallery,
	.mj-case-study-gallery--active
) {
	display: grid !important;
	width: 100% !important;
	max-width: 100% !important;
	gap: clamp(8px, 0.75vw, 12px) !important;
	align-items: stretch;
}

:is(
	body.single-case_study[class*="mj-case-study-layout-"] .mj-case-study-gallery,
	.mj-case-study-gallery--active
) > .elementor-element {
	min-width: 0 !important;
	width: 100% !important;
	max-width: none !important;
	flex: initial !important;
	flex-basis: auto !important;
	--width: 100% !important;
	--flex-grow: 0 !important;
	--flex-shrink: 1 !important;
}

:is(
	body.single-case_study[class*="mj-case-study-layout-"] .mj-case-study-gallery,
	.mj-case-study-gallery--active
) :is(.elementor-widget-image, .elementor-widget-container, figure) {
	min-width: 0;
	max-width: 100%;
}

:is(
	body.single-case_study[class*="mj-case-study-layout-"] .mj-case-study-gallery,
	.mj-case-study-gallery--active
) img {
	display: block;
	width: 100%;
	max-width: 100% !important;
}

/*
 * Automatic layouts by direct image count:
 * 1 = full-width natural image
 * 2 = balanced pair
 * 3 = one lead image plus two supporting images
 * 4 = even 2 × 2 grid
 * 5 = one wide lead image plus a 2 × 2 grid
 * 6+ = responsive auto-fit grid
 */
.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-1 {
	grid-template-columns: minmax(0, 1fr);
}

.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-1 > .elementor-element,
.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-1 :is(.elementor-widget-image, .elementor-widget-container, figure) {
	height: auto !important;
	aspect-ratio: auto !important;
	overflow: visible !important;
}

.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-1 img {
	height: auto !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
}

:is(
	.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-2,
	.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-4
) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(
	.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-2,
	.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-4
) > .elementor-element,
.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-5 > .elementor-element:not(:first-child),
.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-many > .elementor-element {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-3 {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-auto-rows: clamp(150px, 19vw, 300px);
}

.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-3 > .elementor-element {
	height: 100% !important;
	aspect-ratio: auto !important;
	overflow: hidden;
}

.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-3 > .elementor-element:first-child {
	grid-row: span 2;
}

.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-5 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-5 > .elementor-element:first-child {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.mj-case-study-gallery--layout-auto.mj-case-study-gallery--count-many {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.mj-case-study-gallery--layout-auto:not(.mj-case-study-gallery--count-1) > .elementor-element :is(.elementor-widget-image, .elementor-widget-container, figure),
.mj-case-study-gallery--layout-auto:not(.mj-case-study-gallery--count-1) > .elementor-element img {
	height: 100% !important;
}

.mj-case-study-gallery--layout-auto:not(.mj-case-study-gallery--count-1) > .elementor-element img {
	object-fit: cover !important;
}

/* Collage: one large lead image, two supporting images, then paired rows. */
:is(
	body.single-case_study.mj-case-study-layout-mosaic .mj-case-study-gallery,
	.mj-case-study-gallery--layout-mosaic
) {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-auto-rows: clamp(150px, 18vw, 250px);
}

:is(
	body.single-case_study.mj-case-study-layout-mosaic .mj-case-study-gallery,
	.mj-case-study-gallery--layout-mosaic
) > .elementor-element {
	overflow: hidden;
}

:is(
	body.single-case_study.mj-case-study-layout-mosaic .mj-case-study-gallery,
	.mj-case-study-gallery--layout-mosaic
) > .elementor-element:first-child {
	grid-row: span 2;
}

:is(
	body.single-case_study.mj-case-study-layout-mosaic .mj-case-study-gallery,
	.mj-case-study-gallery--layout-mosaic
) > .elementor-element:nth-child(n + 4) {
	grid-column: span 1;
}

:is(
	body.single-case_study.mj-case-study-layout-mosaic .mj-case-study-gallery,
	.mj-case-study-gallery--layout-mosaic
) > .elementor-element:nth-child(even):last-child {
	grid-column: 1 / -1;
}

:is(
	body.single-case_study.mj-case-study-layout-mosaic .mj-case-study-gallery,
	.mj-case-study-gallery--layout-mosaic
) :is(.elementor-widget-image, .elementor-widget-container, figure),
:is(
	body.single-case_study.mj-case-study-layout-mosaic .mj-case-study-gallery,
	.mj-case-study-gallery--layout-mosaic
) img {
	height: 100% !important;
}

:is(
	body.single-case_study.mj-case-study-layout-mosaic .mj-case-study-gallery,
	.mj-case-study-gallery--layout-mosaic
) img {
	object-fit: cover !important;
}

/* Responsive grid: stable cropped tiles, tuned for the 822px article column. */
:is(
	body.single-case_study.mj-case-study-layout-grid .mj-case-study-gallery,
	.mj-case-study-gallery--layout-grid
) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(
	body.single-case_study.mj-case-study-layout-grid .mj-case-study-gallery,
	.mj-case-study-gallery--layout-grid
) > .elementor-element {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

:is(
	body.single-case_study.mj-case-study-layout-grid .mj-case-study-gallery,
	.mj-case-study-gallery--layout-grid
) :is(.elementor-widget-image, .elementor-widget-container, figure),
:is(
	body.single-case_study.mj-case-study-layout-grid .mj-case-study-gallery,
	.mj-case-study-gallery--layout-grid
) img {
	height: 100% !important;
}

:is(
	body.single-case_study.mj-case-study-layout-grid .mj-case-study-gallery,
	.mj-case-study-gallery--layout-grid
) img {
	object-fit: cover !important;
}

/* Stacked: natural proportions and content order. */
:is(
	body.single-case_study.mj-case-study-layout-stacked .mj-case-study-gallery,
	.mj-case-study-gallery--layout-stacked
) {
	grid-template-columns: minmax(0, 1fr);
}

:is(
	body.single-case_study.mj-case-study-layout-stacked .mj-case-study-gallery,
	.mj-case-study-gallery--layout-stacked
) > .elementor-element,
:is(
	body.single-case_study.mj-case-study-layout-stacked .mj-case-study-gallery,
	.mj-case-study-gallery--layout-stacked
) > .elementor-element .elementor-widget-container,
:is(
	body.single-case_study.mj-case-study-layout-stacked .mj-case-study-gallery,
	.mj-case-study-gallery--layout-stacked
) figure,
:is(
	body.single-case_study.mj-case-study-layout-uncropped .mj-case-study-gallery,
	.mj-case-study-gallery--layout-uncropped
) > .elementor-element,
:is(
	body.single-case_study.mj-case-study-layout-uncropped .mj-case-study-gallery,
	.mj-case-study-gallery--layout-uncropped
) > .elementor-element .elementor-widget-container,
:is(
	body.single-case_study.mj-case-study-layout-uncropped .mj-case-study-gallery,
	.mj-case-study-gallery--layout-uncropped
) figure {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	overflow: visible !important;
	--width: 100% !important;
	--height: auto !important;
}

:is(
	body.single-case_study.mj-case-study-layout-stacked .mj-case-study-gallery,
	.mj-case-study-gallery--layout-stacked
) img {
	height: auto !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
}

/* Uncropped grid: compact overview while preserving each source aspect ratio. */
:is(
	body.single-case_study.mj-case-study-layout-uncropped .mj-case-study-gallery,
	.mj-case-study-gallery--layout-uncropped
) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}

:is(
	body.single-case_study.mj-case-study-layout-uncropped .mj-case-study-gallery,
	.mj-case-study-gallery--layout-uncropped
) > .elementor-element {
	align-self: start;
}

:is(
	body.single-case_study.mj-case-study-layout-uncropped .mj-case-study-gallery,
	.mj-case-study-gallery--layout-uncropped
) img {
	height: auto !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
}

/* Mobile is deliberately uniform: one natural-aspect column in DOM order. */
@media (max-width: 767px) {
	:is(
		body.single-case_study[class*="mj-case-study-layout-"] .mj-case-study-gallery,
		.mj-case-study-gallery--active
	) {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-auto-rows: auto !important;
	}

	:is(
		body.single-case_study[class*="mj-case-study-layout-"] .mj-case-study-gallery,
		.mj-case-study-gallery--active
	) > .elementor-element {
		grid-column: auto !important;
		grid-row: auto !important;
		aspect-ratio: auto !important;
		height: auto !important;
		overflow: visible;
	}

	:is(
		body.single-case_study[class*="mj-case-study-layout-"] .mj-case-study-gallery,
		.mj-case-study-gallery--active
	) :is(.elementor-widget-image, .elementor-widget-container, figure),
	:is(
		body.single-case_study[class*="mj-case-study-layout-"] .mj-case-study-gallery,
		.mj-case-study-gallery--active
	) img {
		height: auto !important;
		object-fit: contain !important;
	}
}

/* Robust fallback for legacy Elementor rows that do not pass through the
 * gallery render hooks. Image-only rows become a controlled two-column grid;
 * standalone article images use one consistent hero ratio. This prevents the
 * original pixel dimensions or flex settings from creating oversized media. */
body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article > .elementor-widget-image:not([class*="__logo"]) {
	width: 100% !important;
	max-width: 100% !important;
	max-height: 640px !important;
	aspect-ratio: 16 / 9 !important;
	overflow: hidden !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article > .elementor-widget-image:not([class*="__logo"]) img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article .e-con:not(.mj-case-study-gallery--active):has(> .elementor-widget-image:nth-child(2)):not(:has(> :not(.elementor-widget-image))) {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: clamp(8px, 0.75vw, 12px) !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	overflow: hidden !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article .e-con:not(.mj-case-study-gallery--active):has(> .elementor-widget-image:nth-child(2)):not(:has(> :not(.elementor-widget-image))) > .elementor-widget-image {
	--width: 100% !important;
	--flex-basis: auto !important;
	flex: initial !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 520px !important;
	aspect-ratio: 4 / 3 !important;
	overflow: hidden !important;
}

body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article .e-con:not(.mj-case-study-gallery--active):has(> .elementor-widget-image:nth-child(2)):not(:has(> :not(.elementor-widget-image))) > .elementor-widget-image :is(.elementor-widget-container, figure, img) {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
}

@media (max-width: 767px) {
	body.single-case_study:not(.mj-case-study-layout-legacy) .case-study-single__article .case-study-article .e-con:not(.mj-case-study-gallery--active):has(> .elementor-widget-image:nth-child(2)):not(:has(> :not(.elementor-widget-image))) {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}