/* BC Bubble Popup — patrón «Premios por récord»
 * Cambia los colores de marca en estas dos variables. */
.bcbp-records {
	--rec-ink: #0b2185;     /* azul de marca */
	--rec-accent: #f6b13c;  /* amarillo/naranja de marca */
	--rec-line: color-mix(in srgb, var(--rec-ink) 14%, transparent);
	--rec-muted: color-mix(in srgb, var(--rec-ink) 62%, #fff);
	color: var(--rec-ink);
}

/* Temas clásicos (GeneratePress): WordPress envuelve el contenido de cada Grupo en
 * .wp-block-group__inner-container. Con display: contents ese envoltorio deja de
 * contar y los hijos vuelven a ser elementos de la rejilla / flex. */
.bcbp-records .wp-block-group__inner-container {
	display: contents;
}

/* Sin márgenes del tema: el espaciado se controla con gap y padding */
.bcbp-records.bcbp-records :is(p, h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

.bcbp-records .bcbp-records-title {
	text-align: center;
	color: var(--rec-ink);
	line-height: 1.05;
	font-size: clamp(1.4rem, 3.4vw, 2.1rem);
}

.bcbp-records .bcbp-records-intro {
	text-align: center;
	color: var(--rec-muted);
	padding-top: .4em;
	font-size: 1.05rem;
}

/* Rejilla de tarjetas */
.bcbp-records .bcbp-records-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-top: 26px;
}

.bcbp-records .bcbp-record-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--rec-line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--rec-ink) 60%, transparent);
}

/* Cabecera: distancia + premio */
.bcbp-records .bcbp-record-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 8px;
	padding: 12px 14px;
	background: var(--rec-ink);
	color: #fff;
}

.bcbp-records .bcbp-record-distance {
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	letter-spacing: -.01em;
}

.bcbp-records .bcbp-record-prize {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px 5px 8px;
	border-radius: 999px;
	background: var(--rec-accent);
	color: var(--rec-ink);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Icono medalla */
.bcbp-records .bcbp-record-prize::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 2h9.6L14 8.5h-4z'/%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='m12 12.5.9 1.6 1.7.3-1.3 1.2.3 1.8-1.6-.9-1.6.9.3-1.8-1.3-1.2 1.7-.3z' fill='black' stroke-width='0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 2h9.6L14 8.5h-4z'/%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='m12 12.5.9 1.6 1.7.3-1.3 1.2.3 1.8-1.6-.9-1.6.9.3-1.8-1.3-1.2 1.7-.3z' fill='black' stroke-width='0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Filas de récord */
.bcbp-records .bcbp-record-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 14px 14px;
}

.bcbp-records .bcbp-record-row + .bcbp-record-row {
	border-top: 1px dashed var(--rec-line);
}

.bcbp-records .bcbp-record-label {
	font-size: .78rem;
	line-height: 1.2;
	color: var(--rec-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.bcbp-records .bcbp-record-label::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rec-ink);
	flex: none;
}

.bcbp-records .bcbp-record-row + .bcbp-record-row .bcbp-record-label::before {
	background: var(--rec-accent);
}

.bcbp-records .bcbp-record-name {
	font-size: .98rem;
	line-height: 1.2;
	font-weight: 600;
}

.bcbp-records .bcbp-record-time {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 2px;
	font-size: 1.55rem;
	line-height: 1;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
	color: var(--rec-ink);
}

/* Icono cronómetro */
.bcbp-records .bcbp-record-time::before {
	content: "";
	width: .7em;
	height: .7em;
	flex: none;
	background: var(--rec-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3Cpath d='M12 14V10M10 2h4M19 6l-1.5 1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3Cpath d='M12 14V10M10 2h4M19 6l-1.5 1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Móvil: dos columnas compactas */
@media (max-width: 480px) {
	.bcbp-records .bcbp-records-title { padding-inline: 30px; }
	.bcbp-records .bcbp-records-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bcbp-records .bcbp-record-head { padding: 10px 12px; }
	.bcbp-records .bcbp-record-distance { font-size: 1.6rem; }
	.bcbp-records .bcbp-record-prize { font-size: .9rem; }
	.bcbp-records .bcbp-record-row { padding: 10px 12px 12px; }
	.bcbp-records .bcbp-record-time { font-size: 1.25rem; }
}
