/* =========================================================================
   Раскладка «шкала» календаря мероприятий, /calendar/.
   Макет: Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 140:4305.

   Файл держит две секции:
     140:4314   лента месяцев и дней   1252×103   .calendar-strip
     1608:8318  лента мероприятий      1248×990   .calendar-scale

   ЭТОТ ФАЙЛ — ТОЛЬКО РАЗНИЦА С КАРТОЧКОЙ ГЛАВНОЙ.
   Сама карточка (.events, .events__grid, .events-card__*) приходит из
   components/bitrix/catalog.section/events-card/style.css: шаблон подключает
   его вызовом $this->addExternalCss(). Ничего из тех правил здесь не
   дублируется — правится только то, чем карточка календаря (140:4311)
   отличается от карточки главной: три колонки вместо двух, заголовок 34px
   Regular вместо 28px Bold и строка «тип мероприятия + бейдж» над ценой.

   Про специфичность. events-card/style.css регистрируется ИЗ template.php,
   то есть ПОЗЖЕ собственного style.css шаблона, который Битрикс подключает
   до выполнения шаблона. Поэтому одноклассовые селекторы проиграли бы
   .events__grid по порядку следования при равной специфичности — все
   переопределения ниже написаны двумя классами намеренно. Заголовки — с
   .vine-main по той же причине: .vine-main h2 (34px) и .vine-main h3
   (28px Bold) из template_styles.css специфичнее одного класса.
   ========================================================================= */

/* =========================================================================
   1. ЛЕНТА МЕСЯЦЕВ И ДНЕЙ — 140:4314
   Раскладка по горизонтали: 24 стрелка + 8 + 1188 окно + 8 + 24 = 1252.
   По вертикали: 21 месяцы + 8 + 45 дни + 8 + 21 дни недели = 103.
   Лента шире контейнера 1248 на 4px — так в макете (x = 16, правый край
   1268 при контейнере до 1264); стрелки стоят по краям снаружи окна.
   ========================================================================= */

