/**
 * Arsenal Theme - Main Stylesheet
 *
 * Основные стили контента
 *
 * @package Arsenal
 * @since 1.0.0
 *
 */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.container {
	padding: var(--container-padding-y) var(--container-padding-x);
	max-width: var(--container-max-width);
	margin: 0 auto;
}

/* ==========================================================================
   ЗАГОЛОВКИ
   ========================================================================== */

h1 {
	font-size: 2rem;
}

/* ==========================================================================
   НОВОСТИ И КАТЕГОРИИ (Глобальные стили)
   ========================================================================== */

.news-category {
	color: var(--red-700);
}

.single-news-category {
	color: var(--red-700);
}



/* ==========================================================================
   BANNER CAROUSEL
   ========================================================================== */

.site-banner {
	position: relative;
	width: 100%;
	min-height: calc(100vh - 4rem - 5rem); /* 100vh - header(4rem) - stats-bar(5rem) */
	overflow: hidden;
	background-color: var(--gray-900);
}

.banner-slides {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.banner-slide {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.banner-slide.active {
	opacity: 1;
	visibility: visible;
}

.banner-background {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 120%;
	background-size: cover;
	background-position: top right;
	background-repeat: no-repeat;
	will-change: transform;
}

.banner-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		to right,
		#000000cc 0%,
		#00000099 50%,
		#00000000 100%
	);
	z-index: 1;
}

.banner-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	max-width: calc(var(--container-max-width) + 5rem);
	margin: 0 auto;
	padding: 5rem 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.banner-content.align-left {
	align-items: flex-start;
}

.banner-content.align-center {
	align-items: center;
	text-align: center;
}

.banner-content.align-right {
	align-items: flex-end;
	text-align: right;
}

.banner-content.valign-top {
	justify-content: flex-start;
	padding-top: 5rem;
}

.banner-content.valign-center {
	justify-content: center;
}

.banner-content.valign-bottom {
	justify-content: flex-end;
	padding-bottom: 5rem;
}

.banner-label {
	display: inline-block;
	color: var(--red-500, #FF4D4D);
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 1rem;
}

.banner-title {
	color: var(--color-text-light, var(--color-white));
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 1.5rem 0;
	max-width: 37.5rem;
}

.banner-subtitle {
	color: #ffffffe6;
	font-size: 1.125rem;
	line-height: 1.6;
	margin: 0 0 1.5rem 0;
	max-width: 37.5rem;
}

.banner-info {
	color: #ffffffcc;
	font-size: 0.9375rem;
	line-height: 1.7;
	margin: 0 0 2rem 0;
	max-width: 31.25rem;
}

.banner-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.5rem;
}

.banner-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	background-color: var(--red-700);
	color: var(--color-text-light, var(--color-white));
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: 0.25rem;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.banner-btn-primary:hover {
	background-color: var(--red-600);
	transform: translateY(-0.125rem);
}

.banner-btn-primary:focus {
	outline: 0.125rem solid var(--color-text-light, var(--color-white));
	outline-offset: 0.125rem;
}

.banner-btn-primary svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.banner-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	background-color: #ffffff1a;
	color: var(--color-text-light, var(--color-white));
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	border: 0.0625rem solid #ffffff26;
	border-radius: 0.25rem;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.banner-btn-secondary:hover {
	background-color: #ffffff40;
	border-color: #ffffff66;
	transform: translateY(-0.125rem);
}

.banner-btn-secondary:focus {
	outline: 0.125rem solid var(--color-text-light, var(--color-white));
	outline-offset: 0.125rem;
}

.site-banner.no-image .banner-overlay {
	background: linear-gradient(
		135deg,
		#f2f2f2f2 0%,
		#1e1e1ee6 100%
	);
}

.banner-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background: #ffffff26;
	border: 0.0625rem solid #ffffff4d;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(0.25rem);
}

.banner-nav-prev {
	left: 1.25rem;
}

.banner-nav-next {
	right: 1.25rem;
}

