/* =============================================================================
 * SPORTO SHOTS — Стили для шорткода [sporto_career_shots]
 * =============================================================================
 *
 * Этот файл управляет внешним видом компактных карточек бросков игрока.
 * Карточки выводят 3 блока: 2-х очковые, 3-х очковые и штрафные.
 *
 * СТРУКТУРА HTML:
 * .sporto-shots-compact                    — Внешний контейнер
 *   .charts-container                      — Flex-ряд из трёх карточек
 *     .chart-wrapper                       — Одна карточка
 *       .shot-info                         — Левая часть (заголовок + цифры)
 *         h4                               — Название типа броска
 *         .shot-stats                      — Цифры попаданий (например, 239/534)
 *       .shot-chart-wrap                   — Правая часть (мини-график)
 *         canvas.shot-chart                — Canvas элемент Chart.js
 *
 * ШРИФТ: Oswald (Google Fonts) — подключается в sportoteka-all-stats.php
 * ФОНОВЫЙ ЦВЕТ: var(--secondary-light) — задаётся в теме сайта
 *
 * Для редактирования: Админка → Sportoteka All Stats → CSS Редактор
 * ============================================================================= */


/* =============================================================================
 * 1. ОБЩИЙ КОНТЕЙНЕР — .sporto-shots-compact
 * ----------------------------------------------------------------------------- */

/* Внешний контейнер шорткода */
.sporto-shots-compact {
	margin: 10px 0;                    /* Отступы сверху и снизу */
	padding: 0;                         /* Без внутренних отступов */
	background: transparent;            /* Прозрачный фон (фон на карточках) */
	border-radius: 0;
	box-shadow: none;
	font-family: 'Oswald', sans-serif;  /* Основной шрифт компонента */
}

