/**
 * Category Chip Bar (Mobile)
 * ============================================================================
 * Horizontal swipeable category navigation for course listing pages.
 * Replaces vertical dropdown on mobile with Amazon-style chip bar.
 *
 * Architecture: Multi-slide columns
 * - Each Swiper slide contains 2 chips stacked vertically (column)
 * - Creates 2-row appearance while using standard multi-slide Swiper
 * - Required for iOS touch compatibility (single-slide breaks iOS gestures)
 *
 * Dependencies: 00-tokens.css, swiper.css (Swiper 11)
 * Used on: /courses/, /course-category/{slug}/
 * ============================================================================
 */

/* ==========================================================================
   Desktop: Hide catbar (sidebar visible)
   ========================================================================== */

@media (min-width: 769px) {
	.catbar {
		display: none;
	}
}

/* ==========================================================================
   Mobile: Show catbar, hide sidebar
   ========================================================================== */

@media (max-width: 768px) {
	/* Hide existing sidebar */
	.courses .categories {
		display: none;
	}

	/* Catbar container */
	.catbar {
		background: var(--white);
		border-bottom: 1px solid var(--bg-2);
		display: block;
		margin-bottom: var(--space-4); /* Whitespace below catbar */
		overscroll-behavior-x: contain; /* Prevent iOS page drag */
		padding: var(--space-3) var(--content-padding-x);
		position: sticky;
		top: var(--clear-header-height, 65px); /* Fallback if token missing */
		z-index: calc(var(--z-header) - 1); /* Below header, above content */
		/* Note: NO touch-action here - let Swiper handle touch events */
	}

	/* Swiper container - minimal styling, let Swiper do its job */
	.catbar .catbar-swiper {
		overflow: hidden;
		padding-bottom: 10px; /* Override global .swiper padding */
		/* Note: NO touch-action override - Swiper handles this internally */
	}

	/* Swiper wrapper - padding for chip shadows */
	.catbar .swiper-wrapper {
		/* Padding for chip shadows within hidden overflow */
		padding: 8px 0;
	}

	/* Each slide is a column containing 1-2 chips stacked vertically */
	/* Override global swiper-slide shadow - chips have their own shadows */
	.catbar .swiper-slide {
		width: auto;
		flex-shrink: 0;
		border-radius: 0;
		box-shadow: none;
	}

	/* Column slide - vertical flex layout for 2-row appearance */
	.catbar__column {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	/* Category chip - simple styling, no touch-action overrides */
	.catbar__chip {
		-webkit-touch-callout: none; /* iOS: prevent long-press menu */
		-webkit-user-drag: none; /* iOS: prevent link drag */
		-webkit-user-select: none;
		align-items: center;
		background: var(--white);
		border: 1px solid var(--bg-2);
		border-radius: var(--radius-full);
		box-shadow: 7px 7px 9px 0 var(--shadow-medium);
		color: var(--black);
		display: inline-flex;
		font-family: var(--font-body);
		font-size: var(--text-sm);
		font-weight: var(--font-medium);
		line-height: var(--leading-normal);
		min-height: var(--tap-target-min); /* Tap target accessibility (Apple HIG) */
		padding: var(--space-2) var(--space-4);
		text-decoration: none;
		transition: border-color var(--transition-fast),
		            background-color var(--transition-fast),
		            box-shadow var(--transition-fast);
		user-select: none;
		white-space: nowrap;
	}

	/* Chip hover state */
	.catbar__chip:hover {
		border-color: var(--brand-main);
	}

	/* Chip active state */
	.catbar__chip.is-active {
		background: var(--brand-main);
		border-color: var(--brand-main);
		color: var(--white);
		font-weight: var(--font-semibold);
	}

	/* Focus state for accessibility */
	.catbar__chip:focus-visible {
		outline: 2px solid var(--brand-main);
		outline-offset: 2px;
	}
}

/* ==========================================================================
   Small Mobile: Tighter padding
   ========================================================================== */

@media (max-width: 480px) {
	.catbar {
		padding: var(--space-2) var(--space-4);
	}

	.catbar__chip {
		padding: var(--space-2) var(--space-3);
	}
}