/* The5ers India Regions Map - base styles.
   Per-instance colors/sizes/typography are output by Elementor's Style tab
   controls as inline CSS scoped to {{WRAPPER}}. These are just structural
   defaults so the widget looks right even before any style tweaks. */

.t5im-widget {
	width: 100%;
}

.t5im-wrap {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 60px;
}

/* Left side: title + subtitle (top), info text (bottom). Map sits on the
   right, flush to the edge, since it's a fixed width and this column just
   takes whatever space remains. */
.t5im-content-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
}

.t5im-title {
	font-family: 'General Sans', sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	margin: 0;
}

.t5im-subtitle {
	font-family: 'General Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: #ffffff;
	margin: 16px 0 0;
}

/* Fills the empty vertical space between the title/subtitle and the info
   text - this is where the 1px divider line lives, not alongside the text. */
.t5im-divider {
	flex: 1 1 auto;
	border-left: 1px solid #ffffff;
	min-height: 20px;
}

.t5im-info-block {
	padding-left: 20px;
}

.t5im-info-text {
	display: block;
	font-family: 'General Sans', sans-serif;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.3;
	color: #ffffff;
}

.t5im-info-name {
	color: #f8b22e;
}

.t5im-map-col {
	width: 50%;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.t5im-map {
	position: relative;
	width: 100%;
	line-height: 0;
}

.t5im-svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.t5im-region {
	fill: #000000;
	stroke: #ffffff;
	stroke-width: 0.5px;
	cursor: pointer;
	transition: fill 150ms ease;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.t5im-region:focus,
.t5im-region:focus-visible {
	outline: none;
}

.t5im-region:hover,
.t5im-region.is-active {
	fill: #f8b22e;
}

/* Custom hover tooltip - follows the cursor over the map.
   Positioned via JS (left/top), hidden by default. */
.t5im-tooltip {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate( -9999px, -9999px );
	background-color: #ffffe3;
	color: #000000;
	font-family: 'General Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 16px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 20;
	opacity: 0;
	transition: opacity 100ms ease;
}

.t5im-tooltip.is-visible {
	opacity: 1;
}

/* ==========================================================================
   MOBILE ONLY - everything below this line is scoped to max-width:767px
   and has zero effect on desktop. Re-flows the layout to:
   Title -> Subtitle -> Map -> Stats, stacked vertically.

   Technique: switch .t5im-wrap to CSS Grid (only at this breakpoint) and
   "unwrap" .t5im-content-col via display:contents so its children (title,
   subtitle, divider, info-block) become direct grid items alongside the
   map, placeable via named grid areas. Desktop keeps its original flex
   layout completely untouched.
   ========================================================================== */
@media ( max-width: 767px ) {
	.t5im-stack-mobile-yes .t5im-wrap {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"subtitle"
			"map"
			"info";
		row-gap: 24px;
		gap: 24px;
	}

	.t5im-stack-mobile-yes .t5im-content-col {
		display: contents;
	}

	.t5im-stack-mobile-yes .t5im-title {
		grid-area: title;
		font-size: 28px;
	}

	.t5im-stack-mobile-yes .t5im-subtitle {
		grid-area: subtitle;
		font-size: 16px;
	}

	/* The divider only makes visual sense in the gap between the title and
	   the stats - once the map sits between them on mobile, it no longer
	   has a sensible place to be. */
	.t5im-stack-mobile-yes .t5im-divider {
		display: none;
	}

	.t5im-stack-mobile-yes .t5im-info-block {
		grid-area: info;
		padding-left: 0;
	}

	.t5im-stack-mobile-yes .t5im-info-text {
		font-size: 22px;
	}

	.t5im-stack-mobile-yes .t5im-map-col {
		grid-area: map;
		width: 100%;
	}
}