.banner-nav-btn:hover {
	background: #ffffff40;
	border-color: #ffffff80;
	transform: translateY(-50%) scale(1.1);
}

.banner-nav-btn:focus {
	outline: 0.125rem solid var(--color-text-light, var(--color-white));
	outline-offset: 0.125rem;
}

.banner-nav-btn svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: var(--color-text-light, var(--color-white));
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.banner-dots {
	position: absolute;
	bottom: 1.875rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: 0.75rem;
}

.banner-dot {
	width: 0.75rem;
	height: 0.75rem;
	padding: 0;
	background: #ffffff66;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
}

.banner-dot:hover {
	background: #ffffffb3;
	transform: scale(1.2);
}

.banner-dot.active {
	background: var(--red-700);
	transform: scale(1.3);
}

.banner-dot:focus {
	outline: 0.125rem solid var(--color-text-light, var(--color-white));
	outline-offset: 0.125rem;
}

.site-banner.has-carousel::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0.1875rem;
	background: var(--red-700);
	z-index: 11;
	transition: width linear;
}

.site-banner.has-carousel.autoplay-active::after {
	animation: bannerProgress var(--banner-interval, 5s) linear infinite;
}

@keyframes bannerProgress {
	from { width: 0; }
	to { width: 100%; }
}

/* ==========================================================================
   STATS BAR
   ========================================================================== */

.stats-bar {
	background-color: var(--red-900);
	width: 100%;
}

.stats-bar-container {
	max-width: 94rem;
	margin: 0 auto;
	padding: 0 2.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 5rem;
}

.stats-bar-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	padding: 1rem 0;
}

.stats-bar-number {
	color: var(--color-text-light, var(--color-white));
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.stats-bar-label {
	color: var(--red-100, #FFE5E5);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
}

/* ==========================================================================
   UPCOMING MATCH SECTION
   ========================================================================== */

.upcoming-match-section {
	background-color: var(--gray-50);
	padding: 1.5rem 0 2.75rem;
}

.upcoming-match-container {
	max-width: 94rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.section-header {
	margin-bottom: 1.5rem;
	text-align: center;
}

.section-title {
	color: var(--red-700);
	font-size: 1rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
}

.section-subtitle {
	color: var(--gray-900);
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0.5rem 0 0 0;
}

.match-card {
	background: var(--color-white);
	border: 0.0625rem solid var(--gray-200);
	border-radius: 0.625rem;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 0.0625rem 0.1875rem var(--color-dark-gray)1a, 0 0.0625rem 0.125rem #0d0d0d0d;
	transition: box-shadow 0.2s ease;
}

.match-card:hover {
	box-shadow: 0 0.5rem 0.75rem var(--shadow-hover);
}

.match-card-inner {
	display: flex;
	flex-direction: column;
}

.match-tournament-badge {
	background-color: var(--gray-50);
	color: var(--gray-700);
	padding: 0.75rem 1.5rem;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.03125rem;
	text-transform: none;
	text-align: left;
	border-bottom: 0.0625rem solid var(--gray-200);
}

.match-card-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5rem;
	padding: 3rem 3.75rem;
}

.match-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 12.5rem;
}

.team-logo {
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	overflow: hidden;
	background-color: transparent;
	padding: 0.5rem;
	box-sizing: border-box;
}

.team-logo.home-team {
	background-color: transparent;
}

.team-logo.away-team {
	background-color: transparent;
}

.team-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.team-logo svg {
	width: 3rem;
	height: 3rem;
}

.team-logo.home-team svg {
	fill: var(--color-white);
}

.team-logo.away-team svg {
	fill: var(--gray-600);
}

.team-name {
	color: var(--gray-900);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.5rem 0;
}

.team-location {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--gray-600);
	font-size: 0.875rem;
}

.team-location svg {
	width: 1rem;
	height: 1rem;
	stroke: currentColor;
	fill: none;
}

.match-vs {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 2.5rem;
}

