/* ==========================================================
   PetrolPress
   11 – Dynamic front-page sections
========================================================== */

.front-section {
	position: relative;
	padding-block: clamp(var(--space-16), 8vw, var(--space-32));
}

.front-section:nth-of-type(even) {
	background: var(--color-background-soft);
}

.front-section__container {
	position: relative;
}

.front-section__header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--space-8);
	margin-block-end: clamp(var(--space-8), 5vw, var(--space-16));
}

.front-section__heading-group {
	max-inline-size: 48rem;
}

.front-section__eyebrow {
	margin: 0 0 var(--space-3);
	color: var(--color-primary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-uppercase);
	text-transform: uppercase;
}

.front-section__title {
	margin: 0;
	font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
	line-height: var(--line-height-tight);
	text-wrap: balance;
}

.front-section__description {
	max-inline-size: 62ch;
	margin: var(--space-4) 0 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-lg);
}

.front-section__actions {
	flex: 0 0 auto;
}

.front-section__setup-notice {
	margin: 0;
	padding: var(--space-6);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-lg);
	background: var(--color-background);
	color: var(--color-text-muted);
}

.product-grid,
.category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(var(--space-5), 3vw, var(--space-8));
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-grid > * {
	min-inline-size: 0;
}



/* ==========================================================
   NEWSLETTER & COMMUNITY
========================================================== */

.newsletter-section {
	position: relative;
}

.newsletter-section__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr);
	gap: clamp(var(--space-8), 6vw, var(--space-16));
	align-items: center;
	overflow: hidden;
	padding: clamp(var(--space-8), 6vw, var(--space-16));
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-2xl);
	background: var(--gradient-primary-soft);
	box-shadow: var(--shadow-lg);
}

.newsletter-section__inner::before,
.newsletter-section__inner::after {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.newsletter-section__inner::before {
	inset-block-start: -7rem;
	inset-inline-end: -5rem;
	inline-size: 18rem;
	block-size: 18rem;
	background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.newsletter-section__inner::after {
	inset-block-end: -8rem;
	inset-inline-start: -6rem;
	inline-size: 16rem;
	block-size: 16rem;
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.newsletter-section__content,
.newsletter-section__form-panel {
	position: relative;
	z-index: 1;
	min-inline-size: 0;
}

.newsletter-section__eyebrow {
	margin: 0 0 var(--space-3);
	color: var(--color-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.newsletter-section__headline {
	max-inline-size: 18ch;
	margin: 0;
	font-size: clamp(var(--font-size-2xl), 3.5vw, var(--font-size-4xl));
	line-height: var(--line-height-tight);
}

.newsletter-section__description {
	max-inline-size: 58ch;
	margin: var(--space-5) 0 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-lg);
}

.newsletter-section__community {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	margin: var(--space-6) 0 0;
	padding: var(--space-2) var(--space-4);
	border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--color-background) 78%, transparent);
	color: var(--color-primary-dark);
	font-weight: var(--font-weight-semibold);
}

.newsletter-section__community-icon,
.newsletter-section__trust-icon {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-white);
	font-weight: var(--font-weight-bold);
}

.newsletter-section__community-icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	font-size: .8rem;
}

.newsletter-section__trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3) var(--space-5);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}

.newsletter-section__trust-item {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	min-inline-size: 0;
	color: var(--color-text);
	font-weight: var(--font-weight-medium);
}

.newsletter-section__trust-icon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-block-start: .15em;
	font-size: .7rem;
}

.newsletter-section__form-panel {
	padding: clamp(var(--space-5), 4vw, var(--space-8));
	border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
	border-radius: var(--radius-xl);
	background: var(--color-background);
	box-shadow: var(--shadow-md);
}

.newsletter-section__form,
.newsletter-section__form .widget,
.newsletter-section__form form {
	min-inline-size: 0;
}

.newsletter-section__form .widget {
	margin: 0;
}

.newsletter-section__form form {
	display: grid;
	gap: var(--space-4);
}

.newsletter-section__form input:not([type="checkbox"]):not([type="radio"]),
.newsletter-section__form select,
.newsletter-section__form textarea {
	inline-size: 100%;
	max-inline-size: 100%;
}

