/* ============================================================
   NoirTube — minimalist dark theme for video directories
   ============================================================ */

:root {
	--nt-bg: #050505;
	--nt-bg-2: #080808;
	--nt-surface: #111111;
	--nt-card: #161616;
	--nt-card-hover: #1c1c1c;
	--nt-border: #232323;
	--nt-text: #f4f4f5;
	--nt-text-dim: #9aa0a6;
	--nt-text-mute: #6b7280;
	--nt-accent: #ff2d87;      /* hot pink */
	--nt-accent-2: #ffd400;    /* yellow accent */
	--nt-radius: 12px;
	--nt-radius-sm: 8px;
	--nt-radius-pill: 999px;
	--nt-shadow: 0 4px 20px rgba(0, 0, 0, .45);
	--nt-header-h: 64px;
	--nt-max: 1440px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
	background: var(--nt-bg);
	color: var(--nt-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--nt-accent); }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; margin: 0; }

.nt-container {
	max-width: var(--nt-max);
	margin: 0 auto;
	padding: 0 20px;
}

.nt-main { min-height: 60vh; padding-bottom: 60px; }

.nt-accent { color: var(--nt-accent); }

/* ---------------- Header ---------------- */
.nt-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(8, 8, 8, .92);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--nt-border);
}

.nt-header__inner {
	max-width: var(--nt-max);
	margin: 0 auto;
	padding: 12px 20px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 18px;
	align-items: center;
}

.nt-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--nt-text);
	font-weight: 800;
	letter-spacing: -.02em;
}

.nt-logo__mark {
	display: inline-grid;
	place-items: center;
	width: 32px; height: 32px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--nt-accent), #b51060);
	color: #fff;
	font-size: 16px;
}

.nt-logo__text { font-size: 17px; }

.nt-nav__list {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nt-nav__list a {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: var(--nt-radius-pill);
	font-size: 14px;
	font-weight: 500;
	color: var(--nt-text-dim);
	transition: background .15s, color .15s;
}
.nt-nav__list a:hover,
.nt-nav__list .current-menu-item a {
	background: var(--nt-card);
	color: var(--nt-text);
}

.nt-search {
	order: 3;
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	background: var(--nt-card);
	border: 1px solid var(--nt-border);
	border-radius: var(--nt-radius-pill);
	padding: 6px 8px 6px 16px;
	transition: border-color .15s;
}
.nt-search:focus-within { border-color: var(--nt-accent); }

.nt-search__input {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--nt-text);
	font-size: 14px;
	padding: 8px 0;
	outline: none;
}
.nt-search__input::placeholder { color: var(--nt-text-mute); }

.nt-search__submit {
	display: inline-grid;
	place-items: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 0;
	background: var(--nt-accent);
	color: #fff;
	cursor: pointer;
	transition: transform .1s;
}
.nt-search__submit:hover { transform: scale(1.05); }

.nt-burger {
	display: none;
	background: transparent;
	border: 0;
	width: 40px; height: 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}
.nt-burger span {
	display: block;
	width: 22px; height: 2px;
	background: var(--nt-text);
	border-radius: 2px;
	transition: transform .2s, opacity .2s;
}

/* Pills */
.nt-pills {
	border-top: 1px solid var(--nt-border);
	background: var(--nt-bg-2);
}
.nt-pills__track {
	display: flex;
	gap: 8px;
	padding: 10px 20px;
	overflow-x: auto;
	scrollbar-width: none;
	max-width: var(--nt-max);
	margin: 0 auto;
}
.nt-pills__track::-webkit-scrollbar { display: none; }

.nt-pill {
	flex-shrink: 0;
	padding: 6px 14px;
	border-radius: var(--nt-radius-pill);
	background: var(--nt-card);
	border: 1px solid var(--nt-border);
	color: var(--nt-text-dim);
	font-size: 13px;
	font-weight: 500;
	transition: background .15s, color .15s, border-color .15s;
}
.nt-pill:hover {
	background: var(--nt-card-hover);
	color: var(--nt-text);
	border-color: var(--nt-accent);
}

