/* Слайд тайтла большого баннера главной (views/site/_hero_title.php, данные — HeroTitles::slides()).
 * Слайд заполняет свой блок целиком: пропорцию задаёт рамка большого баннера (или .nbt-frame — предпросмотр в /admin/hero).
 * Раскладка — container queries по ширине И высоте блока (.nbt — контейнер размера):
 *   широкий (≥ 720 px): текст слева до ~58 %, обложка справа по высоте кадра, описание 2–3 строки;
 *   средний (480–719): обложка поменьше, описание 2 строки;
 *   узкий (< 480, телефон): текст снизу на всю ширину, обложка маленькая справа сверху; низкий кадр (16:10) — без описания
 *   и обложки, высокий (4:5) — с описанием.
 * Текст всегда светлый на тёмной подложке (оттенок подложки — от тайтла, --nbt-h): одинаково в обеих темах сайта.
 * Весь слайд — ссылка названия, растянутая ::after; «Читать» лежит поверх неё. */

.nbt {
	--nbt-h: 265;
	--nbt-deep: oklch(0.16 0.03 var(--nbt-h));
	--nbt-pad: clamp(18px, 4.2cqi, 48px);
	position: relative; width: 100%; height: 100%; min-height: 0;
	container: nbt / size;
	color: #fff; font-family: var(--font-sans);
}
.nbt [hidden] { display: none !important; }
.nbt-card {
	position: absolute; inset: 0; isolation: isolate; overflow: hidden; margin: 0;
	border-radius: inherit; background: var(--nbt-deep);
	display: flex; align-items: center;
}