.newsletter-section__form button,
.newsletter-section__form input[type="submit"],
.newsletter-section__cta-link {
	min-block-size: 44px;
}

.newsletter-section__fallback-title {
	margin: 0;
	color: var(--color-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.newsletter-section__fallback-text {
	margin: var(--space-3) 0 0;
	color: var(--color-text-muted);
}

.newsletter-section__cta {
	margin-block-start: var(--space-5);
}

.newsletter-section__cta-link {
	inline-size: 100%;
	justify-content: center;
}

.newsletter-section__privacy {
	margin: var(--space-4) 0 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	text-align: center;
}

.newsletter-section__setup-notice {
	margin: var(--space-4) 0 0;
	padding: var(--space-3);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.newsletter-section__form a:focus-visible,
.newsletter-section__form button:focus-visible,
.newsletter-section__form input:focus-visible,
.newsletter-section__form select:focus-visible,
.newsletter-section__form textarea:focus-visible,
.newsletter-section__cta-link:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 3px;
}

.front-section--page-content .entry-content {
	max-inline-size: var(--content-width);
	margin-inline: auto;
}

@media (max-width: 1024px) {
	.product-grid,
	.category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.newsletter-section__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.front-section {
		padding-block: var(--space-16);
	}

	.front-section__header {
		align-items: stretch;
		flex-direction: column;
	}

	.front-section__actions .btn {
		inline-size: 100%;
	}

	.product-grid,
	.category-grid {
		grid-template-columns: 1fr;
	}

	.newsletter-section__inner {
		padding: var(--space-6);
	}

	.newsletter-section__trust {
		grid-template-columns: 1fr;
	}

	.newsletter-section__community {
		align-items: flex-start;
		border-radius: var(--radius-lg);
	}

	.newsletter-section__form-panel {
		padding: var(--space-5);
	}
}

/* ==========================================================
   PRODUCT TEST GRID
========================================================== */

.product-grid {
	align-items: stretch;
}

.product-grid__item {
	display: flex;
	min-inline-size: 0;
}

.product-card {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-inline-size: 0;
	overflow: visible;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
	background: var(--color-background);
	box-shadow: var(--shadow-sm);
	transition:
		transform var(--transition-smooth),
		box-shadow var(--transition-smooth),
		border-color var(--transition-base);
}

.product-card:focus-within {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md), var(--focus-ring);
}

.product-card__media {
	position: relative;
	margin: var(--space-3) var(--space-3) 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--radius-2xl) - var(--space-2));
	background: var(--gradient-primary-soft);
}

.product-card__media-link {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: inherit;
}

.product-card__media-link:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: -5px;
}

.product-card__image,
.product-card__placeholder {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.product-card__image {
	object-fit: cover;
	transition: transform var(--transition-slower);
}

.product-card__placeholder {
	position: relative;
	background:
		radial-gradient(circle at 72% 28%, var(--color-accent-light), transparent 22%),
		radial-gradient(circle at 28% 76%, var(--color-primary-soft), transparent 30%),
		var(--gradient-primary-soft);
}

.product-card__placeholder::before,
.product-card__placeholder::after {
	content: "";
	position: absolute;
	border: 1px solid var(--glass-border);
	border-radius: 50%;
}

.product-card__placeholder::before {
	inset: 18% 42% 44% 12%;
}

.product-card__placeholder::after {
	inset: 46% 12% 14% 46%;
}

.product-card__media-badges {
	position: absolute;
	inset-block-start: var(--space-4);
	inset-inline: var(--space-4);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
	pointer-events: none;
}

.product-card__badge,
.product-card__featured-label {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-block-size: 2rem;
	max-inline-size: min(72%, 15rem);
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-xs);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	pointer-events: auto;
}

.product-card__badge {
	color: var(--color-primary-deep);
	background: var(--glass-background-strong);
	backdrop-filter: var(--glass-blur-small);
	-webkit-backdrop-filter: var(--glass-blur-small);
}

.product-card__featured-label {
	margin-inline-start: auto;
	color: var(--color-heading);
	background: var(--color-accent-light);
}

