/* =============================================================================
 * wideum-fix-d.css — Fixes de fidelitat (tanda D)
 *
 * Carrega DESPRÉS de theme/legacy/animations/forms/buttons (vegeu includes/assets.php),
 * així que pot afinar qualsevol cosa. Àmbit:
 *   1) Rugged Mobiles: card compacta + fitxa d'especificacions com a OVERLAY en hover.
 *   2) Footer banner navy: caixa INSET (el marge lateral el dona la secció boxed).
 *   3) Header CTA "Trial ▾": menú 'alternative' incrustat com a widget shortcode.
 * ========================================================================== */

/* ===========================================================================
 * 1) RUGGED MOBILES — card compacta (logo + imatge + nom) amb la fitxa
 *    d'especificacions com a OVERLAY absolut, AMAGAT per defecte i visible NOMÉS
 *    EN HOVER, com a producció (blocks/product/rugged-mobiles.php, estil hoverInfo).
 * ======================================================================== */

/* La card (root del loop item) és el contenidor de posició de l'overlay. */
.w-loop-ruggedmobile {
	position: relative;
	overflow: hidden;
	height: 100%;
}

/* Cel·les del loop grid a la mateixa alçada perquè l'overlay cobreixi tota la card. */
.w-ruggedmobile-loop .elementor-loop-container .e-loop-item {
	display: flex;
}
.w-ruggedmobile-loop .e-loop-item > .w-loop-ruggedmobile {
	width: 100%;
}

/* Contenidor del logo: max-content, alineat a l'esquerra (com l'original). */
.w-loop-ruggedmobile .product-cards__logo-container {
	width: max-content;
	min-width: 55px;
	margin-bottom: var(--margin-section-small, 15px);
}
.w-loop-ruggedmobile .product-cards__logo img {
	max-height: 45px;
	width: auto;
	object-fit: contain;
}

/* Imatge del producte centrada. */
.w-loop-ruggedmobile .product-cards__image-container {
	margin-bottom: var(--margin-section-small, 15px);
}
.w-loop-ruggedmobile .product-cards__image img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Nom del producte. */
.w-loop-ruggedmobile .product-cards__title {
	margin: 0;
}

/* Overlay d'especificacions: absolut, cobreix la card, fons gris clar. Amagat
 * per defecte (opacity/visibility) i mostrat en hover del wrapper del loop item
 * (.w-loop-ruggedmobile, no .product-cards__product). !important per guanyar el
 * display:flex per defecte de les .e-con d'Elementor. */
