/* ==========================================================================
   FutbolFirst — Floating Cards widget
   --------------------------------------------------------------------------
   Layers (bottom → top):
     1. .ffcw-fc              — section container (background, overflow:hidden)
     2. .ffcw-fc__title-wrap  — large title, z-index 1 (behind floating cards)
     3. .ffcw-fc__stage       — animation stage, z-index 2 (cards spawn here)
     4. .ffcw-fc__templates   — hidden card templates (display:none, cloned by JS)

   All visual styles (colors, typography, spacing, border, shadow) are
   controlled through Elementor's style controls and generated as scoped
   inline CSS. The rules here provide only structural defaults.
   ========================================================================== */

/* ── Section container ─────────────────────────────────── */
.ffcw-fc {
	position:         relative;
	overflow:         hidden;
	width:            100%;
	min-height:       100vh;   /* default — overridden by Elementor responsive control */
	box-sizing:       border-box;
	background-color: #e8e4dc; /* default fallback — overridden by Group_Control_Background */
}

.ffcw-fc *,
.ffcw-fc *::before,
.ffcw-fc *::after {
	box-sizing: border-box;
}

/* ── Title layer ───────────────────────────────────────── */
/*
 * Fills the entire section, sits behind the cards (z-index 1).
 * display:flex + align-items/justify-content are overridden by
 * the title_v_position / title_h_position Elementor controls.
 */
.ffcw-fc__title-wrap {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;   /* overridden by title_v_position control */
	justify-content: center;   /* overridden by title_h_position control */
	z-index:         1;
	pointer-events:  none;     /* pass clicks through to elements below */
}

.ffcw-fc__title {
	margin:     0;
	padding:    0;
	word-break: break-word;
	/* color, typography, text-align — all via Elementor controls */
}

/* ── Cards stage ───────────────────────────────────────── */
/*
 * Also fills the entire section, in front of the title (z-index 2).
 * JS appends animated card clones here; they are absolutely positioned
 * and clipped by the parent overflow:hidden.
 */
.ffcw-fc__stage {
	position:       absolute;
	inset:          0;
	z-index:        2;
	pointer-events: none;
}

/* ── Individual cards (defaults; all overridden by Elementor) ── */
/*
 * Cards inside .ffcw-fc__stage get position:absolute via JS just before
 * their animation starts. These rules provide visual defaults only.
 */
.ffcw-fc__stage .ffcw-fc__card {
	background-color: rgba( 255, 255, 255, 0.92 );
	border-radius:    16px;
	padding:          24px;
	min-width:        200px;
	max-width:        300px;
}

/* Tablet defaults */
@media ( max-width: 1024px ) {
	.ffcw-fc__stage .ffcw-fc__card {
		min-width: 160px;
		max-width: 240px;
	}
}

/* Mobile defaults */
@media ( max-width: 767px ) {
	.ffcw-fc {
		min-height: 70vh; /* mobile fallback — Elementor responsive control overrides */
	}

	.ffcw-fc__stage .ffcw-fc__card {
		min-width: 140px;
		max-width: 200px;
	}
}

/* ── Card inner elements ───────────────────────────────── */
.ffcw-fc__card-title {
	margin:      0 0 10px;
	padding:     0;
	font-weight: 700;
	/* color, font-size, font-family — via card_title_color / card_title_typography */
}

.ffcw-fc__card-text {
	margin:  0;
	padding: 0;
	/* color, font-size, font-family — via card_text_color / card_text_typography */
}

/* ── Hidden templates (never visible) ─────────────────── */
/* Keeps template cards static so they don't affect layout */
.ffcw-fc__templates {
	display: none !important;
}