/* ============================================================
   Рубрика «Лента новостей» (/category/lenta/).

   Грузится только на странице рубрики и с 17.09 на странице «Медиа»
   (soyuzny_lenta_assets в inc/lenta.php) поверх style.css, всё ограничено
   классом .lenta17 на <body>; у «Медиа» вдобавок .media17 — там в строке
   фильтров месяцы, в строке списка дата и длительность видео.

   Строки и врезки — классы fd-*: строка с кадром — время 56, кадр 240,
   заголовок 19px; врезка — кадр во всю меру и заголовок до 28px. Строка
   всегда с кадром, подстрочника нет, колонка одна, по центру; над лентой
   строка фильтров: рубрики списком, дни и календарь.

   Порядок: страница, мера и заголовок → строка фильтров → список рубрик →
   дни и календарь → строки → врезка → кнопка → брейкпоинты.
   ============================================================ */

/* ─────────── 1. Страница, мера и заголовок ───────────
   Мера 980px: сначала стояли 660,
   но одна колонка такой ширины на широком экране терялась («лента должна
   быть шире, значительно»). 17.09 пробовали рамку новой главной — пару
   «Главное» + «Новости», 1256px на 1920, — «получилось очень широко,
   предыдущая ширина была лучше»; вернули 980.

   Колонка по центру окна — по той же оси, что шапка и пара «Главное» +
   «Новости» на главной. Общая сетка ставила бы колонку контента между
   местами под колонку эфира и под рельс, поэтому раскладка центрируется
   целиком — вместе с подвалом — и шириной по ленте. */
.lenta17{--lf-w:980px}
@media(min-width:1180px){
	.lenta17 .layout{width:min(100%,calc(var(--lf-w) + 2*var(--gut)));margin:0 auto}
	.lenta17 .layout-split{grid-template-columns:minmax(0,1fr)}
}
.lenta17 .lf{max-width:calc(var(--lf-w) + 2*var(--gut))}

/* Заголовок страницы — тот же блок, что «Главное» на главной (.hl-head в
   шаблонах: 18/700 прописными, синяя черта, линия под строкой, 24px до
   содержимого; на телефоне 16px). Поэтому он стоит на той же высоте и с тем
   же отступом, а строка фильтров начинается там же, где главное фото.
   Описание рубрики, если оно есть, — под линией. */
.lenta17 .lf-desc{margin:-8px 0 24px}

/* ─────────── 2. Строка фильтров ───────────
   Одна рамка на всё: слева выпадающий список рубрик, дальше дни, справа
   календарь; ячейки через волосяную черту. Два выпадающих списка — рубрики
   и календарь — открываются под строкой, каждый у своего края, и одного
   рисунка: прямоугольник с рамкой и тенью. Скруглений нет нигде в строке
   и в списках (17.09: «не нужны никакие закругления»). */
.lenta17 .lf-datebar{position:relative;margin:0 0 20px}
.lenta17 .lf-bar{display:flex;border:1px solid var(--border)}
.lenta17 .lf-dates{display:flex;flex:1 1 auto;min-width:0}

/* ─────────── 3. Рубрики — выпадающий список ───────────
   17.09 сначала были плашки над строкой дат, потом — «фильтр сделай
   выпадающим с другим дизайном». Кнопка набрана как «Календарь» на другом
   конце строки (11/700 прописными), справа стрелка — у открытого списка
   она смотрит вверх. Выбрана рубрика — на кнопке её название, и кнопка
   синяя, как выбранный день; открытый список — тоже синяя, как открытый
   календарь. Длинное название обрезается многоточием, ячейка не шире
   260px.

   Строки списка — как рубрики в шапке (12/600 прописными,
   css/top.css), без чисел новостей (сняты 17.09). Выбранная строка
   синяя, бледная — без новостей за выбранный день. «Все рубрики» отделена
   чертой.

   Сам список — <details>: открывается и без JS. Содержимое кнопки — во
   внутреннем span: <summary> как флекс-контейнер Safari держал не всегда. */