.w-loop-ruggedmobile .product-cards__specs-container {
	display: flex !important;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--light-gray, #F7F8FA);
	border-radius: var(--border-radius, 10px);
	padding: var(--margin-section-regular, 30px);
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s linear, visibility .25s linear;
	z-index: 2;
}
.w-loop-ruggedmobile:hover .product-cards__specs-container {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Especificacions: creixen per empènyer l'enllaç a baix; text blau fosc. */
.w-loop-ruggedmobile .product-cards__specs {
	flex-grow: 1;
	margin: 0;
	color: var(--dark-blue, #00175C);
}
.w-loop-ruggedmobile .product-cards__specs p {
	margin: 0 0 4px;
}
.w-loop-ruggedmobile .product-cards__specs p strong {
	font-weight: var(--bold, 700);
}

/* Enllaç "LEARN MORE" com a l'original: text blau, sense fons de botó. */
.w-loop-ruggedmobile .product-cards__link {
	margin-top: var(--margin-section-regular, 30px);
	width: max-content;
}
.w-loop-ruggedmobile .product-cards__link .elementor-button,
.w-loop-ruggedmobile .product-cards__link .elementor-button:hover,
.w-loop-ruggedmobile .product-cards__link .elementor-button:focus {
	background: transparent;
	color: var(--main-blue, #1CA3B5);
	padding: 0;
	border-radius: 0;
	font-weight: var(--bold, 700);
	box-shadow: none;
}

/* ===========================================================================
 * 2) FOOTER BANNER NAVY — la caixa navy queda INSET (marge lateral) perquè viu
 *    dins d'una secció BOXED sense fons. Aquí només reforcem que la card no
 *    sobreïxi i el text es contingui (paritat amb .footer-banner__box).
 * ======================================================================== */
.w-footer-banner {
	width: 100%;
}
.w-footer-banner-box {
	width: 100%;
	text-align: center;
}
.w-footer-banner-box .w-footer-banner-buttons {
	gap: var(--margin-section-small, 15px) var(--margin-section-regular, 30px);
}

/* ===========================================================================
 * 3) HEADER CTA "Trial ▾" — el widget shortcode que incrusta el menú 'alternative'.
 *    Les classes .main-header__altmenu-container / .alternative-menu / .menu-button
 *    ja porten l'estil del tema; aquí només garantim l'alineació dins del header
 *    natiu d'Elementor i que el widget no s'encongeixi.
 * ======================================================================== */
.wideum-header .wideum-alt-cta {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}
.wideum-header .wideum-alt-cta .elementor-widget-container {
	display: flex;
	align-items: center;
}
.wideum-header .wideum-alt-cta .alternative-menu {
	margin: 0;
}
/* El desplegable "Trial" (li.menu-button amb fills) s'obre en hover via theme.js
 * (.sub-menu--active). Assegurem que el panell quedi per sobre i ben posicionat. */
.wideum-header .alternative-menu > li.menu-button.menu-item-has-children > .sub-menu {
	z-index: 1000;
}

/* ===========================================================================
 * 4) PRODUCT CARDS natives — el mapper product-cards.php ara emet CADA card com
 *    a WIDGETS Elementor natius (image/heading/text/button) conservant les
 *    classes del tema (.product-cards__*). Aquests ponts cobreixen NOMÉS el que
 *    el nesting d'Elementor trenca respecte del markup pla original:
 *      · la classe cau al wrapper .elementor-element, no a l'<img>/<p>,
 *      · els contenidors .e-con porten display:flex i width:100% per defecte.
 *    L'estil visual (fons/vores/graella/colors) el continua aportant
 *    wideum-theme.css (.product-cards*) i els botons wideum-buttons.css.
 * ======================================================================== */

/* La secció posiciona el fons gris absolut i reté els fills (com section{}). */
.product-cards {
	position: relative;
	overflow: hidden;
}

/* GEOMETRIA 1:1 amb producció (mesurada a 1600px: secció 1600, banda gris 1536,
 * contingut 1280, graella 1300, card 423, gap 10, fusió -105). Elementor reseteja
 * width/margin/padding de les .e-con, i wideum-legacy.css fixa un --width:96% a la
 * secció (pensat per a l'estructura HTML antiga); aquí es restaura la geometria
 * del tema original. */

/* Secció FULL-BLEED (anul·la el --width:96% de legacy). El fons gris .section-bg
 * (96%) i el .container (padding 10%) recreen la resta. */
.elementor .e-con.product-cards {
	--width: 100%;
	max-width: 100%;
}
/* Fusió de bandes grises entre dos product_cards consecutius (marge negatiu del
 * tema; Elementor reseteja el margin de les .e-con). */
.elementor .e-con.product-cards + .e-con.product-cards {
	margin-top: calc(var(--section-spacing, 70px) * -1.5);
}
/* Banda grisa (.section-bg): viu dins d'un widget HTML. El seu wrapper NO ha de
 * ser el bloc de posicionament (deixaria .section-bg-container a height:0 i
 * desplaçada pel padding-top de la secció). La fem absoluta respecte de la secció
 * .product-cards (position:relative) i l'estirem amb top/bottom:0, com el
 * <section> original. */
.product-cards > .elementor-widget-html,
.product-cards > .elementor-widget-html > .elementor-widget-container {
	position: static;
}
.product-cards .section-bg-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: auto;
	z-index: 0;
}

/* .container: recupera el padding lateral 0 10% (Elementor imposa 10px) →
 * amplada de contingut ~1280px, com prod. Queda per damunt de la banda grisa.
 * Es reprodueixen les media queries del tema (.container). */
.elementor .e-con.product-cards > .container {
	padding: 0 10%;
	max-width: var(--container, 1800px);
	margin-inline: auto;
	position: relative;
	z-index: 1;
}
@media (min-width: 2000px) {
	.elementor .e-con.product-cards > .container { padding: 0 var(--margin-section-large, 60px); }
}
@media (max-width: 700px) {
	.elementor .e-con.product-cards > .container { padding: 0 25px; }
}

/* Graella: amplada auto + marge negatiu -5/-10 del tema (Elementor la fixa a
 * width:100% i margin:0). width:auto amb el marge negatiu dona 1300px (1280+20). */
.elementor .e-con.product-cards__container {
	--width: auto;
	width: auto;
	margin: -5px -10px;
	flex-wrap: wrap;
}
/* Cel·les: marge 0 5px 10px (gap 10 entre cards) i encongiment fins al max-width
 * del tema (25%/33.3%). Elementor porta width:100% i pot dur flex-shrink:0 →
 * sense flex:0 1 auto quedaria 1 card per fila. */
.elementor .e-con.product-cards__container > .product-cards__product {
	flex: 0 1 auto;
	display: flex;
	margin: 0 5px 10px;
}
.product-cards .product-cards__product > .product-cards__product-card {
	width: 100%;
}

/* Les imatges viuen DINS del widget image; la classe .product-cards__logo /
 * __image és al wrapper, així que l'estil d'imatge del tema s'aplica a l'<img>
 * intern via aquests ponts (equivalents a .product-cards__logo/__image del tema). */
.product-cards .product-cards__logo img {
	width: 100%;
	height: auto;
	object-fit: contain;
	max-height: 45px;
}
.product-cards .product-cards__image img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
/* visibleInfo: el logo es pinta en blanc sobre la barra de color de la marca. */
.product-cards .product-cards__container--visibleInfo .product-cards__logo img {
	filter: brightness(0) invert();
}

/* hoverInfo: la caixa del logo és max-content a l'esquerra (contraresta el
 * width:100% per defecte del contenidor Elementor). */
.product-cards--hoverInfo .product-cards__logo-container {
	width: max-content;
}

/* El <p> intern del text-editor no ha d'afegir marges dobles dins la card. */
.product-cards .product-cards__text p {
	margin: 0;
}

/* hoverInfo: overlay d'especificacions. El contenidor Elementor porta
 * display:flex per defecte (guanyaria el display:none del tema), així que
 * l'amaguem/mostrem amb opacity+visibility en hover de la cel·la (com rugged). */
.product-cards .product-cards__specs-container {
	display: flex !important;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--light-gray, #F7F8FA);
	border-radius: var(--border-radius, 10px);
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s linear, visibility .25s linear;
	z-index: 2;
}
.product-cards .product-cards__product:hover .product-cards__specs-container {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.product-cards .product-cards__specs {
	flex-grow: 1;
}
.product-cards .product-cards__specs p {
	margin: 0 0 4px;
}