/**
 * JMOTO Works — Responsive Stylesheet
 * Breakpoint overrides only. Base/desktop rules live in main.css.
 *
 * Breakpoint scale:
 *   1600px   Large desktop  (container hits its max width)
 *   1200px   Laptop
 *   980px    Tablet
 *   767px    Large mobile / small tablet
 *   640px    Mobile
 *   400px    Small mobile
 *
 * @package JMOTO_Works
 * @since   1.0.0
 */

/* ============================================================
   Laptop (≤1200px)
   ============================================================ */
@media (max-width: 1200px) {
	.jmoto-category-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.jmoto-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.jmoto-brand-row {
		grid-template-columns: repeat(4, 1fr);
	}

	.jmoto-service-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.jmoto-post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   Tablet (≤980px)
   ============================================================ */
@media (max-width: 980px) {
	.jmoto-container {
		padding-left: 28px;
		padding-right: 28px;
	}

	.jmoto-primary-nav,
	.jmoto-messenger-btn span,
	.jmoto-nav-placeholder-notice {
		display: none;
	}

	.jmoto-offcanvas-toggle {
		display: flex;
	}

	.jmoto-category-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.jmoto-brand-row {
		grid-template-columns: repeat(3, 1fr);
	}

	.jmoto-contact__grid {
		grid-template-columns: 1fr;
	}

	.jmoto-contact__map {
		min-height: 260px;
	}

	.jmoto-need-a-part__inner {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	#jmoto-categories,
	#jmoto-featured-products,
	#jmoto-brands,
	#jmoto-services,
	#jmoto-reviews,
	#jmoto-need-a-part,
	#jmoto-contact {
		padding: 72px 0;
	}
}

/* ============================================================
   Large Mobile / Small Tablet (≤767px)
   ============================================================ */
@media (max-width: 767px) {
	.jmoto-page-wrap {
		padding: 48px 24px 72px;
	}

	.jmoto-container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.jmoto-hero__scroll-cue {
		left: 20px;
		bottom: 22px;
	}

	.jmoto-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.jmoto-service-grid {
		grid-template-columns: 1fr;
	}

	.jmoto-post-grid {
		grid-template-columns: 1fr;
	}

	.jmoto-footer-bottom__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.jmoto-post-navigation {
		flex-direction: column;
	}

	.jmoto-404 {
		padding: 100px 24px;
	}
}

/* ============================================================
   Mobile (≤640px)
   ============================================================ */
@media (max-width: 640px) {
	.jmoto-category-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.jmoto-category-card {
		padding: 22px 18px;
	}

	.jmoto-brand-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.jmoto-hero.has-bg-image,
	.jmoto-hero {
		background-attachment: scroll;
	}

	.jmoto-hero__title {
		font-size: clamp(44px, 14vw, 72px);
	}

	.jmoto-search-toggle,
	.jmoto-cart-link {
		display: none;
	}

	.jmoto-site-header__actions {
		gap: 10px;
	}

	.jmoto-messenger-btn {
		padding: 10px 16px;
	}

	.jmoto-hero__actions .jmoto-btn,
	.jmoto-need-a-part__actions .jmoto-btn,
	.jmoto-footer-cta__actions .jmoto-btn {
		width: 100%;
	}

	.jmoto-hero__actions,
	.jmoto-footer-cta__actions {
		flex-direction: column;
	}

	.jmoto-section-title {
		font-size: clamp(28px, 8vw, 38px);
	}

	.jmoto-footer-widgets__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Small Mobile (≤400px)
   ============================================================ */
@media (max-width: 400px) {
	.jmoto-category-grid,
	.jmoto-brand-row {
		grid-template-columns: 1fr;
	}

	.jmoto-hero__location {
		font-size: 10px;
		padding: 6px 10px;
	}

	.jmoto-offcanvas__panel {
		width: 100vw;
	}

	.jmoto-404__title {
		font-size: 64px;
	}
}

/* ============================================================
   Orientation
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
	.jmoto-hero {
		min-height: auto;
		padding: 120px 0 60px;
	}

	.jmoto-hero__inner {
		padding-top: 0;
	}

	.jmoto-offcanvas__panel {
		overflow-y: auto;
	}
}

@media (orientation: portrait) and (max-width: 767px) {
	.jmoto-hero__content {
		max-width: 100%;
	}
}

/* ============================================================
   Print
   ============================================================ */
@media print {
	.jmoto-site-header,
	.jmoto-offcanvas,
	.jmoto-offcanvas-backdrop,
	.jmoto-back-to-top {
		display: none !important;
	}
}