/* ==========================================================================
   Home page mobile/tablet responsiveness
   Scoped additions on top of the existing template (style.css, responsive.css,
   home.css, menu.css) -- does not remove or replace their rules, only patches
   the specific breakpoints/sections that don't collapse cleanly on small
   screens. Desktop (>=1025px) is intentionally left untouched.
   ========================================================================== */

/* Mobile header (logo bar + search) styling lives in the site-wide
   mobile-nav.css now, since header.jsp is shared by every page -- keeping it
   here (home.jsp-only) left onlineCourse.jsp and others with an unstyled,
   non-sticky header and only the legacy common.css double-shadow. */

/* ---------- Hero banner ---------- */

@media only screen and (max-width: 991.98px) {
	.home-hero-wrap {
		overflow: visible;
		background: #fff;
	}

	.home-hero-carousel {
		position: relative;
	}

	.home-hero-overlay {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		padding: 20px 0 8px;
		background: #fff;
		pointer-events: auto;
	}

	.home-hero-overlay .home-banner-row {
		margin-left: 0 !important;
		text-align: left;
	}

	.home-hero-title {
		font-size: clamp(22px, 6vw, 28px) !important;
		line-height: 1.25;
		color: #0f172a;
		text-shadow: none;
	}

	.home-hero-title__rest {
		color: #0f172a;
	}

	.home-hero-title__mark {
		color: #2D368F;
	}

	.home-hero-desc {
		font-size: 14px !important;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		color: #475569;
		text-shadow: none;
	}

	.home-hero-cta {
		margin-top: 16px;
		justify-content: flex-start;
	}

	.home-hero-cta__btn {
		flex: 1 1 auto;
		height: 44px;
	}

	.home-hero-cta__btn--outline {
		background: #fff;
		color: #2D368F;
		border-color: #2D368F;
	}

	.home-hero-carousel .owl-dots {
		position: absolute;
		bottom: 10px;
	}
}

@media only screen and (max-width: 575.98px) {
	.home-hero-overlay {
		padding: 16px 0 4px;
	}

	.home-hero-cta {
		flex-direction: column;
	}

	.home-hero-cta__btn {
		width: 100%;
	}
}

/* ---------- Partner schools strip ---------- */

@media only screen and (max-width: 575.98px) {
	.home-partners-strip {
		margin-top: 0;
		padding: 12px 0;
	}

	.home-partners-strip__logo {
		height: 52px;
	}
}

/* Same edge-bleed inset as .opening-course-grid and .instructor-rail
   below, applied to a wrapper around the carousel rather than to
   .recommend-company-carousel itself -- Owl Carousel measures that exact
   element's width to build its sliding track, so padding placed directly
   on it throws off its internal math and pushes every slide off-screen.
   The wrapper absorbs the bleed/inset instead, leaving Owl a clean,
   unpadded box to measure, while still lining this section up at the same
   margin as "Browse by Category" / "Online Classes" / "Popular
   Instructors" instead of sitting flush against the screen edge. */
@media only screen and (max-width: 767.98px) {
	.home-partners-strip .partners-carousel-rail {
		margin: 0 -15px;
		padding: 0 15px;
	}
}

/* ---------- Opening Course grid ---------- */

.opening-course-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0;
}

@media only screen and (min-width: 768px) and (max-width: 1024.98px) {
	.opening-course-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

.opening-course-grid > .course-category {
	width: 100% !important;
	margin: 0 !important;
	border-radius: 10px;
}

.online-course-section .course-category a {
	min-height: 56px;
}

.online-course-section .course-category span {
	overflow-wrap: anywhere;
	word-break: normal;
	line-height: 1.35;
}

/* On phones, a horizontally-swipeable chip rail (Udemy-style category
   tabs) scans faster and takes far less vertical space than five-plus
   full-width stacked cards. */
@media only screen and (max-width: 767.98px) {
	.opening-course-grid {
		display: flex;
		flex-wrap: nowrap;
		grid-template-columns: none;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		gap: 10px;
		padding-bottom: 6px;
		margin: 0 -15px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.opening-course-grid > .course-category {
		flex: 0 0 auto;
		width: 200px !important;
		scroll-snap-align: start;
	}

	.opening-course-grid > .course-category a {
		min-height: 48px;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.opening-course-grid > .course-category span {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 13px;
	}

	.opening-course-grid > .course-category a {
		min-height: 48px;
	}
}

/* ---------- Online Classes course cards (owl carousel) ---------- */

.online-course-section .course-card-carousel .item {
	padding: 0;
}

.online-course-section .course-card-carousel .lms-course-card {
	height: auto;
}

@media only screen and (max-width: 767.98px) {
	.online-course-section .course-card-carousel .lms-course-card__title {
		font-size: 15px !important;
		min-height: 0;
	}

	.online-course-section .course-card-carousel .lms-course-card__actions .lms-btn {
		flex: 0 0 auto;
	}
}

/* On touch devices, tiny prev/next arrows are hard to hit accurately --
   swiping the carousel is the natural gesture, so let the dots be the
   only visible navigation. */
@media only screen and (max-width: 767.98px) {
	.course-card-carousel .owl-nav,
	.home-partners-strip .recommend-company-carousel .owl-nav {
		display: none !important;
	}
}

/* .lms-course-card__actions buttons already wrap and share weight
   (.lms-btn) at every width, so no narrow-card override is needed here
   the way the old .classDetail/.enroll-now pairing required. */
@media only screen and (max-width: 1024.98px) {
	.online-course-section .course-card-carousel .lms-course-card__actions .course-enrollment-closed-badge {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ---------- Popular Instructors ---------- */

@media only screen and (max-width: 767.98px) {
	.home-section-head {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-bottom: 12px;
	}

	.home-section-head__more {
		align-self: flex-start;
	}

	.home-cat-rail {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		gap: 8px;
		margin: 0 -15px;
		padding: 0 15px 4px;
		scrollbar-width: none;
	}

	.home-cat-rail::-webkit-scrollbar {
		display: none;
	}

	.home-cat-chip {
		flex: 0 0 auto;
		max-width: 220px;
		scroll-snap-align: start;
	}

	.home-instructor-rail {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.instructor-rail {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		gap: 6px;
		margin: 0 -15px;
		padding: 0 15px 6px;
	}

	.instructor-rail .popular-instructor {
		flex: 0 0 auto;
		width: 128px !important;
		margin: 0 !important;
		scroll-snap-align: start;
	}
}

/* ---------- Training schools + CTA band ---------- */

@media only screen and (max-width: 767.98px) {
	.home-school-grid {
		grid-template-columns: 1fr;
	}

	.home-cta-band {
		padding: 28px 0 !important;
	}

	.home-cta-band .container {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.home-cta-band__desc {
		margin-left: auto;
		margin-right: auto;
	}

	.home-cta-band__actions {
		justify-content: center;
	}

	.home-cta-band__actions .lms-btn {
		flex: 1 1 auto;
	}

	.home-section-title {
		font-size: 20px;
	}

	.home-page .online-course-section {
		padding-top: 24px !important;
	}
}