/* ------------------------------------------------------------ фон: баннер тайтла или размытая обложка */
.nbt-bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.nbt-bg img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.nbt-art {
	width: 100%; height: 100%; object-fit: cover;
	transform-origin: 70% 50%; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.nbt-card:hover .nbt-art { transform: scale(1.03); }
.nbt-blur {
	position: absolute; left: -12%; top: -30%; width: 124%; height: 160%; object-fit: cover;
	filter: blur(34px) saturate(1.35) brightness(.8); transform: translateZ(0);
}
.nbt.no-banner .nbt-bg { background: linear-gradient(135deg, oklch(0.42 0.1 var(--nbt-h)), oklch(0.2 0.06 calc(var(--nbt-h) + 40))); }

/* подложка под текстом: слева тёмная (оттенок тайтла), к правому краю — прозрачнее; снизу — затемнение */
.nbt-shade {
	position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background:
		linear-gradient(90deg,
			color-mix(in oklab, var(--nbt-deep) 92%, transparent) 0%,
			color-mix(in oklab, var(--nbt-deep) 78%, transparent) 34%,
			color-mix(in oklab, var(--nbt-deep) 40%, transparent) 62%,
			color-mix(in oklab, var(--nbt-deep) 12%, transparent) 100%),
		linear-gradient(0deg, oklch(0.08 0 0 / .55) 0%, oklch(0.08 0 0 / .12) 38%, transparent 60%);
}
.nbt.no-banner .nbt-shade {
	background:
		linear-gradient(90deg, color-mix(in oklab, var(--nbt-deep) 80%, transparent) 0%, color-mix(in oklab, var(--nbt-deep) 40%, transparent) 60%, transparent 100%),
		radial-gradient(60% 90% at 85% 50%, oklch(1 0 0 / .08), transparent 70%);
}

/* ------------------------------------------------------------ текст */
.nbt-body {
	position: relative; z-index: 1; box-sizing: border-box; width: min(62%, 720px); max-height: 100%;
	display: flex; flex-direction: column; align-items: flex-start; gap: 0;
	padding: var(--nbt-pad); padding-right: 12px;
}
.nbt-badge {
	display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; box-sizing: border-box;
	border-radius: var(--radius-sm); background: #fff; color: #111;
	font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
	box-shadow: 0 6px 16px -8px oklch(0 0 0 / .6);
}
.nbt.is-filled .nbt-badge { background: oklch(1 0 0 / .16); color: #fff; box-shadow: inset 0 0 0 1px oklch(1 0 0 / .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nbt-badge svg { flex: none; }
/* тень текста короткая: широкая (22px) обрезалась overflow: hidden у line-clamp и давала тёмный прямоугольник за названием;
   контраст даёт подложка .nbt-shade */
.nbt-title {
	margin: 12px 0 0; color: #fff; font-size: clamp(22px, 3.1cqi, 40px); line-height: 1.1; font-weight: 780; letter-spacing: -0.028em;
	text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 1px 2px oklch(0 0 0 / .45);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nbt-link, .nbt-link:hover, .nbt-link:focus, .nbt-link:visited { color: inherit; text-decoration: none; }
/* весь слайд — ссылка на тайтл */
.nbt-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.nbt-card { border-radius: inherit; }
.nbt-link:focus-visible { outline: none; }
.nbt-link:focus-visible::after { outline: 3px solid #fff; outline-offset: -5px; box-shadow: inset 0 0 0 6px oklch(0 0 0 / .45); }
.nbt-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; color: oklch(1 0 0 / .8);
}
.nbt-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.nbt-meta > span + span::before { content: "\00B7"; margin: 0 8px; color: oklch(1 0 0 / .5); }
.nbt-author svg { opacity: .8; flex: none; }
.nbt-desc {
	margin: 10px 0 0; max-width: 56ch; font-size: 14.5px; line-height: 1.55; color: oklch(1 0 0 / .78);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nbt-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 12px 0 0; font-size: 13px; color: oklch(1 0 0 / .72); font-variant-numeric: tabular-nums; }
.nbt-stats > span + span::before { content: "\00B7"; margin: 0 8px; color: oklch(1 0 0 / .45); }
.nbt-star { display: inline-flex; align-items: center; gap: 4px; color: #fff; font-weight: 700; }
/* метка 18+ (как .ta-b-adult на обложках каталога) */
.nbt-stats > .nbt-age { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: oklch(0.55 0.2 25 / .92); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.nbt-stats > .nbt-age + span::before { content: none; }
.nbt-stats > .nbt-age + span { margin-left: 8px; }
.nbt-star svg { color: oklch(0.82 0.16 80); fill: oklch(0.82 0.16 80); }
.nbt-st.is-completed { color: oklch(0.85 0.14 150); font-weight: 600; }
.nbt-st.is-ongoing { color: #fff; font-weight: 600; }
.nbt-st.is-paused, .nbt-st.is-dropped { color: oklch(0.85 0.13 75); font-weight: 600; }
.nbt-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nbt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 18px; box-sizing: border-box;
	border-radius: var(--radius); font-size: 14px; font-weight: 650; white-space: nowrap; text-decoration: none;
	transition: background .15s, transform .15s, box-shadow .15s;
}
.nbt-btn:hover, .nbt-btn:focus { text-decoration: none; }
.nbt-btn.is-read { background: #fff; color: #111; box-shadow: 0 10px 24px -12px oklch(0 0 0 / .7); }
.nbt-btn.is-read:hover { background: oklch(0.92 0 0); color: #111; }
.nbt-btn.is-read:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px oklch(0 0 0 / .5); }
.nbt-btn.is-more { color: #fff; background: oklch(1 0 0 / .12); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nbt-btn.is-more:hover { background: oklch(1 0 0 / .2); color: #fff; }
.nbt-card:hover .nbt-btn.is-more { background: oklch(1 0 0 / .2); }

/* ------------------------------------------------------------ обложка справа */
.nbt-cover {
	position: absolute; z-index: 0; right: clamp(20px, 6cqi, 88px); top: 50%;
	height: 80%; aspect-ratio: 2 / 3; transform: translateY(-50%); pointer-events: none;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.nbt-cover .nb-cover { height: 100%; width: auto; border: 0; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -22px oklch(0 0 0 / .9), 0 0 0 1px oklch(1 0 0 / .14); }
.nbt-cover .nb-cover img { width: 100%; height: 100%; object-fit: cover; }
.nbt-cover .nb-cover picture { display: contents; }
.nbt-card:hover .nbt-cover { transform: translateY(-50%) translateY(-4px); }

/* ------------------------------------------------------------ средний кадр */
@container nbt (max-width: 719.98px) {
	.nbt-body { width: 64%; }
	.nbt-title { font-size: clamp(20px, 4.2cqi, 28px); }
	.nbt-desc { -webkit-line-clamp: 2; font-size: 13.5px; }
	.nbt-cover { height: 72%; right: 5cqi; }
	.nbt-btn { height: 38px; padding: 0 15px; font-size: 13.5px; }
}
/* низкий кадр (21:8 на планшете): описание короче */
@container nbt (max-height: 339.98px) {
	.nbt-desc { -webkit-line-clamp: 2; }
	.nbt-title { -webkit-line-clamp: 2; }
	.nbt-actions { margin-top: 14px; }
}
@container nbt (max-height: 279.98px) {
	.nbt-desc { display: none; }
	.nbt-meta { margin-top: 6px; }
	.nbt-stats { margin-top: 6px; }
}

/* ------------------------------------------------------------ узкий кадр (телефон): текст снизу, обложка справа сверху */
@container nbt (max-width: 479.98px) {
	.nbt { --nbt-pad: 16px; }
	.nbt-card { align-items: flex-end; }
	.nbt-body { width: 100%; padding: 16px; justify-content: flex-end; }
	.nbt-shade {
		background:
			linear-gradient(0deg, color-mix(in oklab, var(--nbt-deep) 94%, transparent) 0%, color-mix(in oklab, var(--nbt-deep) 72%, transparent) 46%, color-mix(in oklab, var(--nbt-deep) 18%, transparent) 78%, transparent 100%),
			linear-gradient(180deg, oklch(0 0 0 / .3) 0%, transparent 28%);
	}
	.nbt-title { margin-top: 8px; font-size: clamp(18px, 5.4cqi, 22px); -webkit-line-clamp: 3; padding-right: 0; }
	.nbt-meta { margin-top: 6px; font-size: 12.5px; }
	.nbt-meta .nbt-genres { display: none; }
	.nbt-meta .nbt-author:only-child, .nbt-meta .nbt-author { display: inline-flex; }
	.nbt-desc { font-size: 13px; -webkit-line-clamp: 3; margin-top: 8px; }
	.nbt-stats { margin-top: 6px; font-size: 12.5px; }
	.nbt-actions { margin-top: 12px; gap: 6px; width: 100%; }
	.nbt-btn { height: 40px; padding: 0 14px; font-size: 13.5px; }
	.nbt-btn.is-read { flex: 1 1 auto; }
	.nbt-cover { top: 14px; right: 14px; height: auto; width: clamp(64px, 24cqi, 104px); transform: rotate(3deg); }
	.nbt-card:hover .nbt-cover { transform: rotate(3deg) translateY(-2px); }
	.nbt-badge { height: 22px; font-size: 10.5px; }
}
/* телефон, низкий кадр (16:10): без описания и обложки, название в две строки */
@container nbt (max-width: 479.98px) and (max-height: 339.98px) {
	.nbt-desc, .nbt-cover { display: none; }
	.nbt-title { -webkit-line-clamp: 2; }
	.nbt-actions { margin-top: 10px; }
	.nbt-btn { height: 36px; }
}
/* телефон, высокий кадр: обложка крупнее, текст ниже неё */
@container nbt (max-width: 479.98px) and (min-height: 400px) {
	.nbt-cover { width: clamp(84px, 30cqi, 128px); }
}

/* ------------------------------------------------------------ предпросмотр (/admin/hero): рамки как у большого баннера */
.nbt-frame { position: relative; width: 100%; aspect-ratio: 21 / 8; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--elev-2); background: oklch(0.2 0 0); }
.nbt-frame.is-tablet { aspect-ratio: 12 / 5; }
.nbt-frame.is-phone { max-width: 358px; aspect-ratio: 16 / 10; }
.nbt-frame.is-phone-tall { max-width: 358px; aspect-ratio: 4 / 5; }

@media (prefers-reduced-motion: reduce) {
	.nbt-art, .nbt-cover, .nbt-btn { transition: none !important; }
	.nbt-card:hover .nbt-art { transform: none; }
	.nbt-card:hover .nbt-cover { transform: translateY(-50%); }
}
@media (prefers-reduced-transparency: reduce) {
	.nbt-btn.is-more, .nbt.is-filled .nbt-badge { -webkit-backdrop-filter: none; backdrop-filter: none; background: oklch(0.25 0.02 var(--nbt-h)); }
}
@media (forced-colors: active) {
	.nbt-shade, .nbt-bg { display: none; }
	.nbt-card { background: Canvas; color: CanvasText; }
}