.match-vs-text {
	color: var(--gray-300);
	font-size: 3rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

.match-score-large {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.match-score-large .score-home,
.match-score-large .score-away {
	font-size: 3.5rem;
	font-weight: 700;
	color: var(--red-700);
	min-width: 3.5rem;
	text-align: center;
}

.match-score-large .score-separator {
	font-size: 3rem;
	font-weight: 400;
	color: var(--gray-500);
}

.match-no-data {
	text-align: center;
	padding: 2rem;
	color: var(--gray-700);
}

.match-date-time {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: var(--gray-600);
	font-size: 0.875rem;
}

.match-date {
	color: var(--gray-900);
	font-size: 1.125rem;
	font-weight: 600;
}

.match-time {
	color: var(--gray-600);
	background: none;
}

.match-time-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.match-time-wrapper svg {
	background: none !important;
	background-color: transparent !important;
	stroke: currentColor;
	fill: none;
	color: var(--gray-600);
}

.match-time-wrapper lottie-player {
	width: 1.125rem;
	height: 1.125rem;
	min-width: 1.125rem;
	display: inline-block !important;
}

.match-venue {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.5rem;
}

.match-venue svg {
	width: 1rem;
	height: 1rem;
	stroke: currentColor;
	fill: none;
}

.match-ticket-info {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 0.0625rem solid var(--gray-200);
	text-align: center;
}

.ticket-text {
	color: var(--gray-600);
	font-size: 0.875rem;
	margin: 0;
}

.ticket-link {
	color: var(--red-700);
	text-decoration: underline;
}

.ticket-link:hover {
	text-decoration: none;
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

.site-main {
	padding: 3rem 0 0 0;
	min-height: 60vh;
}

.site-main.front-page {
	padding: 0;
}

.entry-header {
	margin-bottom: 1.25rem;
}

.entry-title {
	font-size: 2rem;
	margin-bottom: 0.625rem;
}

.entry-title a {
	color: var(--red-700);
}

.post-thumbnail {
	margin-bottom: 1.25rem;
	overflow: hidden;
	border-radius: 0.5rem;
}

.post-thumbnail img {
	width: 100%;
	height: auto;
	transition: transform 0.3s ease;
}

.post-thumbnail:hover img {
	transform: scale(1.05);
}

.entry-content {
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
	background: var(--red-700);
	color: var(--color-text-light);
	padding: 3rem 0 0 0;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	margin-bottom: 2.5rem;
}

.footer-widget-area .widget-title {
	color: var(--color-text-light);
	border-color: var(--red-700);
}

.site-info {
	text-align: center;
	padding-top: 1.25rem;
	border-top: 0.0625rem solid #ffffffcc;
}

.site-info a {
	color: var(--color-text-light);
}

.footer-menu {
	display: flex;
	justify-content: center;
	list-style: none;
	gap: 1.25rem;
	margin-top: 0.9375rem;
}

.footer-menu a {
	color: var(--color-text-light);
}

/* ==========================================================================
   NEWS SECTION
   ========================================================================== */

.news-section {
	background-color: var(--gray-50);
	padding: 2rem 0 3rem;
}

.news-section .container {
	max-width: 94rem;
	margin: 0 auto;
	padding: var(--container-padding-y) var(--container-padding-x);
}

.news-section .section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
	text-align: left;
}

.section-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--red-700);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.section-link:hover {
	opacity: 0.8;
}

.section-link svg {
	width: 0.875rem;
	height: 0.875rem;
	background: transparent;
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.news-card {
	background: var(--color-white);
	border: 0.0625rem solid var(--gray-200);
	border-radius: 0.625rem;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0.0625rem 0.1875rem var(--color-dark-gray)1a, 0 0.0625rem 0.125rem #0d0d0d0d;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.news-card:hover {
	box-shadow: 0 0.5rem 0.75rem var(--shadow-hover);
}

.news-card__image {
	width: 100%;
	height: 10rem;
	background-color: var(--gray-50);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.news-card__image lottie-player {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
	min-height: 10rem;
}

.news-card:hover .news-card__image img {
	transform: scale(1.05);
}

.news-card__content {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.news-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.news-card__date {
	color: var(--gray-500);
	font-size: 0.875rem;
	font-weight: 400;
}

.news-card__dot {
	color: var(--gray-500);
	font-size: 0.75rem;
}

.news-card__category {
	color: var(--red-700);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.news-card__category:hover {
	text-decoration: underline;
}

.news-card__title {
	color: var(--gray-900);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 0.75rem 0;
}

.news-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.news-card__title a:hover {
	color: var(--red-700);
}

.news-card__excerpt {
	color: var(--gray-600);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 1rem 0;
	flex-grow: 1;
}

.news-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--red-700);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: gap 0.2s ease;
	margin-top: auto;
}

.news-card__link:hover {
	gap: 0.625rem;
}

.news-card__link svg {
	width: 0.875rem;
	height: 0.875rem;
	background: transparent;
}

/* ==========================================================================
   SPONSORS CAROUSEL SECTION
   ========================================================================== */

.sponsors-section {
	padding: 2.75rem 0;
	background-color: var(--color-white);	
	border-bottom: 0.0625rem solid var(--gray-200);
}

.sponsors-section .container {
	max-width: 94rem;
	margin: 0 auto;
	padding: var(--container-padding-y) var(--container-padding-x);
}

.sponsors-section .section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
	text-align: left;
}

.sponsors-section .section-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--red-700);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.sponsors-section .section-link:hover {
	opacity: 0.8;
}

.sponsors-carousel-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
}

