/* =============================================================
   GREEN-i Reveal Card
   green-i-reveal-card.css

   Structure:
     .gi-reveal-card            outer wrapper — hover trigger
       .gi-reveal-card__surface   FIXED height (the widget's Card Height
                                   control) + flex + justify-content:
                                   center. Because the height is fixed
                                   rather than min/max, this box can
                                   never grow no matter what's inside it
                                   — which is what guarantees hovering
                                   can't reflow the row/page, while still
                                   letting real flexbox centering do its
                                   job normally.
         .gi-reveal-card__icon      collapses to zero height/margin on
                                     hover, which is what pulls the title
                                     up into its old spot for free
         .gi-reveal-card__body
           .gi-reveal-card__title     just sits in normal flow
           .gi-reveal-card__desc      hidden via max-height: 0 at rest
                                       (so it does not affect the resting
                                       icon+title centering), expands via
                                       max-height on hover (so it DOES
                                       count towards centering title+desc
                                       as a block). Safe because the
                                       surface's fixed height means this
                                       can only ever grow the content
                                       inside a box that can't itself
                                       grow.
   ============================================================= */

.gi-reveal-card {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
	box-sizing: border-box;
}

a.gi-reveal-card {
	cursor: pointer;
}

/* ── Surface (the actual card box) ───────────────────────────── */

.gi-reveal-card__surface {
	position: relative;
	height: 200px; /* fixed — overridden by the widget's Card Height control. Not min/max: fixed is what makes true centering + guaranteed-no-reflow possible together */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	background-color: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	transition:
		background-color var(--gi-hover-duration, 350ms) ease,
		background var(--gi-hover-duration, 350ms) ease,
		border-color var(--gi-hover-duration, 350ms) ease,
		box-shadow var(--gi-hover-duration, 350ms) ease,
		transform var(--gi-hover-duration, 350ms) ease;
}

/* Scoped behind html.gi-hover-enabled (toggled by JS based on viewport
   width — see green-i-elementor-widgets.js) instead of bare :hover, so
   the reveal animation only fires above the tablet breakpoint even on
   hover-capable pointers (trackpad/mouse) attached to a tablet. */
html.gi-hover-enabled .gi-reveal-card:hover .gi-reveal-card__surface {
	transform: translateY(calc(-1 * var(--gi-hover-lift, 8px)));
}

/* ── Icon: fades up and out on hover ─────────────────────────── */

.gi-reveal-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex-shrink: 0;
	opacity: 1;
	max-height: var(--gi-icon-size, 56px);
	margin-bottom: var(--gi-icon-gap, 16px);
	overflow: hidden;
	transform: translateY(0);
	transition:
		opacity var(--gi-hover-duration, 350ms) ease,
		max-height var(--gi-hover-duration, 350ms) ease,
		margin-bottom var(--gi-hover-duration, 350ms) ease,
		transform var(--gi-hover-duration, 350ms) ease;
}

html.gi-hover-enabled .gi-reveal-card:hover .gi-reveal-card__icon {
	opacity: 0;
	max-height: 0;
	margin-bottom: 0;
	transform: translateY(-16px);
}

.gi-reveal-card__svg {
	display: block;
	transition: fill var(--gi-hover-duration, 350ms) ease;
}

.gi-reveal-card__img {
	display: block;
}

/* Body is just a plain flow container now — no positioning tricks
   needed, since the description toggles in and out of layout instead
   of overlaying on top of it. */
.gi-reveal-card__body {
	width: 100%;
}

/* Reserves room for 2 lines always, regardless of whether this title's
   actual text needs 1 or 2 — otherwise a 1-line title makes the whole
   icon+title block shorter, and centering a shorter block shifts the
   icon down relative to cards with a 2-line title. The `2lh` line
   picks that reserved height up from whatever line-height is actually
   in effect (including from the Typography control), so it can't drift
   out of sync; the calc() above it is just a same-value fallback for
   browsers without the lh unit. */
.gi-reveal-card__title {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: calc(2 * 1.3em);
	min-height: 2lh;
	line-height: 1.3;
	transition: color var(--gi-hover-duration, 350ms) ease;
}

/* max-height: 0 at rest means this contributes nothing to the flex
   column's height, so icon+title center correctly on their own.
   Expanding it on hover makes it real, in-flow content, so
   justify-content: center on the surface naturally re-centers
   title+desc together — no manual position math required.

   Safe from reflowing the page because .gi-reveal-card__surface has a
   FIXED height: this can only grow inside a box that can't itself grow.
   The hover max-height (400px) and line-clamp (15 lines) are both set
   generously — well past what any reasonable Card Height would allow —
   so they're not the thing deciding whether text is cut off. The
   card's own fixed height is: make the card taller and more of the
   description shows in full; the line-clamp only kicks in as a last
   resort for pathologically long text. */
.gi-reveal-card__desc {
	max-height: 0;
	margin-top: 0;
	opacity: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 15;
	line-clamp: 15;
	transform: translateY(16px);
	pointer-events: none;
	transition:
		max-height var(--gi-hover-duration, 350ms) ease,
		margin-top var(--gi-hover-duration, 350ms) ease,
		opacity var(--gi-hover-duration, 350ms) ease,
		transform var(--gi-hover-duration, 350ms) ease;
}

html.gi-hover-enabled .gi-reveal-card:hover .gi-reveal-card__desc {
	max-height: 400px;
	margin-top: 8px;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* ── Tablet & below: always show icon, title, and description ──
   No hover on touch devices, so skip the reveal animation entirely
   and show everything in its final ("hovered") state at rest. */

@media (max-width: 1024px) {
	.gi-reveal-card__icon {
		opacity: 1;
		max-height: var(--gi-icon-size, 56px);
		margin-bottom: var(--gi-icon-gap, 16px);
		transform: translateY(0);
		transition: none;
	}

	.gi-reveal-card__desc {
		max-height: 400px;
		margin-top: 8px;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		transition: none;
	}
}

/* ── Reduced motion: skip the choreography, keep it accessible ─ */

@media (prefers-reduced-motion: reduce) {
	.gi-reveal-card__surface,
	.gi-reveal-card__icon,
	.gi-reveal-card__title,
	.gi-reveal-card__desc {
		transition: none;
	}
}