/**
 * Intimacy Insight — Archive, Category, Search & Author Styles (Phase 5)
 * ------------------------------------------------------------------
 * Consumes design-tokens.css exclusively (locked brand palette only).
 * Shared by templates/archive.php, category.php, search.php, author.php.
 * Reuses .ii-card, .ii-container, .ii-section__title, .ii-btn from the
 * existing homepage/single component library — only NEW, archive-
 * specific classes are defined here.
 */

/* ====================================================================
   1. ARCHIVE HERO (generic + category + search + author variants)
   ==================================================================== */

.ii-archive-hero {
	background-color: var(--ii-color-bg-alt);
	border-bottom: 1px solid var(--ii-color-border);
	padding-block: var(--ii-space-8);
	text-align: center;
}

.ii-archive-hero__title {
	font-size: var(--ii-text-4xl);
	font-weight: var(--ii-weight-bold);
	color: var(--ii-color-text-primary);
	line-height: var(--ii-leading-tight);
	margin-bottom: var(--ii-space-3);
}

.ii-archive-hero__description {
	font-size: var(--ii-text-lg);
	color: var(--ii-color-text-secondary);
	max-width: 680px;
	margin: 0 auto;
	line-height: var(--ii-leading-relaxed);
}

.ii-archive-hero__query {
	color: var(--ii-color-primary-dark);
}

/* Category variant */
.ii-archive-hero--category {
	text-align: left;
}

.ii-archive-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--ii-radius-full);
	margin-bottom: var(--ii-space-4);
}

.ii-archive-hero__icon .ii-icon {
	width: 28px;
	height: 28px;
}

.ii-archive-hero__icon--health {
	color: var(--ii-color-primary-dark);
	background-color: var(--ii-color-primary-light);
}

.ii-archive-hero__icon--business {
	color: var(--ii-color-secondary);
	background-color: rgba(30, 58, 138, 0.08);
}

.ii-archive-hero__parent-link {
	margin-bottom: var(--ii-space-3);
}

.ii-archive-hero__parent-link a {
	display: inline-flex;
	align-items: center;
	gap: var(--ii-space-2);
	font-size: var(--ii-text-sm);
	font-weight: var(--ii-weight-medium);
	color: var(--ii-color-text-secondary);
	text-decoration: none;
}

.ii-archive-hero__parent-link a:hover {
	color: var(--ii-color-primary-dark);
}

.ii-archive-hero__parent-link .ii-icon {
	width: 14px;
	height: 14px;
}

.ii-archive-hero--category .ii-archive-hero__description {
	margin: 0 0 var(--ii-space-4);
}

.ii-archive-hero__count {
	font-size: var(--ii-text-sm);
	color: var(--ii-color-text-secondary);
	font-weight: var(--ii-weight-medium);
	margin-bottom: var(--ii-space-5);
}

.ii-archive-hero__children-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ii-space-2);
}

.ii-archive-hero__child-pill {
	display: inline-block;
	padding: 6px var(--ii-space-4);
	font-size: var(--ii-text-sm);
	font-weight: var(--ii-weight-medium);
	color: var(--ii-color-text-secondary);
	background-color: var(--ii-color-bg);
	border: 1px solid var(--ii-color-border);
	border-radius: var(--ii-radius-full);
	text-decoration: none;
	transition: color var(--ii-transition-fast), border-color var(--ii-transition-fast);
}

.ii-archive-hero__child-pill:hover {
	color: var(--ii-color-primary-dark);
	border-color: var(--ii-color-primary);
}

/* Search variant */
.ii-archive-hero__search-form {
	display: flex;
	align-items: center;
	gap: var(--ii-space-3);
	max-width: 560px;
	margin: var(--ii-space-5) auto 0;
	background-color: var(--ii-color-bg);
	border: 1px solid var(--ii-color-border);
	border-radius: var(--ii-radius-full);
	padding: var(--ii-space-2) var(--ii-space-2) var(--ii-space-2) var(--ii-space-5);
}