.sponsors-carousel {
	display: flex;
	flex-wrap: nowrap;
	flex: 1;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: 1.25rem 0;
	padding-right: 1.5rem;
	scroll-snap-type: x mandatory;
	align-items: center;
	
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.sponsors-carousel::-webkit-scrollbar {
	display: none;
}

.sponsor-slide {
	scroll-snap-align: center;
	flex-shrink: 0;
	min-width: 15rem;
}

.sponsors-carousel .sponsor-card {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gray-50);
	border: 0.0625rem solid var(--gray-200);
	border-radius: 0.5rem;
	padding: 1rem;
	text-decoration: none;
	transition: box-shadow 0.2s ease;
	overflow: hidden;
}

.sponsors-carousel .sponsor-card:hover {
	box-shadow: 0 0.5rem 0.75rem var(--shadow-hover);
}

.sponsor-logo {
	width: 100%;
	max-width: 13.75rem;
	max-height: 6.25rem;
	height: auto;
	object-fit: contain;
}

.sponsor-card lottie-player {
	width: auto;
	max-width: 6.25rem;		
	background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
}

.sponsor-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 13.75rem;
	max-height: 6.25rem;	
	background: linear-gradient(135deg, var(--gray-50), var(--gray-200));
	border-radius: 0.25rem;
	padding: 1rem;
	text-align: center;
}

.sponsor-placeholder span {
	font-size: 0.875rem;
	font-weight: 600;
	color: #6b7280;
	word-break: break-word;
}

/* ==========================================================================
   LAST GAMES SECTION
   ========================================================================== */

.last-games-section {
	padding: 2.75rem 0;
	background-color: var(--gray-50);
}

.last-games-section .container {
	max-width: 94rem;
	margin: 0 auto;
	padding: var(--container-padding-y) var(--container-padding-x);
}

.last-games-section .section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	text-align: left;
}

.last-games-section .section-link {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--red-700);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	transition: opacity 0.2s ease;
}

.last-games-section .section-link:hover {
	opacity: 0.8;
}

.last-games-section .section-link .arrow {
	font-size: 1rem;
}

.games-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.game-card {
	background: var(--color-white);
	border: 0.0625rem solid var(--gray-200);
	border-radius: 0.625rem;
	padding: 1.25rem;
	box-shadow: 0 0.0625rem 0.1875rem var(--color-dark-gray)1a, 0 0.0625rem 0.125rem #0d0d0d0d;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.game-card:hover {
	box-shadow: 0 0.5rem 0.75rem var(--shadow-hover);
}

