/**
 * wideum-resp-carousels.css — RESPONSIVE dels carrusels natius (nested-carousel
 * Swiper): case-studies, testimonials, quotes i el hero multi/single-slide.
 *
 * El nombre de slides per pantalla i el peek lateral els governen els settings
 * responsive del widget (slides_to_show_tablet/_mobile, offset_width_tablet/_mobile)
 * fixats als mappers. AQUÍ només es reprodueix el que el CSS del tema (wideum-theme.css)
 * NO pot cobrir perquè l'estructura d'Elementor (columnes amb width en %, alta
 * especificitat via .elementor-element-<id>) guanya les regles responsive del tema:
 *
 *  1. Apilat de les columnes internes (imatge/card del case-study, columnes del hero)
 *     a tablet/mòbil — el tema ho fa a ≤1050 però Elementor imposa el width de desktop.
 *  2. Padding de les cards reduït a mòbil (el tema ho fa; els settings d'Elementor el
 *     mantenen a 60px i tallen el text en pantalles estretes).
 *  3. Petit gutter lateral a mòbil perquè la slide sencera no quedi enganxada a la vora.
 *
 * Breakpoints: es respecten els del TEMA (1050 apilat hero/case-study, 800 i 600 per a
 * paddings), no els d'Elementor, perquè aquestes regles pertanyen al CSS del tema.
 */

/* ====================================================================== *
 *  RC1 · HERO — apilat text/imatge a ≤1050 (com prod: .hero-shot flex-wrap).
 *        Els width_tablet/_mobile:100% dels mappers ja ho fan via Elementor,
 *        però reforcem les classes del tema per als casos amb especificitat
 *        d'Elementor superior (columnes del hero multi-slide).
 * ====================================================================== */
@media (max-width: 1050px) {
	.hero-shot__text-column,
	.hero-shot__image-column {
		width: 100% !important;
	}
	.hero-shot__image-column {
		margin-top: var(--margin-section-medium, 45px);
	}
}

/* ====================================================================== *
 *  RC2 · CASE STUDIES — a ≤1050 la case-study s'apila: imatge 100% sobre la
 *        card 100% (prod). Les columnes internes porten width 55%/40% com a
 *        settings d'Elementor (.elementor-element-<id>) → cal !important.
 * ====================================================================== */
@media (max-width: 1050px) {
	.case-studies__image-container {
		width: 100% !important;
		max-width: 480px;
		margin: 0 auto var(--margin-section-regular, 30px);
	}
	.case-studies__card {
		width: 100% !important;
	}
}
/* Padding de la case-study reduït a ≤800 (prod: medium regular) — l'ample
   d'Elementor de 60px la deixava massa estreta a mòbil. */
@media (max-width: 800px) {
	.case-studies__case-study {
		padding: var(--margin-section-medium, 45px) var(--margin-section-regular, 30px) !important;
	}
}

/* ====================================================================== *
 *  RC3 · Paddings de card a mòbil (prod ≤600).
 * ====================================================================== */
@media (max-width: 600px) {
	.testimonials__card {
		padding: var(--margin-section-regular, 30px) !important;
	}
	.quotes__quote-card {
		padding: var(--margin-section-medium, 45px) var(--margin-section-regular, 30px) !important;
	}
}

/* ====================================================================== *
 *  RC4 · Gutter lateral a mòbil: amb offset_width_mobile:0 la slide ocupa el
 *        100% de l'ample; afegim un marge intern perquè la card no quedi
 *        enganxada a les vores (prod deixa ~15px per banda).
 * ====================================================================== */
@media (max-width: 767px) {
	.case-studies__slide,
	.testimonials__slide,
	.quotes__slide {
		padding-left: var(--margin-section-small, 15px);
		padding-right: var(--margin-section-small, 15px);
		box-sizing: border-box;
	}
	/* Dots amb àrea tàctil més generosa a mòbil (mantenint el punt de 15px). */
	.case-studies .swiper-pagination-bullet,
	.testimonials .swiper-pagination-bullet,
	.quotes .swiper-pagination-bullet {
		margin: 0 8px !important;
	}
}