/*
 * Gradient buttons, site-wide — the home hero pair and the "View All" links on
 * the shared sections (e.g. template-parts/feedback-section.php, which the About
 * page uses too).
 *
 * Plain CSS for the same reason as home.css and mobile-nav.css: the compiled
 * main.css is frozen, and a rule that needs `npm run build:css` first renders
 * broken. Loaded on every page so a shared section never shows a white label on
 * no background.
 *
 * Fills are drawn at twice the button's width, so hover slides the second half
 * into view instead of swapping to a flat colour. Stops are kept dark enough
 * that the white label stays readable across the whole sweep: pure cyan or
 * WhatsApp's own #25D366 would drop below 3:1 behind white text. These replace
 * the bg-primary / shadow utilities, so leave those off the markup.
 */
.btn-gradient,
.btn-gradient-wa {
	background-size: 200% 100%;
	background-position: 0 0;
	transition: background-position 0.45s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-gradient:hover,
.btn-gradient-wa:hover {
	background-position: 100% 0;
	transform: translateY(-2px);
}

.btn-gradient {
	background-image: linear-gradient(120deg, #6366F1 0%, #4F46E5 30%, #0891B2 60%, #4338CA 100%);
	box-shadow: 0 10px 24px -10px rgb(79 70 229 / 0.6);
}

.btn-gradient:hover {
	box-shadow: 0 14px 30px -10px rgb(8 145 178 / 0.6);
}

.btn-gradient-wa {
	background-image: linear-gradient(120deg, #16A34A 0%, #15803D 30%, #0F766E 60%, #16A34A 100%);
	box-shadow: 0 10px 24px -10px rgb(22 163 74 / 0.55);
}

.btn-gradient-wa:hover {
	box-shadow: 0 14px 30px -10px rgb(15 118 110 / 0.6);
}

/*
 * Filter bars — the category buttons (.filter-btn), their scroll arrows
 * (.filter-nav) and the search box beside them (.filter-search), on the courses
 * page, the Student Work page and the home portfolio section.
 *
 * 10px corners rather than pills. Set here because the frozen Tailwind build has
 * no rounded-[10px]; leave rounded-* utilities off that markup.
 */
.filter-btn,
.filter-nav,
.filter-search {
	border-radius: 10px;
}