/**
 * wideum-fix-e.css — Pont per als 3 SLIDERS natius (nested-carousel Swiper) que han
 * substituït el markup Slick cru: case-studies, testimonials, quotes.
 *
 * Els mappers (tools/acf2elementor/mappers/{case-studies,testimonials,quotes}.php)
 * emeten el widget natiu 'nested-carousel' amb slides = containers natius que
 * reutilitzen les classes BEM del tema. Aquí es reprodueix el que el CSS del tema NO
 * pot cobrir perquè Swiper != Slick: dots turquesa de 15px, banda grisa .section-bg
 * del case-studies, i alguns ajustos de layout dins de l'estructura d'Elementor.
 *
 * Classes de widget: .case-studies__carousel / .testimonials__carousel /
 * .quotes__carousel (a .elementor-widget-n-carousel).
 */

/* ====================================================================== *
 *  E1 · Dots turquesa de 15px (com .slick-dots del tema) per als 3 sliders.
 *       Es fa scope per la classe de SECCIÓ (.case-studies/.testimonials/
 *       .quotes) — que embolcalla el carrusel + la paginació — i amb
 *       !important per guanyar als valors per defecte de Swiper/Elementor.
 * ====================================================================== */
.case-studies .swiper-pagination-bullet,
.testimonials .swiper-pagination-bullet,
.quotes .swiper-pagination-bullet {
	width: 15px !important;
	height: 15px !important;
	background-color: var(--turquoise, #4ADBC4) !important;
	opacity: 0.4 !important;
	border-radius: 100% !important;
	margin: 0 5px !important;
	transition: opacity 0.2s ease;
}
.case-studies .swiper-pagination-bullet-active,
.testimonials .swiper-pagination-bullet-active,
.quotes .swiper-pagination-bullet-active {
	background-color: var(--turquoise, #4ADBC4) !important;
	opacity: 1 !important;
}
/* Separació dels dots respecte les slides (com .slick-list + .slick-dots{margin-top:45px}) */
.case-studies .swiper-pagination,
.testimonials .swiper-pagination,
.quotes .swiper-pagination {
	position: relative;
	margin-top: var(--margin-section-medium, 45px);
	bottom: 0;
}

/* ====================================================================== *
 *  E2 · Banda grisa full-width darrere el slider de case-studies
 *       (reprodueix .section-bg-container > .section-bg del tema, que el
 *        nested-carousel ja no emet → el slider quedava sobre blanc).
 * ====================================================================== */
.e-con.case-studies,
.elementor-element.case-studies {
	position: relative;
}
.e-con.case-studies::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 96%;
	max-width: 1550px;
	background-color: var(--light-gray, #F7F8FA);
	border-radius: var(--border-radius, 10px);
	z-index: 0;
	pointer-events: none;
}
.e-con.case-studies > * {
	position: relative;
	z-index: 1;
}

/* ====================================================================== *
 *  E3 · Ajustos de layout dins l'estructura d'Elementor
 * ====================================================================== */
/* singleCard: card centrada amb amplada màx 1100px (com
   .testimonials__container.singleCard .testimonials__card del tema). */
.testimonials__carousel--single .testimonials__card {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* Banda navy (case-study) inset i arrodonida com a prod. El tema aplica
   .case-studies__case-study{max-width:1100px;margin:0 auto;border-radius:10px}, però
   l'estructura de container d'Elementor (.e-con-full) sobreescriu el margin (→ la card
   de 1100px quedava enganxada a l'esquerra dins la slide, amb buit navy a la dreta) i
   el border-radius (→ 0). Els recuperem aquí. Centrat via margin auto de flex-item. */
.case-studies .case-studies__case-study {
	/* Literal (no var): Elementor defineix un --border-radius local a l'e-con que
	   ombreja el global del tema i el deixava a 0. Prod usa 10px. */
	border-radius: 10px !important;
}
/* Centrat de la banda: només escriptori (a ≤1024 la card omple l'ample i s'apila). */
@media (min-width: 1025px) {
	.case-studies .case-studies__case-study {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* El wrapper de widget d'Elementor (heading/text-editor/image) trenca l'ample:
   dins les cards, els widgets han d'ocupar el 100% i respectar l'alineació del tema. */
.case-studies__carousel .case-studies__card > .elementor-widget,
.testimonials__carousel .testimonials__card > .elementor-widget,
.quotes__carousel .quotes__quote-card > .elementor-widget {
	width: 100%;
}

/* Els wrappers de widget d'Elementor no han d'afegir marge inferior propi (l'espaiat
   el donen els marges de les classes de text del tema, forçats a E4). */
.case-studies__carousel .elementor-widget,
.testimonials__carousel .elementor-widget,
.quotes__carousel .elementor-widget {
	margin-bottom: 0;
}

/* ====================================================================== *
 *  E4 · Tipografia dels textos. Les classes BEM del tema (.··__quote,
 *       .··__author, .··__role, etc.) van al WRAPPER del widget d'Elementor;
 *       els seus valors de font NO arriben al text intern perquè Elementor
 *       hi posa els seus. Aquí els forcem sobre l'element intern.
 * ====================================================================== */
/* IMPORTANT: amb el markup optimitzat d'Elementor (e_optimized_markup) els widgets
   text-editor NO tenen wrapper intern .elementor-widget-container — el text va
   DIRECTAMENT dins l'element del widget (que porta la classe BEM). A més Elementor hi
   força 18px/300/negre via tipografia global. Per això apuntem l'element del widget
   mateix amb !important per recuperar la tipografia del tema. */

/* Cites (bold, blau fosc) */
.testimonials__quote,
.quotes__quote {
	font-size: var(--text-large-size, 24px) !important;
	line-height: var(--text-large-lineheight, 34px) !important;
	font-weight: var(--bold, 700) !important;
	color: var(--dark-blue, #00175C) !important;
}
.testimonials__quote { margin-bottom: var(--margin-section-regular, 30px); }
.quotes__quote { max-width: 700px !important; margin: 0 auto; text-align: center; }

/* Cita de case-study: text petit, blau fosc, opacitat 0.8 */
.case-studies__quote {
	font-size: var(--text-small-size, 16px) !important;
	line-height: var(--text-small-lineheight, 22px) !important;
	color: var(--dark-blue, #00175C) !important;
	opacity: 0.8;
	margin-bottom: var(--margin-section-small, 15px);
}

/* Autor (regular) i càrrec (bold, blau mitjà) */
.testimonials__author,
.case-studies__author {
	font-weight: var(--regular, 400) !important;
	font-size: var(--text-small-size, 16px) !important;
	line-height: var(--text-small-lineheight, 22px) !important;
	color: var(--dark-blue, #00175C) !important;
}
.testimonials__role,
.case-studies__role {
	font-weight: var(--bold, 700) !important;
	color: var(--main-blue, #1CA3B5) !important;
	font-size: var(--text-small-size, 16px) !important;
	line-height: var(--text-small-lineheight, 22px) !important;
}
.quotes__author {
	margin-top: var(--margin-section-regular, 30px);
	text-align: center;
}

/* Títol de case-study amb fons de color → text blanc (com --colored del tema) */
.case-studies__case-study--colored .case-studies__title,
.case-studies__case-study--colored .case-studies__title .elementor-heading-title {
	color: #fff !important;
}

/* Logos: mida continguda (el tema ja aplica brightness/opacity via .··__logo-container) */
.testimonials__logo-container, .case-studies__logo-container {
	margin-top: var(--margin-section-small, 15px);
}
.testimonials__logo img { max-height: 80px; width: auto; }
.case-studies__logo img { max-height: none; }

/* ====================================================================== *
 *  E5 · Layout del case-study: títol i mèdia (feedback client 2026-07)
 *
 *  1) Títol: el tema aplica .case-studies__title{max-width:760px;
 *     margin:0 auto 45px} pensat per l'<h2>; aquí la classe va al WRAPPER
 *     del widget heading i Elementor la trepitja (max-width:100% del widget
 *     i margin-bottom:0 del nostre E3) → el títol quedava a tota l'amplada
 *     i amb la foto enganxada a sota, sense els 45px de prod.
 *
 *  2) Imatge: .case-studies__image{max-height:480px} del tema era per la
 *     <img> de prod (escala proporcionalment). Aquí la classe va al wrapper
 *     del widget image: el wrapper es retallava a 480px però la <img>
 *     interna conservava l'alçada natural (fins a 650px) amb overflow
 *     visible → "les fotos surten fora i queden prop del títol".
 *
 *  3) Vídeo bloquejat per Complianz: el placeholder queda amb alçada 0 i el
 *     slide mostra mitja banda buida. A prod l'àrea del vídeo és 16:9.
 * ====================================================================== */

.case-studies__case-study .case-studies__title {
	max-width: 760px !important;
	margin: 0 auto var(--margin-section-medium, 45px) !important;
}

.case-studies__image-container .case-studies__image {
	max-height: none; /* el límit va a la img interna, no al wrapper */
}
.case-studies__image-container .case-studies__image img {
	max-height: 480px;
	width: auto;
	max-width: 100%;
	display: block;
}

.case-studies__image-container .case-studies__video {
	width: 100%;
	aspect-ratio: 16 / 9;
}