.lenta17 .lf-rubsel{position:relative;flex:0 0 auto;max-width:260px;border-right:1px solid var(--border)}
.lenta17 .lf-rubsel-btn{display:block;height:100%;list-style:none;cursor:pointer;color:var(--txt);transition:background .2s,color .2s,box-shadow .2s}
.lenta17 .lf-rubsel-btn::-webkit-details-marker{display:none}
.lenta17 .lf-rubsel-btn::marker{content:""}
.lenta17 .lf-rubsel-in{
	display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;box-sizing:border-box;padding:0 16px 0 18px;
	font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.lenta17 .lf-rubsel-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lenta17 .lf-rubsel-chev{flex:0 0 auto;width:12px;height:12px;transition:transform .2s}
.lenta17 .lf-rubsel[open] .lf-rubsel-chev{transform:rotate(180deg)}
.lenta17 .lf-rubsel-btn:hover{background:rgba(0,119,255,.1)}
.lenta17 .lf-rubsel.is-act .lf-rubsel-btn,
.lenta17 .lf-rubsel[open] .lf-rubsel-btn{background:var(--blue);color:#fff}

/* Список — под строкой, от её левого края (-1px — рамка строки), с тем же
   отступом 8px, что у календаря. */
.lenta17 .lf-rubs{
	position:absolute;left:-1px;top:calc(100% + 9px);z-index:30;width:300px;padding:6px 0;box-sizing:border-box;
	background:var(--surf);border:1px solid var(--border);
	box-shadow:0 14px 40px var(--shd-2,rgba(3,10,18,.42));
}
.lenta17 .lf-rubs-i{
	display:block;padding:10px 16px;
	font-size:12px;font-weight:var(--w-semibold);line-height:1.25;letter-spacing:.04em;text-transform:uppercase;
	color:var(--txt);text-decoration:none;transition:background .2s,color .2s;
}
.lenta17 a.lf-rubs-i:hover{background:rgba(0,119,255,.1)}
.lenta17 .lf-rubs-i.is-act{background:var(--blue);color:#fff}
.lenta17 .lf-rubs-i.is-off{cursor:default;opacity:.35}
.lenta17 .lf-rubs-all{margin-bottom:6px;border-bottom:1px solid var(--border)}

/* Выбранные рубрика и день снимаются нажатием — под курсором темнеют. */
.lenta17 .lf-rubsel.is-act .lf-rubsel-btn:hover,
.lenta17 a.lf-date.is-act:hover{box-shadow:inset 0 0 0 100px rgba(0,0,0,.14)}

/* ─────────── 4. Дни и календарь ───────────
   Рисунок ячеек — как у строки дат в панели эфира (.tv-drop-dates): день
   недели прописными, число крупно, выбранный день синим. Здесь под числом
   ещё месяц: строка переходит через границу месяцев, и «30 | 1» без него
   не читалось бы. День без новостей бледный и не нажимается. Кнопки «Все
   новости» нет (снята 17.09): у выбранного дня в углу «×», повторное
   нажатие снимает день. Рубрики и календарь — по своему тексту, дни делят
   остаток поровну.

   Календарь — всплывающая сетка месяца под кнопкой, у правого края. Её
   собирает js/lenta.js; без JS кнопки нет (атрибут hidden, и правило
   ниже, потому что display:flex сильнее атрибута). */
.lenta17 .lf-date{
	position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
	padding:9px 2px 10px;border:none;border-left:1px solid var(--border);background:transparent;
	font:inherit;color:var(--txt);text-align:center;text-decoration:none;cursor:pointer;
	transition:background .2s,color .2s,box-shadow .2s;
}
.lenta17 .lf-date:first-child{border-left:none}
.lenta17 .lf-date b{font-size:9.5px;font-weight:800;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2)}
.lenta17 .lf-date span{font-size:18px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.lenta17 .lf-date i{font-size:10px;font-style:normal;line-height:1;color:var(--txt3)}
.lenta17 a.lf-date:hover:not(.is-act),
.lenta17 .lf-cal-btn:hover{background:rgba(0,119,255,.1)}
.lenta17 .lf-date.is-act,
.lenta17 .lf-cal-btn[aria-expanded="true"]{background:var(--blue);color:#fff}
.lenta17 .lf-date.is-act b,
.lenta17 .lf-date.is-act i{color:#fff}
.lenta17 .lf-date.is-off{cursor:default;opacity:.35}
.lenta17 .lf-date .lf-x{position:absolute;top:6px;right:6px;width:9px;height:9px}
.lenta17 .lf-cal-btn{
	flex:0 0 auto;flex-direction:row;gap:8px;padding:0 18px;
	font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.lenta17 .lf-cal-btn span{font-size:inherit;font-weight:inherit}
.lenta17 .lf-cal-btn svg{flex:0 0 auto;width:17px;height:17px}
.lenta17 .lf-cal-btn[hidden]{display:none}

/* Месяцы («Медиа»): сверху год, под ним месяц прописными. Строк в ячейке
   две, а не три, как у дня, — высота строки фильтров держится той же
   (67px) минимальной высотой ряда. */
.lenta17 .lf-date.is-month span{font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.media17 .lf-dates{min-height:65px}

.lenta17 .lf-cal{
	position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:316px;padding:14px 14px 12px;box-sizing:border-box;
	background:var(--surf);border:1px solid var(--border);
	box-shadow:0 14px 40px var(--shd-2,rgba(3,10,18,.42));
}
.lenta17 .lf-cal[hidden]{display:none}
.lenta17 .lf-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.lenta17 .lf-cal-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt)}
.lenta17 .lf-cal-nav{
	width:32px;height:32px;display:flex;align-items:center;justify-content:center;
	border:1px solid var(--border);background:transparent;color:var(--txt);cursor:pointer;
	transition:background .2s,color .2s,border-color .2s;
}
.lenta17 .lf-cal-nav svg{width:16px;height:16px}
.lenta17 .lf-cal-nav:hover:not(:disabled){background:var(--blue);border-color:var(--blue);color:#fff}
.lenta17 .lf-cal-nav:disabled{opacity:.3;cursor:default}
.lenta17 .lf-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.lenta17 .lf-cal-dow{padding:4px 0 6px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--txt3)}
.lenta17 .lf-cal-day{
	height:36px;display:flex;align-items:center;justify-content:center;
	font-size:14px;font-weight:600;color:var(--txt);text-decoration:none;font-variant-numeric:tabular-nums;
	transition:background .2s,color .2s;
}
.lenta17 a.lf-cal-day:hover:not(.is-act){background:rgba(0,119,255,.14)}
.lenta17 .lf-cal-day.is-off{font-weight:400;color:var(--txt3);opacity:.5}
.lenta17 .lf-cal-day.is-today{box-shadow:inset 0 0 0 1px var(--border)}
.lenta17 .lf-cal-day.is-act{background:var(--blue);color:#fff;box-shadow:none}
/* Календарь по месяцам («Медиа»): год в шапке, двенадцать месяцев 4 × 3. */
.lenta17 .lf-cal-grid.is-months{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.lenta17 .lf-cal-day.is-month{height:44px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ─────────── 5. Строки ─────────── */
.lenta17 .fd-list{display:flex;flex-direction:column}
.lenta17 .fd-dsep{
	display:flex;align-items:center;gap:9px;padding:30px 0 12px;
	font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
}
.lenta17 .fd-dsep::before{content:"";flex:0 0 auto;width:3px;height:13px;border-radius:2px;background:var(--blue)}
.lenta17 .fd-list>.fd-dsep:first-child{padding-top:2px}
.lenta17 .fd-row{
	display:grid;grid-template-columns:56px 240px minmax(0,1fr);gap:2px 16px;padding:20px 0;
	align-items:start;text-decoration:none;
}
.lenta17 .fd-time{font-size:12.5px;font-weight:600;color:var(--txt3);font-variant-numeric:tabular-nums;padding-top:4px}
.lenta17 .fd-th{position:relative;display:block;overflow:hidden;border-radius:0;aspect-ratio:16/9;background:var(--surf)}
.lenta17 .fd-th img{width:100%;height:100%;object-fit:cover}
/* Длительность видео («Медиа») — в углу кадра, без скругления. */
.lenta17 .fd-dur{
	position:absolute;right:6px;bottom:6px;padding:2px 6px;background:rgba(0,0,0,.72);color:#fff;
	font-size:11px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;
}
.lenta17 .fd-body{display:flex;flex-direction:column;gap:5px;min-width:0}
/* Заголовок — во всю колонку текста, без предела 85%, как у ленты главной:
   в одиночной колонке правый край строки оставался пустым, и лента
   читалась сдвинутой влево (17.09). */
.lenta17 .fd-t{font-size:19px;line-height:1.3;font-weight:700;color:var(--txt);letter-spacing:-.005em;transition:color .2s}
.lenta17 .fd-cat{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.lenta17 .fd-row:hover .fd-t{color:var(--blue)}

/* ─────────── 6. Крупная врезка ───────────
   У новостей, что на главной идут с кадром, — примерно каждая десятая. */
.lenta17 .fdb{
	display:flex;flex-direction:column;gap:13px;margin:32px 0;padding:28px 0;
	border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-decoration:none;
}
.lenta17 .fdb-th{position:relative;display:block;overflow:hidden;border-radius:0;aspect-ratio:16/9;background:var(--surf)}
.lenta17 .fdb-th img{width:100%;height:100%;object-fit:cover}
.lenta17 .fdb-t{font-size:clamp(23px,2.1vw,28px);line-height:1.18;font-weight:800;color:var(--txt);letter-spacing:-.015em;transition:color .2s}
.lenta17 .fdb:hover .fdb-t{color:var(--blue)}
.lenta17 .fdb-tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}

/* ─────────── 7. Кнопка и итог ───────────
   Кнопка — ссылка (без JS ведёт на следующую страницу), поэтому
   выравнивание и подчёркивание заданы явно, а скрытие — правилом: атрибут
   hidden слабее display:block. Пока идёт догрузка, у неё aria-busy. */
.lenta17 .fd-more-btn{
	display:block;width:100%;margin:28px 0 8px;padding:15px 20px;box-sizing:border-box;
	border:1px solid var(--border);border-radius:0;background:transparent;color:var(--txt);
	font:inherit;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
	text-align:center;text-decoration:none;cursor:pointer;
	transition:background .2s,color .2s,border-color .2s;
}
.lenta17 .fd-more-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.lenta17 .fd-more-btn[aria-busy="true"]{opacity:.5;cursor:default;pointer-events:none}
.lenta17 .fd-more-btn[hidden]{display:none}
.lenta17 .fd-end{margin:0;padding:26px 0 4px;font-size:13px;line-height:1.5;color:var(--txt3)}

/* ─────────── 7а. «Медиа» — сетка карточек ───────────
   Раздел видео — не строками, а карточками по три в ряд, как блок «Медиа»
   на главной (17.09, «отработай все эти страницы, чтобы выглядели хорошо
   и соотносились с остальными»): строка «кадр слева, текст справа»
   оставляла правую часть колонки пустой. Карточка — кадр 16:9 с
   длительностью, «программа · дата» служебной строкой (11/600 прописными,
   как подписи превью главной) и заголовок 17/600 (рядовой заголовок
   лестницы v19.6). Разделитель месяца — на всю ширину сетки.
   На 820 и уже — по две, на телефоне карточка снова строка (раздел 8). */
.media17 .mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;align-items:start}
.media17 .mgrid > .fd-dsep{grid-column:1 / -1;padding:10px 0 0;margin-bottom:-16px}
.media17 .mgrid > .fd-dsep:first-child{padding-top:2px}
.media17 .mcard{display:flex;flex-direction:column;min-width:0;text-decoration:none}
.media17 .mcard-th{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:var(--surf)}
.media17 .mcard-th img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.media17 .mcard:hover .mcard-th img{transform:scale(1.04)}
.media17 .mcard-meta{
	display:block;margin-top:12px;white-space:nowrap;
	font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);
}
.media17 .mcard-cat{white-space:normal}
.media17 .mcard-cat + .mcard-date::before{content:"·";margin:0 7px 0 6px}
.media17 .mcard-t{
	display:block;margin-top:6px;font-size:17px;line-height:1.35;font-weight:600;color:var(--txt);
	text-wrap:pretty;transition:color .2s;
}
.media17 .mcard:hover .mcard-t{color:var(--blue)}

/* ─────────── 8. Брейкпоинты ───────────
   Как у ленты главной ниже 820px: кадр уходит вправо и сжимается до 116px,
   заголовок 17px.

   На телефоне — своя раскладка, не как на главной. Там строк с кадром
   одна из десяти, здесь кадр у каждой, и между столбцом времени и кадром
   заголовку оставалось 125px: шесть строк текста, строка ленты 211px на
   375. Время встаёт над заголовком, текст идёт от левого края до кадра.

   Строка фильтров ниже 820px — в два ряда: сверху кнопка рубрик во всю
   ширину (название слева, стрелка справа), под ней дни и календарь. В
   один ряд длинное название («Союзное государство», 230px) сжало бы дни
   на 600px до 27px. Список рубрик тогда во всю ширину и сразу под своей
   кнопкой — его верхняя черта ложится на черту между рядами.

   Заголовок страницы на телефоне — 16px, его ведёт .hl-head. В строке
   дат шесть дней вместо семи (самый ранний, .is-far, скрыт — выбранный
   день им не бывает), календарь одним значком, а сама сетка месяца — во
   всю ширину колонки. */
@media(max-width:820px){
	.lenta17 .fd-row{grid-template-columns:48px minmax(0,1fr) 116px}
	.lenta17 .fd-th{grid-column:3;grid-row:1}
	.lenta17 .fd-body{grid-column:2}
	.lenta17 .fd-t{font-size:17px}
	.lenta17 .lf-bar{flex-wrap:wrap}
	.lenta17 .lf-rubsel{flex:1 1 100%;max-width:none;border-right:none;border-bottom:1px solid var(--border)}
	.lenta17 .lf-rubsel-in{height:44px}
	.lenta17 .lf-rubs{right:-1px;top:100%;width:auto}
	.lenta17 .lf-dates{flex:1 1 100%}
	.media17 .mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
@media(max-width:600px){
	.lenta17 .fd-row{grid-template-columns:minmax(0,1fr) 116px;gap:4px 14px;padding:16px 0}
	.lenta17 .fd-time{grid-column:1;grid-row:1;padding-top:0}
	.lenta17 .fd-body{grid-column:1;grid-row:2}
	.lenta17 .fd-th{grid-column:2;grid-row:1 / 3}
	.lenta17 .fd-t{max-width:none;font-size:16px}
	.lenta17 .lf-date.is-far,
	.lenta17 .lf-cal-btn-t{display:none}
	.lenta17 .lf-cal-btn{padding:0 12px}
	.lenta17 .lf-cal{left:0;right:0;width:auto}
	/* «Медиа» на телефоне — строками, как лента: текст слева, кадр 116px
	   справа во весь рост строки. */
	.media17 .mgrid{grid-template-columns:minmax(0,1fr);gap:0}
	.media17 .mgrid > .fd-dsep{padding:30px 0 4px;margin:0}
	.media17 .mgrid > .fd-dsep:first-child{padding-top:2px}
	.media17 .mcard{
		display:grid;grid-template-columns:minmax(0,1fr) 116px;grid-template-areas:"meta th" "t th";
		gap:4px 14px;align-items:start;padding:16px 0;
	}
	.media17 .mcard-th{grid-area:th}
	.media17 .mcard-meta{grid-area:meta;margin:0}
	.media17 .mcard-t{grid-area:t;margin:0;font-size:16px}
}