.calendar-strip {
	display: flex;
	align-items: center;
	gap: var(--vine-gap-sm, 8px);
	max-width: 1252px;
	font-family: var(--vine-font, "Roboto", sans-serif);
	color: var(--vine-color-text, #000);
}

/* Стрелка прокрутки 24×24 (313:2562, 313:2568) — выгруженная иконка
   «Стрелка-треугольник». Без скрипта кнопка приходит disabled: в макете
   левая стрелка нарисована ровно так (вектор выгружается с fill-opacity 0.3),
   потому что листать назад некуда — прошедших дней в ленте нет. */
.calendar-strip__arrow {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.calendar-strip__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

.calendar-strip__arrow-icon {
	width: 24px;
	height: 24px;
}

/* Окно прокрутки 1188px (141:4626). Полоса прокрутки скрыта: в макете её нет,
   а её появление добавило бы к высоте ленты полтора десятка пикселей.
   Прокрутка при этом остаётся штатной — колесом с Shift, тачпадом, свайпом
   и стрелками клавиатуры (у окна есть tabindex), поэтому лента работает и
   без скрипта. */
.calendar-strip__viewport {
	/* position: relative делает окно системой координат для ячеек: скрипт
	   считает offsetLeft выбранного дня именно от него. */
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.calendar-strip__viewport::-webkit-scrollbar {
	display: none;
}

/* Ширина по содержимому: лента заведомо шире окна (в макете 2824 против
   1188) — именно на этом переполнении и живёт прокрутка. Ужимать ячейки
   под окно нельзя: переполнение исчезнет, и стрелки станут мёртвыми. */
.calendar-strip__track {
	display: flex;
	gap: 32px;
	width: max-content;
}

/* Группа одного месяца: подпись, ряд чисел, ряд дней недели. Шаг 8px. */
.calendar-strip__month {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vine-gap-sm, 8px);
}

/* Подпись месяца «Июнь» / «Июль» — 18px Regular (I314:2811).
   Это ссылка на ?month=YYYY-MM (окно ленты сдвигается на выбранный месяц),
   но выглядит как обычный текст макета: без цвета ссылки и подчёркивания. */
.calendar-strip__month-name {
	min-height: 21px;
	color: var(--vine-color-text, #000);
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
}

.calendar-strip__month-name:hover,
.calendar-strip__month-name:focus {
	color: var(--vine-color-text, #000);
	text-decoration: underline;
}

.calendar-strip__row {
	display: flex;
	gap: var(--vine-gap-sm, 8px);
}

/* Ряд чисел: 45px вместо 29 — под ячейкой висит подпись «Сегодня» (1258:6759).
   Высота держится всегда, иначе лента прыгала бы на 16px, стоило окну
   сдвинуться на месяц вперёд, где сегодняшнего дня уже нет. */
.calendar-strip__row--days {
	align-items: flex-start;
	min-height: 45px;
}

.calendar-strip__cellbox {
	display: flex;
	flex: 0 0 64px;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 64px;
}

/* Ячейка дня 64×29: рамка 1px #000 без скругления, padding 4, число слева,
   пустой слот справа (141:4659). */
.calendar-strip__cell {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	box-sizing: border-box;
	width: 64px;
	padding: 4px;
	border: 1px solid var(--vine-color-text, #000);
	background: var(--vine-color-bg, #fff);
	color: var(--vine-color-text, #000);
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	text-decoration: none;
}

.calendar-strip__cell:hover,
.calendar-strip__cell:focus {
	color: var(--vine-color-text, #000);
	text-decoration: none;
}

/* Выбранный день — заливка rgba(41,129,0,0.5) (141:4673 макета). */
.calendar-strip__cell--selected {
	background: rgba(41, 129, 0, 0.5);
}

.calendar-strip__num {
	white-space: nowrap;
}

/* Правый слот 35×21: в макете зарезервирован и пуст (на месячной раскладке
   в него встают чипы городов «МСК» / «СПБ»). */
.calendar-strip__slot {
	flex: 1 0 0;
	height: 21px;
	min-width: 1px;
}

/* Подпись под сегодняшней ячейкой — 12px Regular (I1258:6760). */
.calendar-strip__today {
	font-size: 12px;
	line-height: normal;
	white-space: nowrap;
}

/* День недели — 18px Regular, ширина ячейки 64 (314:2782). */
.calendar-strip__weekday {
	flex: 0 0 64px;
	width: 64px;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
}

/* СБ и ВС красные — #FF0000 (I314:2784, I314:2785). */
.calendar-strip__weekday--holiday {
	color: #FF0000;
}

/* =========================================================================
   2. ЛЕНТА МЕРОПРИЯТИЙ — 1608:8318
   Вертикальный ритм — сплошные 16px:
   47 + 16 + 50 + 16 + 768 + 16 + 21 + 16 + 40 = 990.
   ========================================================================= */

.calendar-scale {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	/* Корень ограничен шириной контейнера макета: без max-width сетка на
	   широком экране разъезжается, карточки уходят далеко за 405px. */
	max-width: 1248px;
}

/* Заголовок «Мероприятия 27 июня» — 40px Regular, блок 47 (140:4327). */
.calendar-scale__title,
.vine-main .calendar-scale__title {
	margin: 0;
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 400;
	line-height: normal;
}

/* Пустое состояние 316:6127 — две строки 18px Italic, шаг 8px. */
.calendar-scale__empty {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
}

.calendar-scale__empty-line,
.calendar-scale__end {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-style: italic;
	line-height: normal;
}

/* Три колонки по 405,33 = (1248 − 2 × 16) / 3.
   На главной та же сетка идёт в две колонки по 616 — отсюда переопределение. */
.calendar-scale .events__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Карточки одного ряда тянутся до высоты самой высокой: в макете соседи
	   ряда одинаковой высоты (356 и 356, 396 и 396) при разной длине текста. */
	align-items: stretch;
}

/* Заголовок карточки — 34px Regular (I141:5123;209:17672).
   В events-card он 28px Bold, а базовое .vine-main h3 — 28px Bold; поэтому
   кегль и насыщенность задаются здесь явно и двумя-тремя классами. */
.calendar-scale .events-card__title,
.vine-main .calendar-scale .events-card__title {
	font-size: var(--vine-fz-h2, 34px);
	font-weight: 400;
}

/* Строка «тип мероприятия + бейдж» над ценой (1277:6120).
   На главной цена и бейдж стоят в одной строке через space-between; здесь
   бейдж уехал к типу, а цена ушла на строку ниже. Шаг 8px, выравнивание по
   центру: бейдж выше текста на padding 4px сверху и снизу. */
.calendar-scale .calendar-scale-card__typeline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vine-gap-sm, 8px);
}

/* Тип мероприятия «Очный курс» / «Дегустация» — 14px Roboto Italic, чёрный
   (I141:5125). Тот же кегль и начертание, что у бейджа, но без плашки. */
.calendar-scale .calendar-scale-card__type {
	font-size: var(--vine-fz-small, 14px);
	font-style: italic;
	line-height: normal;
	word-break: break-word;
}

/* Постраничная навигация рисует себя сама (system.pagenavigation/vine_pager);
   здесь только выравнивание по левому краю ленты, как у кнопки 1279:7435. */
.calendar-scale__pager {
	align-self: flex-start;
}

/* ------------------------------------------------------------- АДАПТИВ */
/* Мобильных и планшетных фреймов в макете нет: раскладку сужаем по здравому
   смыслу, сохраняя карточку и ячейку ленты неизменными. 405px — минимум,
   при котором кадр 128 и колонка 245 стоят в ряд. */
@media (max-width: 1279px) {
	.calendar-scale .events__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.calendar-scale .events__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}