/**
 * wideum-fix-a.css — Fixes de fidelitat (àmbit A).
 *
 * Àmbit d'aquest full (propietat d'un únic agent):
 *   1) Home "Discover our products" (widget wideum-products-showcase / .hm-products)
 *   2) "How it works" de pàgines de producte (text_video → .w-text-video--product)
 *
 * Carregat després de wideum-legacy (veure includes/assets.php), així que pot
 * afinar sobre el CSS conservat sense !important tret que calgui trencar estil
 * inline aplicat pel JS.
 */

/* ============================================================
 * [1] HOME · Discover our products (.hm-products)
 * ------------------------------------------------------------
 * El JS (wideum-widgets.js · mòdul "Home products") mou la classe .active entre
 * les targetes durant l'autoplay i, en acabar el cicle o en sortir de viewport,
 * pot deixar CAP targeta amb .active — llavors totes queden planes (sense el
 * fons degradat + vora blanca), a diferència de producció, on sempre hi ha una
 * targeta destacada. Fallback: si el contenidor NO té cap .hm-products__product
 * actiu, destaquem la primera igual que fa .active, replicant l'estat de repòs
 * de producció. Quan el JS torna a marcar una .active, :has() ho detecta i aquest
 * bloc es desactiva sol (l'estil .active pren el relleu), sense duplicar vores.
 * ============================================================ */
.hm-products__cards-container:not(:has(.hm-products__product.active))
	.hm-products__product:first-child .hm-products__card {
	background: var(--gradient-light);
}
.hm-products__cards-container:not(:has(.hm-products__product.active))
	.hm-products__product:first-child .hm-products__card-border {
	content: "";
	position: absolute;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	top: 3px;
	left: 3px;
	background: var(--white);
	border-radius: var(--border-radius);
}

/* ============================================================
 * [2] PRODUCTE · text_video "How it works" — bullet morat del títol
 * ------------------------------------------------------------
 * A l'original, .page-template-template-product .text-video__title porta un
 * cercle morat (#5D3ABA, 20px) abans del text (padding-left:30px). El render
 * d'Elementor no arrossega ni la classe .text-video__title ni el body-class
 * .page-template-template-product, així que el bullet desapareixia. El mapper
 * marca només les seccions de producte amb .w-text-video--product; aquí pintem
 * el bullet sobre el títol (h2 del widget heading) idènticament a producció.
 * A la HOME el text_video NO porta la classe → sense bullet, com a producció.
 * ============================================================ */
.w-text-video--product .elementor-widget-heading .elementor-heading-title {
	position: relative;
	padding-left: 30px;
}
.w-text-video--product .elementor-widget-heading .elementor-heading-title::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	background-color: #5D3ABA;
	left: 0;
	top: 15px;
}

/* ============================================================
 * [3] PRODUCTE · video_cards ("Get started") — POSTER de fallback
 * ------------------------------------------------------------
 * A producció cada card mostra el thumbnail del vídeo de fons + la caixa de
 * consentiment de Complianz. Complianz descarrega el thumbnail i el cacheja a
 * /wp-content/uploads/complianz/placeholders/…webp; després l'injecta com a
 * background-image INLINE sobre .cmplz-blocked-content-container. Si aquell
 * fitxer cachejat no existeix (migració sense la carpeta placeholders, o
 * generació encara no disparada), la caixa de Complianz —que té un
 * `background:#FFF` opac de base— queda BUIDA: el "marc buit" de local.
 *
 * El mapper video-cards.php posa el thumbnail d'i.ytimg.com com a fons del
 * contenidor pare (.video-cards__video-container). Aquí fem TRANSPARENT el fons
 * de base de la caixa de Complianz DINS de .video-cards perquè:
 *   · quan Complianz TÉ el seu placeholder → l'injecta inline (cover, opac) i el
 *     pinta a sobre: idèntic a producció, el fallback queda amagat;
 *   · quan NO el té → la base transparent deixa traspuar el thumbnail del
 *     contenidor pare → es veu el poster, no un marc buit.
 * Abast limitat a .video-cards per no tocar altres incrustacions (text_video).
 *
 * El poster es pinta en un ::before del contenidor (capa de sota) llegint la
 * variable --vc-poster que injecta el mapper. Complianz reescriu el
 * `background-image` inline del contenidor amb el SEU placeholder, però NO toca
 * ni la variable CSS ni el ::before, així que el fallback sobreviu. La caixa de
 * Complianz (background transparent + imatge inline pròpia) es pinta a sobre:
 *   · placeholder de Complianz OK → cobreix el ::before (idèntic a producció);
 *   · placeholder de Complianz absent/404 → transparent → es veu el ::before.
 * ============================================================ */
.video-cards .video-cards__video-container {
	position: relative;
}
.video-cards .video-cards__video-container::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--vc-poster, none);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.video-cards .cmplz-blocked-content-container,
.video-cards .cmplz-wp-video {
	position: relative;
	z-index: 1;
	background-color: transparent !important;
}