/* Braz Posts Cards — Barra de Informações da Cidade */

/* ── Card / container ─────────────────────────── */
.bpc-ci {
	--bpc-ci-basis: 0%;
	--bpc-ci-icon-gap: 12px;
	--bpc-ci-gap: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--bpc-ci-gap);
	box-sizing: border-box;
	background-color: #ffffff;
	border-radius: 16px;
	padding: 16px 22px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* ── Célula ───────────────────────────────────── */
.bpc-ci__cell {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--bpc-ci-icon-gap);
	flex: 1 1 var(--bpc-ci-basis, 0%);
	min-width: 0; /* permite encolher e quebrar textos longos */
	box-sizing: border-box;
}

/* Divisória vertical entre células (não aparece na primeira de cada linha) */
.bpc-ci--dividers .bpc-ci__cell::before {
	content: "";
	position: absolute;
	left: calc(var(--bpc-ci-gap, 20px) / -2);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background-color: #e6e6e6;
}

/* Esconde a divisória quando a célula inicia uma linha (encostada na esquerda) */
.bpc-ci--dividers .bpc-ci__cell:first-child::before {
	display: none;
}

/* ── Ícone (quadrado arredondado) ─────────────── */
.bpc-ci__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background-color: #2563eb;
	color: #ffffff;
	line-height: 1;
}

.bpc-ci__icon i   { font-size: 20px; }
.bpc-ci__icon svg { width: 20px; height: 20px; fill: currentColor; }

/* ── Bloco de texto ───────────────────────────── */
.bpc-ci__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bpc-ci__label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #8a8f98;
}

.bpc-ci__value {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: #1f2430;
	word-break: break-word;
}

.bpc-ci__value a {
	color: inherit;
	text-decoration: none;
}

.bpc-ci__value a:hover {
	text-decoration: underline;
}

/* ── Ônibus: linhas destino + horário ─────────── */
.bpc-ci-bus__row {
	display: block;
	line-height: 1.3;
}

.bpc-ci-bus__dest {
	color: #8a8f98;
	font-weight: 600;
}

.bpc-ci-bus__time {
	font-weight: 700;
}

/* ── Emergência ───────────────────────────────── */
.bpc-ci-emerg__item {
	white-space: nowrap;
}

/* ── Estado vazio (editor) ────────────────────── */
.bpc-ci-vazio {
	font-size: 14px;
}

/* ── Responsivo ───────────────────────────────── */

/* Na grade 2×2 / empilhado (padrão em tablet e mobile) a divisória
   vertical fica solta no início da 2ª linha — então só a mantemos na
   linha única (desktop). */
@media (max-width: 1024px) {
	.bpc-ci--dividers .bpc-ci__cell::before {
		display: none;
	}
}

@media (max-width: 767px) {
	.bpc-ci {
		padding: 14px 16px;
		gap: 14px;
	}
}