/* Inner Hero — panell fosc reutilitzable per a QUALSEVOL pàgina.
 *
 * ╔══════════════════════════════════════════════════════════════════════╗
 * ║  ÚS PER AL CLIENT (Elementor):                                        ║
 * ║  1. Posa la classe  bm-hero  a la SECCIÓ (contenidor). Res més.       ║
 * ║  2. Dins, afegeix el que vulguis SENSE classe:                        ║
 * ║       · Widget Heading  → títol blanc gran (automàtic)                ║
 * ║       · Widget Text     → paràgraf blanc translúcid (automàtic)       ║
 * ║  3. (Opcional) etiqueta vermella de dalt: posa  bm-eyebrow  a un       ║
 * ║     widget Heading petit.                                             ║
 * ╚══════════════════════════════════════════════════════════════════════╝
 *
 * Disseny: fons #0F0F12 + degradat radial accent + textura de punts.
 * El single torneo/camp té el seu propi hero a sang — NO usa aquest.
 */

/* ── Contenidor ──────────────────────────────────────────────────────── */
.bm-hero.elementor-section {
	position: relative;
	color: #FFFFFF !important;
	margin-top: -88px !important;
	/* 140px top = 88px header + 52px aire; 88px bottom respira. */
	padding: 140px 24px 88px !important;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
/* Fons fosc per defecte. La variant .bm-hero--photo l'omet: el client hi posa una
 * FOTO de fons editable des d'Elementor (Estilo → Fondo → Imatge) i controla
 * l'enfosquiment amb la Superposició de fons nativa (un sol slider d'opacitat). */
.bm-hero.elementor-section:not(.bm-hero--photo) {
	background: #0F0F12 !important;
}
.bm-hero.elementor-section > .elementor-container {
	max-width: 980px !important;
	margin: 0 auto;
}

/* Capa de degradats (radial accent + profunditat linear) */
.bm-hero.elementor-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 85% 15%, rgba(var(--bm-color-accent-rgb), 0.22) 0%, transparent 55%),
		radial-gradient(ellipse at 15% 95%, rgba(var(--bm-color-accent-rgb), 0.08) 0%, transparent 50%),
		linear-gradient(180deg, #0F0F12 0%, #15151A 100%);
	z-index: -2;
	pointer-events: none;
}
/* Textura de punts subtil (estil Tornados) */
.bm-hero.elementor-section::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 80%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 80%);
	z-index: -1;
	pointer-events: none;
}

/* Variant amb FOTO de fons: sense els degradats/textura foscos (taparien la foto). */
.bm-hero.bm-hero--photo.elementor-section::before,
.bm-hero.bm-hero--photo.elementor-section::after {
	display: none !important;
}

/* ── Carrusels dins de les tabs (torneos/camps) ───────────────────────────
 * CSS MÍNIM: la mida d'imatge es controla amb la "Image Resolution" del widget
 * (image_size_size = Large), NO forçant alçada per CSS. Aquí només estètica. */
.bm-photo-carousel img,
.bm-video-carousel .elementor-carousel-image {
	border-radius: 12px !important;
}
.bm-photo-carousel .elementor-swiper-button,
.bm-video-carousel .elementor-swiper-button {
	color: var(--bm-color-accent) !important;
}
.bm-photo-carousel .swiper-pagination-bullet-active,
.bm-video-carousel .swiper-pagination-bullet-active {
	background: var(--bm-color-accent) !important;
}

/* ── Títol — qualsevol Heading que NO sigui l'eyebrow (automàtic) ─────── */
.bm-hero .elementor-widget-heading:not(.bm-eyebrow) .elementor-heading-title {
	font-family: var(--bm-font-heading) !important;
	font-size: clamp(44px, 6vw, 88px) !important;
	font-weight: 800 !important;
	line-height: 1.02 !important;
	letter-spacing: -0.025em !important;
	color: #FFFFFF !important;
	margin: 0 0 22px !important;
	text-wrap: balance;
}
/* El span .bm-accent ja hereta el color accent des de variables.css */

/* ── Text/lead — qualsevol widget Text (automàtic) ───────────────────── */
.bm-hero .elementor-widget-text-editor,
.bm-hero .elementor-widget-text-editor p {
	font-family: var(--bm-font-body) !important;
	font-size: clamp(16px, 1.3vw, 19px) !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.72) !important;
	max-width: 640px;
	margin: 0 auto !important;
}

/* ── Eyebrow (opcional): etiqueta vermella amb barretes ──────────────── */
.bm-hero .elementor-widget-heading.bm-eyebrow,
.bm-hero .elementor-widget-heading.bm-eyebrow > .elementor-widget-container {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
}
.bm-hero .bm-eyebrow .elementor-heading-title {
	font-family: var(--bm-font-body) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.30em !important;
	text-transform: uppercase !important;
	color: var(--bm-color-accent) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	margin: 0 0 22px !important;
}
.bm-hero .bm-eyebrow .elementor-heading-title::before,
.bm-hero .bm-eyebrow .elementor-heading-title::after {
	content: '';
	width: 48px;
	height: 1px;
	background: var(--bm-color-accent);
	display: inline-block;
	flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.bm-hero.elementor-section {
		padding: 120px 20px 64px !important;
	}
}