/* =========================================================
   Home page projects slider (Elementor Loop Carousel)
   Widget CSS class: hg-projects-carousel
   Loop item classes: hg-card (inner card container),
                      hg-card__media (image container),
                      project-image (Image widget),
                      project-icon-list (Icon List widget)

   Default: all cards the same size, as in Figma.
   Hover (desktop): the hovered card zooms in and the others shrink
   and move so the gaps stay equal, like the reference slider
   (raanana.neveshuster.co.il). Sizes: --hg-zoom-scale / --hg-side-scale.
   --hg-band-top and --hg-shift are set by projects-slider.js.
   ========================================================= */

.hg-projects-carousel {
	--hg-zoom-scale: 1.2;        /* hovered card (1.3 would cover the form title below) */
	--hg-side-scale: 0.9;        /* the other cards while one is hovered */
	--hg-speed: 0.6s;
	--hg-band: #282F3A;          /* dark band from the middle of the images down */
	--hg-top: 3.3333vw;          /* 64px: section title -> cards (Figma) */
	--hg-bottom: 1.4271vw;       /* + the form section's top padding = Figma 85px */

	/* Elementor's "Offset Width" is px only – this replaces it with vw
	   (3 cards + a partial card on each side) */
	--swiper-offset-size: 11.6406vw !important;

	position: relative;
	z-index: 2;                  /* the zoomed card may overlap the next section */
	padding-top: var(--hg-top);
	padding-bottom: var(--hg-bottom);
	background: linear-gradient(180deg, transparent var(--hg-band-top, 60%), var(--hg-band) 0);
}

/* Clip the cards at the screen sides only, so a zoomed card is never cut
   at the top or bottom (older browsers fall back to "hidden") */
.hg-projects-carousel .swiper {
	overflow: hidden;
	overflow: clip visible;
}
.hg-projects-carousel .swiper-slide.is-zoom {
	z-index: 2;
}

/* ---------- Zoom on hover ---------- */
/* only the card container is scaled (never a widget that also has the class) */
.hg-projects-carousel .hg-card:not(.elementor-widget) {
	transform: none;
	transform-origin: 50% 40%;   /* grows a little up, more down: clears the title and the form */
	transition: transform var(--hg-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hg-projects-carousel.is-zooming .hg-card:not(.elementor-widget) {
	transform: translateX(var(--hg-shift, 0px)) scale(var(--hg-side-scale));
}
.hg-projects-carousel.is-zooming .swiper-slide.is-zoom .hg-card:not(.elementor-widget) {
	transform: translateX(var(--hg-shift, 0px)) scale(var(--hg-zoom-scale));
}

/* ---------- Hover video ([hg_card_video] inside the image container) ---------- */
.hg-card__media {
	position: relative;
	overflow: hidden;
}
.hg-card__media .elementor-widget-shortcode {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	margin: 0 !important;
	pointer-events: none;
	z-index: 1;
}
.hg-card__media .elementor-widget-shortcode .elementor-widget-container,
.hg-card__media .elementor-widget-shortcode .elementor-shortcode {
	height: 100%;
}
.hg-card__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.45s ease;
}
.hg-card.is-video .hg-card__video {
	opacity: 1;
}

/* =========================================================
   Project Card (Loop Item) – image + icon list
   ========================================================= */

/* Image: the link wrapper takes the full width, so the photo fills the card */
.project-image a {
	display: block;
	width: 100%;
}
.project-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	object-fit: cover;
}

/* Icon list: gap between the icon and the text (Figma 14px).
   Needs this specificity to beat Elementor's own 5px rule. */
