/* Giant Truss — home page hover animations
 *
 * Interaction language borrowed from dlyftglobal.com (the parent company's
 * site, given as reference): restrained lifts, soft shadow growth, image
 * zoom. Motion only — no element changes colour on hover.
 */

.elementor-40 * { transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
	.elementor-40 *,
	.elementor-40 *::before,
	.elementor-40 *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ── Category cards (TRUSS / ROOFS / STAGE / BARRICADE) ─────────────────── */
.gt-cat-card {
	transition: transform .32s, box-shadow .32s;
	will-change: transform;
}
.gt-cat-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 34px -12px rgba(123, 79, 244, .38);
}

/* "View all →" pill inside the category card: slides right on hover, no
   colour change. */
.gt-btn.gt-btn-mini {
	transition: transform .28s, box-shadow .28s;
}
.gt-cat-card:hover .gt-btn.gt-btn-mini,
.gt-btn.gt-btn-mini:hover {
	transform: translateX(3px);
}

/* ── Product range tiles ─────────────────────────────────────────────────
   Real <img> here (an Elementor image widget), so the image itself can zoom
   independently of the card's own lift. */
.gt-prod-card {
	transition: transform .32s, box-shadow .32s;
}
.gt-prod-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px -16px rgba(123, 79, 244, .30);
}
.gt-prod-img { overflow: hidden; border-radius: inherit; }
.gt-prod-img img { transition: transform .45s; display: block; }
.gt-prod-card:hover .gt-prod-img img { transform: scale(1.06); }

/* ── News cards ───────────────────────────────────────────────────────── */
.gt-news-card { transition: transform .32s, box-shadow .32s; }
.gt-news-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .22); }
.gt-news-img { overflow: hidden; }
.gt-news-img img { transition: transform .5s; display: block; }
.gt-news-card:hover .gt-news-img img { transform: scale(1.07); }

/* ── Solid buttons (Explore Products, Our Solutions, View All Products,
   Get Custom Solutions, View All News) ─────────────────────────────────── */
.gt-btn.gt-btn-solid {
	transition: transform .26s, box-shadow .26s;
}
.gt-btn.gt-btn-solid:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 26px -10px rgba(95, 52, 214, .55);
}

/* ── Solution pills (Concerts / Corporate Events / Exhibitions / …) ───── */
.gt-btn.gt-btn-pill {
	transition: transform .26s, border-color .26s;
}
.gt-btn.gt-btn-pill:hover {
	transform: translateY(-2px);
}

/* ── Reels (testimonial video) carousel arrows ───────────────────────────
   Sound/pause control colour and the arrows' base purple are pre-existing,
   defined in reels.css — untouched here. Scale is the only addition. */
.gt-reels-nav { transition: transform .22s; }
.gt-reels-nav:hover { transform: translateY(-50%) scale(1.08); }

@media (max-width: 767px) {
	/* Hover states have no meaning on touch; keep transitions for the
	   occasional hover-capable tablet but drop the lift so nothing feels odd
	   under a tap. */
	.gt-cat-card:hover,
	.gt-prod-card:hover,
	.gt-news-card:hover,
	.gt-btn.gt-btn-solid:hover,
	.gt-btn.gt-btn-pill:hover {
		transform: none;
	}
}

/* ── Innovation band ──────────────────────────────────────────────────────
   The award photo carries its subject on the right and deliberate empty space
   on the left, so on desktop the copy sits in that gap and Elementor's overlay
   gradient clears before the trophy (set in the page's own settings).

   Below the tablet breakpoint the crop can no longer show the gap and the
   subject at once — the copy centres (the heading/text/button helpers already
   set align_mobile) and would land straight on the award. So the directional
   wash is replaced with a flat, heavier one purely at this width. Elementor
   paints container overlays on ::before, hence the target. */
@media (max-width: 767px) {
	#gt-innovation::before {
		background-image: none !important;
		background-color: rgba(0, 0, 0, .76) !important;
	}
	#gt-innovation .gt-innov-copy { align-items: center; }
}

/* GT: category card title alignment ---------------------------------------
   The four category cards are bottom-anchored (justify-content: flex-end), so
   each title floated to wherever its subtitle's line count left it:
   ROOFS has 3 lines, TRUSS/STAGE 2, BARRICADE 1 -- measured title tops of
   787 / 807 / 807 / 828, a 41px stagger across a row that should read flat.
   Reserving a uniform 3-line box for the subtitle puts every title, subtitle
   and button on the same baseline. `lh` = one line-height; the px value is the
   fallback for browsers without it.
   -------------------------------------------------------------------------- */
.gt-cat-card .elementor-widget-text-editor {
  min-height: 60px;
  min-height: 3lh;
}
/* GT: end category card title alignment */

/* The gt-btn classes sit on Elementor's full-width widget wrapper, so a shadow
   there painted a purple band across the whole section. Keep the wrapper
   still and give the button itself a small lift instead. */
.elementor-widget.gt-btn.gt-btn-solid:hover,
.elementor-widget.gt-btn.gt-btn-pill:hover {
	transform: none;
	box-shadow: none;
}
.gt-btn.gt-btn-solid .elementor-button:hover,
.gt-btn.gt-btn-solid .elementor-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px -8px rgba(95, 52, 214, .45);
}
.gt-btn.gt-btn-pill .elementor-button:hover { transform: translateY(-2px); box-shadow: none; }