/**
 * PackPlus V2 — Section 03: Product Category Journey (Sprint 3R)
 *
 * Large image-led editorial panels, alternating text/visual sides via
 * the existing .pp-category--reverse modifier (added server-side on
 * even panels). Real product photography replaces the Sprint 3A
 * typographic placeholder visuals.
 */

.pp-categories {
	background: var(--pp-white);
	color: var(--pp-text);
}

.pp-category {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
	gap: var(--pp-space-lg);
	align-items: center;
	min-height: min(74vh, 42rem);
	padding: clamp(2.5rem, 6vw, 4rem) 0;
	border-top: 1px solid var(--pp-line);
}

.pp-category:first-of-type {
	margin-top: var(--pp-space-xl);
}

.pp-category--reverse .pp-category__text {
	grid-column: 2;
}

.pp-category--reverse .pp-category__visual {
	grid-column: 1;
	grid-row: 1;
}

.pp-category__index {
	display: block;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: color-mix(in srgb, var(--pp-text) 35%, transparent);
}

.pp-category__title {
	margin: 0.5rem 0 0;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	color: var(--pp-text);
}

.pp-category__copy {
	margin: 1rem 0 0;
	max-width: 32ch;
	color: var(--pp-text-muted);
}

.pp-category__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 2rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pp-text);
	transition: color var(--pp-duration-fast) var(--pp-ease-standard);
}

.pp-category__cta:hover {
	color: var(--pp-green-dark);
}

.pp-category__cta-arrow {
	color: var(--pp-green-dark);
	transition: transform var(--pp-duration-fast) var(--pp-ease-standard);
}

.pp-category__cta:hover .pp-category__cta-arrow {
	transform: translateX(3px);
}

.pp-category__visual {
	position: relative;
	height: clamp(18rem, 40vw, 30rem);
}

.pp-category__visual.pp-media {
	background: var(--pp-grey);
}

.pp-category__spec {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	padding: 0.65rem 0.85rem;
	background: color-mix(in srgb, var(--pp-white) 88%, transparent);
}

.pp-category__spec .pp-meta {
	opacity: 1;
	color: var(--pp-text);
}