.elementor-widget.project-icon-list .elementor-icon-list-icon + .elementor-icon-list-text {
	padding-inline-start: 0.7276vw;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.hg-projects-carousel {
		--hg-zoom-scale: 1.12;
		--hg-side-scale: 0.85;
		--hg-top: 4vw;
		--hg-bottom: 3vw;
		--swiper-offset-size: 27vw !important;
	}
	.elementor-widget.project-icon-list .elementor-icon-list-icon + .elementor-icon-list-text {
		padding-inline-start: 1.2vw;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.hg-projects-carousel {
		--hg-zoom-scale: 1.12;
		--hg-side-scale: 0.82;
		--hg-top: 6.4vw;
		--hg-bottom: 2.6667vw;
		--swiper-offset-size: 12vw !important;
	}
	.elementor-widget.project-icon-list .elementor-icon-list-icon + .elementor-icon-list-text {
		padding-inline-start: 2.4vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hg-projects-carousel .hg-card:not(.elementor-widget) {
		transition: none;
	}
}


/* =========================================================
   Project page / popup (Theme Builder → Single → Projects)
   Only what Elementor can't do – everything else is set in Elementor.
   Classes: hg-project-gallery (Image Carousel), badge-divider-gap (Divider)
   ========================================================= */

/* Gallery: the Image Carousel has no height option */
.hg-project-gallery .swiper-slide-image,
.hg-project-gallery .swiper-slide img {
	display: block;
	width: 100%;
	height: 49.6354vw;                 /* 953px */
	height: min(49.6354vw, 100svh);    /* never taller than the screen, so the dots stay visible */
	object-fit: cover;
}

/* Gallery dots: Elementor's dot size is px only and has no spacing option */
.hg-project-gallery .swiper-pagination {
	bottom: 1.25vw !important;         /* 24px from the bottom */
	line-height: 0;
}
.hg-project-gallery .swiper-pagination-bullet {
	width: 0.5729vw !important;        /* 11px */
	height: 0.5729vw !important;
	margin: 0 0.2604vw !important;     /* 21px centre to centre */
	background: #FFFFFF !important;
	opacity: 0.6 !important;
}
.hg-project-gallery .swiper-pagination-bullet-active {
	background: #C9A84C !important;
	opacity: 1 !important;
}

/* ✕ (Image widget): no line-height gap under the icon, so its round
   background on tablet / mobile stays a circle */
.hg-project-close a,
.hg-project-close img {
	display: block;
}

/* Badge divider: Elementor's Gap is px only and not per device */
.badge-divider-gap .elementor-divider {
	padding-block: 0.3125vw !important;   /* 6px */
}
.badge-divider-gap .elementor-divider-separator {
	width: 5.9375vw !important;            /* 114px */
	margin-inline: auto;
}

@media (max-width: 1024px) {
	.hg-project-gallery .swiper-slide-image,
	.hg-project-gallery .swiper-slide img { height: 70vw; height: min(70vw, 100svh); }
	.hg-project-gallery .swiper-pagination { bottom: 2.6042vw !important; }
	.hg-project-gallery .swiper-pagination-bullet {
		width: 1.0417vw !important;        /* 8px @768 */
		height: 1.0417vw !important;
		margin: 0 0.5208vw !important;
	}
	.badge-divider-gap .elementor-divider { padding-block: 0.651vw !important; }
	.badge-divider-gap .elementor-divider-separator { width: 11.7188vw !important; }
}

@media (max-width: 767px) {
	.hg-project-gallery .swiper-slide-image,
	.hg-project-gallery .swiper-slide img { height: 110vw; height: min(110vw, 100svh); }
	.hg-project-gallery .swiper-pagination { bottom: 4.2667vw !important; }
	.hg-project-gallery .swiper-pagination-bullet {
		width: 2.1333vw !important;        /* 8px @375 */
		height: 2.1333vw !important;
		margin: 0 1.0667vw !important;
	}
	.badge-divider-gap .elementor-divider { padding-block: 1.0667vw !important; }
	.badge-divider-gap .elementor-divider-separator { width: 18.6667vw !important; }
}

/* ---------- Project page, part 2: text side ---------- */

/* Stat boxes and the "נותרו" bar hide themselves when their SCF field is empty
   (Elementor shows the empty box otherwise) */
.hg-stat:not(:has(.hg-stat-value .elementor-heading-title)),
.hg-remaining:not(:has(.elementor-heading-title)) {
	display: none !important;
}

/* About text: 8 lines until "קרא עוד" is clicked (Figma height) */
.hg-about-text:not(.is-open) {
	max-height: calc(var(--hg-about-lh, 1.6em) * 8);
	overflow: hidden;
}

/* =========================================================
   Apartment lead form – CF7 inside the Elementor popup
   Figma 1025:1375 (popup 896×703 at 1920 → px ÷ 19.2)
   CF7 wrapper class: hg-lead
   ========================================================= */
.hg-lead {
	--lead-fs: 1.0114vw;           /* 19.42px field text */
	--lead-pad: 0.7292vw;          /* 14px text -> line */
	--lead-gap: 0.8333vw;          /* 16px line -> next field */
	--lead-btn-top: 2.0313vw;      /* 39px last line -> button */
	--lead-btn-h: 2.2917vw;        /* 44px */
	--lead-btn-fs: 1.1458vw;       /* 22px */
	--lead-consent-top: 1.6146vw;  /* 31px button -> consent */
	--lead-check: 1.875vw;         /* 36px checkbox */
	--lead-consent-gap: 0.3792vw;  /* 7px checkbox -> text */
	--lead-consent-fs: 0.625vw;    /* 12px */
	--lead-err-fs: 0.7292vw;       /* 14px */

	direction: rtl;
	font-family: "Almoni DL AAA", sans-serif;
	color: #FFFFFF;
}

/* ---------- Fields: text on a white underline ---------- */
.hg-lead__fields {
	display: flex;
	flex-direction: column;
	gap: var(--lead-gap);
}
.hg-lead .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}
.hg-lead .hg-lead__input {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 var(--lead-pad);
	border: 0;
	border-bottom: 1px solid #FFFFFF;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #FFFFFF;
	font-family: inherit;
	font-weight: 400;
	font-size: var(--lead-fs);
	line-height: 1.5;
	text-align: right;
	outline: none;
	transition: border-color 0.3s ease;
}
.hg-lead .hg-lead__input::placeholder {
	color: #FFFFFF;
	opacity: 1;
}
.hg-lead .hg-lead__input:focus {
	border-bottom-color: #D8B16E;
}
.hg-lead .hg-lead__input:-webkit-autofill {
	-webkit-text-fill-color: #FFFFFF;
	box-shadow: 0 0 0 100vw #2F3540 inset;
	caret-color: #FFFFFF;
}

/* ---------- Submit: gold gradient ---------- */
.hg-lead__submit {
	position: relative;
	margin-top: var(--lead-btn-top);
}
.hg-lead .hg-lead__button {
	display: block;
	width: 100%;
	height: var(--lead-btn-h);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: linear-gradient(90deg, #FFF4B8 0.16%, #D8B16E 28.21%, #A07844 100.33%);
	color: #FFFFFF;
	font-family: inherit;
	font-weight: 400;
	font-size: var(--lead-btn-fs);
	line-height: 1;
	cursor: pointer;
	transition: filter 0.3s ease, box-shadow 0.3s ease;
}
.hg-lead .hg-lead__button:hover,
.hg-lead .hg-lead__button:focus-visible {
	filter: brightness(1.08);
	box-shadow: 0 0.5208vw 1.25vw rgba(160, 120, 68, 0.35);
}
.hg-lead .wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: 1vw;
	margin: 0;
	transform: translateY(-50%);
}

/* ---------- Consent checkbox ---------- */
.hg-lead__consent {
	margin-top: var(--lead-consent-top);
}
.hg-lead .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.hg-lead .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: var(--lead-consent-gap);
	cursor: pointer;
}
.hg-lead .wpcf7-acceptance input[type="checkbox"] {
	flex-shrink: 0;
	width: var(--lead-check);
	height: var(--lead-check);
	margin: 0;
	border: 1px solid #FFFFFF;
	border-radius: 0;
	background: transparent no-repeat center / 60% auto;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.hg-lead .wpcf7-acceptance input[type="checkbox"]:checked {
	border-color: #D8B16E;
	background-color: #D8B16E;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6l4.5 4.5L14.5 1.5' fill='none' stroke='%23ffffff' stroke-width='2.2'/%3E%3C/svg%3E");
}
.hg-lead .wpcf7-acceptance input[type="checkbox"]:focus-visible {
	outline: 1px solid #FFFFFF;
	outline-offset: 2px;
}
.hg-lead .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: var(--lead-consent-fs);
	max-width: var(--lead-consent-w, 31.1979vw);   /* 599px: wraps like Figma */
	line-height: 1.1758;
	color: #FFFFFF;
	text-align: right;
}

