/* ============================================================================
 * wideum-fix-f.css — Suport per als mappers NATIUS de video-cards i logo-row.
 *
 * Àmbit EXCLUSIU d'aquest full (no toca cap altre fix):
 *   [1] video_cards → graella nativa (container + widget vídeo/heading/text)
 *   [2] logo_row (horizontalScroll) → cinta contínua nativa amb @keyframes CSS
 *
 * Es carrega després de wideum-legacy.css (i de la resta de fixes), així que
 * pot guanyar per ordre de font quan hi ha empat d'especificitat amb Elementor
 * (.e-con) o amb el tema.
 * ==========================================================================*/

/* ========================================================================== *
 * [1] VIDEO CARDS — graella nativa                                            *
 * ========================================================================== */

/* Padding vertical de secció idèntic a producció (105px = --section-spacing×1.5);
 * sense laterals (l'amplada la controla .container). */
.e-con.video-cards {
	padding-block: calc(var(--section-spacing) * 1.5);
	padding-inline: 0;
}
.e-con.video-cards > .e-con.container {
	width: 100%;
	max-width: var(--container, 1800px);
	margin-inline: auto;
	padding-block: 0;
	padding-inline: 10%;
}
@media (max-width: 700px) {
	.e-con.video-cards > .e-con.container { padding-inline: 25px; }
}
@media (min-width: 2000px) {
	.e-con.video-cards > .e-con.container { padding-inline: var(--margin-section-large); }
}

/* Graella: 2 columnes (com el .video-cards__item{width:48%} original), amb els
 * gaps del tema. Força display:grid per damunt del flex per defecte d'Elementor. */
.e-con.video-cards .e-con.video-cards__container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--margin-section-regular) var(--margin-section-small);
	align-items: stretch;
	justify-content: initial;
	padding: 0;
	width: 100%;
	max-width: 100%;
}
@media (max-width: 767px) {
	.e-con.video-cards .e-con.video-cards__container { grid-template-columns: 1fr; }
}

/* Cada card omple la seva cel·la i recupera el padding de caixa del tema
 * (l'.e-con d'Elementor li posava 10px per defecte). */
.e-con.video-cards .e-con.video-cards__container > .e-con.video-cards__item {
	width: 100%;
	max-width: none;
	height: 100%;
	padding: var(--margin-section-regular);
}

/* Widget vídeo dins la card: marge inferior + cantonades arrodonides com el tema
 * (.video-wrapper iframe{border-radius:var(--border-radius)}). */
.video-cards .video-cards__item .elementor-widget-video.video-cards__video-container {
	margin-bottom: var(--margin-section-regular);
}
.video-cards .video-cards__video-container .elementor-wrapper,
.video-cards .video-cards__video-container .elementor-fit-aspect-ratio,
.video-cards .video-cards__video-container .elementor-video,
.video-cards .video-cards__video-container .elementor-custom-embed-image-overlay,
.video-cards .video-cards__video-container img,
.video-cards .video-cards__video-container iframe {
	border-radius: var(--border-radius);
}
/* El pòster/overlay ha d'omplir tot l'aspecte 16:9. */
.video-cards .video-cards__video-container .elementor-custom-embed-image-overlay {
	background-size: cover;
	background-position: center center;
}

/* ========================================================================== *
 * [2] LOGO ROW — cinta contínua nativa (marquee CSS)                          *
 * ========================================================================== */

/* La secció retalla el sobreeiximent de la pista (pista = 2 jocs de logos). */
.e-con.logo-row {
	--overflow: hidden;
	overflow: hidden;
}

/* Pista animada (.logo-row__marquee): ARA la renderitza el widget custom
 * `wideum-logo-row` com un <div> pla dins de .elementor-widget-container (ja no és
 * un .e-con). Flex en una sola línia, amplada segons contingut, i desplaçament
 * continu -50% (= exactament un joc, sense costura perquè els dos jocs són
 * idèntics). El widget no porta la classe .logo-row__container, de manera que la
 * regla del tema .logo-row:not(.logo-row--scrolled) .logo-row__container no hi
 * arriba (sense guerra d'especificitat). La duració per defecte és 30s; el widget
 * pot sobreescriure-la amb un `animation-duration` inline (control `speed`). */
.e-con.logo-row .logo-row__marquee {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: max-content;
	max-width: none;
	gap: 0;
	padding: 0;
	animation: wideum-logo-marquee 30s linear infinite;
	will-change: transform;
}
.e-con.logo-row .logo-row__marquee:hover {
	animation-play-state: paused;
}
@keyframes wideum-logo-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Cada logo (.logo-row__logo, <div> pla del widget) és una unitat de mida fixa
 * amb un marge dret constant → la meitat de la pista és exactament un joc (bucle
 * sense salt). El centrat flex viu aquí (abans depenia de .elementor-widget-container
 * del widget image natiu, que ja no existeix). */
.e-con.logo-row .logo-row__marquee .logo-row__logo {
	flex: 0 0 auto;
	width: auto;
	margin: 0 var(--margin-section-large) 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* to gris tènue dels logos, com l'original */
	filter: brightness(0);
	opacity: 0.3;
}
/* Control `grayscale = No`: mostra els logos a tot color. */
.e-con.logo-row .logo-row__marquee--color .logo-row__logo {
	filter: none;
	opacity: 1;
}
.e-con.logo-row .logo-row__marquee .logo-row__logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
}
.e-con.logo-row .logo-row__marquee .logo-row__logo img {
	width: auto;
	height: auto;
	max-height: 70px;
	max-width: 210px;
	object-fit: contain;
}