.product-card__badge:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 3px;
}

.product-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--space-6);
}

.product-card__rating {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--space-2);
	margin-block-end: var(--space-3);
}

.product-card__stars {
	display: inline-flex;
	gap: 0.08em;
	font-size: var(--font-size-lg);
	line-height: 1;
}

.product-card__star {
	color: var(--color-border-strong);
}

.product-card__star--full {
	color: var(--color-accent);
}

.product-card__star--half {
	background: linear-gradient(90deg, var(--color-accent) 50%, var(--color-border-strong) 50%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.product-card__rating-value {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.product-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	margin-block-end: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.product-card__meta-separator {
	color: var(--color-border-strong);
}

.product-card__title {
	margin: 0;
	font-size: clamp(var(--font-size-xl), 2.2vw, var(--font-size-2xl));
	line-height: var(--line-height-snug);
	text-wrap: balance;
}

.product-card__title a {
	color: var(--color-heading);
	text-decoration: none;
}

.product-card__title a:hover {
	color: var(--color-primary);
}

.product-card__title a:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

.product-card__excerpt {
	display: -webkit-box;
	margin: var(--space-4) 0 0;
	overflow: hidden;
	color: var(--color-text-muted);
	line-height: var(--line-height-relaxed);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.product-card__footer {
	margin-block-start: auto;
	padding-block-start: var(--space-6);
}

.product-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-block-size: 44px;
	padding-inline: var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	color: var(--color-primary-deep);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	transition:
		transform var(--transition-base),
		background-color var(--transition-base),
		border-color var(--transition-base),
		color var(--transition-base);
}

.product-card__link-icon {
	transition: transform var(--transition-base);
}

.product-card__link:hover {
	border-color: var(--color-primary);
	background: var(--color-primary-soft);
}

.product-card__link:hover .product-card__link-icon {
	transform: translateX(0.2rem);
}

.product-card__link:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.product-card:hover {
		transform: translateY(-4px);
		border-color: var(--color-border-strong);
		box-shadow: var(--shadow-card-hover);
	}

	.product-card:hover .product-card__image {
		transform: scale(1.025);
	}
}

@media (max-width: 767px) {
	.product-card__body {
		padding: var(--space-5);
	}

	.product-card__media {
		margin: var(--space-2) var(--space-2) 0;
	}

	.product-card__badge,
	.product-card__featured-label {
		max-inline-size: 68%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-card,
	.product-card__image,
	.product-card__link,
	.product-card__link-icon {
		transition: none;
	}

	.product-card:hover,
	.product-card:hover .product-card__image,
	.product-card__link:hover .product-card__link-icon {
		transform: none;
	}
}

.product-card__title a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}


/* ==========================================================
   PREMIUM DEAL GRID
========================================================== */

.deal-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(var(--space-4), 2.5vw, var(--space-7));
	margin: 0;
	padding: 0;
}

.deal-grid__item {
	display: flex;
	min-inline-size: 0;
}

.deal-card {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-inline-size: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
	background: var(--color-background);
	box-shadow: var(--shadow-sm);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.deal-card:focus-within {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
}

.deal-card__media {
	position: relative;
	padding: var(--space-3) var(--space-3) 0;
}

.deal-card__media-link {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: calc(var(--radius-2xl) - var(--space-2));
	background: var(--gradient-primary-soft);
}

.deal-card__media-link:focus-visible,
.deal-card__title a:focus-visible,
.deal-card__copy:focus-visible,
.deal-card__link:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 3px;
}

.deal-card__image,
.deal-card__placeholder {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.deal-card__image {
	object-fit: cover;
	transition: transform 220ms ease;
}

.deal-card__placeholder {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 78% 28%, rgba(255, 255, 255, .55) 0 8%, transparent 9%),
		linear-gradient(145deg, var(--color-primary-light), var(--color-primary));
}

.deal-card__placeholder::before,
.deal-card__placeholder::after {
	position: absolute;
	content: "";
	border: 2px solid rgba(255, 255, 255, .32);
	border-radius: 50%;
}

.deal-card__placeholder::before {
	inset: 18% 42% 20% 8%;
}

.deal-card__placeholder::after {
	inset: 38% 10% 8% 52%;
}

.deal-card__badges {
	position: absolute;
	inset-block-start: var(--space-6);
	inset-inline: var(--space-6);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2);
	pointer-events: none;
}

