/*
 * נקודות שבירה
 *
 * טאבלט: 768px–1024px
 * מובייל: עד 767px
 *
 * דסקטופ (1025px ומעלה) נשאר ב-style.css, בלי media query.
 * כאן נכנסים רק שינויים שצריכים לחול על טאבלט או על מובייל.
 */

/* טאבלט */
@media (min-width: 768px) and (max-width: 1024px) {
	.container {
		width: calc(100% - 32px);
	}

	.catalog--projects .product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.catalog--products .product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.project-gallery__grid {
		columns: 2;
	}
}

/* מובייל */
@media (max-width: 767px) {
	.site-header__inner {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
		padding: 16px 0;
	}

	.site-nav .menu {
		flex-direction: column;
		gap: 8px;
	}

	.site-nav .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		padding: 4px 0;
		padding-inline-start: 16px;
		border: 0;
		box-shadow: none;
		background: transparent;
	}

	.site-nav .menu-item-has-children > a::after {
		display: none;
	}

	.site-nav .sub-menu a {
		padding: 4px 0;
		white-space: normal;
	}

	.catalog {
		width: calc(100% - 32px);
		padding: 20px 0 48px;
	}

	.breadcrumbs-bar {
		padding-top: 20px;
	}

	.catalog-head h1 {
		margin-bottom: 24px;
		font-size: 32px;
	}

	.product__layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.product__media {
		order: -1;
		max-width: 100%;
	}

	.product-grid,
	.catalog--projects .product-grid,
	.catalog--products .product-grid {
		grid-template-columns: 1fr;
	}

	.catalog--products .product-card__media {
		height: 220px;
		min-height: 220px;
		padding: 20px 16px;
	}

	.project-gallery__grid {
		columns: 1;
	}

	.project-gallery__title {
		font-size: 24px;
	}

	.project-lightbox {
		padding: 72px 16px 88px;
	}

	.project-lightbox__figure img {
		max-height: calc(100vh - 180px);
	}

	.project-lightbox__nav--prev,
	.project-lightbox__nav--next {
		top: auto;
		bottom: 20px;
		transform: none;
	}

	/*
	 * כרטיס הטופס, בעמוד צור קשר ובפוטר. שכבת הכיסוי מוגדרת לבהירות 200%
	 * וטשטוש 42px, אז באייפון הכרטיס נמרח ללבן עם הילה. במובייל נשאר רקע הנייר.
	 */
	.elementor-166 .elementor-element.elementor-element-2af45d1e {
		--width: 100% !important;
	}

	.elementor-166 .elementor-element.elementor-element-2af45d1e::before,
	.elementor-18 .elementor-element.elementor-element-30953308::before {
		filter: none !important;
		opacity: 0 !important;
	}
}

/*
 * ההמבורגר מחליף את הקישורים מ-1024px ומטה.
 * הקפסולה הבז' נשארת מאחורי הכפתור בלי תוכן, אז מורידים אותה
 * ומשאירים כפתור קטן ופאנל תפריט שנפתח מתחתיו.
 */
@media (max-width: 1024px) {
	.elementor-12 .elementor-element.elementor-element-57689ff4 {
		width: auto !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
	}

	.elementor-12 .elementor-element.elementor-element-57689ff4 .elementor-menu-toggle {
		margin: 0 !important;
		width: 44px;
		height: 44px;
		padding: 0 !important;
		border: 1px solid var(--clamp-line) !important;
		border-radius: 12px !important;
		background: var(--clamp-paper) !important;
		color: var(--clamp-ink) !important;
		box-shadow: 0 1px 2px rgba(42, 36, 30, 0.06);
	}

	.elementor-12 .elementor-element.elementor-element-57689ff4 .elementor-menu-toggle svg {
		width: 18px;
		height: 18px;
	}

	.elementor-12 .elementor-element.elementor-element-57689ff4 .elementor-menu-toggle:hover,
	.elementor-12 .elementor-element.elementor-element-57689ff4 .elementor-menu-toggle:focus {
		background: var(--clamp-canvas-deep) !important;
		color: var(--clamp-ink) !important;
	}

	.elementor-12 .elementor-element.elementor-element-57689ff4 .elementor-menu-toggle:focus-visible {
		outline: 2px solid var(--clamp-accent);
		outline-offset: 3px;
	}

	.elementor-12 .elementor-element.elementor-element-57689ff4 .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute !important;
		top: calc(100% + 8px) !important;
		inset-inline-start: 0 !important;
		inset-inline-end: auto !important;
		width: min(280px, calc(100vw - 32px)) !important;
		max-height: 70vh !important;
		margin: 0 !important;
		padding: 8px 0 !important;
		background: var(--clamp-paper) !important;
		border: 1px solid var(--clamp-line) !important;
		border-radius: 16px !important;
		box-shadow: 0 16px 40px rgba(42, 36, 30, 0.12);
		overflow: auto !important;
	}

	.elementor-12 .elementor-element.elementor-element-57689ff4 nav.elementor-nav-menu--dropdown .elementor-nav-menu > li > ul.sub-menu,
	.elementor-12 .elementor-element.elementor-element-57689ff4 nav.elementor-nav-menu--dropdown ul.sub-menu li > ul.sub-menu {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		background: var(--clamp-canvas) !important;
	}

	.elementor-12 .elementor-element.elementor-element-57689ff4 nav.elementor-nav-menu--dropdown ul.sub-menu a {
		white-space: normal !important;
	}

	.elementor-128 h2.clamp-why-title {
		padding: 16px 12px;
		font-size: 28px;
	}
}