/**
 * FutbolFirst — Pillar Cards widget styles
 *
 * BEM block: .ffcw-pc
 *
 * Layout relies entirely on Swiper for horizontal scroll/swipe and on
 * Elementor's responsive CSS-variable injection for per-breakpoint values.
 *
 * CSS custom property defaults (overridden per-breakpoint by Elementor):
 *   --ffcw-pc-img-h : image-area height (set by image_height responsive control)
 */

/* =============================================================================
   Root wrapper
   ========================================================================== */

.ffcw-pc {
	position: relative;
	overflow: hidden; /* clip the swiper + the overlay title to the widget box */
	width: 100%;      /* guarantee full width so the overlay title spans all columns */
	box-sizing: border-box;
}

/* =============================================================================
   Swiper
   ========================================================================== */

.ffcw-pc__swiper {
	overflow: hidden;
	width: 100%;
}

/* When slidesPerView is 'auto' each slide has an explicit inline width set by JS */
.ffcw-pc__swiper.ffcw-pc__swiper--auto .ffcw-pc__item {
	/* width is set inline by JS from the column_width control value */
	flex-shrink: 0;
}

/* =============================================================================
   Item (swiper-slide)
   ========================================================================== */

.ffcw-pc__item {
	display: flex;
	flex-direction: column;
	/* No padding by default — set via the responsive control */
	box-sizing: border-box;
}

/* =============================================================================
   Image area
   ========================================================================== */

.ffcw-pc__image-area {
	position: relative;
	height: var(--ffcw-pc-img-h, 380px);
	overflow: hidden;
	flex-shrink: 0;
}

.ffcw-pc__image-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Overlay — background (solid or gradient) applied via Group_Control_Background */
.ffcw-pc__image-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* =============================================================================
   Badge (number)
   ========================================================================== */

.ffcw-pc__badge-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	/* align-items and justify-content set by responsive controls */
	align-items: flex-end;
	justify-content: center;
	padding: 20px;
	z-index: 2;
	pointer-events: none;
	box-sizing: border-box;
}

.ffcw-pc__badge {
	width: 68px;
	height: 68px;
	flex-shrink: 0;
	border-radius: 50%;
	border-style: solid;
	border-width: 2px;
	border-color: #ffffff;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* font set by Group_Control_Typography */
}

/* =============================================================================
   Overlay title (floats over the image row)
   ========================================================================== */

.ffcw-pc__overlay-title {
	/* Positioned inside .ffcw-pc__swiper (which has position:relative from
	   Swiper's own CSS). left:0 + right:0 ensures it spans the full swiper
	   container width on every breakpoint. JS mirrors the Swiper translateX
	   so the title scrolls with the slides. */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;           /* explicit safeguard against theme max-width rules */
	max-width: 100%;
	box-sizing: border-box;
	/* Height synced with image-area height via CSS variable (set by the
	   image_height responsive control selectors). */
	height: var(--ffcw-pc-img-h, 380px);
	z-index: 5;
	pointer-events: none;
	will-change: transform; /* smooth GPU-composited scrolling */
	/* Layout — default centred, overridden by responsive controls */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* colour / typography set by controls */
	color: #ffffff;
	/* Prevent margin collapsing */
	margin: 0;
	padding: 20px 40px;
}

/* =============================================================================
   Content area
   ========================================================================== */

/* Per-column padding is set via --ffcw-pad-* CSS custom properties on the
   slide element (inline style from PHP). The fallback chain ensures tablet
   inherits desktop when no tablet value is set, and mobile inherits tablet
   (then desktop) when no mobile value is set. */
.ffcw-pc__content {
	flex: 1 1 auto;
	box-sizing: border-box;
	padding: var(--ffcw-pad-d, 24px);
}

@media (max-width: 1024px) {
	.ffcw-pc__content {
		padding: var(--ffcw-pad-t, var(--ffcw-pad-d, 24px));
	}
}

@media (max-width: 767px) {
	.ffcw-pc__content {
		padding: var(--ffcw-pad-m, var(--ffcw-pad-t, var(--ffcw-pad-d, 24px)));
	}
}

.ffcw-pc__subtitle {
	margin: 0;
}

.ffcw-pc__title {
	margin: 0;
}

.ffcw-pc__text {
	margin: 0;
}

/* Remove default margins on paragraphs inside the WYSIWYG text block */
.ffcw-pc__text > p:last-child {
	margin-bottom: 0;
}

/* =============================================================================
   Equal-height slides
   Each slide grows to its content height; align-items: stretch makes them all
   match the tallest. height: auto overrides Swiper's default height: 100%.
   ========================================================================== */

.ffcw-pc__swiper .swiper-wrapper {
	align-items: stretch;
}

.ffcw-pc__swiper .ffcw-pc__item {
	height: auto;
}