/*
 * CookInsta — Archive Styles
 *
 * Compiled to: assets/dist/css/archive.min.css
 * Loaded on: recipe post-type archive + CookInsta taxonomies
 * Depends on: main.min.css (design tokens, recipe card components)
 * RTL: logical CSS properties used throughout.
 */

/* ---------------------------------------------------------------------------
   Archive Layout
--------------------------------------------------------------------------- */

.ci-archive-page {
	padding-block: var(--ci-space-10) var(--ci-space-20);
}

.ci-archive-header {
	margin-block-end: var(--ci-space-10);
}

.ci-archive-title {
	font-size: var(--ci-font-size-3xl);
	font-weight: 700;
	color: var(--ci-dark);
	margin-block-end: var(--ci-space-2);
}

.ci-archive-description {
	font-size: var(--ci-font-size-base);
	color: var(--ci-muted);
	max-inline-size: 640px;
}

/* ---------------------------------------------------------------------------
   Toolbar (sort + view toggle)
--------------------------------------------------------------------------- */

.ci-archive-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ci-space-4);
	padding-block: var(--ci-space-4);
	border-block: 1px solid var(--ci-border);
	margin-block-end: var(--ci-space-8);
}

.ci-archive-count {
	font-size: var(--ci-font-size-sm);
	color: var(--ci-muted);
}

.ci-sort-select {
	padding: var(--ci-space-2) var(--ci-space-4);
	border: 1px solid var(--ci-border);
	border-radius: var(--ci-radius);
	font-family: var(--ci-font-body);
	font-size: var(--ci-font-size-sm);
	color: var(--ci-dark);
	background-color: var(--ci-white);
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Recipe Grid (archive variant — 4 columns)
--------------------------------------------------------------------------- */

.ci-archive-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ci-space-6);
	margin-block-end: var(--ci-space-10);
}

/* ---------------------------------------------------------------------------
   Filter Chips (taxonomy refinement)
--------------------------------------------------------------------------- */

.ci-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ci-space-2);
	margin-block-end: var(--ci-space-6);
}

.ci-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ci-space-1);
	padding: var(--ci-space-1) var(--ci-space-3);
	background-color: var(--ci-primary-light);
	color: var(--ci-primary);
	border-radius: var(--ci-radius-full);
	font-size: var(--ci-font-size-sm);
	font-weight: 500;
	text-decoration: none;
}

.ci-filter-chip:hover {
	background-color: var(--ci-primary);
	color: var(--ci-white);
}

.ci-filter-chip--active {
	background-color: var(--ci-primary);
	color: var(--ci-white);
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */

@media (max-width: 1280px) {
	.ci-archive-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

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

@media (max-width: 640px) {
	.ci-archive-grid {
		grid-template-columns: 1fr;
	}

	.ci-archive-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.ci-archive-title {
		font-size: var(--ci-font-size-2xl);
	}
}

/* ---------------------------------------------------------------------------
   Template-matching aliases
   (templates use these class names; CSS above used different names)
--------------------------------------------------------------------------- */

/* main wrapper: template outputs .ci-archive, not .ci-archive-page */
.ci-archive {
	padding-block: var(--ci-space-10) var(--ci-space-20);
}

/* archive description: template outputs .ci-page-description */
.ci-page-description {
	font-size: var(--ci-font-size-base);
	color: var(--ci-muted);
	max-inline-size: 640px;
}

/* chef archive grid: template outputs .ci-chefs-grid (4-col) */
.ci-chefs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ci-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1280px) {
	.ci-chefs-grid { grid-template-columns: repeat(3, 1fr); }
}

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

@media (max-width: 640px) {
	.ci-chefs-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Category Archive Hero
--------------------------------------------------------------------------- */

.ci-category-hero {
	position: relative;
	min-block-size: 280px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	margin-block-end: var(--ci-space-6);
}

.ci-category-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.ci-category-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.65) 100%);
}

.ci-category-hero__bg--gradient {
	background: linear-gradient(135deg, var(--ci-primary) 0%, #FF8A65 60%, #FD7014 100%);
}

.ci-category-hero__bg--gradient::after {
	display: none;
}

.ci-category-hero__content {
	position: relative;
	z-index: 1;
	padding-block: var(--ci-space-10);
	color: var(--ci-white);
}

.ci-category-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ci-space-1);
	padding: 4px 12px;
	border-radius: 100px;
	background: rgba(255,255,255,0.2);
	font-size: var(--ci-font-size-xs);
	font-weight: 600;
	margin-block-end: var(--ci-space-3);
	backdrop-filter: blur(4px);
}

.ci-category-hero__title {
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 800;
	color: var(--ci-white);
	margin-block-end: var(--ci-space-2);
	line-height: 1.2;
}

.ci-category-hero__desc {
	font-size: var(--ci-font-size-base);
	color: rgba(255,255,255,0.85);
	max-inline-size: 600px;
	line-height: 1.6;
	margin-block-end: var(--ci-space-2);
}

.ci-category-hero__count {
	font-size: var(--ci-font-size-sm);
	color: rgba(255,255,255,0.7);
}

/* ---------------------------------------------------------------------------
   Archive Breadcrumb (cuisine archive — same visual language as
   .ci-recipe__breadcrumb in recipe.min.css, redeclared here since that
   bundle isn't loaded on taxonomy archives)
--------------------------------------------------------------------------- */

.ci-archive__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: var(--ci-font-size-xs);
	color: var(--ci-muted);
	margin-block-end: var(--ci-space-3);
}

.ci-archive__breadcrumb a {
	color: var(--ci-dark);
	text-decoration: underline;
	text-decoration-color: var(--ci-border);
	text-underline-offset: 3px;
}

.ci-archive__breadcrumb a:hover {
	color: var(--ci-primary);
	text-decoration-color: var(--ci-primary);
}

/* ---------------------------------------------------------------------------
   Cuisine Archive — Featured / Related / Popular sections
--------------------------------------------------------------------------- */

.ci-cuisine-section {
	margin-block: var(--ci-space-8);
}

.ci-cuisine-section .ci-archive-title {
	font-size: var(--ci-font-size-xl);
	margin-block-end: var(--ci-space-4);
}