/*
 * assets/css/archive-recipe.css
 * Template-specific styles for archive-recipe.php only (archive header,
 * recipe grid, difficulty pills, quick stats strip, pagination).
 * Enqueued conditionally via idia_enqueue_archive_recipe_assets()
 * (is_post_type_archive('recipe')).
 *
 * Pure CSS3 only. Consumes global.css variables exclusively.
 */

/* ==========================================================================
   Archive header
   ========================================================================== */

.idia-archive-header {
	padding: var(--space-xl) var(--space-sm) var(--space-md);
	text-align: center;
}

.idia-archive-title {
	margin-bottom: var(--space-sm);
}

.idia-archive-description {
	color: var(--idia-color-text);
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Section divider
   ========================================================================== */

.idia-section-divider {
	max-width: var(--idia-max-width);
	margin: var(--space-lg) auto;
	padding: 0 var(--space-sm);
}

.idia-section-divider img {
	width: 100%;
	max-height: 60px;
	object-fit: contain;
}

.idia-section { padding: var(--space-lg) 0; }

.idia-no-results {
	text-align: center;
	color: var(--idia-color-text-muted);
}

/* ==========================================================================
   Recipe grid — 3 desktop / 2 tablet / 1 mobile
   ========================================================================== */

.idia-recipe-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.idia-recipe-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.idia-recipe-card-media {
	display: block;
}

.idia-recipe-card-body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.idia-recipe-card-title {
	margin: 0;
	font-size: 1.25rem;
	text-transform: none;
}

.idia-recipe-card-title a {
	text-decoration: none;
}

.idia-recipe-card-title a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Difficulty pill — pastel background, dark-blue text, always accessible
   contrast regardless of which pastel variant is used.
   ========================================================================== */

.idia-difficulty-pill {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: var(--space-xxs) var(--space-sm);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--idia-color-dark-blue) !important;
}

.idia-difficulty-pill--easy { background-color: var(--idia-color-pastel-green); }
.idia-difficulty-pill--medium { background-color: var(--idia-color-pastel-yellow); }
.idia-difficulty-pill--hard { background-color: var(--idia-color-pastel-pink); }
.idia-difficulty-pill--default { background-color: var(--idia-color-pastel-blue); }

/* ==========================================================================
   Quick stats strip
   ========================================================================== */

.idia-recipe-quick-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--idia-color-pastel-blue);
	border-bottom: 1px solid var(--idia-color-pastel-blue);
	padding: var(--space-xs) 0;
}

.idia-recipe-quick-stats li {
	display: flex;
	flex-direction: column;
	font-size: 0.8125rem;
	margin: 0;
	min-width: 3.5rem;
}

.idia-stat-label {
	color: var(--idia-color-text-muted);
	text-transform: uppercase;
	font-size: 0.6875rem;
	letter-spacing: var(--letter-spacing-wide);
}

.idia-stat-value {
	color: var(--idia-color-dark-blue);
	font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Bake This Now CTA
   ========================================================================== */

.idia-recipe-cta {
	align-self: flex-start;
	margin-top: var(--space-xs);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.idia-pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--space-lg);
}

.idia-pagination .nav-links {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.idia-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 var(--space-xs);
	border-radius: 4px;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	color: var(--idia-color-dark-blue);
	text-decoration: none;
}

.idia-pagination .page-numbers:hover {
	background-color: var(--idia-color-pastel-blue);
}

.idia-pagination .page-numbers.current {
	background-color: var(--idia-color-dark-blue);
	color: var(--idia-color-white);
	font-weight: var(--font-weight-bold);
}

.idia-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--idia-color-focus-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

@media (max-width: 1024px) {
	.idia-recipe-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.idia-recipe-grid {
		grid-template-columns: 1fr;
	}

	.idia-recipe-quick-stats {
		gap: var(--space-xs);
	}

	.idia-recipe-quick-stats li {
		min-width: 3rem;
	}
}