/* =========================================================================
   Сетка месяца календаря мероприятий.
   Макет: Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 1708:7899 — плашка 832×461
   на месячной раскладке 1403:12316 (`/calendar/?view=month`).

     1708:7899  плашка 832×461, фон #C4C4C4, radius 16, padding 16
     1413:8903  шапка 173×24 у правого края: ◀ «Июнь 2026» ▶, gap 16, 18px
     1413:8909  дни недели 800×21, 7 колонок по 107,43, шаг 8, 18px;
                СБ и ВС красные
     1415:8918  сетка 800×352: те же 7 колонок, 5 рядов по 64, шаг 8
     1415:8919  ячейка 107,43×64: белая, рамка 1px #000, padding 4,
                число 18px слева сверху, слот чипов справа сверху
     1415:8994  чип города 37×16, radius 4, рамка 1px #000, текст 14px
     1590:7250  «Сегодня» 12px по центру низа сегодняшней ячейки

   Вертикальный ритм — сплошные 16px: 16 + 24 + 16 + 21 + 16 + 352 + 16 = 461.

   Рядов может быть шесть, а не пять: в июне 2026 (макет) первое число —
   понедельник, и месяц ровно укладывается в пять недель, но месяц, начавшийся
   в воскресенье, требует шестого ряда. Высота плашки поэтому не фиксируется,
   а набирается из рядов по 64 — при пяти рядах получается макетный 461.

   Заголовок месяца намеренно НЕ заголовок разметки, а span: общее правило
   .vine-h2/.vine-main h2 (34px) перебило бы макетные 18px, эта грабля в
   проекте ловилась трижды.
   ========================================================================= */

.calmonth {
	--calmonth-plate: #C4C4C4;
	--calmonth-cell: #FFFFFF;
	--calmonth-line: #000000;
	--calmonth-weekend: #FF0000;
	--calmonth-gap: 8px;
	box-sizing: border-box;
	/* Корень ограничен макетной шириной блока: без max-width сетка на широком
	   экране разъезжается — ячейка перестаёт быть 107,43. */
	max-width: 832px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	border-radius: 16px;
	background: var(--calmonth-plate);
	font-family: "Roboto", system-ui, sans-serif;
	color: var(--calmonth-line);
}

/* --------------------------------------------------- шапка «◀ Июнь 2026 ▶» */

.calmonth__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	min-height: 24px;
}

.calmonth__title {
	font-size: 18px;
	font-weight: 400;
	line-height: 21px;
	white-space: nowrap;
}

.calmonth__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	padding: 0;
	border: 0;
	background: none;
	text-decoration: none;
}

.calmonth__nav-icon {
	display: block;
	width: 24px;
	height: 24px;
}

/* Неактивная стрелка: в макете тот же треугольник с fill-opacity 0.3
   (1413:8904 на текущем месяце — листать в прошлое некуда). */
.calmonth__nav--disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* ------------------------------------------------------------ дни недели */

.calmonth__weekdays,
.calmonth__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--calmonth-gap);
}

.calmonth__weekday {
	font-size: 18px;
	line-height: 21px;
}

.calmonth__weekday--weekend {
	color: var(--calmonth-weekend);
}

/* ---------------------------------------------------------------- ячейки */

.calmonth__grid {
	grid-auto-rows: 64px;
}

.calmonth__day {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: 4px;
	border: 1px solid var(--calmonth-line);
	background: var(--calmonth-cell);
	color: inherit;
	text-decoration: none;
}

/* «Все даты ранее текущей без пометок и не активны, приглушены» — пояснение
   1599:7685. Ячейка прошедшего дня и в разметке не ссылка, pointer-events
   здесь — страховка от наведения на текст внутри. */
.calmonth__day--past {
	opacity: 0.2;
	pointer-events: none;
}

.calmonth__day-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 4px;
	min-height: 21px;
}

.calmonth__day-num {
	font-size: 18px;
	line-height: 21px;
	white-space: nowrap;
}

/* Пометки «*» и «**» в макете набраны внутри текста числа («27**»), поэтому
   собственного оформления у них нет — класс оставлен как точка расширения на
   случай, если заказчик заменит звёздочки бейджем-счётчиком (вопрос К6). */
.calmonth__day-mark {
	font: inherit;
}

.calmonth__day-cities {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	flex: 0 0 auto;
}

/* Чип 37×16 макета. Ширина держится минимумом, а не жёстким width:
   сокращения городов правятся в админке (CITY_SHORT у ИБ 18), и подпись
   длиннее трёх букв не должна вылезать за рамку. Трёхбуквенные «МСК» и «СПБ»
   при этом остаются ровно теми же 37px, что нарисованы. */
.calmonth__city {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 37px;
	padding: 0 2px;
	height: 16px;
	border: 1px solid var(--calmonth-line);
	border-radius: 4px;
	background: var(--calmonth-cell);
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}

.calmonth__day-today-label {
	font-size: 12px;
	line-height: 14px;
	text-align: center;
}

/* Ячейка дня и стрелки — ссылки, а в template_styles.css живёт общее правило
   a:hover { color: var(--vine-color-link); text-decoration: underline; }.
   У него специфичность (0,1,1) — выше одноклассового .calmonth__day, да и
   подключается общий файл ПОСЛЕ собранных стилей компонентов (в разметке
   сначала page_*.css, потом template_*.css). Без правила ниже ячейка на
   наведении синела и получала подчёркивание, которых в макете нет. */
.calmonth .calmonth__day,
.calmonth .calmonth__day:hover,
.calmonth .calmonth__day:focus,
.calmonth .calmonth__nav,
.calmonth .calmonth__nav:hover,
.calmonth .calmonth__nav:focus {
	color: inherit;
	text-decoration: none;
}