/**
 * Store recovery links — Almutaheda Pack
 *
 * Patch 23. Styles template-parts/shop/recovery-links.php, shown in the
 * archive empty state, the empty product search and the general search
 * no-results state. Loaded on shop, product taxonomy and search pages.
 */

.alm-recovery {
	display: grid;
	gap: 0.85rem;
	inline-size: 100%;
	text-align: start;
}

.alm-recovery__title,
.alm-recovery__subtitle {
	margin: 0;
	color: var(--alm-color-ink);
	font-family: var(--alm-font-display);
	font-size: var(--alm-text-md);
	font-weight: 700;
	line-height: 1.4;
}

.alm-recovery__subtitle {
	margin-block-start: 0.5rem;
	color: var(--alm-color-text-secondary);
	font-family: var(--alm-font-body);
	font-size: var(--alm-text-sm);
}

.alm-recovery__departments {
	display: grid;
	/* 9.5rem keeps two columns on a 360-390px phone. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alm-recovery__department {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	grid-template-areas:
		"media name"
		"media count";
	align-items: center;
	column-gap: 0.75rem;
	block-size: 100%;
	padding: 0.5rem;
	padding-inline-end: 0.85rem;
	border: 1px solid var(--alm-color-border);
	border-radius: var(--alm-radius-lg);
	background: var(--alm-color-surface);
	color: var(--alm-color-ink);
	text-decoration: none;
	transition:
		border-color var(--alm-motion-functional) var(--alm-ease-standard),
		box-shadow var(--alm-motion-interface) var(--alm-ease-standard),
		transform var(--alm-motion-interface) var(--alm-ease-emphasized);
}

.alm-recovery__media {
	grid-area: media;
	display: block;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	overflow: hidden;
	border-radius: var(--alm-radius-md);
	background: var(--alm-color-primary-soft);
}

.alm-recovery__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alm-recovery__name {
	grid-area: name;
	min-width: 0;
	font-size: var(--alm-text-sm);
	font-weight: 700;
	line-height: 1.4;
}

.alm-recovery__count {
	grid-area: count;
	color: var(--alm-color-text-muted);
	font-size: var(--alm-text-xs);
}

.alm-recovery__department:hover,
.alm-recovery__department:focus-visible {
	border-color: #D9C6EF;
	box-shadow: var(--alm-shadow-sm);
}

@media (hover: hover) {
	.alm-recovery__department:hover {
		transform: translateY(-2px);
	}
}

.alm-recovery__uses {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alm-recovery__use {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding-inline: 0.95rem 0.4rem;
	border: 1px solid var(--alm-color-border);
	border-radius: var(--alm-radius-full);
	background: var(--alm-color-surface);
	color: var(--alm-color-ink);
	font-size: var(--alm-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--alm-motion-functional) var(--alm-ease-standard), border-color var(--alm-motion-functional) var(--alm-ease-standard), color var(--alm-motion-functional) var(--alm-ease-standard);
}

.alm-recovery__use span {
	display: inline-grid;
	place-items: center;
	min-height: 1.9rem;
	padding-inline: 0.6rem;
	border-radius: var(--alm-radius-full);
	background: var(--alm-color-primary-soft);
	color: var(--alm-color-primary-dark);
	font-size: var(--alm-text-xs);
}

.alm-recovery__use:hover,
.alm-recovery__use:focus-visible {
	border-color: var(--alm-color-primary);
	background: var(--alm-color-primary);
	color: var(--alm-color-text-inverse);
}

.alm-recovery__use:hover span,
.alm-recovery__use:focus-visible span {
	background: rgba(255, 255, 255, 0.18);
	color: var(--alm-color-text-inverse);
}

.alm-recovery a:focus-visible {
	outline: var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: 2px;
}

/* General search page: the no-results block is centred; the links are not. */
.alm-search-no-results .alm-recovery {
	max-width: 52rem;
	margin-block-start: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.alm-recovery__department,
	.alm-recovery__use {
		transition: none;
	}

	.alm-recovery__department:hover {
		transform: none;
	}
}