/* ==========================================================================
   FutbolFirst — Showcase Grid widget
   --------------------------------------------------------------------------
   Cell layers (bottom → top):
     1. .ffcw-sg__inner           — background image carousel (Swiper)
     2. .ffcw-sg__title-area      — top sub-area (title + its own overlay)
        .ffcw-sg__image-area      — bottom sub-area (its own overlay)
     3. .ffcw-sg__cell-link       — full-cell clickable link (optional)
     4. .ffcw-sg__nav, inner-dots — interactive controls (above link)
   ========================================================================== */

.ffcw-sg {
	position: relative;
	width: 100%;
	background: transparent;
	/* Layout fallback variables (used by the CSS-Grid fallback below).
	   The widget overrides these per breakpoint via responsive controls. */
	--ffcw-sg-cols: 2;
	--ffcw-sg-rows: 2;
	--ffcw-sg-gap: 20px;
}

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

/* Outer wrapper ------------------------------------------------------------*/
.ffcw-sg__outer {
	overflow: visible;
	width: 100%;
}

/* Layout is driven by the mode class that JS adds to the widget root:
   - .ffcw-sg--multi-row → CSS Grid (cols × auto rows, all cells visible)
   - .ffcw-sg--single-row → flex layout (Swiper carousel takes over)
   Default (no class yet, before JS runs) mirrors multi-row so there is no
   FOUC in the common case. */
.ffcw-sg__outer > .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(var(--ffcw-sg-cols, 2), minmax(0, 1fr));
	gap: var(--ffcw-sg-gap, 20px);
}

.ffcw-sg--multi-row .ffcw-sg__outer > .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(var(--ffcw-sg-cols, 2), minmax(0, 1fr));
	gap: var(--ffcw-sg-gap, 20px);
}

.ffcw-sg--single-row .ffcw-sg__outer > .swiper-wrapper {
	display: flex;
	grid-template-columns: none;
	gap: 0;
}

/* Cell ---------------------------------------------------------------------*/
.ffcw-sg__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: 460px;
	overflow: hidden;
	background: #1a1a1a;
	isolation: isolate;
	/* iOS Safari: during outer-Swiper swipe the parent gets a transform, and
	   `overflow: hidden` + `border-radius` fails to clip children unless the
	   clipping element is its own compositing layer. Promoting the cell with
	   translateZ(0) also stabilises stacking order between the background
	   image carousel and the overlays, preventing the image from briefly
	   flashing on top during the slide transition. */
	transform: translateZ(0);
}

/* Layer 1 — background carousel --------------------------------------------*/
/*
 * IMPORTANT: .ffcw-sg__inner, .ffcw-sg__title-area and .ffcw-sg__image-area
 * intentionally do NOT set z-index. Stacking relies on DOM order so that
 * `mix-blend-mode` applied to the overlays can blend with the image behind
 * (mix-blend-mode only works inside the same stacking context as the backdrop).
 */
.ffcw-sg__inner {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* Pin the image carousel below the cell-overlay / title-area / image-area.
	   z-index: -1 (negative, inside the cell's `isolation: isolate` stacking
	   context) is more robust than z-index: 0 + DOM order: during an outer
	   Swiper swipe on iOS Safari the compositor promotes each slide into its
	   own GPU layer and the z-index:0 / z-index:auto tie was being resolved
	   the wrong way — the image briefly painted above the overlays until the
	   transition ended. Negative z-index puts the image in a lower paint
	   layer that the compositor cannot re-order above the overlays.
	   mix-blend-mode on the overlays still works because they share the same
	   stacking context (the cell). Also overrides Swiper's default
	   `.swiper { z-index: 1 }`. */
	z-index: -1;
}