.deal-card__discount,
.deal-card__featured {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.25rem;
	max-inline-size: 9.5rem;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-xs);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	text-align: center;
}

.deal-card__discount {
	color: var(--color-primary-deep);
	background: var(--color-background);
}

.deal-card__featured {
	margin-inline-start: auto;
	color: var(--color-heading);
	background: var(--color-accent-light);
}

.deal-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--space-5);
}

.deal-card__brand {
	margin: 0 0 var(--space-2);
	color: var(--color-primary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

.deal-card__title {
	margin: 0;
	font-size: clamp(var(--font-size-lg), 1.8vw, var(--font-size-xl));
	line-height: var(--line-height-snug);
}

.deal-card__title a {
	color: var(--color-heading);
	text-decoration: none;
}

.deal-card__title a:hover {
	color: var(--color-primary);
}

.deal-card__discount-value {
	margin: var(--space-3) 0 0;
	color: var(--color-primary-deep);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.deal-card__description {
	display: -webkit-box;
	margin: var(--space-3) 0 0;
	overflow: hidden;
	color: var(--color-text-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.deal-card__code-group {
	display: grid;
	gap: var(--space-1);
	margin-block-start: var(--space-5);
	padding: var(--space-3) var(--space-4);
	border: 1px dashed var(--color-primary);
	border-radius: var(--radius-lg);
	background: var(--color-background-soft);
}

.deal-card__code-label {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

.deal-card__code {
	overflow-wrap: anywhere;
	color: var(--color-primary-deep);
	background: transparent;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: clamp(var(--font-size-base), 1.6vw, var(--font-size-lg));
	font-weight: var(--font-weight-bold);
	letter-spacing: .035em;
}

.deal-card__conditions {
	margin: var(--space-4) 0 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.deal-card__status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	margin: var(--space-4) 0 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.deal-card__status-marker {
	inline-size: .65rem;
	block-size: .65rem;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: currentColor;
	box-shadow: inset 0 0 0 2px var(--color-background);
}

.deal-card__status--active {
	color: var(--color-primary-deep);
}

.deal-card__status--ending {
	color: var(--color-accent-dark);
}

.deal-card__status--expired {
	color: var(--color-text-muted);
}

.deal-card__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	margin-block-start: auto;
	padding-block-start: var(--space-5);
}

.deal-card__actions > :only-child {
	grid-column: 1 / -1;
}

.deal-card__copy,
.deal-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-block-size: 2.75rem;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.deal-card__copy {
	border: 1px solid var(--color-primary);
	color: var(--color-primary-deep);
	background: transparent;
	cursor: pointer;
}

.deal-card__link {
	border: 1px solid var(--color-primary);
	color: var(--color-background);
	background: var(--color-primary);
}

.deal-card__link-icon {
	transition: transform 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.deal-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--shadow-lg);
	}

	.deal-card:hover .deal-card__image {
		transform: scale(1.02);
	}

	.deal-card__copy:hover,
	.deal-card__link:hover {
		transform: translateY(-1px);
		box-shadow: var(--shadow-xs);
	}

	.deal-card__copy:hover {
		background: var(--color-background-soft);
	}

	.deal-card__link:hover {
		color: var(--color-background);
		background: var(--color-primary-deep);
	}

	.deal-card__link:hover .deal-card__link-icon {
		transform: translateX(2px);
	}
}

@media (max-width: 1024px) {
	.deal-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.deal-grid {
		grid-template-columns: 1fr;
	}

	.deal-card__actions {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.deal-card,
	.deal-card__image,
	.deal-card__copy,
	.deal-card__link,
	.deal-card__link-icon {
		transition: none;
	}

	.deal-card:hover,
	.deal-card:hover .deal-card__image,
	.deal-card__copy:hover,
	.deal-card__link:hover,
	.deal-card__link:hover .deal-card__link-icon {
		transform: none;
	}
}

/* ==========================================================
   CATEGORY AND SAVING-TIP CARDS
========================================================== */

.category-grid {
	align-items: stretch;
}

.category-grid__item {
	display: flex;
	min-inline-size: 0;
}

.category-card {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-inline-size: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-2xl);
	background: var(--color-background);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-base);
}

.category-card:focus-within {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md), var(--focus-ring);
}

.category-card__media {
	position: relative;
	margin: var(--space-3) var(--space-3) 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: calc(var(--radius-2xl) - var(--space-2));
	background: var(--gradient-primary-soft);
}

.category-card__media-link {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: inherit;
}

.category-card__media-link:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: -5px;
}

.category-card__image,
.category-card__placeholder {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.category-card__image {
	object-fit: cover;
	transition: transform var(--transition-slower);
}

.category-card__placeholder {
	position: relative;
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 75% 25%, var(--color-accent-light), transparent 23%),
		radial-gradient(circle at 22% 80%, var(--color-primary-soft), transparent 32%),
		var(--gradient-primary-soft);
}

.category-card__placeholder::before,
.category-card__placeholder::after {
	content: "";
	position: absolute;
	border: 1px solid var(--glass-border);
	border-radius: 50%;
}

.category-card__placeholder::before {
	inset: 12% 55% 48% 8%;
}

.category-card__placeholder::after {
	inset: 48% 8% 10% 52%;
}

.category-card__icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: clamp(4rem, 8vw, 5.5rem);
	block-size: clamp(4rem, 8vw, 5.5rem);
	border: 1px solid var(--glass-border);
	border-radius: 50%;
	color: var(--color-primary-deep);
	background: var(--glass-background-strong);
	box-shadow: var(--shadow-sm);
}

