/* Responsive hotfixes (small screens + overflow) */

/* Theme previously forced min-width: 360px on html, which breaks 320px devices (horizontal overflow). */
html {
	min-width: 320px;
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
}

/* Hero title: prevent horizontal overflow on 320px devices */
@media (max-width: 360px) {
	.hero__title {
		/* Slightly smaller on 320–360 to avoid awkward breaking of "Зарабатывай" */
		font-size: clamp(28px, 9.3vw, 44px);
		line-height: 1.08;
		/* Keep word wrapping natural (by spaces) */
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}
}

/* Catalog block: prevent "Смотреть все курсы" button from sticking out on mobile */
@media (max-width: 576px) {
	.catalog__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.catalog__header-main {
		min-width: 0;
	}

	.catalog__all-btn {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
}

/* Single course: prevent the help/mini-form block from overflowing on mobile */
@media (max-width: 768px) {
	.course__main {
		/* Force single-column layout on mobile (prevents overflow from fixed grid tracks) */
		grid-template-columns: 1fr !important;
	}

	.course__main,
	.course__media {
		min-width: 0;
	}

	.course__media {
		max-width: 100%;
		overflow: hidden;
	}

	/* Tutor thumbnail image must never push layout wider than viewport */
	.course__media .tutor-course-thumbnail,
	.course__media .tutor-course-thumbnail img {
		max-width: 100%;
		width: 100%;
		height: auto;
		display: block;
	}

	.course__form {
		max-width: 100%;
		width: 100%;
	}

	.mini-form__title {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.mini-form__btn {
		width: 100%;
	}
}