/* ==========================================================================
   Archive — Product Category Pages
   Jay Anderson Art — jay-anderson-art theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Archive wrapper
   -------------------------------------------------------------------------- */

.jaa-archive {
	background-color: var(--color-paper-bg);
	padding-block-end: var(--space-xl);
}

/* --------------------------------------------------------------------------
   2. Archive header — label, heading, body + tab nav
   -------------------------------------------------------------------------- */

.jaa-archive__header {
	padding-block: var(--space-lg);
}

.jaa-archive__header-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	align-items: center;
}

.jaa-archive__label {
	margin-block-end: var(--space-xs);
}

.jaa-archive__heading {
	font-size: var(--text-2xl);
	line-height: 1.1;
	margin-block-end: var(--space-xs);
}

.jaa-archive__accent {
	font-style: italic;
	color: var(--color-brown-accent);
}

.jaa-archive__body {
	font-size: var(--text-sm);
	color: var(--color-black);
	max-width: 48ch;
	line-height: 1.6;
	margin: 0;
}

/* --------------------------------------------------------------------------
   3. Tab navigation
   -------------------------------------------------------------------------- */

.jaa-archive__tabs {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	border: var(--border-thin);
}

.jaa-archive__tab {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-black);
	text-decoration: none;
	padding: 0.875rem 1.25rem;
	white-space: nowrap;
	transition:
		background-color var(--transition-base),
		color var(--transition-base);
	border-right: var(--border-thin);
}

.jaa-archive__tab:last-child {
	border-right: none;
}

.jaa-archive__tab:hover {
	background-color: var(--color-paper-dk-bg);
}

.jaa-archive__tab--active {
	background-color: var(--color-black);
	color: var(--color-paper-bg);
}

.jaa-archive__tab--active:hover {
	background-color: var(--color-black);
	color: var(--color-paper-bg);
}

/* --------------------------------------------------------------------------
   4. Work count bar
   -------------------------------------------------------------------------- */

.jaa-archive__count-bar {
	border-top: var(--border-thin);
	border-bottom: var(--border-thin);
	padding-block: 0.75rem;
	margin-block-end: var(--space-md);
}

.jaa-archive__count {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-black);
	margin: 0;
}

/* --------------------------------------------------------------------------
   5. Masonry grid — CSS columns
   -------------------------------------------------------------------------- */

.jaa-archive__grid {
	columns: 3;
	column-gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jaa-archive__card {
	break-inside: avoid;
	margin-block-end: 0.5rem;
}

/* --------------------------------------------------------------------------
   6. Product card
   -------------------------------------------------------------------------- */

.jaa-archive__card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.jaa-archive__card-image {
	position: relative;
	overflow: hidden;
	line-height: 0;
}

/* Item 1 fix: preserve natural image dimensions — no forced crop */
.jaa-archive__card-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 500ms ease;
}

.jaa-archive__card--sold .jaa-archive__card-image img {
	filter: grayscale(40%);
}

/* Print editions — show full image with gray mat border */
.jaa-archive__card--print .jaa-archive__card-image {
	background-color: #808080;
	padding: 1px;
}

.jaa-archive__card--print .jaa-archive__card-image img {
	width: 100%;
	height: auto;
	display: block;
}

.jaa-archive__card-link:hover .jaa-archive__card-image img {
	transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   7. Hover overlay
   -------------------------------------------------------------------------- */

.jaa-archive__card-hover {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0.75rem 0.75rem 1.5rem;
	background: linear-gradient(
		to bottom,
		rgb(14 13 13 / 0) 40%,
		rgb(14 13 13 / 0.75) 100%
	);
	opacity: 0;
	transition: opacity 300ms ease;
}

.jaa-archive__card-link:hover .jaa-archive__card-hover {
	opacity: 1;
}

/* Item 2 fix: price on same line as title, right-aligned */
.jaa-archive__card-info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.jaa-archive__card-title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.jaa-archive__card-price {
	font-family: var(--font-sans);
	font-size: calc(var(--text-xs) * 1.25);
	font-weight: 500;
	color: var(--color-paper-bg);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Item 3 fix: hover text 125% larger */
.jaa-archive__card-title {
	font-family: var(--font-serif);
	font-size: calc(var(--text-md) * 1.25);
	font-weight: 400;
	color: var(--color-paper-bg);
	margin: 0;
}

.jaa-archive__card-meta {
	font-family: var(--font-sans);
	font-size: calc(var(--text-xs) * 1.25);
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: var(--color-paper-dk-bg);
	margin: 0;
}

.jaa-archive__card-cta {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--color-paper-bg);
	margin-block-start: 0.75rem;
}

/* --------------------------------------------------------------------------
   9. Empty state
   -------------------------------------------------------------------------- */

.jaa-archive__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-block: var(--space-xl);
	gap: var(--space-sm);
}

.jaa-archive__empty-label {
	color: var(--color-brown-accent);
}

.jaa-archive__empty-heading {
	font-size: var(--text-2xl);
	line-height: 1.1;
	margin: 0;
}

.jaa-archive__empty-body {
	font-size: var(--text-sm);
	color: var(--color-black);
	max-width: 44ch;
	line-height: 1.7;
	margin: 0;
}

.jaa-archive__empty-form {
	width: 100%;
	max-width: 420px;
	margin-block: var(--space-xs);
}

.jaa-archive__empty-link {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-black);
	text-decoration: none;
	transition: color var(--transition-base);
}

.jaa-archive__empty-link:hover {
	color: var(--color-brown-accent);
}

/* --------------------------------------------------------------------------
   10. Responsive — tablet (≤ 900px): 2 columns
   -------------------------------------------------------------------------- */

@media (width <= 900px) {
	.jaa-archive__header-inner {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.jaa-archive__tabs {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.jaa-archive__tab {
		border-bottom: var(--border-thin);
	}

	.jaa-archive__grid {
		columns: 2;
	}
}

/* --------------------------------------------------------------------------
   11. Responsive — mobile (≤ 600px): single column
   -------------------------------------------------------------------------- */

@media (width <= 600px) {
	.jaa-archive__header {
		padding-block: var(--space-md);
	}

	.jaa-archive__heading {
		font-size: var(--text-xl);
	}

	.jaa-archive__tabs {
		border: none;
		flex-direction: column;
		gap: 0.25rem;
	}

	.jaa-archive__tab {
		border: var(--border-thin);
		text-align: center;
	}

	.jaa-archive__grid {
		columns: 1;
	}
}