.game-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 0.0625rem solid var(--gray-200);
}

.game-date {
	font-size: 0.8125rem;
	color: var(--gray-500);
	font-weight: 400;
}

.game-badge {
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.375rem 0.875rem;
	border-radius: 1.25rem;
	text-transform: none;
}

.game-badge.badge-win {
	background-color: #DCFCE7;
	color: var(--color-field-dark);
}

.game-badge.badge-draw {
	background-color: #FEF9C3;
	color: #A16207;
}

.game-badge.badge-loss {
	background-color: #FEE2E2;
	color: var(--red-400);
}

.game-teams {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.game-teams .team {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
	min-width: 0;
}

.game-teams .team-logo {
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.625rem;
}

.game-teams .team-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.game-teams .team-name {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gray-900);
	line-height: 1.3;
	word-wrap: break-word;
}

.game-score {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
}

.game-score .score-home,
.game-score .score-away {
	font-size: 2rem;
	font-weight: 700;
	color: var(--gray-900);
	min-width: 2.25rem;
	text-align: center;
}

.game-score .score-separator {
	font-size: 1.75rem;
	font-weight: 400;
	color: var(--gray-500);
}

.game-footer {
	padding-top: 1rem;
	border-top: 0.0625rem solid var(--gray-200);
}

.game-location {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--gray-600);
}

.game-location svg {
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
}

/* ==========================================================================
   TOURNAMENT TABLE SECTION
   ========================================================================== */

.tournament-table-section {
	padding: 2.75rem 0;
	background-color: var(--gray-50);
}

.tournament-table-section .container {
	max-width: 94rem;
	margin: 0 auto;
	padding: var(--container-padding-y) var(--container-padding-x);
}

.tournament-table-section .section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.tournament-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 1.5rem;
}

.tournament-header__left {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tournament-header__label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--red-700);
	text-transform: uppercase;
	letter-spacing: 0.03125rem;
}

.tournament-header__title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--gray-900);
	margin: 0;
	line-height: 1.2;
}

.tournament-header__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--red-700);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.tournament-header__link:hover {
	opacity: 0.8;
}

.tournament-header__link svg {
	width: 1.25rem;
	height: 0.8125rem;
}

.tournament-table-wrapper {
	background: var(--color-white);
	border: 0.0625rem solid var(--gray-200);
	border-radius: 0.625rem;	
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.tournament-table-wrapper:hover {
	box-shadow: 0 0.5rem 0.75rem var(--shadow-hover);
}

.tournament-table {
	width: 100%;
	border-collapse: collapse;
}


.tournament-table thead {
	background-color: var(--gray-50);
}

.tournament-table th {
	padding: 0.875rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--gray-900);
	text-align: left;
	border-bottom: 0.0625rem solid var(--gray-200);
}

.tournament-table td {
	padding: 0.875rem 1rem;
	font-size: 0.875rem;
	color: var(--gray-900);
	border-bottom: 0.0625rem solid var(--gray-200);
}

.tournament-table tbody tr:last-child td {
	border-bottom: none;
}

.tournament-table .col-position {
	width: 3.125rem;
	text-align: center;
	font-weight: 600;
}