.category-card__icon svg {
	inline-size: 55%;
	block-size: 55%;
}

.category-card__badge {
	position: absolute;
	z-index: 2;
	inset-block-start: var(--space-4);
	inset-inline-start: var(--space-4);
	display: inline-flex;
	align-items: center;
	min-block-size: 2rem;
	max-inline-size: calc(100% - (2 * var(--space-4)));
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-pill);
	color: var(--color-heading);
	background: var(--color-accent-light);
	box-shadow: var(--shadow-xs);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	overflow-wrap: anywhere;
}

.category-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--space-6);
}

.category-card__title {
	margin: 0;
	font-size: clamp(var(--font-size-xl), 2.1vw, var(--font-size-2xl));
	line-height: var(--line-height-snug);
	text-wrap: balance;
}

.category-card__title a {
	color: var(--color-heading);
	text-decoration: none;
}

.category-card__title a:hover {
	color: var(--color-primary);
}

.category-card__title a:focus-visible,
.category-card__link:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 4px;
}

.category-card__description {
	display: -webkit-box;
	margin: var(--space-4) 0 0;
	overflow: hidden;
	color: var(--color-text-muted);
	line-height: var(--line-height-relaxed);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.category-card__count {
	margin: var(--space-4) 0 0;
	color: var(--color-primary-deep);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.category-card__footer {
	margin-block-start: auto;
	padding-block-start: var(--space-6);
}

.category-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-block-size: 44px;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-pill);
	color: var(--color-background);
	background: var(--color-primary);
	font-weight: var(--font-weight-bold);
	text-align: center;
	text-decoration: none;
	transition: transform var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.category-card__link-icon {
	transition: transform var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
	.category-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--shadow-lg);
	}

	.category-card:hover .category-card__image {
		transform: scale(1.02);
	}

	.category-card__link:hover {
		transform: translateY(-1px);
		color: var(--color-background);
		background: var(--color-primary-deep);
		box-shadow: var(--shadow-xs);
	}

	.category-card__link:hover .category-card__link-icon {
		transform: translateX(2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.category-card,
	.category-card__image,
	.category-card__link,
	.category-card__link-icon {
		transition: none;
	}

	.category-card:hover,
	.category-card:hover .category-card__image,
	.category-card__link:hover,
	.category-card__link:hover .category-card__link-icon {
		transform: none;
	}
}