/*
 * Features Archive Template Styles
 *
 * Styles for the features listing page
 * (archive-rocketcite_feature.html).
 * Uses theme.json design tokens exclusively.
 */

/* -------------------------------------------------------------------------
   Block wrapper
   ------------------------------------------------------------------------- */

.rc-features-archive {
	background-color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
   Dark hero
   ------------------------------------------------------------------------- */

.rc-features-archive__hero {
	position: relative;
	background-color: var(--wp--preset--color--primary);
	padding-top: calc(var(--wp--preset--spacing--96) + var(--wp--preset--spacing--32));
	padding-bottom: var(--wp--preset--spacing--96);
	padding-right: var(--wp--preset--spacing--16);
	padding-left: var(--wp--preset--spacing--16);
	overflow: hidden;
	text-align: center;
}

@media (min-width: 768px) {

	.rc-features-archive__hero {
		padding-top: calc(var(--wp--preset--spacing--96) + var(--wp--preset--spacing--96));
		padding-bottom: calc(var(--wp--preset--spacing--96) + var(--wp--preset--spacing--32));
	}
}

/* -------------------------------------------------------------------------
   Decorative blur circles
   ------------------------------------------------------------------------- */

.rc-features-archive__hero-blur {
	position: absolute;
	border-radius: var(--wp--custom--border-radius--full);
	pointer-events: none;
}

.rc-features-archive__hero-blur--top {
	top: 25%;
	right: 25%;
	width: 600px;
	height: 600px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
	filter: blur(120px);
}

.rc-features-archive__hero-blur--bottom {
	bottom: 25%;
	left: 25%;
	width: 400px;
	height: 400px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
	filter: blur(100px);
}

/* -------------------------------------------------------------------------
   Hero inner — constrained width
   ------------------------------------------------------------------------- */

.rc-features-archive__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 896px;
	margin-right: auto;
	margin-left: auto;
}

/* -------------------------------------------------------------------------
   Badge pill
   ------------------------------------------------------------------------- */

.rc-features-archive__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	padding: 6px var(--wp--preset--spacing--16);
	border-radius: var(--wp--custom--border-radius--full);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin-bottom: var(--wp--preset--spacing--24);
}

/* -------------------------------------------------------------------------
   Hero heading
   ------------------------------------------------------------------------- */

.rc-features-archive__hero-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--4-xl);
	font-weight: 700;
	color: var(--wp--preset--color--white);
	line-height: 1.1;
	margin-bottom: var(--wp--preset--spacing--24);
}

@media (min-width: 768px) {

	.rc-features-archive__hero-heading {
		font-size: var(--wp--preset--font-size--6-xl);
	}
}

@media (min-width: 1024px) {

	.rc-features-archive__hero-heading {
		font-size: var(--wp--preset--font-size--hero);
	}
}

.rc-features-archive__accent {
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
   Hero subtitle
   ------------------------------------------------------------------------- */

.rc-features-archive__hero-subtitle {
	font-size: var(--wp--preset--font-size--lg);
	color: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
	max-width: 768px;
	margin-right: auto;
	margin-left: auto;
	line-height: 1.7;
}

@media (min-width: 768px) {

	.rc-features-archive__hero-subtitle {
		font-size: var(--wp--preset--font-size--xl);
	}
}

/* -------------------------------------------------------------------------
   Category group sections
   ------------------------------------------------------------------------- */

.rc-features-archive__group {
	padding-top: calc(var(--wp--preset--spacing--96) - var(--wp--preset--spacing--16));
	padding-bottom: calc(var(--wp--preset--spacing--96) - var(--wp--preset--spacing--16));
	padding-right: var(--wp--preset--spacing--16);
	padding-left: var(--wp--preset--spacing--16);
}

@media (min-width: 768px) {

	.rc-features-archive__group {
		padding-top: calc(var(--wp--preset--spacing--96) + var(--wp--preset--spacing--32));
		padding-bottom: calc(var(--wp--preset--spacing--96) + var(--wp--preset--spacing--32));
	}
}

.rc-features-archive__group--white {
	background-color: var(--wp--preset--color--white);
}

.rc-features-archive__group--gray {
	background-color: color-mix(in srgb, var(--wp--preset--color--gray-50) 50%, transparent);
}

.rc-features-archive__group-inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-right: auto;
	margin-left: auto;
}

/* -------------------------------------------------------------------------
   Category group header
   ------------------------------------------------------------------------- */

.rc-features-archive__group-header {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--64);
}

.rc-features-archive__cat-label {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--12);
}

.rc-features-archive__group-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--3-xl);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	line-height: 1.2;
}

@media (min-width: 768px) {

	.rc-features-archive__group-heading {
		font-size: var(--wp--preset--font-size--4-xl);
	}
}

