/* ==========================================================================
   Knigi.ws  |  k-home.css  |  главная, категории, поиск, жанры, метки
   Подключается на всех страницах кроме страницы книги, после knigi2.css.
   Базовые токены и компоненты (.k-books, .k-card, .k-cover, .ad-slot) в knigi2.css.
   Цвета только через переменные темы.

   1. Карточка книги (shortstory.tpl) и цвет ткани-заглушки
   2. Первая карточка ленты на главной (горизонтальная)
   3. Сетка в списках без обёртки (поиск, метки, новинки)
   4. Главная: верхняя полоса, вкладки, серии, «Продолжить чтение»
   5. SEO-текст на главной
   6. Поиск, облако меток
   7. Страница жанров
   ========================================================================== */


/* 1. КАРТОЧКА КНИГИ
   Вся карточка кликабельна через ссылку-заголовок (::after на всю карточку).
   -------------------------------------------------------------------------- */
.k-card { position: relative; }
.k-card .k-cover { transition: transform 160ms var(--ease); }
.k-card:hover .k-cover { transform: translateY(-2px); }
.k-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.k-card__title { margin-top: 2px; font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.3; }
.k-card__link { color: inherit; }
.k-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.k-card__link:focus-visible { outline: none; }
.k-card__link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }
.k-card:hover .k-card__link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.k-card__author { position: relative; z-index: 1; align-self: flex-start; max-width: 100%; }
.k-card__author a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* то, что нужно только первой карточке ленты */
.k-card__note, .k-card__text, .k-card__actions { display: none; }

/* Цвет ткани по порядку: восемь цветов корешков по кругу */
.k-card:nth-child(8n+1), .k-series__item:nth-child(8n+1) { --cover: var(--spine-1); }
.k-card:nth-child(8n+2), .k-series__item:nth-child(8n+2) { --cover: var(--spine-2); }
.k-card:nth-child(8n+3), .k-series__item:nth-child(8n+3) { --cover: var(--spine-3); }
.k-card:nth-child(8n+4), .k-series__item:nth-child(8n+4) { --cover: var(--spine-4); }
.k-card:nth-child(8n+5), .k-series__item:nth-child(8n+5) { --cover: var(--spine-5); }
.k-card:nth-child(8n+6), .k-series__item:nth-child(8n+6) { --cover: var(--spine-6); }
.k-card:nth-child(8n+7), .k-series__item:nth-child(8n+7) { --cover: var(--spine-7); }
.k-card:nth-child(8n+8), .k-series__item:nth-child(8n+8) { --cover: var(--spine-8); }

/* название на заглушке, пока нет картинки или она грузится */
.k-cover__t { overflow: hidden; word-break: break-word; }
.k-cover__t:empty { display: none; }

/* реклама внутри сетки занимает всю строку */
.k-books > .ad-slot { grid-column: 1 / -1; }
.k-books > .k-pagination, .k-books > nav, .k-books > #dle-ajax-comments { grid-column: 1 / -1; }
/* списки из main.tpl (категории, поиск, метки, новинки...): всё, что не карточка
   (форма поиска, сообщения, описание метки), на всю ширину */
.k-books--list > :not(.k-card) { grid-column: 1 / -1; }


/* 2. ПЕРВАЯ КАРТОЧКА ЛЕНТЫ НА ГЛАВНОЙ
   Класс .k-books--feat ставит main.tpl (только 1-я страница главной).
   Параметры те же, что у .k-book-feature в knigi2.css.
   -------------------------------------------------------------------------- */
