/* Base helpers (work even before Tailwind finishes compiling) */
body {
	background-color: #ffffff;
	color: #111111;
	-webkit-font-smoothing: antialiased;
}

.text-stroke-primary {
	-webkit-text-stroke: 2px #F25C05;
	color: transparent;
}

.glass-nav {
	background: #ffffff;
}

.stepup-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

.stepup-social-icon {
	display: block;
}

.material-symbols-outlined {
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
	vertical-align: middle;
}

.status-badge-green {
	background-color: #d1fae5;
	color: #065f46;
}

.status-badge-blue {
	background-color: #dbeafe;
	color: #1e40af;
}

.status-badge-yellow {
	background-color: #fef3c7;
	color: #92400e;
}

.status-badge-red {
	background-color: #fee2e2;
	color: #991b1b;
}

.hover-lift {
	transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px -5px rgba(242, 92, 5, 0.15), 0 8px 10px -6px rgba(242, 92, 5, 0.1);
}

.prose-stepup h2,
.prose-stepup h3 {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
}

.prose-stepup p {
	margin-bottom: 1rem;
	line-height: 1.6;
	color: #5a4137;
}

.prose-stepup ul {
	list-style: disc;
	padding-left: 1.25rem;
	margin-bottom: 1rem;
	color: #5a4137;
}

.prose-stepup li {
	margin-bottom: 0.35rem;
}

.instructor-photo {
	aspect-ratio: 3 / 4;
	min-height: 240px;
}

.instructor-card:hover .instructor-overlay {
	opacity: 1;
}

.instructor-card:hover .instructor-image {
	transform: scale(1.05);
}

.image-overlay {
	background: linear-gradient(to top, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.3) 50%, rgba(17, 17, 17, 0.1) 100%);
}

.clip-slant {
	clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 200px;
	gap: 16px;
}

@media (min-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 250px;
	}
}

.gallery-grid .span-2-2 {
	grid-column: span 2;
	grid-row: span 2;
}

.gallery-grid .span-2-1 {
	grid-column: span 2;
	grid-row: span 1;
}

.gallery-grid .span-1-2 {
	grid-column: span 1;
	grid-row: span 2;
}

[data-instructor-filters] button.is-active,
[data-gallery-tabs] button.is-active {
	background-color: #F25C05;
	color: #fff;
	border-color: #F25C05;
}