/* Estajos — página descriptiva con galería.
 * Patrón híbrido: widgets nativos editables, estética del theme.
 */

/* Hero pintado por inner-hero.css (patrón oscuro Tornados compartido). */

/* ── Intro: 2 cols texto + imagen ─────────────────────────────────── */
.bm-section-estajos-intro.elementor-section {
	background: var(--bm-color-bg-alt);
	padding-top: 96px !important;
	padding-bottom: 96px !important;
}
.bm-section-estajos-intro .elementor-container {
	max-width: 1200px;
	align-items: center;
}
/* La columna del texto respira un pelín a la izquierda, la imagen va a la derecha
 * con bordes redondeados y sombra suave. Mobile colapsa a 1 col. */
.bm-section-estajos-intro .bm-col-text > .elementor-widget-wrap {
	padding-right: 20px;
}
.bm-section-estajos-intro .bm-w-eyebrow .elementor-heading-title {
	font-family: var(--bm-font-body) !important;
	font-size: 12px !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--bm-color-accent) !important;
	font-weight: 700 !important;
	margin-bottom: 14px !important;
}
.bm-section-estajos-intro .bm-w-title .elementor-heading-title {
	font-family: var(--bm-font-heading) !important;
	font-size: clamp(36px, 4.4vw, 72px) !important;
	font-weight: 800 !important;
	line-height: 1.04 !important;
	letter-spacing: -0.025em !important;
	color: var(--bm-color-text) !important;
	margin-bottom: 24px !important;
}
.bm-section-estajos-intro .bm-w-text .elementor-widget-container p {
	font-family: var(--bm-font-body) !important;
	font-size: 17px !important;
	line-height: 1.7 !important;
	color: var(--bm-color-text-soft) !important;
	margin-bottom: 1em !important;
}
.bm-section-estajos-intro .bm-w-intro-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--bm-radius-lg);
	box-shadow: 0 18px 48px rgba(0,0,0,0.10);
}

/* ── Galería: usa el shortcode [bm_image_carousel] (mismo look que /tornejos/
 *    Edicions anteriors). Los estilos del carrusel viven en archive-torneo.css
 *    bajo .bm-edicions-carousel. Aquí solo tocamos el padding y los headers. */
.bm-section-estajos-gallery.elementor-section {
	background: var(--bm-color-bg);
	padding-top: 88px !important;
	padding-bottom: 112px !important;
}
.bm-section-estajos-gallery .elementor-container {
	max-width: 1280px;
}
.bm-section-estajos-gallery .bm-w-eyebrow .elementor-heading-title {
	font-family: var(--bm-font-body) !important;
	font-size: 12px !important;
	letter-spacing: 0.30em !important;
	text-transform: uppercase !important;
	color: var(--bm-color-accent) !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	margin-bottom: 22px !important;
}
.bm-section-estajos-gallery .bm-w-eyebrow .elementor-heading-title::before,
.bm-section-estajos-gallery .bm-w-eyebrow .elementor-heading-title::after {
	content: '';
	width: 48px;
	height: 1px;
	background: var(--bm-color-accent);
	display: inline-block;
}
.bm-section-estajos-gallery .bm-w-title .elementor-heading-title {
	font-family: var(--bm-font-heading) !important;
	font-size: clamp(36px, 4.4vw, 72px) !important;
	font-weight: 800 !important;
	line-height: 1.04 !important;
	letter-spacing: -0.025em !important;
	margin-bottom: 56px !important;
}
/* CTA final — patró canònic compartit entre estajos, tornejos i camps.
 * Viu a archive-torneo.css (que es carrega en totes les pages relevants).
 * Selector: .bm-section-{estajos,tornejos,camps}-cta. NO duplicar aquí. */

@media (max-width: 980px) {
	.bm-section-estajos-intro .elementor-container { gap: 0; }
	.bm-section-estajos-intro .bm-col-text > .elementor-widget-wrap { padding-right: 0; }
}
@media (max-width: 768px) {
	.bm-section-estajos-intro.elementor-section { padding: 48px 20px !important; }
	.bm-section-estajos-gallery.elementor-section { padding: 24px 20px 64px !important; }
}