/* ---------------- Sections ---------------- */
.nt-section { padding: 36px 0 8px; }

.nt-section__title {
	font-size: 20px;
	margin: 0 0 18px;
}

.nt-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.nt-section__head .nt-section__title { margin: 0; }

.nt-section__link {
	color: var(--nt-text-dim);
	font-size: 13px;
	font-weight: 500;
}
.nt-section__link:hover { color: var(--nt-accent); }

.nt-empty {
	color: var(--nt-text-mute);
	padding: 30px 0;
	text-align: center;
}

/* ---------------- Grid + cards ---------------- */
.nt-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px;
}

.nt-card {
	display: flex;
	flex-direction: column;
	color: var(--nt-text);
	border-radius: var(--nt-radius);
	overflow: hidden;
	transition: transform .15s ease;
}
.nt-card:hover { transform: translateY(-2px); color: var(--nt-text); }

.nt-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--nt-card);
	overflow: hidden;
	border-radius: var(--nt-radius);
}
.nt-card__thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .25s ease;
}
.nt-card:hover .nt-card__thumb img { transform: scale(1.04); }

.nt-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 48px;
	font-weight: 800;
	color: rgba(255, 255, 255, .35);
}

.nt-card__duration {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(0, 0, 0, .82);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 7px;
	border-radius: 4px;
	letter-spacing: .02em;
}

.nt-card__body { padding: 10px 2px 4px; }

.nt-card__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--nt-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 6px;
}

.nt-card__meta {
	display: flex;
	gap: 10px;
	color: var(--nt-text-mute);
	font-size: 12px;
}
.nt-card__source { color: var(--nt-accent-2); }

/* ---------------- Category tiles ---------------- */
.nt-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.nt-cat-tile {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--nt-radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #fff;
	overflow: hidden;
	transition: transform .15s ease;
}
.nt-cat-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.55), transparent 60%);
}
.nt-cat-tile:hover { transform: translateY(-2px); color: #fff; }
.nt-cat-tile__name {
	position: relative;
	font-size: 15px;
	font-weight: 700;
	z-index: 1;
}
.nt-cat-tile__count {
	position: relative;
	font-size: 12px;
	color: rgba(255,255,255,.7);
	z-index: 1;
}

/* ---------------- Archive head / filters ---------------- */
.nt-archive-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}

.nt-archive-desc { color: var(--nt-text-dim); margin: -10px 0 18px; }

.nt-filters {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.nt-filter {
	padding: 7px 14px;
	border-radius: var(--nt-radius-pill);
	background: var(--nt-card);
	border: 1px solid var(--nt-border);
	color: var(--nt-text-dim);
	font-size: 13px;
	font-weight: 500;
}
.nt-filter:hover { color: var(--nt-text); border-color: var(--nt-accent); }
.nt-filter.is-active {
	background: var(--nt-accent);
	border-color: var(--nt-accent);
	color: #fff;
}

/* ---------------- Single ---------------- */
.nt-single { max-width: 1100px; }

.nt-player__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--nt-radius);
	overflow: hidden;
	box-shadow: var(--nt-shadow);
}
.nt-player__frame iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
}
.nt-player__placeholder {
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	background: var(--nt-card);
	border-radius: var(--nt-radius);
	color: var(--nt-text-mute);
}

.nt-single__title {
	font-size: 24px;
	margin: 22px 0 10px;
}

.nt-single__meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	color: var(--nt-text-dim);
	font-size: 13px;
	margin-bottom: 16px;
}
.nt-single__meta a { color: var(--nt-accent-2); }

.nt-single__desc {
	color: var(--nt-text-dim);
	background: var(--nt-card);
	padding: 16px 18px;
	border-radius: var(--nt-radius);
	margin: 8px 0 18px;
}

/* Tags */
.nt-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 10px 0;
}
.nt-tags__label { color: var(--nt-text-mute); font-size: 13px; margin-right: 4px; }

