.station-train-list {
	display: grid;
	gap: 12px;
}

.station-train-card {
	display: block;
	border: 1px solid var(--primary-surface-border);
	border-radius: 14px;
	background: color-mix(in srgb, var(--background) 94%, var(--primary-color));
	color: var(--color);
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
}

.station-train-card:hover {
	border-color: var(--primary-color);
	transform: translateY(-1px);
}

.station-train-card__top {
	display: grid;
	grid-template-columns: 160px minmax(220px, 1.5fr) minmax(260px, 1.4fr);
	align-items: center;
	gap: 18px;
	padding: 16px;
}

.station-train-card__number {
	font-size: clamp(1.7rem, 3vw, 2.2rem);
	line-height: 1;
	font-weight: 800;
	padding: 18px 14px;
	border-radius: 12px;
	text-align: left;
	border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
	background: color-mix(in srgb, var(--background) 90%, var(--primary-color));
}

.station-train-card__name {
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.25;
}

.station-train-card__name-bn {
	color: color-mix(in srgb, var(--color) 70%, transparent);
	font-size: .92rem;
}

.station-train-card__type {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	border: 1px solid color-mix(in srgb, var(--primary-color) 55%, transparent);
	border-radius: 999px;
	color: var(--primary-color);
	padding: 3px 12px;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}





.station-train-card__train-icon {
	color: var(--primary-color);
	font-size: 1.28rem;
	margin-right: 8px;
}

.station-train-card__pin {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--primary-color);
	position: relative;
}

.station-train-card__pin::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 6px;
	height: 6px;
	background: var(--primary-color);
	transform: translateX(-50%) rotate(45deg);
}



.station-train-card__bottom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 16px;
	border-top: 1px solid color-mix(in srgb, var(--primary-surface-border) 80%, transparent);
	background: color-mix(in srgb, var(--background) 96%, var(--secondary-color));
}



.station-train-card__offday-bn {
	color: color-mix(in srgb, var(--color) 70%, transparent);
	font-size: .86rem;
}

.ta-right {
	text-align: right;
}

@media (max-width: 1060px) {
	.station-train-card__top {
		grid-template-columns: 1fr;
	}


}

@media (max-width: 640px) {
	.station-train-card__top {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.station-train-card__number {
		width: fit-content;
		min-width: 96px;
	}

}