.ffcw-sg__inner > .swiper-wrapper {
	display: flex;
	grid-template-columns: none;
	gap: 0;
	/* Override Swiper's default `.swiper-wrapper { z-index: 1 }` for the same
	   reason: keep the wrapper inside inner's stacking context at its natural
	   level (0). */
	z-index: auto;
	/* NOTE: no static `transform` on the wrapper. Swiper applies its own
	   transforms during transitions. A permanent translate3d(0,0,0) here used
	   to create a nested compositing layer that, combined with the outer
	   Swiper transform, caused iOS Safari to drop the semi-transparent
	   title/image overlays during outer swipes. */
}

.ffcw-sg__image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}

.ffcw-sg__image--empty {
	background: linear-gradient(135deg, #2a2a2a, #555);
}

/* Cell-wide overlay — sits above the image carousel and below the sub-area
   overlays. No background by default (invisible until user configures it
   from Style > Cell > Cell-wide overlay). */
.ffcw-sg__cell-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Keep the overlay promoted to its own GPU layer so iOS Safari doesn't
	   temporarily drop it while the outer Swiper is transforming. */
	will-change: transform;
	transform: translateZ(0);
}

/* Layer 2 — title sub-area + image sub-area --------------------------------*/
/* No z-index here — see note above. */
.ffcw-sg__title-area,
.ffcw-sg__image-area {
	position: relative;
	pointer-events: none; /* overlays never block link / arrows */
}

.ffcw-sg__title-area {
	flex: 0 0 140px;
}

.ffcw-sg__image-area {
	flex: 1 1 auto;
}

.ffcw-sg__title-overlay,
.ffcw-sg__image-overlay {
	position: absolute;
	inset: 0;
	/* Force each overlay into its own compositing layer. Without this, iOS
	   Safari occasionally skipped painting the semi-transparent backgrounds
	   during a concurrent outer-Swiper transition, exposing the raw image
	   underneath until the swipe settled. */
	will-change: transform;
	transform: translateZ(0);
}

.ffcw-sg__title-overlay {
	background-color: rgba(14, 36, 80, 0.55);
}

.ffcw-sg__image-overlay {
	background-color: rgba(0, 20, 60, 0.15);
}

.ffcw-sg__title-inner {
	position: relative;
	padding: 28px;
	text-align: left;
}

/* Divider between title-area and image-area.
   The line is drawn as a ::after pseudo-element anchored to the bottom of
   title-area. All its properties (style/width/color/horizontal padding) are
   controlled from "Style > Divider". When the style is "none" or width = 0
   nothing is rendered. */
.ffcw-sg__title-area::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-top: 0 solid transparent;
	pointer-events: none;
}

/* Title --------------------------------------------------------------------*/
.ffcw-sg__title {
	margin: 0;
	color: #fff;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(28px, 3vw, 48px);
	/* Ensure titles wrap at the cell width regardless of theme defaults. */
	white-space: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: manual;
	max-width: 100%;
	/* Ensure text-stroke values supplied via Elementor controls have something to bind to. */
	-webkit-text-stroke-color: transparent;
	-webkit-text-stroke-width: 0;
}

.ffcw-sg__title p {
	margin: 0;
}

.ffcw-sg__title p + p {
	margin-top: 0.15em;
}

/* Layer 3 — clickable link (full cell, below controls) ---------------------*/
.ffcw-sg__cell-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	text-decoration: none;
	color: transparent;
	font-size: 0;
	line-height: 0;
	/* Indicate clickable area with a pointer when a link is set. */
	cursor: pointer;
}

/* CSS variables used by the arrow button and its arc-border pseudo-element. */
.ffcw-sg {
	--ffcw-arc-color: rgba(255, 255, 255, 0.9);
	--ffcw-arc-width: 1.5px;
	--ffcw-arc-angle: 45deg;
	--ffcw-nav-blur: 2px;
	--ffcw-nav-saturate: 100%;
	--ffcw-nav-brightness: 100%;
}