.ii-archive-hero__search-form:focus-within {
	border-color: var(--ii-color-primary);
	box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.12);
}

.ii-archive-hero__search-icon {
	display: flex;
	color: var(--ii-color-text-secondary);
	flex-shrink: 0;
}

.ii-archive-hero__search-icon .ii-icon {
	width: 20px;
	height: 20px;
}

.ii-archive-hero__search-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--ii-font-body);
	font-size: var(--ii-text-base);
	color: var(--ii-color-text-primary);
	min-width: 0;
}

.ii-archive-hero__popular-cats {
	margin-top: var(--ii-space-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ii-space-3);
	justify-content: center;
	align-items: center;
	font-size: var(--ii-text-sm);
}

.ii-archive-hero__quick-label {
	color: var(--ii-color-text-secondary);
	font-weight: var(--ii-weight-medium);
}

.ii-archive-hero__popular-cats a {
	color: var(--ii-color-primary-dark);
	text-decoration: none;
	font-weight: var(--ii-weight-medium);
}

.ii-archive-hero__popular-cats a:hover {
	text-decoration: underline;
}

/* Author hero variant */
.ii-author-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ii-space-5);
	text-align: center;
}

.ii-author-hero__photo img {
	width: 120px;
	height: 120px;
	border-radius: var(--ii-radius-full);
	object-fit: cover;
	border: 4px solid var(--ii-color-bg);
	box-shadow: var(--ii-shadow-md);
}

.ii-author-hero__name {
	font-size: var(--ii-text-3xl);
	font-weight: var(--ii-weight-bold);
	color: var(--ii-color-text-primary);
	margin-bottom: var(--ii-space-2);
}

.ii-author-hero__credentials {
	font-size: var(--ii-text-base);
	color: var(--ii-color-primary-dark);
	font-weight: var(--ii-weight-medium);
	margin-bottom: var(--ii-space-3);
}

.ii-author-hero__bio {
	font-size: var(--ii-text-base);
	color: var(--ii-color-text-secondary);
	max-width: 640px;
	margin: 0 auto var(--ii-space-4);
	line-height: var(--ii-leading-relaxed);
}

.ii-author-hero__expertise {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ii-space-2);
	justify-content: center;
	margin-bottom: var(--ii-space-4);
}

.ii-author-hero__expertise-pill {
	padding: 4px var(--ii-space-3);
	font-size: var(--ii-text-xs);
	font-weight: var(--ii-weight-medium);
	color: var(--ii-color-primary-dark);
	background-color: var(--ii-color-primary-light);
	border-radius: var(--ii-radius-full);
	text-decoration: none;
}

.ii-author-hero__social {
	display: flex;
	gap: var(--ii-space-3);
	justify-content: center;
	margin-bottom: var(--ii-space-5);
}

.ii-author-hero__stats {
	display: flex;
	gap: var(--ii-space-7);
	justify-content: center;
	margin: 0;
}

.ii-author-hero__stat dt {
	font-size: var(--ii-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ii-color-text-secondary);
	font-weight: var(--ii-weight-semibold);
}

.ii-author-hero__stat dd {
	font-size: var(--ii-text-2xl);
	font-weight: var(--ii-weight-bold);
	color: var(--ii-color-text-primary);
	margin: 0;
}

@media (min-width: 768px) {
	.ii-author-hero__inner {
		flex-direction: row;
		text-align: left;
		align-items: flex-start;
	}

	.ii-author-hero__bio {
		margin-inline: 0;
	}

	.ii-author-hero__expertise,
	.ii-author-hero__social,
	.ii-author-hero__stats {
		justify-content: flex-start;
	}
}

/* ====================================================================
   2. ARCHIVE BODY / GRID / RESULT COUNT
   ==================================================================== */

.ii-archive__body {
	padding-block: var(--ii-space-8);
}

.ii-archive__section-title {
	font-size: var(--ii-text-2xl);
	margin-bottom: var(--ii-space-5);
}

