/*
 * Portfolio card styles.
 *
 * Each card opts in to interactive behavior via data-* attributes — see
 * docs/portfolio-cards-markup.md. The card itself just provides the
 * structural container; backgroundImage, iframe-preview wrap, and click
 * handler are added by portfolio-cards.js when it reads the attributes.
 */

.lexx-portfolio-card {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	min-height: 320px;
	cursor: pointer;
	background-size: cover !important;
	background-position: top center !important;
	background-repeat: no-repeat !important;
	transition: transform 0.3s ease;
}

/* Iframe preview wrap — built lazily by JS on first hover/tap. */
.lexx-iframe-preview-wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	border-radius: 12px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 5;
	background: var(--lexx-white, #fff);
}

.lexx-iframe-preview-wrap iframe {
	width: 1280px !important;
	min-width: 1280px !important;
	max-width: 1280px !important;
	height: 900px !important;
	border: none;
	transform-origin: top right;
	transform: scale(0.26);
	pointer-events: none;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
}

/* Hover preview on devices that support it. */
@media (hover: hover) and (pointer: fine) {
	.lexx-portfolio-card:hover .lexx-iframe-preview-wrap {
		opacity: 1;
	}
}

/* Touch devices: first tap shows preview, second tap navigates.
   JS toggles .lexx-tapped to control this. */
.lexx-portfolio-card.lexx-tapped .lexx-iframe-preview-wrap {
	opacity: 1;
}

/*
 * Stock-photo overlay — ported from legacy Snippet #17.
 *
 * Sits between the card's backgroundImage (the screenshot, z-auto/0) and
 * the iframe preview wrap (z 5). Shows a decorative stock photo by
 * default; fades to 0 on hover, revealing the screenshot underneath.
 * The iframe wrap then loads/fades in on top of both as the third stage.
 *
 * Three-stage reveal:
 *   default → stock photo
 *   hover (CSS, ~500ms) → stock fades, screenshot visible
 *   hover (JS, async) → iframe loads, live page visible
 *
 * The class .has-stock-overlay is set by portfolio-cards.js when the card
 * has a non-empty data-stock-url attribute, so cards without a stock URL
 * skip the overlay entirely (no flash).
 */
.lexx-portfolio-card.has-stock-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--lexx-stock-url);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
	transition: opacity 0.5s ease;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
}

@media (hover: hover) and (pointer: fine) {
	.lexx-portfolio-card.has-stock-overlay:hover::before {
		opacity: 0;
	}
}

.lexx-portfolio-card.has-stock-overlay.lexx-tapped::before {
	opacity: 0;
}

/* Keep Elementor's in-card content (text, buttons) above the overlay. */
.lexx-portfolio-card.has-stock-overlay > * {
	position: relative;
	z-index: 3;
}

/* Hide Elementor's default in-card content so the bg + iframe are clean. */
.lexx-portfolio-card .lexx-portfolio-hover {
	display: none !important;
}
.lexx-portfolio-card .elementor-button-wrapper,
.lexx-portfolio-card a.elementor-button {
	display: none !important;
}

/*
 * Mock-image section (the split-combined mockup graphic on the homepage).
 * Re-hosted from CloudFront → wp-content/uploads/ on 2026-05-28 (image ID 665).
 * Long-term, this image should live in an Elementor image widget so the
 * URL isn't hardcoded in CSS. Flagged for the content-vs-code cleanup pass.
 */
.lexx-mock-img {
	background-image: url("https://lexx.co.il/wp-content/uploads/2026/05/mockup-split-combined_da37e5f2.png") !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	border-radius: 12px !important;
	overflow: hidden !important;
}

.lexx-mock-screen {
	display: none !important;
}