/* Archive Torneos — /tornejos/
 * Listado de torneos. Reutiliza la estética de `bm-event-col` de home.css y
 * añade su propia tipografía oversize en la cabecera del archive.
 */

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

/* ── Grid de cards ────────────────────────────────────────────────── */
.bm-archive__grid {
	padding: 96px 24px 112px;
}
.bm-archive__grid-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 32px;
}

.bm-card-torneo {
	background: var(--bm-color-bg-alt);
	border-radius: var(--bm-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--bm-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease;
}
.bm-card-torneo:hover {
	transform: translateY(-4px);
	box-shadow: var(--bm-shadow-lg);
}

.bm-card-torneo:hover .bm-card-torneo__media img {
	transform: scale(1.04);
}
.bm-card-torneo__body .bm-w-eyebrow {
	margin: 0;
	font-family: var(--bm-font-body);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bm-color-accent);
	font-weight: 700;
}
.bm-card-torneo__body .bm-w-title {
	margin: 0;
	font-family: var(--bm-font-heading);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.bm-card-torneo__body .bm-w-title a {
	color: var(--bm-color-text);
	text-decoration: none;
}
.bm-card-torneo__body .bm-w-title a:hover {
	color: var(--bm-color-accent);
}

/* ── Estado vacío ────────────────────────────────────────────────── */
.bm-archive__empty .bm-w-eyebrow {
	font-family: var(--bm-font-body);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bm-color-accent);
	margin: 0;
	font-weight: 700;
}
.bm-archive__empty .bm-w-title {
	font-family: var(--bm-font-heading);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	margin: 0;
}
.bm-archive__empty .bm-w-lead {
	color: var(--bm-color-text-soft);
	max-width: 480px;
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
 * EDICIONS ANTERIORS — videos grid + carrusel de imatges
 * Datos desde ACF Options. Aparece solo si hay contenido.
 * ═══════════════════════════════════════════════════════════════════ */
.bm-archive__edicions {
	background: var(--bm-color-bg-alt);
	color: var(--bm-color-text);
	padding: 112px 24px;
	position: relative;
	border-top: 1px solid var(--bm-color-border);
	border-bottom: 1px solid var(--bm-color-border);
}
.bm-archive__edicions-head .bm-w-eyebrow {
	font-family: var(--bm-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.30em;
	text-transform: uppercase;
	color: var(--bm-color-accent);
	margin: 0 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.bm-archive__edicions-head .bm-w-eyebrow::before,
.bm-archive__edicions-head .bm-w-eyebrow::after {
	content: '';
	width: 48px;
	height: 1px;
	background: var(--bm-color-accent);
	display: inline-block;
}
.bm-archive__edicions-head .bm-w-title {
	font-family: var(--bm-font-heading);
	font-size: clamp(36px, 4.4vw, 72px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--bm-color-text);
	margin: 0 0 18px;
}
.bm-archive__edicions-head .bm-w-lead {
	font-family: var(--bm-font-body);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.6;
	color: var(--bm-color-text-soft);
	margin: 0;
}

/* Hero /tornejos/ i /camps/ → patró canònic compartit a inner-hero.css
 * (mateixa cascada que estajos / contacte / legals). NO duplicar estils aquí.
 *
 * CTA final /tornejos/ i /camps/ → patró canònic compartit a estajos.css
 * (.bm-section-{estajos,tornejos,camps}-cta). NO duplicar estils aquí. */

/* ════════════════════════════════════════════════════════════════
 * Sub-headers tipogràfics dins /tornejos/ Edicions anteriors
 * (Vídeos · Resums..., Galeria · Imatges destacades).
 * Tipogràfia editorial: línia divisòria + eyebrow accent.
 * ════════════════════════════════════════════════════════════════ */
.bm-section-tornejos-edicions .bm-edicions__sub .elementor-heading-title {
	font-family: var(--bm-font-body) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	margin: 48px 0 28px !important;
	padding-bottom: 14px !important;
	border-bottom: 1px solid var(--bm-color-border);
}
.bm-section-tornejos-edicions .bm-edicions__title .elementor-heading-title {
	font-family: var(--bm-font-heading) !important;
	font-size: clamp(36px, 4.4vw, 64px) !important;
	font-weight: 800 !important;
	line-height: 1.04 !important;
	letter-spacing: -0.025em !important;
	margin: 0 0 16px !important;
}

/* ════════════════════════════════════════════════════════════════
 * Inner section dels vídeos (Edicions anteriors) → omple tota l'amplada
 * de la columna pare. Per defecte el .elementor-container intern queda
 * constret a ~960px i deixa els vídeos petits.
 * ════════════════════════════════════════════════════════════════ */
.bm-section-tornejos-edicions .bm-edicions__videos-row > .elementor-container {
	max-width: 100% !important;
	width: 100% !important;
}
.bm-section-tornejos-edicions .elementor-widget-video,
.bm-section-tornejos-edicions .elementor-widget-video .elementor-widget-container {
	width: 100%;
}
/* El widget de video renderitza: .elementor-wrapper > iframe.
 * Apliquem aspect-ratio + radius + overflow al wrapper perquè l'iframe
 * quedi clipat amb les cantonades arrodonides. */
.bm-section-tornejos-edicions .elementor-widget-video .elementor-wrapper {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--bm-radius-lg);
	overflow: hidden;
	background: #000;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.bm-section-tornejos-edicions .elementor-widget-video iframe {
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
	border-radius: var(--bm-radius-lg);  /* fallback Safari, que ignora overflow:hidden en iframe */
}

/* ── Variant: widget natiu image-gallery d'Elementor (.bm-image-gallery-grid) ─
 * Usat a /estajos/. Classe SEPARADA de .bm-edicions-grid per NO interferir amb
 * el grid de /tornejos/ Edicions anteriors (que usa markup PHP custom).
 *
 * Markup del widget: .bm-image-gallery-grid > .elementor-widget-container >
 *                    .elementor-image-gallery > .gallery > .gallery-item >
 *                    .gallery-icon > <a> > <img>
 *
 * WordPress gallery default CSS aplica float:left, max-width:33.33%, etc.
 * Aquí els neutralitzem i muntem el grid 3×3. */
.bm-image-gallery-grid > .elementor-widget-container,
.bm-image-gallery-grid .elementor-image-gallery {
	width: 100% !important;
}
.bm-image-gallery-grid .gallery {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 16px !important;
	margin: 0 !important;
	width: 100% !important;
}
.bm-image-gallery-grid .gallery-item {
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	float: none !important;
}
.bm-image-gallery-grid .gallery-icon {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--bm-radius-lg);
	overflow: hidden;
	background: var(--bm-color-bg);
	margin: 0 !important;
	padding: 0 !important;
	transition:
		transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.bm-image-gallery-grid .gallery-icon a {
	display: block;
	width: 100%;
	height: 100%;
}
.bm-image-gallery-grid .gallery-icon img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bm-image-gallery-grid .gallery-item:hover .gallery-icon {
	transform: translateY(-4px);
	box-shadow: var(--bm-shadow-lg);
}
.bm-image-gallery-grid .gallery-item:hover .gallery-icon img {
	transform: scale(1.04);
}
.bm-image-gallery-grid .gallery-caption {
	display: none !important;
}
/* Hide items extra al widget image-gallery quan són >9 i el grid NO està expandit.
 * El JS marca els items 10+ amb la classe --extra. */
.bm-image-gallery-grid .gallery-item.bm-edicions-grid__item--extra {
	display: none !important;
}
.bm-image-gallery-grid.is-expanded .gallery-item.bm-edicions-grid__item--extra {
	display: block !important;
	animation: bm-grid-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (max-width: 1024px) {
	.bm-image-gallery-grid .gallery { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
	.bm-image-gallery-grid .gallery { grid-template-columns: 1fr !important; }
}
@keyframes bm-grid-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
	.bm-archive__edicions { padding: 80px 20px; }
}

/* ════════════════════════════════════════════════════════════════
 * CTA final — patró canònic compartit (estajos, tornejos, camps).
 * Negre plà, text blanc, eyebrow gris translúcid centrat, títol oversized.
 * Mateixa cascada que estajos perquè el client vegi un patró ÚNIC.
 * ════════════════════════════════════════════════════════════════ */
.bm-section-estajos-cta.elementor-section,
.bm-section-tornejos-cta.elementor-section,
.bm-section-camps-cta.elementor-section {
	background: var(--bm-color-text) !important;
	color: #FFFFFF;
	text-align: center;
}
.bm-section-estajos-cta > .elementor-container,
.bm-section-tornejos-cta > .elementor-container,
.bm-section-camps-cta > .elementor-container {
	max-width: 720px !important;
	margin: 0 auto !important;
}
/* home.css aplica `display: inline-flex` al widget eyebrow → enganxa el heading
 * a l'esquerra. Forcem widget a flex + justify-content: center per centrar. */
.bm-section-estajos-cta .elementor-widget-heading.bm-w-eyebrow,
.bm-section-tornejos-cta .elementor-widget-heading.bm-w-eyebrow,
.bm-section-camps-cta .elementor-widget-heading.bm-w-eyebrow {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
}
.bm-section-estajos-cta .elementor-widget-heading.bm-w-eyebrow > .elementor-widget-container,
.bm-section-tornejos-cta .elementor-widget-heading.bm-w-eyebrow > .elementor-widget-container,
.bm-section-camps-cta .elementor-widget-heading.bm-w-eyebrow > .elementor-widget-container {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
}
.bm-section-estajos-cta .bm-w-eyebrow .elementor-heading-title,
.bm-section-tornejos-cta .bm-w-eyebrow .elementor-heading-title,
.bm-section-camps-cta .bm-w-eyebrow .elementor-heading-title {
	font-family: var(--bm-font-body) !important;
	font-size: 13px !important;
	letter-spacing: 0.28em !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	color: rgba(255,255,255,0.6) !important;
	margin-bottom: 18px !important;
	display: block !important;  /* override inline-flex de home.css */
}
/* Ocultem la barrita ::before que home.css aplica globalment a .bm-w-eyebrow.
 * El CTA canònic (estajos pattern) NO porta barres — només text uppercase gris. */
.bm-section-estajos-cta .bm-w-eyebrow .elementor-heading-title::before,
.bm-section-tornejos-cta .bm-w-eyebrow .elementor-heading-title::before,
.bm-section-camps-cta .bm-w-eyebrow .elementor-heading-title::before {
	display: none !important;
	content: none !important;
}
.bm-section-estajos-cta .bm-w-title .elementor-heading-title,
.bm-section-tornejos-cta .bm-w-title .elementor-heading-title,
.bm-section-camps-cta .bm-w-title .elementor-heading-title {
	font-family: var(--bm-font-heading) !important;
	font-size: clamp(36px, 5vw, 64px) !important;
	font-weight: 900 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	color: #FFFFFF !important;
	margin-bottom: 28px !important;
}
/* Lead — selectors flexibles perquè Elementor pot ometre .elementor-widget-container
 * en algunes versions de text-editor (com aquí). Apuntem directament al <p>. */
.bm-section-tornejos-cta .bm-w-lead,
.bm-section-tornejos-cta .bm-w-lead p,
.bm-section-camps-cta .bm-w-lead,
.bm-section-camps-cta .bm-w-lead p {
	font-family: var(--bm-font-body) !important;
	font-size: 17px !important;
	line-height: 1.55 !important;
	color: rgba(255,255,255,0.75) !important;
	text-align: center !important;
}
.bm-section-tornejos-cta .bm-w-lead,
.bm-section-camps-cta .bm-w-lead {
	max-width: 560px;
	margin: 0 auto 28px;
}
@media (max-width: 768px) {
	.bm-section-estajos-cta.elementor-section,
	.bm-section-tornejos-cta.elementor-section,
	.bm-section-camps-cta.elementor-section { padding: 64px 20px 80px !important; }
}

/* ── Botón global (también utilizable fuera de archive) ──────────── */
.bm-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	border-radius: 9999px;
	font-family: var(--bm-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
	border: 0;
	cursor: pointer;
}
.bm-btn--accent {
	background: var(--bm-color-accent);
	color: #FFFFFF;
}
.bm-btn--accent:hover {
	background: var(--bm-color-accent-hover);
	color: #FFFFFF;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.bm-archive__grid { padding: 16px 20px 64px; }
	.bm-archive__grid-inner { gap: 20px; }
	.bm-archive__cta { padding: 64px 20px; }
}