/* Awelle landing (front page) customizations. Scoped to body.home. */

/* Top menu off on the landing (logo kept). */
body.home .qodef-header-navigation,
body.home .qodef-mobile-header-navigation,
body.home .qodef-mobile-header-opener,
body.home .qodef-side-area-opener {
	display: none !important;
}

/* Avoid horizontal overflow from skewed gallery transforms on the landing. */
body.home {
	overflow-x: hidden;
}

/* Portfolio galleries: remove the "Latest projects" category label. */
body.home .elementor-widget-gracey_core_portfolio_list .qodef-e-info-category {
	display: none !important;
}

/* Portfolio galleries: keep hover effect but not clickable. */
body.home .elementor-widget-gracey_core_portfolio_list a {
	cursor: default;
}

/* ---- Mobile/tablet landing fixes ---- */
@media (max-width: 1024px) {
	/* Skew galleries: drop rotation and the oversized JS-set height so they're compact. */
	body.home .qodef-skew-slider-holder .qodef-portfolio-list.qodef-swiper--initialized {
		transform: none !important;
	}
	/* The skew effect uses GSAP to set an inline transform (xPercent:116) that pushes
	   the slider off-screen, plus opacity:0 until the appear animation. On mobile we
	   keep it in place and visible so images don't overflow or stay hidden. */
	body.home .qodef-skew-slider-holder .qodef-slider-holder {
		transform: none !important;
		opacity: 1 !important;
	}
	body.home .qodef-skew-slider-holder {
		height: auto !important;
		min-height: 0 !important;
		padding-top: 24px !important;
	}
	/* Constrain slide images so the whole image fits the screen and isn't cropped
	   mid-rotation. Center each slide's image. */
	body.home .qodef-skew-slider-holder .qodef-auto-width-slider .qodef-e-image img,
	body.home .qodef-skew-slider-holder .qodef-auto-width-slider .swiper-slide img {
		max-width: 78vw !important;
		height: auto !important;
	}
	body.home .qodef-skew-slider-holder .swiper-slide {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* Clip slides at the container edge instead of letting them spill/crop oddly. */
	body.home .qodef-skew-slider-holder .qodef-swiper-container {
		overflow: hidden !important;
	}
	/* Keep the logo compact so it doesn't collide with the language switcher. */
	body.home .qodef-header-logo-image {
		max-height: 40px !important;
		width: auto !important;
	}
	/* Negative section margins are a desktop overlap effect; neutralize on mobile
	   so the gallery doesn't cover the hero text. */
	body.home .elementor-section:has(.qodef-skew-slider-holder) {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}


/* ==========================================================================
   "What we do" service blocks (image06) — keep the existing colored tiles and
   enhance them with a hover lift + accent. Apply the class "awelle-service" to
   each of the 4 blocks in Elementor (Advanced → CSS Classes). Wrap the new
   one-line description in an element with class "awelle-service__desc".
   Reversible: delete this block + the classes in Elementor to restore.
   ========================================================================== */
:root {
	/* Brand accent (the orange used elsewhere on the site). Change to taste. */
	--awelle-accent: #f5821f;
}

body.home .awelle-service {
	position: relative;
	cursor: default;
	transition: transform .35s cubic-bezier(.18, .79, .48, .99), box-shadow .35s ease;
}

/* Accent bar that draws in on hover. */
body.home .awelle-service::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--awelle-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s cubic-bezier(.18, .79, .48, .99);
}

body.home .awelle-service:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
}

body.home .awelle-service:hover::after {
	transform: scaleX(1);
}

/* Description phrase stays visible; gets highlighted on hover. */
body.home .awelle-service__desc {
	transition: color .3s ease;
}

body.home .awelle-service:hover .awelle-service__desc {
	color: var(--awelle-accent);
}

/* Touch devices: no hover, so keep the accent bar shown. */
@media (hover: none) {
	body.home .awelle-service::after {
		transform: scaleX(1);
	}
}


/* ==========================================================================
   Gallery hover (image02): show title + subtitle. Set the portfolio widget's
   item layout to "Info on Hover" in Elementor and enable the Excerpt — the
   excerpt renders as the subtitle. This only styles it (additive/no-op if the
   excerpt is empty). Title/excerpt color is already handled by the parent CSS.
   ========================================================================== */
body.home .qodef-portfolio-list.qodef-item-layout--info-on-hover .qodef-e-title {
	margin: 0 0 6px;
}

body.home .qodef-portfolio-list.qodef-item-layout--info-on-hover .qodef-e-excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	max-width: 32ch;
}


/* ==========================================================================
   Callouts section: neutralize the -192px top margin on desktop+
   ----------------------------------------------------------------------------
   The callouts section (#b4f8c9f) has margin-top: -192px so its decorative
   background image used to "bleed" up over the previous section. Now that the
   background was removed, those -192px just make the 4 callouts cover the
   "HOW WE WORK" button at the bottom of the previous section. Drop the
   negative margin on desktop and tablet so the callouts start cleanly after
   the section above. The -192px is fine on mobile because padding_tablet:250
   already pushes the content well below the overlap zone.
   ========================================================================== */
@media (min-width: 1025px) {
	body.home .elementor-element-b4f8c9f {
		margin-top: 0 !important;
	}
}