.nt-tag {
	display: inline-flex;
	padding: 6px 12px;
	border-radius: var(--nt-radius-pill);
	background: var(--nt-card);
	border: 1px solid var(--nt-border);
	color: var(--nt-text-dim);
	font-size: 12px;
	font-weight: 500;
}
.nt-tag:hover { color: var(--nt-text); border-color: var(--nt-accent); }
.nt-tag--accent { color: var(--nt-accent-2); }

/* ---------------- A-Z lists ---------------- */
.nt-az-block { margin-bottom: 28px; }

.nt-az-letter {
	font-size: 14px;
	color: var(--nt-accent);
	border-bottom: 1px solid var(--nt-border);
	padding-bottom: 6px;
	margin-bottom: 12px;
	letter-spacing: .12em;
}

.nt-az-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.nt-az-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--nt-card);
	border: 1px solid var(--nt-border);
	border-radius: var(--nt-radius-sm);
	color: var(--nt-text-dim);
	font-size: 14px;
	transition: background .15s, color .15s, border-color .15s;
}
.nt-az-item:hover {
	background: var(--nt-card-hover);
	color: var(--nt-text);
	border-color: var(--nt-accent);
}
.nt-az-item__count {
	color: var(--nt-text-mute);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* ---------------- Pagination ---------------- */
.nt-pagination {
	margin: 36px 0 8px;
	display: flex;
	justify-content: center;
}
.nt-pagination .nav-links {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}
.nt-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: var(--nt-radius-sm);
	background: var(--nt-card);
	border: 1px solid var(--nt-border);
	color: var(--nt-text-dim);
	font-size: 13px;
	font-weight: 500;
}
.nt-pagination .page-numbers:hover { color: var(--nt-text); border-color: var(--nt-accent); }
.nt-pagination .page-numbers.current {
	background: var(--nt-accent);
	border-color: var(--nt-accent);
	color: #fff;
}

/* ---------------- Footer ---------------- */
.nt-footer {
	border-top: 1px solid var(--nt-border);
	background: var(--nt-bg-2);
	margin-top: 60px;
}
.nt-footer__inner {
	max-width: var(--nt-max);
	margin: 0 auto;
	padding: 36px 20px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: start;
}
.nt-footer__brand strong { font-size: 16px; }
.nt-footer__brand p { color: var(--nt-text-mute); margin: 6px 0 0; font-size: 13px; }
.nt-footer__list {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.nt-footer__list a { color: var(--nt-text-dim); font-size: 13px; }
.nt-footer__list a:hover { color: var(--nt-accent); }
.nt-footer__legal {
	grid-column: 1 / -1;
	color: var(--nt-text-mute);
	font-size: 12px;
	border-top: 1px solid var(--nt-border);
	padding-top: 18px;
	margin: 0;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1280px) {
	.nt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.nt-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nt-az-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.nt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nt-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nt-az-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.nt-header__inner {
		grid-template-columns: auto auto;
	}
	.nt-burger { display: inline-flex; order: 2; justify-self: end; }

	.nt-nav {
		display: none;
		order: 4;
		grid-column: 1 / -1;
	}
	.nt-nav.is-open { display: block; }
	.nt-nav__list {
		flex-direction: column;
		gap: 2px;
		padding: 6px 0 4px;
	}
	.nt-nav__list a {
		width: 100%;
		padding: 12px 16px;
		border-radius: var(--nt-radius-sm);
	}

	.nt-single__title { font-size: 20px; }
}

@media (max-width: 600px) {
	.nt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.nt-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.nt-az-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }

	.nt-section { padding: 24px 0 4px; }
	.nt-section__title { font-size: 17px; }

	.nt-card__title { font-size: 13px; }
	.nt-card__meta { font-size: 11px; gap: 8px; }

	.nt-footer__inner { grid-template-columns: 1fr; }
}

/* --- Customizable logo (added in 1.2.0) --- */
.nt-logo--image { display:inline-flex; align-items:center; }
.nt-logo--image img { display:block; max-width:100%; object-fit:contain; }
.nt-logo__mark:empty { display:none; }