.tournament-table .col-team {
	width: auto;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.tournament-table .col-team .team-badge {
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
	flex-shrink: 0;
}

.tournament-table .col-team .team-badge-placeholder {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-block;
	flex-shrink: 0;
}

.tournament-table .col-team .team-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tournament-table .col-games,
.tournament-table .col-wins,
.tournament-table .col-draws,
.tournament-table .col-losses,
.tournament-table .col-points {
	width: 5rem;
	text-align: center;
}

.tournament-table .col-points {
	font-weight: 700;
	color: var(--red-700);
}

.tournament-table tbody tr.highlight-row {
	background-color: var(--red-50, #FFF0F0);
}

.tournament-table tbody tr.highlight-row td {
	color: var(--red-700);
	font-weight: 600;
}

.tournament-table tbody tr.highlight-row .col-points {
	font-weight: 700;
}

.tournament-table__error {
	padding: 0.625rem 1rem;
	margin: 0;
	text-align: center;
	color: #6B7280;
	background: var(--gray-50);
}

/* ==========================================================================
   RESPONSIVE STYLES - 1024px and up
   ========================================================================== */

@media (max-width: 1024px) {
	.container {
		padding: 1.5rem;
	}

	h1 {
		font-size: 1.75rem;
	}

	.banner-content {
		padding: 3.75rem 2rem;
	}

	.banner-title {
		font-size: clamp(2rem, 4vw, 3rem);
	}

	.stats-bar-container {
		padding: 0 2rem;
		gap: 1.5rem;
	}

	.stats-bar-number {
		font-size: 1.75rem;
	}

	.stats-bar-label {
		font-size: 0.8125rem;
	}

	.match-card {
		padding: 2.5rem;
	}

	.match-card-inner {
		gap: 2.5rem;
	}

	.team-logo {
		width: 6.25rem;
		height: 6.25rem;
	}

	.team-logo img,
	.team-logo svg {
		width: 100%;
		height: 100%;
	}

	.match-vs-text {
		font-size: 2.5rem;
	}

	.news-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}

	.news-card__image {
		height: 11.25rem;
	}

	.news-card__content {
		padding: 1.25rem;
	}

	.sponsors-section {
		padding: 3rem 0;
	}

	.sponsors-carousel-wrapper {
		gap: 1rem;
	}

	.sponsors-carousel {
		gap: 1rem;
	}

	.sponsor-slide {
		min-width: 11.25rem;
	}

	.sponsor-card {
		height: 12.5rem;
		padding: 1.25rem;
	}

	.games-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.tournament-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.tournament-header__title {
		font-size: 1.625rem;
	}

	/* Синхронизация фонов блоков на планшете */
	.upcoming-match-section {
		background-color: var(--gray-50);
	}

	.news-section {
		background-color: var(--gray-50);
	}

	.sponsors-section {
		background-color: var(--color-white);
	}

	.last-games-section {
		background-color: var(--color-white);
	}

	.tournament-table-section {
		background-color: var(--gray-50);
	}
}

/* ==========================================================================
   RESPONSIVE STYLES - 768px and up
   ========================================================================== */

@media (max-width: 768px) {
	h1, h2, h3, h4, h5, h6 {
		text-align: left;
	}

	h1 {
		font-size: 1.5rem;
	}

	/* Синхронизация фонов блоков на мобильной версии */
	.upcoming-match-section {
		background-color: var(--gray-50);
	}

	.news-section {
		background-color: var(--gray-50);
	}

	.sponsors-section {
		background-color: var(--color-white);
	}

	.last-games-section {
		background-color: var(--color-white);
	}

	.tournament-table-section {
		background-color: var(--gray-50);
	}

	.site-banner {
		min-height: 25rem;
	}

	.banner-content {
		padding: 3rem 1.5rem;
		min-height: 25rem;
	}

	.banner-content.align-center,
	.banner-content.align-right {
		text-align: left;
		align-items: flex-start;
	}

	.banner-title {
		font-size: 2rem;
	}

	.banner-subtitle {
		font-size: 1rem;
	}

	.banner-buttons {
		flex-direction: column;
		width: 100%;
	}

	.banner-btn-primary,
	.banner-btn-secondary {
		width: 100%;
		justify-content: center;
		padding: 0.875rem 1.5rem;
	}

	.banner-nav-btn {
		width: 2.5rem;
		height: 2.5rem;
	}
	
	.banner-nav-btn svg {
		width: 1.25rem;
		height: 1.25rem;
	}
	
	.banner-dots {
		bottom: 1.25rem;
		gap: 0.625rem;
	}
	
	.banner-dot {
		width: 0.625rem;
		height: 0.625rem;
	}

	.stats-bar-container {
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem 2rem;
		padding: 1rem 1.5rem;
	}

	.stats-bar-item {
		flex: 0 0 calc(50% - 1rem);
		align-items: center;
		text-align: center;
	}

	.stats-bar-number {
		font-size: 1.5rem;
	}

	.section-title {
		font-size: 0.875rem;
	}

	.upcoming-match-section {
		padding: 2rem 0 3rem;
		background-color: var(--gray-50);
	}

	.match-card {
		padding: 2rem 1.5rem;
	}

	.match-card-content {
		gap: 2rem;
		padding: 1.5rem 1rem;
	}

	.match-card-inner {
		flex-direction: column;
		gap: 2rem;
	}

	.match-team {
		min-width: auto;
	}

	.match-vs {
		padding: 0;
		order: -1;
	}

	.match-vs-text {
		display: none;
	}

	.team-logo {
		width: 5rem;
		height: 5rem;
		margin-bottom: 1rem;
	}

	.team-logo img,
	.team-logo svg {
		width: 100%;
		height: 100%;
	}

	.section-subtitle {
		font-size: 1.5rem;
	}

	.site-header .container {
		flex-direction: column;
		gap: 1.25rem;
	}

	.footer-widgets {
		grid-template-columns: 1fr;
	}

	.entry-title {
		font-size: 1.5rem;
	}

	.site-footer {
		padding: 2rem 0;
	}

	.news-section {
		padding: 2.5rem 0 3rem;
		background-color: var(--gray-50);
	}

	.news-section .section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.news-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.news-card__image {
		height: 12.5rem;
	}

	.sponsors-section {
		padding: 2.5rem 0;
		background-color: var(--color-white);
	}

	.sponsors-section .section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.sponsors-carousel-wrapper {
		gap: 0.75rem;
	}

	.sponsors-carousel {
		gap: 0.75rem;
		padding: 1rem 0;
	}

	.sponsor-slide {
		min-width: 9.375rem;
	}

	.sponsor-card {
		height: 8.75rem;
		padding: 1rem;
		border-radius: 0.375rem;
	}

	.sponsor-logo {
		width: 100%;
		max-width: 10rem;
		max-height: 5.625rem;
		height: auto;
	}

	.carousel-nav {
		width: 2.25rem;
		height: 2.25rem;
		border-width: 0.0625rem;
	}

	.carousel-nav .arrow {
		font-size: 0.875rem;
	}

	.sponsor-placeholder span {
		font-size: 0.75rem;
	}

	.last-games-section {
		padding: 2.5rem 0;
		background-color: var(--color-white);
	}
	
	.last-games-section .section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
	
	.games-grid {
		grid-template-columns: 1fr;
	}
	
	.game-card {
		padding: 1rem;
	}
	
	.game-teams .team-logo {
		width: 3rem;
		height: 3rem;
	}
	
	.game-score .score-home,
	.game-score .score-away {
		font-size: 1.625rem;
		min-width: 1.875rem;
	}
	
	.game-score .score-separator {
		font-size: 1.375rem;
	}

	.tournament-table-section {
		padding: 2.5rem 0;
		background-color: var(--gray-50);
	}

	.tournament-header__title {
		font-size: 1.375rem;
	}

	.tournament-table-wrapper {
		overflow-x: auto;
	}

	.tournament-table {
		min-width: 37.5rem;
	}

	.tournament-table th,
	.tournament-table td {
		padding: 0.75rem 0.625rem;
		font-size: 0.8125rem;
	}

	.tournament-table .col-position {
		width: 2.5rem;
	}

	.tournament-table .col-games,
	.tournament-table .col-wins,
	.tournament-table .col-draws,
	.tournament-table .col-losses,
	.tournament-table .col-points {
		width: 3.125rem;
	}
}

/* ==========================================================================
   RESPONSIVE STYLES - 480 and up
   ========================================================================== */

@media (max-width: 480) {
	h1, h2, h3, h4, h5, h6 {
		text-align: left;
	}

	h1 {
		font-size: 1.25rem;
	}

	.banner-content {
		padding: 2.5rem 1rem;
	}

	.banner-title {
		font-size: 1.75rem;
	}

	.banner-label {
		font-size: 0.75rem;
	}

	.banner-buttons {
		margin-bottom: 1.5rem;
	}

	.banner-nav-btn {
		width: 2.25rem;
		height: 2.25rem;
	}
	
	.banner-nav-btn svg {
		width: 1.125rem;
		height: 1.125rem;
	}

	.stats-bar-container {
		padding: 1rem;
		gap: 0.75rem 1rem;
	}

	.stats-bar-item {
		flex: 0 0 calc(50% - 0.5rem);
	}

	.stats-bar-number {
		font-size: 1.25rem;
	}

	.stats-bar-label {
		font-size: 0.75rem;
	}

	.section-title {
		font-size: 0.875rem;
	}

	.match-card {
		padding: 1.5rem 1rem;
	}

	.match-card-content {
		gap: 1.5rem;
		padding: 1.5rem 1rem;
		flex-wrap: wrap;
	}

	.team-logo {
		width: 3rem;
		height: 3rem;
		margin-bottom: 0.5rem;
	}

	.team-logo img,
	.team-logo svg {
		width: 100%;
		height: 100%;
	}

	.team-name {
		font-size: 0.75rem;
		margin: 0;
	}

	.match-vs {
		min-width: auto;
		flex: 1 1 100%;
	}

	.match-score-large {
		font-size: 2rem;
		gap: 0.5rem;
	}

	.match-date {
		font-size: 0.875rem;
	}

	.match-date-time {
		gap: 0.5rem;
	}

	.news-section {
		padding: 2rem 0 2.5rem;
		background-color: var(--gray-50);
	}

	.news-section .container {
		padding: 0 1rem;
	}

	.news-card__content {
		padding: 1rem;
	}

	.news-card__title {
		font-size: 1rem;
	}

	.news-card__excerpt {
		font-size: 0.875rem;
	}

	.sponsors-section {
		padding: 2rem 0;
		background-color: var(--color-white);
	}

	.sponsors-section .section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.sponsors-carousel-wrapper {
		gap: 0.5rem;
	}

	.sponsors-carousel {
		gap: 0.5rem;
		padding: 0.75rem 0;
	}

	.sponsor-slide {
		min-width: 8.125rem;
	}

	.sponsor-card {
		height: 7.5rem;
		padding: 0.75rem;
	}

	.sponsor-logo {
		width: 100%;
		max-width: 8.75rem;
		max-height: 5rem;
		height: auto;
	}

	.carousel-nav {
		width: 2rem;
		height: 2rem;
		border-width: 0.0625rem;
	}

	.carousel-nav .arrow {
		font-size: 0.75rem;
	}

	.sponsor-placeholder span {
		font-size: 10.0625rem;
	}

	.tournament-header__title {
		font-size: 1.125rem;
	}

	.tournament-header__link {
		font-size: 0.8125rem;
	}

	.tournament-table-section {
		background-color: var(--gray-50);
	}

	.tournament-table-section .section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.tournament-table {
		min-width: auto;
		font-size: 0.75rem;
	}

	.tournament-table th,
	.tournament-table td {
		padding: 0.5rem 0.375rem;
		font-size: 0.75rem;
	}

	.tournament-table .col-position {
		width: 2rem;
	}

	.tournament-table .col-team .team-name {
		font-size: 0.75rem;
	}

	.tournament-table .col-games,
	.tournament-table .col-wins,
	.tournament-table .col-draws,
	.tournament-table .col-losses,
	.tournament-table .col-points {
		width: 2.5rem;
	}
}

/* ==========================================================================
   DETAIL ITEM & LOTTIE PLAYER
   ========================================================================== */

.detail-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--gray-600);
	font-size: 0.875rem;
	white-space: nowrap;
}

lottie-player {
	color: inherit;
	opacity: 1;
	filter: brightness(1) contrast(1.5);
}

.detail-item lottie-player {
		width: 1.25rem;
		height: 1.25rem;
		display: inline-block;
		vertical-align: -0.15em;
		margin-right: 4px;
	filter: brightness(0.5) contrast(1.1);
}