.k-books--feat > .k-card:first-child {
	grid-column: 1 / -1; flex-direction: row; gap: 24px; padding: 24px;
	border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.k-books--feat > .k-card:first-child .k-cover { flex: 0 0 132px; align-self: flex-start; border-radius: 4px; box-shadow: var(--shadow); }
.k-books--feat > .k-card:first-child .k-cover__t { padding: 10px; font-size: 13px; font-weight: 600; }
.k-books--feat > .k-card:first-child .k-card__body { flex: 1; gap: 4px; }
.k-books--feat > .k-card:first-child .k-card__note { display: block; font-size: 14px; color: var(--muted); }
.k-books--feat > .k-card:first-child .k-card__title {
	display: block; margin-top: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
	-webkit-line-clamp: unset;
}
.k-books--feat > .k-card:first-child .k-card__author { font-size: 15px; }
.k-books--feat > .k-card:first-child .k-card__text {
	display: block; max-width: 62ch; margin: 6px 0 0;
	font-family: var(--font-read); font-size: 16px; line-height: 1.55;
}
.k-books--feat > .k-card:first-child .k-card__text:empty { display: none; }
.k-books--feat > .k-card:first-child .k-card__actions {
	position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px;
}
.k-books--feat > .k-card:first-child:hover .k-cover { transform: none; }

@media (max-width: 719px) {
	.k-books--feat > .k-card:first-child { gap: 14px; padding: 16px; }
	.k-books--feat > .k-card:first-child .k-cover { flex-basis: 88px; }
	.k-books--feat > .k-card:first-child .k-cover__t { padding: 6px; font-size: 11px; }
	.k-books--feat > .k-card:first-child .k-card__title { font-size: 20px; }
	.k-books--feat > .k-card:first-child .k-card__text {
		display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
		font-size: 15px;
	}
}
@media (prefers-reduced-motion: reduce) { .k-card:hover .k-cover { transform: none; } }


/* 3. СЕТКА В СПИСКАХ БЕЗ ОБЁРТКИ
   Поиск, метки, новинки и т.п.: main.tpl кладёт {content} в #dle-content без сетки.
   Если среди детей есть карточки, делаем из контейнера сетку, остальное на всю ширину.
   -------------------------------------------------------------------------- */
#dle-content:has(> .k-card):not(.k-books) {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; align-items: start;
}
#dle-content:has(> .k-card):not(.k-books) > :not(.k-card) { grid-column: 1 / -1; }
@media (max-width: 719px) {
	#dle-content:has(> .k-card):not(.k-books) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* старые браузеры без :has: плитки в строку */
@supports not selector(:has(*)) {
	.k-main #dle-content:not(.k-books) > .k-card { display: inline-flex; vertical-align: top; width: calc(25% - 12px); margin: 0 12px 24px 0; }
	.k-main #dle-content:not(.k-books) > :not(.k-card) { display: block; }
}
@media (max-width: 719px) {
	@supports not selector(:has(*)) {
		.k-main #dle-content:not(.k-books) > .k-card { width: calc(50% - 8px); margin-right: 8px; }
	}
}


/* 4. ГЛАВНАЯ
   -------------------------------------------------------------------------- */
.k-home-top { display: flex; flex-direction: column; gap: 16px; margin-bottom: -16px; }
.k-title--sm { font-size: 24px; }
@media (max-width: 1023px) { .k-title--sm { font-size: 22px; } }

/* полоса жанров (main-cats.tpl) */
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.k-chips > li:nth-child(8n+1) { --cover: var(--spine-1); }
.k-chips > li:nth-child(8n+2) { --cover: var(--spine-2); }
.k-chips > li:nth-child(8n+3) { --cover: var(--spine-3); }
.k-chips > li:nth-child(8n+4) { --cover: var(--spine-4); }
.k-chips > li:nth-child(8n+5) { --cover: var(--spine-5); }
.k-chips > li:nth-child(8n+6) { --cover: var(--spine-6); }
.k-chips > li:nth-child(8n+7) { --cover: var(--spine-7); }
.k-chips > li:nth-child(8n+8) { --cover: var(--spine-8); }
.k-chip--all { border: 1px solid var(--line); background: transparent; }
.k-chip--all:hover { background: var(--hover); }
@media (max-width: 719px) {
	/* на телефоне пять жанров и «Все жанры» */
	.k-chips > li:nth-child(n+6):not(.k-chips__all) { display: none; }
}

/* вкладки «Новые / Популярные» */
.k-seg { display: none; padding: 2px; border-radius: var(--radius); background: var(--chip); }
.is-tabs .k-seg { display: flex; }
.k-seg__tab {
	min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius);
	background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
	transition: background-color 140ms ease, color 140ms ease;
}
.k-seg__tab:hover { color: var(--text); }
.k-seg__tab[aria-selected="true"] { background: var(--surface); color: var(--text); }
.k-tabpanel[hidden] { display: none; }
.k-nojs-h { margin: 32px 0 16px; }
.is-tabs .k-nojs-h { display: none; }
.k-home:not(.is-tabs) .k-tabpanel + .k-tabpanel { margin-top: 8px; }

