/* ── Card ─────────────────────────────────────────────────────────────────── */

.gtw-ec-card {
	position: relative;
	overflow: hidden;
	background-color: #e8e2d8;
	border-radius: 16px;
	cursor: pointer;
	transition: background-color 0.4s ease;
	user-select: none;
	-webkit-user-select: none;
}

.gtw-ec-card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ── Link overlay ─────────────────────────────────────────────────────────── */

/* Sits as a sibling (not a wrapper) so nested <a> tags in the description
   stay valid HTML. Covers the whole card so the entire card is clickable;
   raising .gtw-ec-description above it (below) keeps its own links reachable. */
.gtw-ec-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ── Toggle (decorative — card itself handles events) ──────────────────────── */

.gtw-ec-toggle {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	pointer-events: none;
}

/* ── Icon wrapper ─────────────────────────────────────────────────────────── */

.gtw-ec-icon {
	position: relative;
	width: 40px;
	height: 40px;
	display: block;
	flex-shrink: 0;
}

/* ── Plus / Close SVG containers ─────────────────────────────────────────── */

.gtw-ec-icon-plus,
.gtw-ec-icon-close {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.3s ease;
	line-height: 0;
}

.gtw-ec-icon-plus svg,
.gtw-ec-icon-close svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Plus SVG: all strokes follow `color` via currentColor */
.gtw-ec-icon-plus {
	color: #698C0D;
	opacity: 1;
}

/* Close SVG: circle fill + mark stroke via CSS */
.gtw-ec-icon-close {
	color: #698C0D; /* controls × mark stroke */
	opacity: 0;
}

.gtw-ec-icon-close circle {
	fill: #ffffff;
	stroke: #ffffff;
}

/* Show close, hide plus — on hover OR when active */
.gtw-ec-card:hover .gtw-ec-icon-plus,
.gtw-ec-card.is-active .gtw-ec-icon-plus {
	opacity: 0;
}

.gtw-ec-card:hover .gtw-ec-icon-close,
.gtw-ec-card.is-active .gtw-ec-icon-close {
	opacity: 1;
}

/* ── Inner layout ─────────────────────────────────────────────────────────── */

.gtw-ec-inner {
	display: flex;
	flex-direction: column;
	min-height: 220px;
	padding: 24px;
}

/* margin-top: auto pushes the title-wrap to the bottom of the flex column.
   As the description grows (via GSAP), the available space shrinks and the
   title naturally floats upward — no JS measurement needed. */
.gtw-ec-title-wrap {
	margin-top: auto;
}

/* ── Subtitle ─────────────────────────────────────────────────────────────── */

.gtw-ec-subtitle {
	display: block;
	margin-bottom: 4px;
	overflow: hidden;
	max-height: 80px;
	transition: opacity 0.25s ease, max-height 0.3s ease;
}

/* Editor-only fallback (GSAP handles this on the frontend) */
.elementor-editor-active .gtw-ec-card.is-active .gtw-ec-subtitle {
	opacity: 0;
	max-height: 0;
}

/* ── Title ────────────────────────────────────────────────────────────────── */

.gtw-ec-title {
	margin: 0;
	transition: color 0.3s ease;
}

/* ── Description ──────────────────────────────────────────────────────────── */

/* GSAP owns height/visibility on the frontend (inline styles override these).
   The max-height rules below are a CSS-only fallback for the Elementor editor. */
.gtw-ec-description {
	position: relative;
	z-index: 2;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.45s ease, opacity 0.3s ease 0.1s;
}

.gtw-ec-description p:last-child {
	margin-bottom: 0;
}

/* Editor: show description and hide subtitle when previewing active state */
.elementor-editor-active .gtw-ec-card.is-active .gtw-ec-description {
	max-height: 1000px;
	opacity: 1;
}

/* Editor: restore natural layout (no GSAP inline overrides in editor) */
.elementor-editor-active .gtw-ec-title-wrap {
	margin-top: auto;
}

.elementor-editor-active .gtw-ec-card.is-active .gtw-ec-title-wrap {
	margin-top: 0;
}