/*
 * Atomware Toolkit – species map / spoor layout (single product pages only).
 * Loaded by includes/class-atk-species-layout.php.
 *
 * Template 45 (Species - Single Product), inner section b2b07f0, two 50% columns:
 *   map column   d7242cd > image widget accc08b (ACF area_map_sa), img width 60%, padding 10px
 *   spoor column eca5a15 > image widget c88714e (ACF footprint),   img width 60%, padding 0
 * (Live ids. The JSON export shows 69a3eb7a / 6763e7e1 / 65678a77 / 9327da7 / c4e1357
 * because Elementor regenerates ids on export.)
 *
 * An empty ACF image prints no widget at all: the column keeps an empty
 * .elementor-widget-wrap (whitespace only). So "has no rendered image" = :not(:has(img)).
 * Both images present: no selector below matches, so nothing changes.
 * Browsers without :has() ignore these rules and show the old layout.
 */

/* 1. Both images missing: hide the whole section (no empty gap). */
.elementor-45 .elementor-element.elementor-element-b2b07f0:not(:has(img)) {
	display: none;
}

/* 2. An empty column (map or spoor) is hidden. */
.elementor-45 .elementor-element.elementor-element-b2b07f0 > .elementor-container > .elementor-column.elementor-element-d7242cd:not(:has(img)),
.elementor-45 .elementor-element.elementor-element-b2b07f0 > .elementor-container > .elementor-column.elementor-element-eca5a15:not(:has(img)) {
	display: none;
}

/* 3. Map missing, spoor present: spoor column full width, image centred. */
.elementor-45 .elementor-element.elementor-element-b2b07f0:not(:has(.elementor-element-d7242cd img)) > .elementor-container > .elementor-column.elementor-element-eca5a15 {
	width: 100%;
}

.elementor-45 .elementor-element.elementor-element-b2b07f0:not(:has(.elementor-element-d7242cd img)) .elementor-element.elementor-element-c88714e {
	text-align: center;
}

/* 4. Spoor missing, map present: the mirror. */
.elementor-45 .elementor-element.elementor-element-b2b07f0:not(:has(.elementor-element-eca5a15 img)) > .elementor-container > .elementor-column.elementor-element-d7242cd {
	width: 100%;
}

.elementor-45 .elementor-element.elementor-element-b2b07f0:not(:has(.elementor-element-eca5a15 img)) .elementor-element.elementor-element-accc08b {
	text-align: center;
}

/* 5. Same image size as before. From 768px the columns sit side by side at 50%, and the
 *    images are 60% of their column. In a full-width column that is:
 *    spoor (column padding 0):  60% of W/2       = 30% of W
 *    map (column padding 10px): 60% of (W/2 - 20) = 30% of (W - 20) - 6px
 *    Below 768px the columns already stack at 100%, so the 60% stays. */
@media (min-width: 768px) {
	.elementor-45 .elementor-element.elementor-element-b2b07f0:not(:has(.elementor-element-d7242cd img)) .elementor-element.elementor-element-c88714e img {
		width: 30%;
	}

	.elementor-45 .elementor-element.elementor-element-b2b07f0:not(:has(.elementor-element-eca5a15 img)) .elementor-element.elementor-element-accc08b img {
		width: calc(30% - 6px);
	}
}

/*
 * 6. Class-keyed version (1.1.6), for the new map/spoor section in the mockup layout:
 *    section (or container) with CSS class atk-mapspoor, the map card with atk-map, the spoor
 *    card with atk-spoor. Same logic as 1-5: an empty card is hidden; the remaining card takes
 *    the free space and its image is centred; both empty: the whole section is hidden.
 */
.atk-mapspoor:not(:has(.atk-map img)):not(:has(.atk-spoor img)) {
	display: none;
}

.atk-mapspoor .atk-map:not(:has(img)),
.atk-mapspoor .atk-spoor:not(:has(img)) {
	display: none;
}

.atk-mapspoor:not(:has(.atk-map img)) .atk-spoor,
.atk-mapspoor:not(:has(.atk-spoor img)) .atk-map {
	flex-grow: 1;
	width: auto;
	max-width: none;
	text-align: center;
}

.atk-mapspoor:not(:has(.atk-map img)) .atk-spoor img,
.atk-mapspoor:not(:has(.atk-spoor img)) .atk-map img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}