/* Layer 4 — arrows + inner dots --------------------------------------------*/
.ffcw-sg__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.22);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, backdrop-filter 0.2s ease;
	backdrop-filter:
		blur(var(--ffcw-nav-blur, 2px))
		saturate(var(--ffcw-nav-saturate, 100%))
		brightness(var(--ffcw-nav-brightness, 100%));
	-webkit-backdrop-filter:
		blur(var(--ffcw-nav-blur, 2px))
		saturate(var(--ffcw-nav-saturate, 100%))
		brightness(var(--ffcw-nav-brightness, 100%));
	pointer-events: auto;
}

/* Arc border styles — set via the "Border style" select control.
   The modifier class is added to the widget wrapper by Elementor
   (prefix_class: "ffcw-sg-arrow-border--") so it lives on an ancestor
   of .ffcw-sg__nav. */

/* Whenever an arc style (or "none") is active, cancel the standard border. */
.ffcw-sg-arrow-border--diagonal .ffcw-sg__nav,
.ffcw-sg-arrow-border--cross .ffcw-sg__nav,
.ffcw-sg-arrow-border--none .ffcw-sg__nav {
	border: none !important;
}

/* Shared ::before used by both arc styles. */
.ffcw-sg-arrow-border--diagonal .ffcw-sg__nav::before,
.ffcw-sg-arrow-border--cross .ffcw-sg__nav::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	padding: var(--ffcw-arc-width, 1.5px);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

/* Two opposite arcs (NW / SE by default). */
.ffcw-sg-arrow-border--diagonal .ffcw-sg__nav::before {
	background: conic-gradient(
		from var(--ffcw-arc-angle, 45deg),
		rgba(0, 0, 0, 0)               0deg,
		var(--ffcw-arc-color)          90deg,
		rgba(0, 0, 0, 0)               180deg,
		var(--ffcw-arc-color)          270deg,
		rgba(0, 0, 0, 0)               360deg
	);
}

/* Four arcs (the four diagonals by default, gaps on N/E/S/W). */
.ffcw-sg-arrow-border--cross .ffcw-sg__nav::before {
	background: conic-gradient(
		from var(--ffcw-arc-angle, 22.5deg),
		rgba(0, 0, 0, 0)               0deg,
		var(--ffcw-arc-color)          45deg,
		rgba(0, 0, 0, 0)               90deg,
		var(--ffcw-arc-color)          135deg,
		rgba(0, 0, 0, 0)               180deg,
		var(--ffcw-arc-color)          225deg,
		rgba(0, 0, 0, 0)               270deg,
		var(--ffcw-arc-color)          315deg,
		rgba(0, 0, 0, 0)               360deg
	);
}

.ffcw-sg__nav:hover {
	background-color: rgba(255, 255, 255, 0.38);
}

.ffcw-sg__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ffcw-sg__nav svg,
.ffcw-sg__nav img {
	width: 18px;
	height: 18px;
	display: block;
}

.ffcw-sg__nav svg {
	stroke: currentColor;
}

.ffcw-sg__nav img {
	object-fit: contain;
}

.ffcw-sg__nav--prev { left: 16px; }
.ffcw-sg__nav--next { right: 16px; }

.ffcw-sg__nav.is-disabled,
.ffcw-sg__nav.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Keep arrows visible even when Swiper's watch-overflow would normally lock them. */
.ffcw-sg__nav.swiper-button-lock {
	display: inline-flex !important;
}

.ffcw-sg__inner-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: none;
}

.ffcw-sg__inner-dots.swiper-pagination-lock {
	display: flex !important;
}

.ffcw-sg__inner-dots .swiper-pagination-bullet {
	pointer-events: auto;
	width: 8px;
	height: 8px;
	margin: 0 4px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.5);
	opacity: 1;
	transition: background-color 0.2s ease, width 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

.ffcw-sg__inner-dots .swiper-pagination-bullet-active {
	background-color: #fff;
	width: 22px;
}

