/* pages/main/journal-map/index.less */
.container {
	width: 100%;
	height: 100vh;
	position: fixed;
	overflow: hidden;

	.map {
		width: 100%;
		height: 100%;
	}

	.custom-callout {
		width: fit-content;
		max-width: 400rpx;
		background: #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
		border-radius: 6rpx;

		.callout-content {
			display: flex;
			padding: 8rpx 16rpx 8rpx 8rpx;
			align-items: flex-start;

			.thumb-container {
				width: 72rpx;
				height: 72rpx;
				flex-shrink: 0;
				margin-right: 12rpx;
				overflow: hidden;
				border-radius: 6rpx;

				.thumb {
					width: 100%;
					height: 100%;
				}
			}

			.text-container {
				flex: 1;
				display: flex;
				overflow: hidden;
				flex-direction: column;

				.location {
					flex: 1;
					color: #999;
					display: flex;
					overflow: hidden;
					font-size: 24rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 8rpx;
				}

				.idea {
					color: #333;
					display: -webkit-box;
					font-size: 26rpx;
					line-height: 1.4;
					overflow: hidden;
					-webkit-line-clamp: 3;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	.loading {
		top: 50%;
		left: 50%;
		z-index: 1000;
		position: fixed;
		transform: translate(-50%, -50%);

		.loading-text {
			color: #666;
			padding: 24rpx 48rpx;
			background: #fff;
			border-radius: 8rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
		}
	}

	.marker-detail {
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		position: fixed;
		background: #FFF;
		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, .15);
		border-radius: 24rpx 24rpx 0 0;
		flex-direction: column;

		.detail-content {
			flex: 1;
			display: flex;
			padding: 32rpx;
			flex-direction: column;

			.header {
				display: flex;
				flex-shrink: 0;
				margin-bottom: 16rpx;
				align-items: flex-start;
				justify-content: space-between;

				.info {
					flex: 1;
					display: flex;
					flex-direction: column;

					.date {
						color: #333;
						font-size: 32rpx;
						font-weight: 600;
						margin-bottom: 8rpx;
					}

					.location {
						color: #666;
						display: flex;
						font-size: 26rpx;
						align-items: center;

						.icon {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				.close {
					width: 48rpx;
					height: 48rpx;
					color: #999;
					display: flex;
					font-size: 48rpx;
					line-height: 1;
					flex-shrink: 0;
					align-items: center;
					justify-content: center;
				}
			}

			.idea {
				color: #333;
				display: block;
				font-size: 28rpx;
				line-height: 1.6;
				flex-shrink: 0;
				margin-bottom: 16rpx;
			}

			.items {
				flex: 1;
				overflow: scroll;

				.wrapper {
					position: relative;
					column-gap: .25rem;
					column-count: 3;
					padding-bottom: 2rem;
		
					.item {
						overflow: hidden;
						background: var(--theme-bg-card);
						break-inside: avoid;
						margin-bottom: .25rem;
		
						&.thumbnail {
							width: 100%;
							display: block;
						}
		
						&.video {
							height: auto;
							position: relative;
		
							&::after {
								content: "";
								top: 50%;
								left: 53%;
								width: 0;
								height: 0;
								position: absolute;
								transform: translate(-50%, -50%);
								border-top: 16px solid transparent;
								border-left: 24px solid var(--theme-video-play);
								border-bottom: 16px solid transparent;
								pointer-events: none;
							}
						}
					}
				}
			}
		}
	}
}