/*
 * Aidem Work Process widget — base structural CSS.
 *
 * Colours, typography, sizing and spacing all come from the widget's own
 * Style tab controls (output by Elementor as per-instance inline CSS).
 * This file only supplies the structural rules those controls don't cover:
 * flex plumbing, absolute positioning, and the vertical-label rotation.
 */

.aidem-wproc-wrap {
	display: flex;
	width: 100%;
}

/* ---- Image column ------------------------------------------------- */

.aidem-wproc-visual {
	flex-shrink: 0;
	min-width: 0;
}

.aidem-wproc-img-frame {
	position: relative;
	width: 100%;
}

.aidem-wproc-img-frame .aidem-wproc-img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Vertical section label ---------------------------------------- */

.aidem-wproc-label-col {
	display: flex;
	flex-shrink: 0;
	align-items: flex-start;
	justify-content: center;
}

.aidem-wproc-label-text {
	display: inline-block;
	white-space: nowrap;
}

.aidem-wproc-label-vertical-yes .aidem-wproc-label-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* ---- Mobile: section label goes horizontal -------------------------- */
/* Vertical (writing-mode) text needs a tall, generous column to read well.
   On a narrow mobile column — where Layout > Direction has already
   switched to a single stacked column — that same vertical label becomes
   its own ~150px-tall row with almost nothing beside it, which reads as a
   dead gap between the image and the steps rather than a label. Below
   this site's own Mobile breakpoint we force it back to a normal
   horizontal line instead, regardless of the widget's own "Vertical
   Label" switch (that switch still controls Desktop/Tablet as normal).
   736px matches this site's configured Mobile breakpoint (Elementor
   Site Settings > Layout > Breakpoints) — keep this value in sync if
   that setting is ever changed. */
@media (max-width: 736px) {
	.aidem-wproc-label-col {
		width: 100%;
		justify-content: flex-start;
	}

	.aidem-wproc-label-text {
		writing-mode: horizontal-tb !important;
		transform: none !important;
		white-space: normal;
	}
}

/* ---- Mobile + Tablet: breathing room off the screen edges ----------- */
/* Without this, the image, the label and every step sit flush against
   the viewport's left/right edge (0px) below Desktop - text runs right
   up to the glass. 1024px covers this site's Mobile Portrait (736px),
   Mobile Landscape (768px) AND Tablet Portrait (1024px) breakpoints
   together - Elementor Site Settings > Layout > Breakpoints - so the
   same 30px inset applies all the way up to Desktop, not just phones.
   box-sizing is set explicitly so the padding insets the content instead
   of adding to the 100% width. */
@media (max-width: 1024px) {
	.aidem-wproc-wrap {
		box-sizing: border-box;
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* ---- Mobile / Tablet: bottom padding before the next section -------- */
/* Separate from the left/right inset above because the two breakpoints
   need different amounts here. Ranges match this widget's own
   responsive controls: Mobile applies up to 736px (Elementor's "mobile"
   breakpoint), Tablet applies from 737px up to 1024px (Elementor's
   "tablet" breakpoint) - see layout_image_width's tablet_default in the
   PHP file, which uses this same split. */
@media (max-width: 736px) {
	.aidem-wproc-wrap {
		padding-bottom: 80px;
	}
}

@media (min-width: 737px) and (max-width: 1024px) {
	.aidem-wproc-wrap {
		padding-bottom: 100px;
	}
}

/* ---- Line + steps row ------------------------------------------------ */

.aidem-wproc-timeline {
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
	min-width: 0;
}

.aidem-wproc-line-col {
	position: relative;
	flex-shrink: 0;
}

.aidem-wproc-line {
	position: relative;
	height: 100%;
	min-height: 100%;
}

.aidem-wproc-line-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 0%;
	/* JS (Step 4) sets this height as the user scrolls through the section. */
}

.aidem-wproc-steps {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.aidem-wproc-step {
	position: relative;
}

.aidem-wproc-marker {
	position: absolute;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

.aidem-wproc-step-title,
.aidem-wproc-step-desc {
	margin: 0;
}

/* ---- Editor-only safety net ------------------------------------------ */

/* Elementor's editor canvas sometimes squeezes very narrow panel widths
   that don't match any real front-end breakpoint; keep the marker from
   overlapping step text if that ever happens while editing. */
body.elementor-editor-active .aidem-wproc-step {
	padding-left: 2px;
}