GEEP---Genocide-map/assets/css/geep-maps.css

/*
 * FP Genocide Maps — front-end styles.
 *
 * Replicates 1:1 the CSS Divi 5 generated for the original "texto mapa" row
 * (row_3 / column_5 / column_6 / image_2 / toggle_0..7 on page 1834), so the
 * section looks identical to the hand-built Divi version it replaces.
 * Color/radius values reference the site's Divi global variables with their
 * current values as fallbacks.
 */

/* --- Layout: replicates row_3's two flex columns (14/24 + 2/5, 2% gap). --- */
.geep-maps {
	display: flex;
	column-gap: 2%;
	row-gap: 10px;
	flex-wrap: nowrap;
}

.geep-maps-col-map {
	width: calc(58.3333% - 2% * 0.41667); /* .et_flex_column_14_24 with 2% gap */
}

.geep-maps-col-toggles {
	width: calc(40% - 2% * 0.6); /* .et_flex_column_2_5 with 2% gap */
	display: flex;
	flex-direction: column;
	row-gap: 15px;
	padding-left: 10px; /* column_6 */
	min-width: 0;
}

@media only screen and (max-width: 767px) {
	.geep-maps {
		flex-wrap: wrap;
	}

	.geep-maps-col-map,
	.geep-maps-col-toggles {
		width: 100%;
	}
}

/* --- Map image: replicates the Divi image module (image_2). --- */
.geep-maps-image {
	display: flex;
	line-height: 0;
}

.geep-maps-image-wrap {
	display: inline-block;
	position: relative;
	max-width: 100%;
	overflow: hidden;
	border-radius: var(--gvid-4up6riitl2, 40px);
}

.geep-map-img {
	position: relative;
	max-width: 100%;
	height: auto;
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.geep-map-img.is-active {
	display: block;
}

.geep-map-img.is-active.is-shown {
	opacity: 1;
}

/* --- Toggles: replicates the 8 Divi toggle modules (toggle_0..7). --- */
.geep-toggle {
	background-color: var(--gcid-primary-color, #d96c5d);
	padding: 10px 2px 0 5px;
	border: 0 solid #333;
	word-wrap: break-word;
}

.geep-toggle.geep-toggle--first {
	padding: 0 2px 2px 5px; /* toggle_0 had slightly different padding */
}

.geep-toggle-title {
	cursor: pointer;
	position: relative;
	padding: 0 0 0 40px;
	word-wrap: break-word;
	/* Same line spacing as the intro paragraph above the section. */
	line-height: var(--gvid-pfs7jbw9ep, 1.4em);
}

.geep-toggle--close .geep-toggle-title {
	color: var(--gcid-mpn8tovm4t, #fff5f0) !important;
}

.geep-toggle--open .geep-toggle-title {
	color: var(--gcid-heading-color, #424242) !important;
}

/*
 * Checkbox-style marker: identical size and position in both states so
 * nothing shifts when a map is selected; the open one is filled white.
 */
.geep-toggle-title::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	margin-top: -9px;
	left: 0;
	right: auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--gcid-secondary-color, #ffffff);
	border-radius: 4px;
	background: transparent;
}

.geep-toggle--open .geep-toggle-title::before {
	background: var(--gcid-secondary-color, #ffffff);
}

.geep-toggle-content {
	position: relative;
	padding-top: 20px;
	/* Align the excerpt with the title text (which sits after the marker). */
	padding-left: 40px;
	color: var(--gcid-secondary-color, #ffffff);
	word-wrap: break-word;
	overflow: hidden;
}

.geep-toggle--close .geep-toggle-content {
	display: none;
}

/* Keep content visible while the open/close animation is running. */
.geep-toggle .geep-toggle-content.geep-animating {
	display: block;
}

.geep-toggle-content p:last-of-type {
	padding-bottom: 0;
}

/* --- RTL (Arabic): mirror icon and paddings. --- */
.rtl .geep-maps-col-toggles {
	padding-left: 0;
	padding-right: 10px;
}

.rtl .geep-toggle-title {
	padding: 0 40px 0 0;
}

.rtl .geep-toggle-title::before {
	left: auto;
	right: 0;
}

.rtl .geep-toggle-content {
	padding-left: 0;
	padding-right: 40px;
}

/* --- Lightbox: click the map to view it larger + share its URL. --- */
.geep-maps-image-wrap {
	cursor: zoom-in;
}

.geep-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 3vh 3vw;
}

.geep-lightbox.is-open {
	display: flex;
}

.geep-lightbox-noscroll,
.geep-lightbox-noscroll body {
	overflow: hidden;
}

.geep-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.85);
	cursor: zoom-out;
}

.geep-lightbox-inner {
	position: relative;
	margin: 0;
	max-width: 94vw;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	line-height: 0;
}

.geep-lightbox-img {
	max-width: 100%;
	max-height: calc(94vh - 60px);
	width: auto;
	height: auto;
	border-radius: 24px;
}

.geep-lightbox-actions {
	display: flex;
	gap: 10px;
	line-height: 1;
}

.geep-lightbox-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--gcid-mpn8tovm4t, #fff5f0);
	color: var(--gcid-heading-color, #424242);
	border: 0;
	border-radius: 40px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.geep-lightbox-btn:hover {
	background: var(--gcid-secondary-color, #ffffff);
}

.geep-lightbox-close {
	padding: 10px 14px;
	font-size: 18px;
}

.geep-lightbox-toast {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--gcid-heading-color, #424242);
	color: var(--gcid-secondary-color, #ffffff);
	border-radius: 40px;
	padding: 10px 20px;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}