/* ============================================================
 * v1.3 — Hero CTA, CTA buttons, ad slots, category thumbnails
 * ============================================================ */

.nt-hero{position:relative;padding:48px 0 24px;background:radial-gradient(1200px 400px at 20% 0%,rgba(255,46,99,.18),transparent 60%),radial-gradient(900px 360px at 90% 0%,rgba(80,80,255,.15),transparent 60%)}
.nt-hero__inner{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.nt-hero__title{font-size:clamp(28px,4.2vw,52px);line-height:1.05;margin:0;letter-spacing:-.02em}
.nt-hero__sub{margin:0;color:var(--nt-muted,#aaa);max-width:60ch;font-size:16px}
.nt-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

.nt-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;font-size:15px;line-height:1;transition:transform .15s ease,filter .15s ease,background .15s ease;white-space:nowrap}
.nt-cta__icon{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;font-size:11px}
.nt-cta__arrow{opacity:.85;transition:transform .2s ease}
.nt-cta:hover .nt-cta__arrow{transform:translateX(3px)}
.nt-cta:hover{filter:brightness(1.08)}
.nt-cta--primary,.nt-cta--hero,.nt-cta--band{background:linear-gradient(135deg,#ff2e63,#ff5e3a);color:#fff;box-shadow:0 8px 22px -8px rgba(255,46,99,.55)}
.nt-cta--hero{padding:14px 22px;font-size:16px}
.nt-cta--ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.12)}
.nt-cta--ghost:hover{background:rgba(255,255,255,.1)}
.nt-cta--inline{background:#fff;color:#0b0b0b}

.nt-cta-band{margin-top:24px;padding:18px 22px;border-radius:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(255,46,99,.16),rgba(80,80,255,.14));border:1px solid rgba(255,255,255,.08)}
.nt-cta-band strong{display:block;font-size:18px}
.nt-cta-band span{display:block;color:var(--nt-muted,#bbb);font-size:14px;margin-top:2px}

.nt-single__actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}

/* Ads */
.nt-ad{margin:18px 0;padding:10px;border:1px dashed rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.02);text-align:center;overflow:hidden}
.nt-ad__label{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#777;margin-bottom:6px}
.nt-ad__body{display:flex;justify-content:center;align-items:center;min-height:60px}
.nt-ad__body iframe,.nt-ad__body img,.nt-ad__body video{max-width:100%}
.nt-ad-wrap{padding-left:16px;padding-right:16px}
.nt-grid__ad{grid-column:1/-1}
.nt-grid__ad .nt-ad{margin:6px 0}

/* Cards — play overlay + CTA */
.nt-card{position:relative}
.nt-card__thumb{position:relative;overflow:hidden}
.nt-card__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease,background .2s ease;background:rgba(0,0,0,.35);color:#fff;pointer-events:none}
.nt-card:hover .nt-card__play{opacity:1}
.nt-card__play svg{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));transform:scale(1);transition:transform .25s ease}
.nt-card:hover .nt-card__play svg{transform:scale(1.18)}
.nt-card__cta{position:absolute;left:8px;bottom:8px;background:linear-gradient(135deg,#ff2e63,#ff5e3a);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border-radius:6px;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}
.nt-card:hover .nt-card__cta{opacity:1;transform:translateY(0)}

/* Category tiles with thumbnails */
.nt-cat-tile{position:relative;overflow:hidden;isolation:isolate}
.nt-cat-tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .4s ease;filter:saturate(.9)}
.nt-cat-tile:hover .nt-cat-tile__img{transform:scale(1.06)}
.nt-cat-tile__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.85) 100%)}
.nt-cat-tile--has-thumb .nt-cat-tile__name,
.nt-cat-tile--has-thumb .nt-cat-tile__count{position:relative;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.nt-cat-tile__name{font-weight:700}
.nt-cat-tile__count{opacity:.9;font-size:12px}

@media (max-width:640px){
	.nt-cta-band{flex-direction:column;align-items:flex-start}
	.nt-hero{padding:28px 0 12px}
}