/**
 * Homepage — "Din fabrica noastră, până la tine acasă".
 *
 * A dark band between the warm materials rail and the white projects grid. The
 * film is the stage; the chapter index beside it is also its progress bar, so
 * the section reads the same whether the visitor watches, skips or pauses.
 *
 * Every rule is scoped to `.proc` or to the section container, and the button
 * resets are written out in full: Woodmart styles every `button` globally, and
 * a chapter row that inherits a 42px uppercase pill stops being a chapter row.
 */

/* ── Section band ─────────────────────────────────────────────────────────── */

body.iq-home .elementor .elementor-element.v5-proc {
	--proc-ground: #0F0F10;
	--proc-line: rgba(255, 255, 255, .16);
	--proc-dim: rgba(255, 255, 255, .56);
	--proc-soft: rgba(255, 255, 255, .74);
	--proc-rec: #E0443A;
	--padding-top: clamp(56px, 7vw, 104px);
	--padding-bottom: clamp(56px, 7vw, 104px);
	background: var(--proc-ground);
	color: #FFFFFF;
}

body.iq-v3.iq-home .elementor .elementor-widget-iq-v5-process,
body.iq-v3.iq-home .elementor .elementor-widget-iq-v5-process > .elementor-widget-container { margin: 0; padding: 0; }

.proc { color: #FFFFFF; font-family: var(--v5-body); }

/* ── Head ─────────────────────────────────────────────────────────────────── */

.proc__head {
	display: grid;
	gap: 18px;
	margin-block-end: clamp(28px, 3.4vw, 48px);
}

body.iq-home .elementor .proc__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(239, 234, 227, .82);
}

.proc__rec {
	flex: 0 0 auto;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--proc-rec, #E0443A);
	animation: proc-rec 1.6s ease-in-out infinite;
}

@keyframes proc-rec { 50% { opacity: .25; } }

body.iq-home .elementor .proc__title {
	margin: 0;
	max-inline-size: 15ch;
	font-family: var(--v5-display);
	font-size: clamp(32px, 4.2vw, 58px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -.032em;
	color: #FFFFFF;
}

body.iq-home .elementor .proc__lead {
	margin: 0;
	max-inline-size: 44ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--proc-soft);
}

body.iq-home .elementor a.proc__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-block-size: 44px;
	margin-block-start: 10px;
	font-weight: 500;
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .32em;
	transition: gap var(--v5-dur) var(--v5-ease);
}

body.iq-home .elementor a.proc__cta::after { content: '→'; text-decoration: none; }
body.iq-home .elementor a.proc__cta:hover { gap: 16px; color: #FFFFFF; }
body.iq-home .elementor a.proc__cta:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }

@media (min-width: 1000px) {
	/* Same split and gap as the body below, so the lead starts on the same line
	   as the chapter index. */
	.proc__head {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
		column-gap: clamp(28px, 3vw, 48px);
		align-items: end;
	}

	.proc__kicker { grid-column: 1 / -1; }
}

/* ── Body: stage + chapter index ──────────────────────────────────────────── */

.proc__body { display: grid; gap: 18px; }

@media (min-width: 1000px) {
	.proc__body {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
		gap: clamp(28px, 3vw, 48px);
		align-items: stretch;
	}
}

/* ── Stage ────────────────────────────────────────────────────────────────── */

.proc__stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	background: #000000;
	isolation: isolate;
}

body.iq-home .elementor .proc__video {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	display: block;
}

/* Scrims for the HUD above and the chapter title below; never catch a click. */
.proc__stage::before,
.proc__stage::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	z-index: 1;
	pointer-events: none;
}

.proc__stage::before { inset-block-start: 0; block-size: 34%; background: linear-gradient(rgba(0, 0, 0, .5), transparent); }
.proc__stage::after { inset-block-end: 0; block-size: 48%; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); }

.proc__hud {
	position: absolute;
	inset: 16px 18px auto;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .9);
	pointer-events: none;
}

.proc__stamp { display: inline-flex; align-items: center; gap: 9px; }
.proc__tc { font-variant-numeric: tabular-nums; letter-spacing: .08em; }

.proc__now {
	position: absolute;
	inset: auto 84px 22px 24px;
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: 14px;
	pointer-events: none;
}

.proc__now-num {
	font-size: 14px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .7);
}