/* «Продолжить чтение» (main.tpl, данные из localStorage k-reading; блок hidden, пока скрипт не найдёт недочитанную книгу) */
.k-resume {
	padding: 4px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.k-resume[hidden] { display: none; }
.k-resume__h { margin: 10px 0 2px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.k-resume__list { list-style: none; margin: 0; padding: 0; }
.k-resume__item { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); }
.k-resume__item:first-child { border-top: 0; }
.k-resume__cover { flex: 0 0 36px; width: 36px; border-radius: 2px; }
.k-resume__cover .k-cover__t { padding: 0; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
.k-resume__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.k-resume__title { font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-resume__author { font-weight: 400; color: var(--muted); }
.k-resume__meta { font-size: 14px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.k-resume__bar { width: 100%; max-width: 200px; border-radius: 2px; overflow: hidden; }
.k-resume__go { flex: 0 0 auto; white-space: nowrap; }
.k-resume__go svg { flex: 0 0 auto; }
.k-resume__x {
	flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	margin: 0 -10px 0 -6px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted);
	cursor: pointer; transition: background-color 140ms ease, color 140ms ease;
}
.k-resume__x:hover { background: var(--hover); color: var(--text); }
.k-resume__x:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
/* телефон: кнопка «Продолжить» сжимается до квадрата со стрелкой (имя остаётся в aria-label), чтобы названию хватило места */
@media (max-width: 560px) {
	.k-resume { padding: 2px 12px; }
	.k-resume__item { gap: 10px; }
	.k-resume__go { width: 44px; padding: 0; }
	.k-resume__go-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.k-resume__x { margin: 0 -8px 0 -4px; }
}

/* продолжения серий (topnews.tpl) */
.k-series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.k-series__item { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); }
.k-series__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--text); }
.k-series__cover { flex: 0 0 34px; width: 34px; height: 51px; aspect-ratio: auto; border-radius: 2px; }
.k-series__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; line-height: 1.35; }
.k-series__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; line-height: 24px; }
.k-series__meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 20px; padding: 2px 0; color: var(--muted); }
.k-series__name a { display: inline-block; max-width: 100%; min-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; color: var(--text); }
.k-series__name a:hover, .k-series__meta:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.k-series__meta { text-decoration: none; }
.k-series__follow { flex: 0 0 44px; border: 1px solid var(--line); }
.k-series__follow[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent-soft); color: var(--accent-text); }
@media (max-width: 719px) {
	.k-series { grid-template-columns: minmax(0, 1fr); }
}


/* 5. SEO-ТЕКСТ НА ГЛАВНОЙ (main-seo.tpl)
   Весь текст в HTML. С JS показаны первые строки и кнопка «Подробнее».
   -------------------------------------------------------------------------- */