.ii-archive__result-count {
	font-size: var(--ii-text-sm);
	color: var(--ii-color-text-secondary);
	margin-bottom: var(--ii-space-5);
}

.ii-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ii-space-5);
	margin-bottom: var(--ii-space-8);
}

.ii-archive__featured {
	margin-bottom: var(--ii-space-8);
	padding-bottom: var(--ii-space-8);
	border-bottom: 1px solid var(--ii-color-border);
}

.ii-archive__related-resources {
	margin-top: var(--ii-space-8);
	padding-top: var(--ii-space-8);
	border-top: 1px solid var(--ii-color-border);
}

@media (min-width: 768px) {
	.ii-archive__grid,
	.ii-archive__grid--featured {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ii-archive__grid,
	.ii-archive__grid--featured {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1536px) {
	.ii-archive__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Search result highlighting */
.ii-search-highlight {
	background-color: var(--ii-color-primary-light);
	color: var(--ii-color-primary-dark);
	padding: 0 2px;
	border-radius: 2px;
	font-weight: var(--ii-weight-semibold);
}

/* ====================================================================
   3. EMPTY STATE
   ==================================================================== */

.ii-empty-state {
	text-align: center;
	padding: var(--ii-space-9) var(--ii-space-5);
	max-width: 480px;
	margin: 0 auto;
}

.ii-empty-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--ii-radius-full);
	background-color: var(--ii-color-bg-alt);
	color: var(--ii-color-text-secondary);
	margin-bottom: var(--ii-space-5);
}

.ii-empty-state__icon .ii-icon {
	width: 28px;
	height: 28px;
}

.ii-empty-state__title {
	font-size: var(--ii-text-xl);
	font-weight: var(--ii-weight-bold);
	color: var(--ii-color-text-primary);
	margin-bottom: var(--ii-space-2);
}

.ii-empty-state__text {
	font-size: var(--ii-text-sm);
	color: var(--ii-color-text-secondary);
	margin-bottom: var(--ii-space-5);
}

.ii-empty-state__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ii-space-3);
	justify-content: center;
	margin-bottom: var(--ii-space-6);
}

.ii-empty-state__search {
	display: flex;
	gap: var(--ii-space-2);
}

.ii-empty-state__search input {
	flex: 1;
	padding: var(--ii-space-2) var(--ii-space-4);
	border: 1px solid var(--ii-color-border);
	border-radius: var(--ii-radius-md);
	font-size: var(--ii-text-sm);
}

/* ====================================================================
   4. PAGINATION (shared component)
   ==================================================================== */

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

.ii-pagination__list {
	display: flex;
	align-items: center;
	gap: var(--ii-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ii-pagination__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--ii-space-3);
	border-radius: var(--ii-radius-md);
	font-size: var(--ii-text-sm);
	font-weight: var(--ii-weight-medium);
	color: var(--ii-color-text-secondary);
	background-color: var(--ii-color-bg);
	border: 1px solid var(--ii-color-border);
	text-decoration: none;
	transition: color var(--ii-transition-fast), border-color var(--ii-transition-fast), background-color var(--ii-transition-fast);
}

.ii-pagination__link:hover {
	color: var(--ii-color-primary-dark);
	border-color: var(--ii-color-primary);
}

.ii-pagination__link--current {
	color: #fff;
	background-color: var(--ii-color-primary);
	border-color: var(--ii-color-primary);
}

.ii-pagination__link--dots {
	border: none;
	background: none;
}

.ii-pagination__link .ii-icon {
	width: 16px;
	height: 16px;
}

/* ====================================================================
   5. DARK MODE
   ==================================================================== */

[data-theme="dark"] .ii-archive-hero,
[data-theme="dark"] .ii-archive-hero__search-form,
[data-theme="dark"] .ii-archive-hero__child-pill,
[data-theme="dark"] .ii-pagination__link,
[data-theme="dark"] .ii-empty-state__icon {
	background-color: var(--ii-color-bg);
	border-color: var(--ii-color-border);
}