/**
 * Mission Road Widget – Frontend Styles
 * ======================================
 * Provides the winding road mission section layout,
 * including the SVG road overlay, icon circles, and
 * alternating left/right item text blocks.
 */

/* ============================================================
   1. Wrapper & Layout
   ============================================================ */
.mrw-wrapper {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background-color: #fdf5f0;
	overflow: hidden;
	padding: 80px 20px;
	font-family: inherit;
}

.mrw-wrapper *,
.mrw-wrapper *::before,
.mrw-wrapper *::after {
	box-sizing: border-box;
}

/* ============================================================
   2. Header
   ============================================================ */
.mrw-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 60px;
	position: relative;
	z-index: 2;
}

.mrw-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #8b1a2e;
	margin: 0 0 12px;
}

.mrw-title {
	font-size: clamp(32px, 5vw, 52px);
	font-weight: 800;
	line-height: 1.18;
	color: #1a1a1a;
	margin: 0 0 20px;
}

.mrw-title .mrw-highlight {
	color: #8b1a2e;
}

.mrw-subtitle {
	font-size: 15px;
	line-height: 1.75;
	color: #555;
	margin: 0;
}

/* ============================================================
   3. Road Section Container
   ============================================================ */
.mrw-road-section {
	/* The SVG path places its icon centres at 14%, 32%, 50%, etc. for
	   five items.  Keeping a 5% inset around an equal-row grid makes the
	   visual rows use those same centre points without changing the path. */
	--mrw-road-inset: 5%;
	position: relative;
	width: 100%;
	max-width: 900px;
	height: var(--mrw-road-height);
	margin: 0 auto;
}

/* ============================================================
   4. SVG Road Overlay
   ============================================================ */
.mrw-road-svg-wrapper {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.mrw-road-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Default stroke values – overridden by Elementor selectors.
   vector-effect: non-scaling-stroke keeps stroke-width in CSS/screen pixels
   even though the SVG uses preserveAspectRatio="none" scaling. */
.mrw-road-svg .mrw-road-path {
	stroke: #8b1a2e;
	stroke-width: 50;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* Dashed centre-line divider (drawn as a second path by JS).
   !important ensures the white divider colour always wins over
   the Elementor-generated road_color selector that targets all
   `path` children of .mrw-road-svg. */
.mrw-road-svg .mrw-road-divider {
	stroke: rgba(255,255,255,0.28) !important;
	stroke-width: 3 !important;
	stroke-dasharray: 18 18;
	fill: none;
	stroke-linecap: round;
}

/* ============================================================
   5. Items Container
   ============================================================ */
.mrw-items-container {
	position: absolute;
	inset: var(--mrw-road-inset) 0;
	z-index: 2;
	display: grid;
	grid-template-rows: repeat(var(--mrw-item-count), minmax(0, 1fr));
}

/* ============================================================
   6. Individual Item Row
   ============================================================ */
.mrw-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	min-height: 0;
	position: relative;
}

/* ============================================================
   7. Content Blocks (Left & Right)
   ============================================================ */
.mrw-item-content {
	grid-row: 1;
	max-width: 200px;
	padding: 8px 12px;
	align-self: center;
}

/* Left-side content aligns to right edge */
.mrw-content-left {
	grid-column: 1;
	text-align: right;
	margin: 0 44px 0 auto;
}

/* Right-side content aligns to left edge */
.mrw-content-right {
	grid-column: 3;
	text-align: left;
	margin: 0 auto 0 44px;
}

/* Spacer occupies the opposite column */
.mrw-side-left  .mrw-item-spacer { grid-column: 3; grid-row: 1; }
.mrw-side-right .mrw-item-spacer { grid-column: 1; grid-row: 1; }
.mrw-side-right .mrw-item-content { grid-column: 3; }
.mrw-side-right .mrw-icon-wrapper  { grid-column: 2; }

/* ============================================================
   8. Icon Wrapper & Circle
   ============================================================ */
.mrw-icon-wrapper {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 3;
}

.mrw-icon-circle {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background-color: #fff;
	border: 2px solid #8b1a2e;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 20px rgba(139, 26, 46, 0.18);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mrw-icon-circle:hover {
	transform: scale(1.08);
	box-shadow: 0 8px 32px rgba(139, 26, 46, 0.28);
}

.mrw-icon-circle i,
.mrw-icon-circle svg {
	color: #8b1a2e;
	fill: #8b1a2e;
	font-size: 28px;
	width: 28px;
	height: 28px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   9. Item Typography
   ============================================================ */
.mrw-item-number {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #8b1a2e;
	letter-spacing: 1px;
	margin-bottom: 2px;
}

.mrw-item-title {
	font-size: 20px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 6px;
	line-height: 1.3;
}

.mrw-item-desc {
	font-size: 13px;
	line-height: 1.65;
	color: #666;
	margin: 0;
}

/* ============================================================
   10. Decorative Blobs (background texture matching design)
   ============================================================ */
.mrw-wrapper::before,
.mrw-wrapper::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.mrw-wrapper::before {
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(220, 150, 140, 0.22) 0%, transparent 70%);
	top: -80px;
	left: -80px;
}

.mrw-wrapper::after {
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(220, 150, 140, 0.18) 0%, transparent 70%);
	bottom: -60px;
	right: -60px;
}

/* ============================================================
   11. Responsive – Tablet (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
	.mrw-title {
		font-size: clamp(26px, 4vw, 40px);
	}

	.mrw-item {
		min-height: 0;
	}

	.mrw-road-section { height: var(--mrw-road-height-tablet); }

	.mrw-icon-circle {
		width: 76px;
		height: 76px;
	}

	.mrw-icon-circle i,
	.mrw-icon-circle svg {
		font-size: 22px;
		width: 22px;
		height: 22px;
	}

	.mrw-item-content {
		max-width: 170px;
	}

	.mrw-item-title {
		font-size: 17px;
	}
}

/* ============================================================
   12. Responsive – Mobile (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
	.mrw-wrapper {
		padding: 50px 16px;
	}

	.mrw-header {
		margin-bottom: 40px;
	}

	.mrw-title {
		font-size: 28px;
	}

	/* Stack items vertically on mobile */
	.mrw-item {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		min-height: auto;
		padding: 20px 0;
		text-align: center;
	}

	.mrw-road-section {
		height: auto;
	}

	.mrw-icon-wrapper {
		grid-column: 1;
		grid-row: 1;
		justify-content: center;
		margin-bottom: 14px;
	}

	.mrw-item-content,
	.mrw-content-left,
	.mrw-content-right,
	.mrw-side-left  .mrw-item-content,
	.mrw-side-right .mrw-item-content {
		grid-column: 1;
		grid-row: 2;
		text-align: center;
		max-width: 100%;
		margin: 0 auto;
	}

	.mrw-item-spacer {
		display: none;
	}

	.mrw-road-svg-wrapper {
		display: none;
	}

	/* Mobile: simple dot connector */
	.mrw-items-container {
		position: relative;
		inset: auto;
		display: block;
		gap: 0;
	}

	.mrw-item + .mrw-item::before {
		content: '';
		display: block;
		width: 2px;
		height: 30px;
		background: #8b1a2e;
		margin: 0 auto;
		opacity: 0.5;
	}
}

/* ============================================================
   13. Elementor Editor Adjustments
   ============================================================ */
.elementor-editor-active .mrw-wrapper {
	overflow: visible;
}