/* Home view */

@layer components {
	.home-view {
		overflow-y: auto;
		flex: 1;
		min-height: 0;
	}

	.home-heading {
		font-size: var(--font-size-display);
		color: var(--color-text-heading);
		margin-block-end: var(--space-1);
	}

	.home-search {
		display: flex;
		flex-direction: column;
		margin-block-end: var(--space-5);
	}

	.home-nav-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
		margin-block-start: var(--space-7);

		@media (width <= 767px) {
			gap: var(--space-2);
		}
	}

	.home-nav-grid--column {
		grid-template-columns: 1fr;
	}

	.home-nav-tile {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
		padding: var(--space-5);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		text-decoration: none;
		color: var(--color-text-primary);
		min-height: 100px;
		text-align: center;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast);

		&:hover {
			background-color: var(--color-bg-surface);
			border-color: var(--color-accent-primary);
		}
	}

	.home-nav-tile--btn {
		background: none;
		cursor: pointer;

		&:active {
			background-color: var(--color-bg-surface);
		}

		&:focus-visible {
			outline: 2px solid var(--color-border-focus, var(--color-accent-primary));
			outline-offset: 2px;
		}
	}

	.home-nav-tile-icon {
		color: var(--color-accent-primary);
	}

	.home-nav-tile-title {
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-heading);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
	}

	.home-recent {
		margin-block-start: var(--space-6);
	}

	.home-recent-title {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-secondary);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wide);
		margin: 0 0 var(--space-2);
	}

	.home-recent-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-2) 0;
		border-block-end: 1px solid var(--color-border-default);
		text-decoration: none;
		color: var(--color-text-primary);

		&:last-child {
			border-block-end: none;
		}

		&:hover .home-recent-wine {
			text-decoration: underline;
		}
	}

	.home-wine-thumb {
		flex-shrink: 0;
		width: 2.5rem;
		height: 2.5rem;
		object-fit: contain;
		mix-blend-mode: multiply;
	}

	.home-recent-item-text {
		display: flex;
		flex-direction: column;
	}

	.home-recent-wine {
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-heading);
	}

	.home-recent-meta {
		font-size: var(--font-size-xs);
		color: var(--color-text-secondary);
	}

	/* Stock stat pair: current + desired steppers with floating labels above.
	   Labels are pulled out of flow (position: absolute) so only the button row
	   participates in flex alignment — no extra height from the labels. */
	.search-row-stock {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--space-4);
		--stat-item-gap: 0;
		--stat-item-value-size: var(--font-size-base);

		.stat-item {
			position: relative;
		}

		.stat-item .meta-label {
			position: absolute;
			inset-block-end: calc(100% + var(--space-1));
			inset-inline-start: 0;
			white-space: nowrap;
		}
	}
}