/* Drinking Window Timeline */

@layer components {
	/* Section wrappers */

	.timeline-section {
		margin-block-end: var(--space-7);

		&:last-child {
			margin-block-end: 0;
		}
	}

	/* Colored section header (past peak, drink now) */

	.timeline-section-header {
		--section-heading-border: var(--section-color, var(--color-border-default));
		margin-block-end: var(--space-4);
	}

	/* Shared compact bottle sizing */

	.timeline-flat-grid,
	.timeline-year-group .cellar-grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		padding-block: var(--space-2);
	}

	.timeline-flat-grid .cellar-bottle,
	.timeline-year-group .cellar-bottle {
		flex: 0 0 64px;
	}

	.timeline-flat-grid .cellar-bottle-stock,
	.timeline-year-group .cellar-bottle-stock {
		z-index: var(--z-raised);
	}

	.timeline-flat-grid .cellar-bottle-images,
	.timeline-year-group .cellar-bottle-images {
		max-height: 170px;
	}

	.timeline-flat-grid .cellar-bottle-image-container,
	.timeline-year-group .cellar-bottle-image-container {
		align-items: flex-end;
	}

	.timeline-flat-grid .cellar-bottle-name,
	.timeline-year-group .cellar-bottle-name {
		font-size: var(--font-size-xs);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 64px;
	}

	.timeline-flat-grid .cellar-bottle-vintage,
	.timeline-year-group .cellar-bottle-vintage {
		display: none;
	}

	/* Year sub-groups (future section) */

	.timeline-year-group {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-block-end: var(--space-3);

		&:last-child {
			margin-block-end: 0;
		}
	}

	.timeline-year-label {
		writing-mode: vertical-lr;
		transform: rotate(180deg);
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-semibold);
		letter-spacing: var(--letter-spacing-wide);
		color: var(--color-text-inverse);
		background: var(--color-accent-secondary);
		padding: var(--space-3) var(--space-2);
		flex-shrink: 0;
		align-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
		user-select: none;
	}

	/* Empty state */

	.timeline-empty {
		text-align: center;
		color: var(--color-text-secondary);
		padding-block: var(--space-9);
		font-size: var(--font-size-base);
	}

	/* Excluded-wines footnote */

	.timeline-footnote {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
		font-style: italic;
		padding-block-start: var(--space-3);
	}

	/* Mobile */

	@media (width <= 767px) {
		.timeline-section-header {
			position: sticky;
			top: 0;
			background: var(--color-bg-base);
			box-shadow: var(--shadow-below);
			z-index: var(--z-sticky);
			padding-block: var(--space-3);
			margin-inline: calc(var(--space-4) * -1);
			padding-inline: var(--space-4);
		}
	}
}