/* Контейнер заголовка турнира (при динамическом режиме без атрибута tag) */
.sporto-shots-tag-title {
	font-family: 'Oswald', sans-serif;
	color: #2c3e50;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}


/* =============================================================================
 * 2. РЯДЫ КАРТОЧЕК — .charts-container
 * ----------------------------------------------------------------------------- */

/* Flex-контейнер: 3 карточки в ряд */
.sporto-shots-compact .charts-container {
	display: flex;
	justify-content: stretch;
	flex-wrap: nowrap;                  /* Не переносить на новую строку */
	gap: 10px;                          /* Расстояние между карточками */
}


/* =============================================================================
 * 3. КАРТОЧКА — .chart-wrapper
 * ----------------------------------------------------------------------------- */

/* Одна карточка броска (горизонтальная: текст слева, график справа) */
.sporto-shots-compact .chart-wrapper {
	flex: 1;                            /* Все карточки равной ширины */
	min-width: 0;                       /* Разрешает сжатие flex-элемента */
	max-width: none;
	display: flex;
	align-items: center;                /* Вертикальное центрирование */
	justify-content: space-between;     /* Текст → влево, график → вправо */
	padding: 2px 16px;                  /* Внутренние отступы карточки */
	background: var(--secondary-light, #ced5cf); /* Фон: CSS-переменная темы */
	border-radius: 8px;                 /* Скругление углов */
	border-top: 1px solid rgba(0,0,0,0.06);      /* Тонкая верхняя граница */
	border-left: 1px solid rgba(0,0,0,0.06);     /* Тонкая левая граница */
	border-right: 1px solid rgba(0,0,0,0.06);    /* Тонкая правая граница */
	border-bottom: 1.5px solid var(--secondary-semi-light); /* Нижняя граница */
	gap: 16px;                          /* Отступ между текстом и графиком */
	text-align: left;
}


/* =============================================================================
 * 4. ЛЕВАЯ ЧАСТЬ КАРТОЧКИ — .shot-info (заголовок + статистика)
 * ----------------------------------------------------------------------------- */

/* Контейнер для текстовой информации */
.sporto-shots-compact .shot-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Название типа броска (например, "2-Х ОЧКОВЫЕ БРОСКИ") */
.sporto-shots-compact h4 {
	margin: 0 0 2px 0;
	color: #2c3e50;
	font-family: 'Oswald', sans-serif;
	font-size: 14px;                    /* Размер заголовка */
	font-weight: 500;                   /* Средняя жирность */
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Цифры попаданий (например, "239/534") — крупный акцентный текст */
.sporto-shots-compact .shot-stats {
	font-family: 'Oswald', sans-serif;
	font-size: 32px;                    /* Крупный размер цифр */
	font-weight: 700;                   /* Жирный */
	color: #1a2a3a;                     /* Тёмно-синий */
	margin-top: 0;
	line-height: 1;
}


/* =============================================================================
 * 5. ПРАВАЯ ЧАСТЬ КАРТОЧКИ — .shot-chart-wrap (мини-график)
 * ----------------------------------------------------------------------------- 
 * ВАЖНО: Размер графика полностью управляется через CSS.
 * JavaScript автоматически считывает размер из этого блока.
 * Чтобы увеличить/уменьшить график — измените width и height ниже.
 * ----------------------------------------------------------------------------- */

/* Обёртка для канвас-элемента с фиксированным размером */
.sporto-shots-compact .shot-chart-wrap {
	flex-shrink: 0;                     /* Запретить сжатие */
	width: 100px;                       /* Ширина мини-графика */
	height: 100px;                      /* Высота мини-графика */
}

/* Canvas-элемент графика — размер наследуется от .shot-chart-wrap */
.sporto-shots-compact .shot-chart {
	width: 100%;                        /* Занимает всю ширину обёртки */
	height: 100%;                       /* Занимает всю высоту обёртки */
	min-height: 0;
	margin: 0;
	display: block;
	opacity: 1;                         /* Сразу видим — без задержки */
}

/* Состояние после инициализации Chart.js */
.sporto-shots-compact .shot-chart.initialized {
	opacity: 1;
}


/* =============================================================================
 * 6. АДАПТИВНОСТЬ (Media Queries)
 * =============================================================================
 *
 * Брейкпоинты:
 * - > 992px  : Десктоп (по умолчанию — стили выше)
 * - ≤ 992px  : Планшет
 * - ≤ 767px  : Мобильный горизонтальный / маленький планшет
 * - ≤ 480px  : Мобильный вертикальный
 * ----------------------------------------------------------------------------- */

/* --- Планшет ---------------------------------------------------------------- */
@media (max-width: 992px) {
	.sporto-shots-compact .chart-wrapper {
		padding: 2px 14px;
	}

	.sporto-shots-compact .shot-stats {
		font-size: 26px;
	}

	.sporto-shots-compact .shot-chart-wrap {
		width: 80px;                    /* График чуть меньше на планшете */
		height: 80px;
	}
}

/* --- Мобильный горизонтальный / маленький планшет --------------------------- */
@media (max-width: 767px) {
	/* Карточки складываются в столбец */
	.sporto-shots-compact .charts-container {
		flex-wrap: wrap;
		gap: 6px;
	}

	.sporto-shots-compact .chart-wrapper {
		flex-basis: 100%;               /* Каждая карточка на всю ширину */
		padding: 2px 16px;
	}

	.sporto-shots-compact .shot-stats {
		font-size: 28px;
	}

	.sporto-shots-compact .shot-chart-wrap {
		width: 70px;
		height: 70px;
	}
}

/* --- Мобильный вертикальный ------------------------------------------------- */
@media (max-width: 480px) {
	.sporto-shots-compact .chart-wrapper {
		padding: 2px 14px;
	}

	/* Сокращённые названия бросков (FG-2, FG-3, FT) */
	.sporto-shots-compact h4 {
		font-size: 11px;
	}

	.sporto-shots-compact h4[data-short] {
		font-size: 0 !important;        /* Скрываем полный текст */
		position: relative;
	}

	.sporto-shots-compact h4[data-short]::before {
		content: attr(data-short);      /* Выводим сокращение из data-атрибута */
		font-size: 12px;
		font-weight: 500;
		color: #2c3e50;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		font-family: 'Oswald', sans-serif;
	}

	.sporto-shots-compact .shot-stats {
		font-size: 24px;
	}

	.sporto-shots-compact .shot-chart-wrap {
		width: 60px;
		height: 60px;
	}
}