/* -------------------------------------------------------------------------
   Feature cards container
   ------------------------------------------------------------------------- */

.rc-features-archive__cards {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--96);
}

/* -------------------------------------------------------------------------
   Feature card — alternating layout
   ------------------------------------------------------------------------- */

.rc-features-archive__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--32);
	align-items: center;
}

@media (min-width: 1024px) {

	.rc-features-archive__card {
		flex-direction: row;
		gap: var(--wp--preset--spacing--64);
	}

	.rc-features-archive__card--reversed {
		flex-direction: row-reverse;
	}
}

.rc-features-archive__card-content,
.rc-features-archive__card-illus {
	flex: 1;
	width: 100%;
}

/* -------------------------------------------------------------------------
   Card icon row
   ------------------------------------------------------------------------- */

.rc-features-archive__card-icon-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
	margin-bottom: var(--wp--preset--spacing--16);
}

.rc-features-archive__card-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--border-radius--2-xl);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
	color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

.rc-features-archive__card-cat {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 80%, transparent);
}

/* -------------------------------------------------------------------------
   Card title
   ------------------------------------------------------------------------- */

.rc-features-archive__card-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	line-height: 1.25;
	margin-bottom: var(--wp--preset--spacing--16);
}

@media (min-width: 768px) {

	.rc-features-archive__card-title {
		font-size: var(--wp--preset--font-size--3-xl);
	}
}

/* -------------------------------------------------------------------------
   Card description
   ------------------------------------------------------------------------- */

.rc-features-archive__card-desc {
	font-size: var(--wp--preset--font-size--base);
	color: color-mix(in srgb, var(--wp--preset--color--foreground) 70%, transparent);
	line-height: 1.7;
	margin-bottom: var(--wp--preset--spacing--24);
}

/* -------------------------------------------------------------------------
   Benefits list
   ------------------------------------------------------------------------- */

.rc-features-archive__benefits {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--24);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
}

.rc-features-archive__benefit {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--12);
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--foreground) 80%, transparent);
	line-height: 1.5;
}

.rc-features-archive__check-icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--success);
	margin-top: 2px;
}

/* -------------------------------------------------------------------------
   "Learn more" link
   ------------------------------------------------------------------------- */

.rc-features-archive__learn-more {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: gap 0.2s ease;
}

@media (hover: hover) {

	.rc-features-archive__learn-more:hover {
		gap: var(--wp--preset--spacing--12);
		color: var(--wp--preset--color--accent);
		text-decoration: none;
	}
}

.rc-features-archive__learn-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.rc-features-archive__arrow-icon {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

@media (hover: hover) {

	.rc-features-archive__learn-more:hover .rc-features-archive__arrow-icon {
		transform: translateX(4px);
	}
}

/* -------------------------------------------------------------------------
   Illustration placeholder
   ------------------------------------------------------------------------- */

.rc-features-archive__illus-inner {
	background: linear-gradient(to bottom right, var(--wp--preset--color--gray-50), var(--wp--preset--color--gray-100));
	border-radius: var(--wp--custom--border-radius--2-xl);
	border: 1px solid var(--wp--preset--color--gray-200);
	padding: var(--wp--preset--spacing--32);
	aspect-ratio: 4 / 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

@media (min-width: 1024px) {

	.rc-features-archive__illus-inner {
		padding: 40px;
	}
}

.rc-features-archive__illus-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom right, color-mix(in srgb, var(--wp--preset--color--accent) 5%, transparent), transparent);
}

.rc-features-archive__illus-center {
	position: relative;
	z-index: 1;
	text-align: center;
}

.rc-features-archive__illus-icon-wrap {
	width: 80px;
	height: 80px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: var(--wp--preset--spacing--24);
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border-radius--2-xl);
	box-shadow: var(--wp--custom--shadow--lg);
	border: 1px solid var(--wp--preset--color--gray-100);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
   Highlight stat cards
   ------------------------------------------------------------------------- */

.rc-features-archive__highlights {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--16);
	margin-top: var(--wp--preset--spacing--16);
}

.rc-features-archive__highlight {
	background-color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border-radius--xl);
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
	box-shadow: var(--wp--custom--shadow--sm);
	border: 1px solid var(--wp--preset--color--gray-100);
	text-align: center;
	min-width: 100px;
}

.rc-features-archive__highlight-value {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	line-height: 1.3;
}

.rc-features-archive__highlight-label {
	font-size: var(--wp--preset--font-size--xs);
	color: color-mix(in srgb, var(--wp--preset--color--foreground) 60%, transparent);
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.rc-features-archive__learn-more,
	.rc-features-archive__arrow-icon {
		transition: none;
	}

	.rc-features-archive__learn-more:hover .rc-features-archive__arrow-icon {
		transform: none;
	}
}