/**
 * wideum-resp-grids.css — RESPONSIVE de les GRAELLES DE CARDS (mòbil + tablet).
 *
 * Objectiu: clavar el nombre de columnes de cada graella de cards a producció
 * (wideum.com) a cada breakpoint, sense tocar el desktop, i garantir que CAP
 * contingut (card, imatge, títol llarg) desbordi horitzontalment.
 *
 * Breakpoints (els d'Elementor, que són els que generen les amplades inline
 * per-element `_element_custom_width_(tablet|mobile)` que aquí ajustem):
 *   - TABLET : @media (max-width:1024px)
 *   - MÒBIL  : @media (max-width:767px)
 * El tema té a més punts propis a 1280/1100/800/600 (wideum-theme.css); les
 * regles d'aquí només actuen ≤1024 i ≤767, així que el desktop queda intacte.
 *
 * Columnes objectiu per graella (mesurat a prod amb Playwright; on prod ja no
 * té el bloc s'aplica la intenció original 3→2→1 del tema):
 *   BLOC            desktop  tablet(820)  mòbil(390)   font de la referència
 *   product-cards   3        3 (visible)  1            prod smart-glasses
 *                            2 (hover)    1            prod realwear
 *   video-cards     2        2            1            prod realwear  (ja OK: fix-f)
 *   cards (genèric) 3        2            1            prod partners/remote-eye (ja OK)
 *   columns (prod)  3        3            2            prod remote-eye
 *   partners-cols   4-5      4            1            prod partners
 *   benefits        4-5      4            2 (2×2)      stat cards compactes
 *   why             3        2            1            intenció original (bloc absent a prod)
 *   values          2        2            1            prod about-us (ja OK)
 *   team            4        4            2            prod about-us
 *   large-cards     3        3            1            tema original (ja OK)
 *   progressive     3        3            1            simplificat de carrusel (ja OK)
 *
 * Les cards mantenen alçada igual dins de cada fila (fix-g) també a mòbil/tablet:
 * aquí NOMÉS canviem amplada (flex-basis/width/max-width) i el gap, no l'stretch.
 *
 * La classe de card viu al wrapper extern .elementor-widget/.e-con, per això
 * els !important guanyen l'amplada inline per-element que emet Elementor
 * (`--width` / `width` a l'ID `.elementor-element-XXXX`).
 */

/* ================================================================== *
 * 0) SEGURETAT ANTI-DESBORDAMENT (tots els breakpoints).
 *    Cap imatge/card/títol no pot sortir de l'amplada del seu contenidor.
 * ================================================================== */
.w-cards-grid, .w-large-cards-grid, .w-benefits-grid, .w-why-grid,
.w-team-grid, .w-progressive-grid, .w-columns-grid, .w-values-grid,
.product-cards__container, .video-cards__container, .cards__container {
	max-width: 100%;
}

.w-card, .w-large-card, .w-benefit-card, .w-why-card, .w-team-card,
.w-progressive-card, .w-col, .w-value-item,
.product-cards__product, .video-cards__item, .cards__card {
	box-sizing: border-box;
}

/* min-width:0 NOMÉS a les cards natives w-* (widgets Elementor), perquè
 * encongeixin dins del flex sense desbordar. A les cards controlades pel tema
 * (product-cards/video-cards/cards) el min-content intrínsec és el que manté
 * 2 columnes a tablet — no el toquem o passarien a 3. */
.w-card, .w-large-card, .w-benefit-card, .w-why-card, .w-team-card,
.w-progressive-card, .w-col, .w-value-item {
	min-width: 0;
}

/* Imatges/logos/pòsters mai més amples que la card. */
.w-card img, .w-large-card img, .w-benefit-card img, .w-why-card img,
.w-team-card img, .w-progressive-card img, .w-col img, .w-value-item img,
.product-cards__product img, .video-cards__item img, .cards__card img {
	max-width: 100%;
	height: auto;
}

/* Títols/textos llargs trenquen paraula abans de desbordar. */
.w-card *, .w-large-card *, .w-benefit-card *, .w-why-card *, .w-team-card *,
.w-progressive-card *, .w-col *, .w-value-item *,
.product-cards__product *, .video-cards__item *, .cards__card * {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ================================================================== *
 * 1) TABLET (≤1024px)
 * ================================================================== */
@media (max-width: 1024px) {

	/* partners-cols: a prod segueixen 4 en una fila (no 2). El mapper posa
	 * un tablet=45% (2 col) que aquí corregim a 4 col. Distingim la variant
	 * partners per la classe de secció .w-columns--partners. */
	.w-columns--partners .w-columns-grid,
	.w-columns--partners .w-columns-grid > .e-con-inner {
		gap: 16px !important;
		justify-content: center !important;
	}
	.w-columns--partners .w-col {
		flex: 0 0 calc(25% - 12px) !important;
		max-width: calc(25% - 12px) !important;
		width: calc(25% - 12px) !important;
	}
}

/* product-cards visibleInfo: a prod queden 3 en fila fins ≤1024 (banda tablet);
 * el tema ≤800 ja les passa a 1 col, per això limitem a 801–1024. hoverInfo el
 * tema ja el porta a 2 col (calc(50%-10px)), que coincideix amb prod. */
@media (min-width: 801px) and (max-width: 1024px) {
	.product-cards--visibleInfo .product-cards__product {
		max-width: calc(33.33% - 10px) !important;
		width: calc(33.33% - 10px) !important;
	}
}

/* ================================================================== *
 * 2) MÒBIL (≤767px) — 1 columna per defecte, excepte cards compactes
 *    (benefits/team/columns) que a prod van a 2 columnes.
 * ================================================================== */
@media (max-width: 767px) {

	/* columns (variant PRODUCT): a prod van a 2 col a mòbil (icona+text curt). */
	.w-columns:not(.w-columns--partners) .w-columns-grid,
	.w-columns:not(.w-columns--partners) .w-columns-grid > .e-con-inner {
		gap: 16px !important;
		justify-content: center !important;
	}
	.w-columns:not(.w-columns--partners) .w-col {
		flex: 0 0 calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		width: calc(50% - 8px) !important;
	}

	/* partners-cols: a mòbil, 1 columna (com prod). */
	.w-columns--partners .w-col {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* team: a prod queden 2 per fila a mòbil (foto+nom+rol). */
	.w-team-grid,
	.w-team-grid > .e-con-inner {
		gap: 16px !important;
		justify-content: center !important;
	}
	.w-team-card {
		flex: 0 0 calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		width: calc(50% - 8px) !important;
	}

	/* benefits (stat cards): 2×2 a mòbil. Corregeix cards diminutes (62px) que
	 * quedaven perquè el flex-basis de desktop (~22%) guanyava el width:100%. */
	.w-benefits-grid,
	.w-benefits-grid > .e-con-inner {
		gap: 16px !important;
		justify-content: center !important;
	}
	.w-benefit-card {
		flex: 0 0 calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		width: calc(50% - 8px) !important;
	}

	/* why (3 col desktop → 1 col a mòbil). Defensiu: el bloc no és a cap pàgina
	 * local actual, però deixem la regla per si es reactiva el bloc home/why. */
	.w-why-card {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Reafirmació 1 col per a les cards grans/amples (ja hi són, però blindem
	 * davant de l'amplada inline de desktop si alguna pàgina quedés obsoleta). */
	.w-large-card, .w-progressive-card {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}