/**
 * Category carousel skin for Vida Aromatica Core.
 *
 * Only the look of the discovery carousel. Overflow, arrow shape and placement,
 * disabled state, focus rings and motion preferences all live in the engine,
 * va-scroller.css, declared as a dependency of this stylesheet.
 *
 * The arrows are configured through the engine tokens (--va-scroller-*), so
 * this file never redeclares their geometry or their states.
 *
 * Every rule is scoped to the .va-category-carousel namespace: no global, theme
 * or WooCommerce selector is touched.
 *
 * The palette reuses the child theme tokens (--va-*) declared in
 * assets/css/global.css, with fallbacks so the module stays coherent even where
 * those tokens are not present.
 */

.va-category-carousel {
	--va-cc-gap: 1.25rem;
	--va-cc-radius: 10px;
	--va-cc-surface: var(--va-surface, #FBF7F0);
	--va-cc-bg-soft: var(--va-bg-dark, #EAE1D3);
	--va-cc-border: var(--va-border, #E1D6C4);
	--va-cc-text: var(--va-text, #2A231C);
	--va-cc-text-secondary: var(--va-text-secondary, #5A4D3F);
	--va-cc-accent: var(--va-accent, #5B6B52);
	--va-cc-on-accent: var(--va-on-accent, #FBF7F0);
	--va-cc-focus: var(--va-focus-ring, #2A231C);
	--va-cc-transition: var(--va-transition, 240ms ease-out);

	/*
	 * Engine configuration. The arrows are anchored on the image area rather
	 * than on the whole card, so they never cover the category name, and they
	 * sit slightly outside the frame so they do not hide the artwork.
	 */
	--va-scroller-transition: var(--va-cc-transition);
	--va-scroller-focus-color: var(--va-cc-focus);
	--va-scroller-track-focus-offset: 3px;
	--va-scroller-control-size: 2.75rem;
	--va-scroller-control-top: 38%;
	--va-scroller-control-offset: -0.75rem;
	--va-scroller-control-bg: var(--va-cc-surface);
	--va-scroller-control-color: var(--va-cc-text);
	--va-scroller-control-border: var(--va-cc-border);
	--va-scroller-control-shadow: 0 2px 8px rgba(42, 35, 28, 0.1);
	--va-scroller-control-bg-hover: var(--va-cc-accent);
	--va-scroller-control-color-hover: var(--va-cc-on-accent);
	--va-scroller-control-border-hover: var(--va-cc-accent);
	--va-scroller-icon-size: 0.625rem;
	--va-scroller-icon-nudge: 0.2rem;

	margin: 0 0 var(--va-space-md, 2rem);
}

/* ---------------------------------------------------------------------------
 * Track
 * ------------------------------------------------------------------------ */

/*
 * The track is a <ul>, and Kadence indents every list inside the post content
 * with `.single-content ul { padding-left: 2em }`. That selector outweighs a
 * single class, so the component root is repeated here only to win the cascade:
 * without it the track starts indented 34px, and because the track snaps with
 * `scroll-snap-type: x mandatory` the browser lands on the first snap point
 * instead of at 0, which lights up the previous arrow on page load.
 */
.va-category-carousel .va-category-carousel__track {
	gap: var(--va-cc-gap);
	padding: 0.5rem 0.25rem 1rem;
	scroll-padding-left: 0.25rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--va-cc-border) transparent;
}

.va-category-carousel__track::-webkit-scrollbar {
	height: 6px;
}

.va-category-carousel__track::-webkit-scrollbar-track {
	background: transparent;
}

.va-category-carousel__track::-webkit-scrollbar-thumb {
	background: var(--va-cc-border);
	border-radius: 999px;
}

.va-category-carousel__item {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	/* Desktop default: 4 visible cards. Overridden per data-va-columns below. */
	width: calc((100% - (3 * var(--va-cc-gap))) / 4);
}

.va-category-carousel[data-va-columns="2"] .va-category-carousel__item {
	width: calc((100% - (1 * var(--va-cc-gap))) / 2);
}

.va-category-carousel[data-va-columns="3"] .va-category-carousel__item {
	width: calc((100% - (2 * var(--va-cc-gap))) / 3);
}

.va-category-carousel[data-va-columns="5"] .va-category-carousel__item {
	width: calc((100% - (4 * var(--va-cc-gap))) / 5);
}

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

.va-category-carousel__card {
	background: var(--va-cc-surface);
	border-radius: var(--va-cc-radius);
	box-shadow: 0 1px 3px rgba(42, 35, 28, 0.06);
	color: var(--va-cc-text);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow var(--va-cc-transition), transform var(--va-cc-transition);
}

.va-category-carousel__card:hover,
.va-category-carousel__card:focus-visible {
	box-shadow: 0 6px 18px rgba(42, 35, 28, 0.12);
	color: var(--va-cc-text);
	transform: translateY(-2px);
}

.va-category-carousel__card:focus-visible {
	outline: 2px solid var(--va-cc-focus);
	outline-offset: 3px;
}

.va-category-carousel__media {
	aspect-ratio: 4 / 5;
	background: var(--va-cc-bg-soft);
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.va-category-carousel__image {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform var(--va-cc-transition);
	width: 100%;
}

.va-category-carousel__card:hover .va-category-carousel__image,
.va-category-carousel__card:focus-visible .va-category-carousel__image {
	transform: scale(1.03);
}

/* Fallback shown when the category has no image assigned. */
.va-category-carousel__fallback {
	align-items: center;
	background: linear-gradient(150deg, var(--va-cc-bg-soft) 0%, var(--va-cc-surface) 100%);
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.va-category-carousel__fallback-mark {
	color: var(--va-cc-accent);
	font-family: var(--va-font-serif, Georgia, 'Palatino Linotype', serif);
	font-size: 2.75rem;
	line-height: 1;
	opacity: 0.55;
}

.va-category-carousel__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1rem 1.15rem;
}

.va-category-carousel__name {
	color: var(--va-cc-text);
	font-family: var(--va-font-serif, Georgia, 'Palatino Linotype', serif);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.va-category-carousel__description {
	color: var(--va-cc-text-secondary);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Editor notice
 * ---------------------------------------------------------------------------
 *
 * Only ever printed inside the block editor, when the block has nothing to show
 * and the reason is worth explaining. The visitor never receives this markup, so
 * these rules only cost bytes on the frontend and never a pixel.
 * ------------------------------------------------------------------------ */

.va-category-carousel-empty {
	--va-cc-empty-border: var(--va-border, var(--global-palette7, #E1D6C4));
	--va-cc-empty-surface: var(--va-surface, var(--global-palette9, #FBF7F0));
	--va-cc-empty-text: var(--va-text, var(--global-palette3, #2A231C));

	background: var(--va-cc-empty-surface);
	border: 1px dashed var(--va-cc-empty-border);
	border-radius: 8px;
	color: var(--va-cc-empty-text);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	padding: 1.25rem;
	text-align: center;
}

/* Strong and not a heading: the notice must not add an entry to the outline of
   a document that will never contain it. The weight does the work of the level. */
.va-category-carousel-empty__title {
	font-weight: 600;
}

.va-category-carousel-empty__text {
	/* Long enough to be a sentence, short enough to be read in one pass. */
	margin: 0 auto;
	max-width: 46ch;
	opacity: 0.85;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

/* Tablet: around 2 cards, arrows brought back inside the frame. */
@media (max-width: 1024px) {
	.va-category-carousel {
		--va-scroller-control-offset: 0.25rem;
	}

	.va-category-carousel__item,
	.va-category-carousel[data-va-columns="2"] .va-category-carousel__item,
	.va-category-carousel[data-va-columns="3"] .va-category-carousel__item,
	.va-category-carousel[data-va-columns="5"] .va-category-carousel__item {
		width: calc((100% - var(--va-cc-gap)) / 2);
	}
}

/* Mobile: around 1.2 cards, so the next one peeks and invites swiping. */
@media (max-width: 600px) {
	.va-category-carousel {
		--va-cc-gap: 0.85rem;
		--va-scroller-control-size: 2.375rem;
	}

	.va-category-carousel__item,
	.va-category-carousel[data-va-columns="2"] .va-category-carousel__item,
	.va-category-carousel[data-va-columns="3"] .va-category-carousel__item,
	.va-category-carousel[data-va-columns="5"] .va-category-carousel__item {
		width: 78%;
	}

	.va-category-carousel__body {
		padding: 0.85rem 0.85rem 1rem;
	}

	.va-category-carousel__name {
		font-size: 1rem;
	}
}

/* ---------------------------------------------------------------------------
 * Accessibility preferences
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.va-category-carousel__card,
	.va-category-carousel__image {
		transition: none;
	}

	.va-category-carousel__card:hover,
	.va-category-carousel__card:focus-visible {
		transform: none;
	}

	.va-category-carousel__card:hover .va-category-carousel__image,
	.va-category-carousel__card:focus-visible .va-category-carousel__image {
		transform: none;
	}
}