/**
 * Native category landing page.
 *
 * Product cards remain owned by site.css/marketplace.css; this file only
 * supplies the route shell and the long-form guide hierarchy.
 */

.su-category-landing {
	min-height: 60vh;
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
	background: var(--su-bg);
}

.su-category-hero {
	padding-block: clamp(1.5rem, 4vw, 3.25rem);
}

.su-category-hero__card {
	display: grid;
	padding: clamp(1.5rem, 4vw, 3.5rem);
	align-items: end;
	border: 1px solid var(--su-border);
	border-radius: var(--su-card-radius);
	background:
		radial-gradient(circle at 92% 18%, rgb(130 53 60 / 0.11), transparent 28%),
		linear-gradient(135deg, var(--su-surface) 0%, var(--su-surface-rose) 100%);
	box-shadow: var(--su-shadow-soft);
	gap: clamp(1.5rem, 4vw, 3rem);
}

.su-category-hero__copy {
	max-width: 51rem;
}

.su-category-hero h1 {
	max-width: 18ch;
	margin: 0;
	font-family: var(--su-font-sans);
	font-size: clamp(2.25rem, 5vw, 3.65rem);
	font-weight: 780;
	letter-spacing: -0.045em;
	line-height: 1.02;
	text-wrap: balance;
}

.su-category-hero h1 span {
	display: block;
	color: var(--su-pink);
}

.su-category-hero__copy > p:not(.eyebrow) {
	max-width: 47rem;
	margin: 1rem 0 0;
	color: var(--su-muted);
	font-size: clamp(1rem, 1.8vw, 1.125rem);
	line-height: 1.7;
}

.su-category-hero__actions {
	display: flex;
	margin-top: 1.5rem;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.su-category-hero__facts {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 0.65rem;
	list-style: none;
}

.su-category-hero__facts li {
	display: flex;
	min-height: 3rem;
	padding: 0.75rem 0.9rem;
	align-items: center;
	border: 1px solid var(--su-border);
	border-radius: var(--su-radius-sm);
	background: rgb(255 255 255 / 0.78);
	color: var(--su-ink);
	font-size: 0.9rem;
	font-weight: 650;
	gap: 0.65rem;
}

.su-category-hero__facts .su-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--su-trust);
}

.su-category-products {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.su-category-products__count {
	margin: 0 0 1rem;
	color: var(--su-muted);
	font-size: 0.92rem;
}

.su-category-request {
	margin-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--su-border);
	border-radius: var(--su-card-radius);
	background: var(--su-surface);
	box-shadow: var(--su-shadow-soft);
}

.su-category-request__heading {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.su-category-request__heading h2 {
	margin: 0;
	font-size: clamp(1.65rem, 3vw, 2.3rem);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

.su-category-request__heading > p:last-child {
	margin: 0.85rem 0 0;
	color: var(--su-muted);
	line-height: 1.65;
}

.su-category-request__steps {
	display: grid;
	margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
	padding: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.8rem;
	list-style: none;
}

.su-category-request__steps li {
	display: grid;
	min-width: 0;
	padding: 1.15rem;
	align-content: start;
	border: 1px solid var(--su-border);
	border-radius: var(--su-radius-sm);
	background: var(--su-surface-soft);
	gap: 0.45rem;
}

.su-category-request__steps .su-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--su-pink);
}

.su-category-request__steps strong {
	font-size: 0.96rem;
}

.su-category-request__steps span,
.su-category-request__action > span {
	color: var(--su-muted);
	font-size: 0.84rem;
	line-height: 1.5;
}

.su-category-request__action {
	display: grid;
	margin-top: 1.5rem;
	justify-items: center;
	gap: 0.55rem;
	text-align: center;
}

.su-category-guide {
	display: grid;
	gap: 1rem;
}

.su-category-guide__card {
	width: min(100%, 68rem);
	margin-inline: auto;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border: 1px solid var(--su-border);
	border-radius: var(--su-card-radius);
	background: var(--su-surface);
	box-shadow: var(--su-shadow-soft);
}

.su-category-guide__card--intro {
	padding: clamp(1.5rem, 4vw, 3rem);
}

.su-category-guide__card h1 {
	max-width: 23ch;
	margin: 0 0 0.9rem;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 720;
	line-height: 1.08;
}

.su-category-guide__card h2 {
	margin-top: 0;
	padding-bottom: 0.7rem;
	border-bottom: 2px solid var(--su-pink-light);
}

.su-category-guide__card img {
	width: 100%;
	height: auto;
	border-radius: var(--su-radius-sm);
}

.su-category-guide__card table {
	background: var(--su-surface);
}

@media (min-width: 56rem) {
	.su-category-hero__card {
		grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
	}
}

@media (max-width: 48rem) {
	.su-category-request__steps {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 37.5rem) {
	.su-category-hero {
		padding-block: 1rem 1.75rem;
	}

	.su-category-hero__card,
	.su-category-request,
	.su-category-guide__card {
		border-radius: 1rem;
	}

	.su-category-hero h1 {
		font-size: clamp(2.1rem, 11vw, 2.75rem);
	}

	.su-category-hero__actions .button,
	.su-category-request__action .button {
		width: 100%;
	}

	.su-category-products .su-marketplace-section-heading {
		align-items: start;
	}
}