/* components/journal-detail-panel/index.less */
.detail-panel {
	width: 100%;
	height: 70vh;
	display: flex;
	background: var(--theme-bg-card);
	border-radius: 16rpx 16rpx 0 0;
	flex-direction: column;

	.detail-content {
		flex: 1;
		display: flex;
		overflow: hidden;
		flex-direction: column;

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

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

				.title {
					color: #333;
					display: flex;
					font-size: 32rpx;
					font-weight: 600;
					align-items: center;
					margin-bottom: 8rpx;

					.icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}
				}
			}

			.actions {
				gap: 16rpx;
				display: flex;
				flex-shrink: 0;
				align-items: center;

				.indicator {
					color: var(--theme-wx);
					padding: 4rpx 12rpx;
					font-size: 24rpx;
					font-weight: 600;
					border-radius: 12rpx;
					background: var(--theme-bg-journal);
				}
			}
		}

		.journals-swiper {
			flex: 1;
			height: 100%;

			.swiper-item-wrapper {
				height: 100%;

				.journal-item {
					height: 100%;
					display: flex;
					flex-direction: column;

					.journal-header {
						gap: 16rpx;
						display: flex;
						padding: 0 32rpx;
						flex-wrap: wrap;
						flex-shrink: 0;
						margin-bottom: 16rpx;
						align-items: baseline;

						.location {
							color: #666;
							flex-basis: 100%;
							font-size: 24rpx;
						}

						.date {
							flex: 1;
							color: #333;
							font-size: 28rpx;
							font-weight: 600;
						}

						.time {
							color: #999;
							font-size: 24rpx;
						}
					}

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

					.items-scroll {
						flex: 1;
						height: 100%;

						.items {
							padding: 0 32rpx 128rpx 32rpx;
							
							.wrapper {
								column-gap: 8rpx;
								column-count: 3;
								padding-bottom: 128rpx;

								.item {
									overflow: hidden;
									background: var(--theme-bg-card);
									break-inside: avoid;
									margin-bottom: 8rpx;

									&.thumbnail {
										width: 100%;
										display: block;
									}

									&.video {
										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;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}