/* ---------- Errors / response ---------- */
.hg-lead .wpcf7-not-valid-tip {
	position: absolute;
	top: calc(100% + 0.2vw);
	right: 0;
	font-size: var(--lead-err-fs);
	color: #FF8A80;
}
.hg-lead .hg-lead__input.wpcf7-not-valid {
	border-bottom-color: #FF8A80;
}
.hg-lead .wpcf7-not-valid input[type="checkbox"] {
	border-color: #FF8A80;
}
.hg-lead + .wpcf7-response-output,
.hg-lead ~ .wpcf7-response-output {
	margin: var(--lead-consent-top) 0 0 !important;
	padding: 0.5vw 0 !important;
	border: 0 !important;
	color: #FFFFFF;
	font-family: "Almoni DL AAA", sans-serif;
	font-size: var(--lead-fs);
	text-align: center;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.hg-lead {
		--lead-fs: 2.0833vw;           /* 16px @768 */
		--lead-pad: 1.3021vw;
		--lead-gap: 1.5625vw;
		--lead-btn-top: 3.6458vw;
		--lead-btn-h: 5.7292vw;        /* 44px */
		--lead-btn-fs: 2.3438vw;       /* 18px */
		--lead-consent-top: 2.6042vw;
		--lead-check: 3.125vw;         /* 24px */
		--lead-consent-gap: 1.0417vw;
		--lead-consent-fs: 1.4323vw;   /* 11px */
		--lead-err-fs: 1.5625vw;
		--lead-consent-w: none;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.hg-lead {
		--lead-fs: 4vw;                /* 15px @375 */
		--lead-pad: 2.6667vw;
		--lead-gap: 3.2vw;
		--lead-btn-top: 6.4vw;
		--lead-btn-h: 11.7333vw;       /* 44px */
		--lead-btn-fs: 4.5333vw;       /* 17px */
		--lead-consent-top: 4.8vw;
		--lead-check: 5.8667vw;        /* 22px */
		--lead-consent-gap: 2.1333vw;
		--lead-consent-fs: 2.9333vw;   /* 11px */
		--lead-err-fs: 3.2vw;
	}
}