.proc__now-name {
	font-family: var(--v5-display);
	font-size: clamp(26px, 3vw, 46px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.03em;
}

.proc__now.is-swap .proc__now-name,
.proc__now.is-swap .proc__now-num { animation: proc-swap 520ms var(--v5-ease) both; }

@keyframes proc-swap {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ── Play / pause ─────────────────────────────────────────────────────────── */

body.iq-home .elementor button.proc__toggle {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	inset: auto 18px 18px auto;
	z-index: 3;
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border: 1px solid rgba(255, 255, 255, .42);
	border-radius: 50%;
	background: rgba(0, 0, 0, .38);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #FFFFFF;
	cursor: pointer;
	transition: background var(--v5-dur) var(--v5-ease), border-color var(--v5-dur) var(--v5-ease);
}

body.iq-home .elementor button.proc__toggle[hidden] { display: none; }
body.iq-home .elementor button.proc__toggle:hover { background: rgba(255, 255, 255, .18); border-color: #FFFFFF; }
body.iq-home .elementor button.proc__toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* Pause: two bars. Play: a triangle. Drawn, so no icon request. */
body.iq-home .elementor button.proc__toggle::before {
	content: '';
	inline-size: 12px;
	block-size: 14px;
	background:
		linear-gradient(currentColor, currentColor) left / 4px 100% no-repeat,
		linear-gradient(currentColor, currentColor) right / 4px 100% no-repeat;
}

body.iq-home .elementor button.proc__toggle[data-state="play"]::before {
	inline-size: 0;
	block-size: 0;
	margin-inline-start: 4px;
	background: none;
	border-block: 8px solid transparent;
	border-inline-start: 13px solid currentColor;
}

/* The chapter title belongs to the moving picture. Before the first frame plays
   the stage shows the poster, which is not chapter one — and without script the
   native controls sit exactly where the title would. */
.proc:not(.has-played) .proc__now { visibility: hidden; }

/* ── Chapter index ────────────────────────────────────────────────────────── */

body.iq-home .elementor .proc__chapters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.proc__item { margin: 0; min-inline-size: 0; }

body.iq-home .elementor .proc__ch {
	all: unset;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 10px;
	row-gap: 10px;
	align-items: baseline;
	inline-size: 100%;
	min-block-size: 56px;
	padding-block: 0 8px;
	color: var(--proc-dim);
	cursor: pointer;
	text-align: start;
	transition: color var(--v5-dur) var(--v5-ease);
}

body.iq-home .elementor div.proc__ch { cursor: default; }

.proc__bar {
	grid-column: 1 / -1;
	display: block;
	block-size: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--proc-line);
}

.proc__fill {
	display: block;
	block-size: 100%;
	background: #FFFFFF;
	transform: scaleX(var(--p, 0));
	transform-origin: left center;
	will-change: transform;
}

/* A still without a film: the bars are just rules. */
.proc:not([data-proc]) .proc__fill { transform: none; opacity: .28; }

.proc__num {
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
}

.proc__name {
	font-family: var(--v5-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.proc__txt { display: none; }

body.iq-home .elementor .proc__ch:hover { color: rgba(255, 255, 255, .86); }
body.iq-home .elementor .proc__ch[aria-current="step"] { color: #FFFFFF; }
body.iq-home .elementor .proc__ch:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 6px; border-radius: 2px; }

/* Desktop: a vertical index as tall as the film, with one sentence a chapter. */
@media (min-width: 1000px) {
	body.iq-home .elementor .proc__chapters {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 1fr;
		gap: 0;
	}

	body.iq-home .elementor .proc__ch {
		block-size: 100%;
		align-content: start;
		column-gap: 14px;
		row-gap: 14px;
		padding-block: 0 18px;
	}

	.proc__name { font-size: clamp(19px, 1.5vw, 23px); }

	.proc__txt {
		grid-column: 2;
		display: block;
		margin-block-start: -4px;
		font-size: 15px;
		line-height: 1.5;
		color: rgba(255, 255, 255, .5);
		transition: color var(--v5-dur) var(--v5-ease);
	}

	body.iq-home .elementor .proc__ch[aria-current="step"] .proc__txt { color: var(--proc-soft); }
}

/* Below the two-column layout the index is four narrow columns: the number
   goes above the name, so "Prelucrare" keeps its column instead of breaking. */
@media (max-width: 999px) {
	body.iq-home .elementor .proc__ch {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
		align-content: start;
	}

	.proc__bar { margin-block-end: 4px; }
}

/* Phones: the film is short, so the scrims and overlay text shrink with it. */
@media (max-width: 599px) {
	/* The kicker above already says where the film was shot; on a phone the
	   stamp keeps only its recording dot, so it cannot run into the timecode. */
	.proc__stamp { font-size: 0; letter-spacing: 0; }
	.proc__stage { border-radius: 14px; }
	.proc__hud { inset: 12px 14px auto; font-size: 10px; letter-spacing: .1em; }
	.proc__now { inset: auto 70px 14px 16px; gap: 10px; }
	.proc__now-num { font-size: 12px; }
	body.iq-home .elementor button.proc__toggle { inline-size: 44px; block-size: 44px; inset: auto 12px 10px auto; }
	body.iq-home .elementor .proc__chapters { gap: 8px; }
	.proc__name { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.proc__rec { animation: none; }
	.proc__now.is-swap .proc__now-name,
	.proc__now.is-swap .proc__now-num { animation: none; }
	body.iq-home .elementor a.proc__cta { transition: none; }
}