.k-seo__body { max-width: 68ch; }
.k-seo.is-js .k-seo__body { max-height: 7.6em; overflow: hidden; position: relative; }
.k-seo.is-js.is-open .k-seo__body { max-height: none; overflow: visible; }
.k-seo__more {
	min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
	color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.k-seo__more:hover { text-decoration-thickness: 2px; }
.k-seo__more[hidden] { display: none; }
.site-desc a { color: var(--accent-text); }


/* 6. ПОИСК, ОБЛАКО МЕТОК
   -------------------------------------------------------------------------- */
.k-searchpage { display: flex; flex-direction: column; gap: 16px; }
.k-searchpage .k-title { margin-bottom: 8px; }
.k-searchpage__form { max-width: 720px; }
.k-searchpage__form #searchtable { padding: 0; }
.k-searchpage__form #searchtable table { width: 100%; }
.k-searchpage__form #searchtable td { padding: 4px 0; font-size: 15px; color: var(--muted); }
.k-searchpage__form #searchtable fieldset { margin-top: 8px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; color: var(--text); }
.k-searchpage__form #searchtable select { max-width: 100%; background-color: var(--bg); color: var(--text); }
.k-searchpage__form #searchtable label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.k-searchpage__msg { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.k-searchpage__msg-title { font-weight: 500; }
.k-searchpage__msg p { max-width: 52ch; color: var(--muted); }

.k-tags { display: flex; flex-direction: column; gap: 16px; }
.k-tags .cloud-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.k-tags .cloud-tags > span { display: block; }
.k-tags .cloud-tags a {
	display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius);
	background: var(--chip); color: var(--text); transition: background-color 140ms ease;
}
.k-tags .cloud-tags a:hover { background: var(--surface2); color: var(--text); box-shadow: none; }


/* 7. СТРАНИЦА ЖАНРОВ (static-genres.tpl, static-genres-item.tpl)
   Каждый корневой жанр: карточка с цветным корешком слева, внутри подразделы.
   -------------------------------------------------------------------------- */
.k-genres-page { display: flex; flex-direction: column; gap: 20px; }
.k-genres-page__text { max-width: 68ch; color: var(--muted); line-height: 1.65; }
.k-genres-page__text:empty { display: none; }

.k-gp { columns: 3; column-gap: 16px; }
.k-gp > .k-gp__item {
	break-inside: avoid; margin: 0 0 16px; padding: 6px 16px;
	border: 1px solid var(--border); border-radius: var(--radius-lg);
	background: var(--surface);
}

.k-gp > .k-gp__item:nth-child(8n+1) { --cover: var(--spine-1); }
.k-gp > .k-gp__item:nth-child(8n+2) { --cover: var(--spine-2); }
.k-gp > .k-gp__item:nth-child(8n+3) { --cover: var(--spine-3); }
.k-gp > .k-gp__item:nth-child(8n+4) { --cover: var(--spine-4); }
.k-gp > .k-gp__item:nth-child(8n+5) { --cover: var(--spine-5); }
.k-gp > .k-gp__item:nth-child(8n+6) { --cover: var(--spine-6); }
.k-gp > .k-gp__item:nth-child(8n+7) { --cover: var(--spine-7); }
.k-gp > .k-gp__item:nth-child(8n+8) { --cover: var(--spine-8); }
.k-gp__head {
	display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; color: var(--text);
	font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35;
}
.k-gp > .k-gp__item > .k-gp__head::before {
	content: ""; flex: 0 0 8px; height: 24px; border-radius: 2px; background: var(--cover, var(--spine-1));
}
.k-gp__head:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.k-gp__sub { margin: 0 0 6px; padding-left: 20px; list-style: none; }
.k-gp__sub .k-gp__item { margin: 0; padding: 0; border: 0; background: transparent; }
.k-gp__sub .k-gp__head { padding: 6px 0; font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--muted); }
.k-gp__sub .k-gp__head:hover { color: var(--text); }
.k-gp__sub .k-gp__sub { padding-left: 16px; }

@media (max-width: 1023px) {
	.k-gp { columns: 2; }
}
@media (max-width: 560px) {
	.k-gp { columns: 1; }
	.k-gp__sub .k-gp__head { padding: 11px 0; }
}

/* Реклама H2 внутри ленты: на всю ширину сетки */
#dle-content > .k-ad-h2 { grid-column: 1 / -1; }