/* ----------------------------------------------------------------
 * MFL Matches widget — pixel-perfect to Figma node 2005:98
 * https://www.figma.com/design/7KIujsWs3EbbGazuiUcvbd/Futbol--Copy-?node-id=2005-98
 * ---------------------------------------------------------------- */

/* Self-contained @font-face so the widget renders correctly even when
 * Elementor's Custom Fonts module hasn't injected its inline styles
 * (e.g. when the family is used via raw CSS, not Elementor's font picker).
 * SF Pro non-italic Semibold isn't in the supplied OTF set, so 600 will
 * resolve to the nearest available weight (Bold 700) per the CSS Fonts spec. */
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/wp-content/uploads/custom-fonts/sf-pro-display/sf-pro-display-regular.woff2') format('woff2'),
	     url('/wp-content/uploads/custom-fonts/sf-pro-display/sf-pro-display-regular.woff') format('woff');
}
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/wp-content/uploads/custom-fonts/sf-pro-display/sf-pro-display-medium.woff2') format('woff2'),
	     url('/wp-content/uploads/custom-fonts/sf-pro-display/sf-pro-display-medium.woff') format('woff');
}
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/wp-content/uploads/custom-fonts/sf-pro-display/sf-pro-display-bold.woff2') format('woff2'),
	     url('/wp-content/uploads/custom-fonts/sf-pro-display/sf-pro-display-bold.woff') format('woff');
}
@font-face {
	font-family: 'Atyp Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/wp-content/uploads/custom-fonts/atyp-display/AtypDisplay-Bold.woff2') format('woff2'),
	     url('/wp-content/uploads/custom-fonts/atyp-display/AtypDisplay-Bold.woff') format('woff');
}

/* ----------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------- */
.mfl-matches-widget {
	--mfl-accent: #91da27;
	--mfl-card-bg: #0d1014;
	--mfl-text: #ffffff;
	--mfl-muted: rgba(255, 255, 255, 0.38);
	--mfl-border: #ffffff;
	--mfl-stack: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	--mfl-display: 'Atyp Display', 'SF Pro Display', sans-serif;
}

/* ----------------------------------------------------------------
 * Layout (grid / slider)
 * ---------------------------------------------------------------- */
.mfl-matches {
	position: relative;
	--mfl-gap: 12px;
	--mfl-cols: 3;
	--mfl-cols-t: 2;
	--mfl-cols-m: 1.3;
	--mfl-grid-cols: 3;
	--mfl-grid-cols-t: 2;
	--mfl-grid-cols-m: 1;
}

.mfl-grid .mfl-track {
	display: grid;
	grid-template-columns: repeat(var(--mfl-grid-cols), minmax(0, 1fr));
	gap: var(--mfl-gap);
}

.mfl-slider .mfl-track {
	display: flex;
	gap: var(--mfl-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mfl-slider .mfl-track::-webkit-scrollbar {
	display: none;
}
.mfl-slider .mfl-card {
	flex: 0 0 calc((100% - (var(--mfl-cols) - 1) * var(--mfl-gap)) / var(--mfl-cols));
	scroll-snap-align: start;
}

/* ----------------------------------------------------------------
 * Card — Figma node 2005:98
 * ---------------------------------------------------------------- */
.mfl-matches-widget .mfl-card {
	background: var(--mfl-card-bg);
	color: var(--mfl-text);
	padding: 40px 16px 16px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	min-width: 0;
	text-align: center;
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
}

/* League label "ПРЕМЬЕР-ЛИГА" — 3:74 */
.mfl-matches-widget .mfl-league {
	width: 100%;
	font-family: var(--mfl-stack);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.2;
	color: var(--mfl-text);
}

/* Teams row — 2005:93 */
.mfl-matches-widget .mfl-teams {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 23px;
}
.mfl-matches-widget .mfl-team {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 120px;
	height: 120px;
}
.mfl-matches-widget .mfl-team img {
	width: 120px;
	height: 120px;
	object-fit: contain;
	display: block;
}
.mfl-matches-widget .mfl-vs {
	font-family: var(--mfl-display);
	font-weight: 700;
	font-size: 42px;
	line-height: 62px;
	color: var(--mfl-text);
	flex: 0 0 auto;
}

/* Info block — 2005:96 (date+time stack, then stadium) */
.mfl-matches-widget .mfl-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 150px;
}
.mfl-matches-widget .mfl-info-time {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 101px;
}
.mfl-matches-widget .mfl-date {
	width: 100%;
	font-family: var(--mfl-stack);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
	color: var(--mfl-text);
}
.mfl-matches-widget .mfl-time {
	width: 100%;
	font-family: var(--mfl-stack);
	font-weight: 600;
	font-size: 38px;
	line-height: 1.2;
	color: var(--mfl-accent);
}
.mfl-matches-widget .mfl-stadium {
	width: 150px;
	font-family: var(--mfl-stack);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.2;
	color: var(--mfl-muted);
}

/* Button "ПОДРОБНЕЕ" — 2005:95 */
.mfl-matches-widget .mfl-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 65.5px;
	margin-top: auto;
	border: 1px solid var(--mfl-border);
	border-radius: 6px;
	font-family: var(--mfl-stack);
	font-weight: 600;
	font-size: 18px;
	color: var(--mfl-text);
	text-decoration: none;
	background: transparent;
	box-sizing: border-box;
	transition: background 0.2s ease, color 0.2s ease;
}
.mfl-matches-widget .mfl-btn:hover,
.mfl-matches-widget .mfl-btn:focus-visible {
	background: var(--mfl-text);
	color: var(--mfl-card-bg);
}

.mfl-matches-widget .mfl-empty {
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
	padding: 40px;
}

/* Team-name fallback when no logo */
.mfl-matches-widget .mfl-team-name {
	font-family: var(--mfl-stack);
	font-weight: 700;
	font-size: 18px;
	color: var(--mfl-text);
}

/* ----------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------- */
@media (max-width: 1024px) {
	.mfl-grid .mfl-track {
		grid-template-columns: repeat(var(--mfl-grid-cols-t), minmax(0, 1fr));
	}
	.mfl-slider .mfl-card {
		flex-basis: calc((100% - (var(--mfl-cols-t) - 1) * var(--mfl-gap)) / var(--mfl-cols-t));
	}
}
@media (max-width: 767px) {
	.mfl-grid .mfl-track {
		grid-template-columns: repeat(var(--mfl-grid-cols-m), minmax(0, 1fr));
	}
	.mfl-slider .mfl-card {
		flex-basis: calc((100% - (var(--mfl-cols-m) - 1) * var(--mfl-gap)) / var(--mfl-cols-m));
	}
}