/* Outer (swipe) dots -------------------------------------------------------
   Visibility per breakpoint is controlled from the widget's Style tab
   ("Swipe indicator > Hide on desktop/tablet/mobile"). By default the widget
   hides the indicator on desktop and tablet, leaving it visible on mobile. */
.ffcw-sg__outer-dots {
	display: block;
	margin-top: 16px;
	text-align: center;
	line-height: 1;
}

.ffcw-sg__outer-dots .swiper-pagination-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 4px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.4);
	opacity: 1;
	transition: background-color 0.2s ease, width 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
	vertical-align: middle;
}

.ffcw-sg__outer-dots .swiper-pagination-bullet-active {
	background-color: #fff;
	width: 22px;
}

/* ==========================================================================
   MOBILE — inner carousel disabled
   JS adds the .ffcw-sg--is-mobile class when the widget is in mobile mode.
   The outer layout (cells in a row / grid / with swipe) is always handled by
   Swiper now, so no wrapper override is needed here.
   ========================================================================== */

/* Hide inner navigation on mobile — inner carousel is not initialised there,
   so the controls have nothing to do. */
.ffcw-sg.ffcw-sg--is-mobile .ffcw-sg__nav,
.ffcw-sg.ffcw-sg--is-mobile .ffcw-sg__inner-dots {
	display: none !important;
}

/* Collapse the inner carousel to show only the first image. */
.ffcw-sg.ffcw-sg--is-mobile .ffcw-sg__inner > .swiper-wrapper {
	display: block;
	transform: none !important;
}

.ffcw-sg.ffcw-sg--is-mobile .ffcw-sg__inner .ffcw-sg__image {
	position: absolute !important;
	inset: 0;
	transform: none !important;
}

.ffcw-sg.ffcw-sg--is-mobile .ffcw-sg__inner .ffcw-sg__image:not(:first-child) {
	display: none;
}

/* ==========================================================================
   Border collapse — when user enables "Collapse adjacent borders" in
   Style > Cell, adjacent cells share a single border instead of doubling up.
   Technique: each cell keeps only right + bottom borders (top + left are
   stripped). JS then mirrors the cell's top + left border onto the outer
   container so the outermost frame still looks complete.
   Works in both CSS Grid (multi_row) and flex (single_row) layouts because
   it doesn't rely on negative margins.
   Best used with Gap between cells = 0.
   ========================================================================== */
/* Each element keeps its right + bottom borders; top + left are dropped.
   When two elements are adjacent horizontally, element 1's right border
   becomes the shared line (element 2's left is gone). Same vertically with
   bottom + top. This applies recursively to:
     - .ffcw-sg__cell        → collapse between adjacent cells
     - .ffcw-sg__title-area  → collapse between adjacent title areas
     - .ffcw-sg__image-area  → collapse between adjacent image areas (left only)
   NOTE: image-area border-top is intentionally NOT stripped. It forms half of
   the title↔image divider (title-area border-bottom + image-area border-top).
   Stripping it would halve that divider while every other grid line keeps the
   full cell+sub-area stacked thickness, causing a visible asymmetry. */
.ffcw-sg-border-collapse--yes .ffcw-sg__cell,
.ffcw-sg-border-collapse--yes .ffcw-sg__title-area,
.ffcw-sg-border-collapse--yes .ffcw-sg__image-area {
	border-left-width: 0 !important;
}

.ffcw-sg-border-collapse--yes .ffcw-sg__cell,
.ffcw-sg-border-collapse--yes .ffcw-sg__title-area {
	border-top-width: 0 !important;
}

/* ==========================================================================
   Ensure dots stay visible even when Swiper's watchOverflow "locks"
   pagination (which happens when all cells fit in one page — there is
   nothing to swipe). Users hide them explicitly via the Visibility switches.
   ========================================================================== */
.ffcw-sg__outer-dots.swiper-pagination-lock {
	display: block !important;
}
/* (Inner dots lock rule is earlier in this file — display: flex !important) */