/* AutoStar — "Our Process" section.
   Layout is 100% native Elementor containers + Global Kit colors/typography.
   The only thing Elementor can't do natively is the outlined (hollow) step
   number, so that lives here — and it still uses the global primary colour var,
   so it stays in sync with the Kit. */

/* Outlined step numbers (01 / 02 / 03). Falls back to a solid primary fill on
   browsers without text-stroke support (color comes from the global binding). */
@supports ((-webkit-text-stroke: 1px red)) {
	/* !important beats Elementor's per-element title colour so the fill goes
	   hollow; the stroke colour still comes from the global primary var. */
	.as-proc__num .elementor-heading-title {
		-webkit-text-stroke: 1.5px var(--e-global-color-primary);
		text-stroke: 1.5px var(--e-global-color-primary);
		color: transparent !important;
	}
}

/* Keep the step number from shrinking and give it a little breathing room. */
.as-proc__num { flex: 0 0 auto; }
.as-proc__num .elementor-heading-title { line-height: 1; }

/* On phones the step stacks (number → title → description); tighten the gap. */
@media (max-width: 767px) {
	.as-proc-step .as-proc__titlewrap { width: 100%; }
}

/* ---------------------------------------------------------------------------
   MEDIA — make the native Video widget's poster fill the tall rounded box.
   Elementor's Video widget is locked to its aspect-ratio and the overlay image
   renders at its natural height; we absolutely-position the whole chain so the
   poster + play button cover the panel instead (front + editor). The panel
   height comes from the container's own min-height (520px).
--------------------------------------------------------------------------- */
.as-proc-media { position: relative; }
/* !important overrides Elementor's built-in 16:9 aspect padding so the overlay
   fills the whole (taller) panel instead of a 56.25% box. */
.as-proc-media .elementor-widget-video,
.as-proc-media .elementor-widget-video .elementor-wrapper,
.as-proc-media .elementor-custom-embed-image-overlay {
	position: absolute !important;
	inset: 0 !important;
	height: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* Poster image covers the whole panel. */
.as-proc-media .elementor-custom-embed-image-overlay img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
/* Elementor centres its own play button (left/top 50% + transform); just size
   it up a touch for the larger panel. */
.as-proc-media .elementor-custom-embed-play i,
.as-proc-media .elementor-custom-embed-play svg {
	width: 68px;
	height: 68px;
}