/* ── Post list ───────────────────────────────────────────────── */
.hsk-post-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.hsk-post-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--color-border);
}
.hsk-post-item:last-child { border-bottom: none; }

.hsk-list-num {
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	font-weight: 700;
	min-width: 1.8em;
	text-align: right;
	padding-top: .15em;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}
.hsk-post-item__body { flex: 1; min-width: 0; }
.hsk-post-item__title {
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: var(--space-2);
}
.hsk-post-item__title a {
	text-decoration: none;
	color: var(--color-text);
}
.hsk-post-item__title a:hover { color: var(--color-accent); text-decoration: underline; }
.hsk-post-item__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-2);
	line-height: 1.6;
}
.hsk-post-item__meta {
	font-size: var(--text-sm);
	color: var(--color-text-faint);
}

/* ── Type badges ─────────────────────────────────────────────── */
.hsk-type-pillar,
.hsk-type-article {
	display: inline-block;
	font-size: .72rem;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: var(--radius-sm);
	vertical-align: middle;
	margin-left: var(--space-2);
}
.hsk-type-pillar  { background: var(--color-pillar-bg); color: var(--color-pillar-text); }
.hsk-type-article { background: var(--color-bg-soft); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ── Cluster badge card ──────────────────────────────────────── */
.hsk-cluster-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	padding: var(--space-2) var(--space-3);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--trans-fast), background var(--trans-fast);
}
.hsk-cluster-badge:hover { background: var(--color-bg-hover); border-color: var(--color-accent); color: var(--color-accent); }
.hsk-cluster-badge__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-faint); }
.hsk-cluster-badge__name  { font-weight: 600; color: var(--color-text); }

/* ── TL;DR Box ───────────────────────────────────────────────── */
.hsk-tldr {
	background: var(--color-highlight);
	border: 1px solid var(--color-highlight-border);
	border-left: 4px solid var(--color-accent);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	margin-bottom: var(--space-8);
}
.hsk-tldr__label {
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--color-accent);
	margin-bottom: var(--space-3);
}
.hsk-tldr__text {
	font-size: var(--text-lg);
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-text);
	margin: 0;
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.hsk-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	margin-bottom: var(--space-6);
}
.hsk-breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.hsk-breadcrumbs a:hover { color: var(--color-accent); text-decoration: underline; }
.hsk-breadcrumbs__sep { color: var(--color-text-faint); margin: 0 var(--space-1); }
.hsk-breadcrumbs__current { color: var(--color-text-muted); }

/* ── Article header ──────────────────────────────────────────── */
.hsk-article-header { margin-bottom: var(--space-8); }
.hsk-article-header h1 {
	font-size: var(--text-3xl);
	line-height: 1.18;
	font-weight: 700;
	margin-bottom: var(--space-5);
}
.hsk-article-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-4);
}
.hsk-article-meta > * { margin-right: var(--space-4); }
.hsk-article-meta > * + *::before {
	content: '·';
	margin-right: var(--space-4);
	color: var(--color-border-strong);
}
.hsk-article-meta a { color: var(--color-text-muted); text-decoration: none; font-weight: 500; }
.hsk-article-meta a:hover { color: var(--color-accent); }

/* ── Author card ─────────────────────────────────────────────── */
.hsk-author-card {
	display: flex;
	gap: var(--space-5);
	padding: var(--space-8);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg-soft);
	margin-top: var(--space-12);
}
.hsk-author-card__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--color-bg-hover);
}
.hsk-author-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hsk-author-card__body { flex: 1; min-width: 0; }
.hsk-author-card__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-faint); margin-bottom: var(--space-1); }
.hsk-author-card__name  { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
.hsk-author-card__name a { text-decoration: none; color: var(--color-text); }
.hsk-author-card__name a:hover { color: var(--color-accent); }
.hsk-author-card__bio   { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-3); }
.hsk-author-card__meta  { font-size: var(--text-sm); color: var(--color-text-faint); display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hsk-author-social { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.hsk-author-social a {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-accent);
	text-decoration: none;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--trans-fast), background var(--trans-fast);
}
.hsk-author-social a:hover { background: var(--color-bg-hover); border-color: var(--color-accent); }

/* ── Related articles ────────────────────────────────────────── */
.hsk-related { margin-top: var(--space-12); }
.hsk-related__title {
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--color-text-faint);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}
.hsk-related-list { display: flex; flex-direction: column; gap: var(--space-3); }
.hsk-related-item a {
	display: block;
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: 500;
	transition: border-color var(--trans-fast), background var(--trans-fast);
}
.hsk-related-item a:hover { background: var(--color-bg-hover); border-color: var(--color-accent); color: var(--color-accent); }
.hsk-related-item.is-pillar a { border-left: 3px solid var(--color-accent); }

/* ── Pagination ──────────────────────────────────────────────── */
.hsk-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-8) 0;
}
.hsk-pagination a,
.hsk-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--color-text-muted);
	transition: border-color var(--trans-fast), background var(--trans-fast), color var(--trans-fast);
}
.hsk-pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-bg-soft); }
.hsk-pagination .current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ── Results count ───────────────────────────────────────────── */
.hsk-results-count {
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	margin-bottom: var(--space-4);
}
.hsk-no-results {
	padding: var(--space-10);
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

/* ── Pillar page hero ────────────────────────────────────────── */
.hsk-pillar-hero {
	background: var(--color-pillar-bg);
	color: var(--color-pillar-text);
	padding: var(--space-12) var(--space-10) var(--space-10);
	margin: calc(-1 * var(--space-10)) calc(-1 * var(--space-10)) var(--space-8);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.hsk-pillar-hero h1 { font-size: var(--text-3xl); line-height: 1.15; font-weight: 700; color: #fff; margin-bottom: var(--space-4); }
.hsk-pillar-hero .hsk-cluster-name {
	display: inline-block;
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgba(255,255,255,.6);
	margin-bottom: var(--space-3);
}
.hsk-pillar-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	font-size: var(--text-sm);
	color: rgba(255,255,255,.75);
	margin-top: var(--space-4);
}

/* ── CTA block ───────────────────────────────────────────────── */
.hsk-cta {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	margin: var(--space-12) 0;
	text-align: center;
}
.hsk-cta h2 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.hsk-cta p  { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.hsk-cta .hsk-btn {
	display: inline-block;
	background: var(--color-accent);
	color: #fff;
	font-weight: 600;
	padding: var(--space-3) var(--space-8);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: background var(--trans-fast);
}
.hsk-cta .hsk-btn:hover { background: var(--color-accent-hover); }

/* ── Cluster collection cards (homepage) ─────────────────────── */
.hsk-collection-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-4);
	margin: var(--space-6) 0;
}
.hsk-collection-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	text-decoration: none;
	color: var(--color-text);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	transition: border-color var(--trans-fast), transform var(--trans-base), box-shadow var(--trans-base);
	overflow: hidden;
	position: relative;
}
.hsk-collection-card:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	color: var(--color-text);
}
.hsk-collection-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2);
}
.hsk-collection-card__title {
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.35;
}
.hsk-collection-card__status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-progress);
	opacity: 0.6;
	flex-shrink: 0;
	margin-top: 6px;
}
.hsk-collection-card__count {
	font-size: var(--text-sm);
	color: var(--color-text-faint);
}
.hsk-collection-card__bar {
	height: 3px;
	border-radius: 2px;
	background: var(--color-border);
	overflow: hidden;
}
.hsk-collection-card__bar-fill {
	height: 100%;
	border-radius: 2px;
	background: var(--color-accent);
	opacity: 0.5;
	transition: width var(--trans-base);
}

/* ── Author page hero ────────────────────────────────────────── */
.hsk-author-hero {
	display: flex;
	gap: var(--space-6);
	padding-bottom: var(--space-8);
	margin-bottom: var(--space-8);
	border-bottom: 1px solid var(--color-border);
	align-items: flex-start;
}
.hsk-author-hero__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--color-bg-hover);
}
.hsk-author-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hsk-author-hero__name  { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-2); }
.hsk-author-hero__bio   { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.hsk-author-hero__stats { font-size: var(--text-sm); color: var(--color-text-faint); }

/* ── 404 page ────────────────────────────────────────────────── */
.hsk-404-page {
	padding: var(--space-16) var(--space-10);
	text-align: center;
}
.hsk-404-page h1 { font-size: 5rem; color: var(--color-text-faint); font-weight: 700; margin-bottom: var(--space-4); }
.hsk-404-page p  { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-6); }

/* ── Series Navigator (context sidebar) ──────────────────────── */
.hsk-ctx-label {
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--color-text-faint);
	margin-bottom: var(--space-2);
}
.hsk-ctx-block { margin-bottom: var(--space-6); }
.hsk-ctx-value { font-size: var(--text-lg); font-weight: 700; }

/* Series header */
.hsk-ctx-series-header {
	padding-bottom: var(--space-5);
	margin-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}
.hsk-ctx-series-title {
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: var(--space-3);
	line-height: 1.35;
}

/* Progress track */
.hsk-ctx-progress-wrap {
	height: 4px;
	background: var(--color-border);
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: var(--space-2);
}
.hsk-ctx-progress-bar {
	height: 100%;
	background: var(--color-accent);
	border-radius: 2px;
	transition: width var(--trans-base);
}
.hsk-ctx-progress-label {
	font-size: var(--text-sm);
	color: var(--color-text-faint);
}

/* Article list */
.hsk-ctx-series-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-5);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hsk-ctx-series-item a {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-2);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-text-muted);
	font-size: .82rem;
	transition: background var(--trans-fast), color var(--trans-fast);
}
.hsk-ctx-series-item a:hover {
	background: var(--color-bg-hover);
	color: var(--color-text);
}
.hsk-ctx-series-item.is-current a {
	background: rgba(0,102,204,.07);
	color: var(--color-accent);
	font-weight: 600;
}

.hsk-ctx-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	font-size: .7rem;
	font-weight: 700;
	color: var(--color-text-faint);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	flex-shrink: 0;
	margin-top: 1px;
}
.hsk-ctx-series-item.is-current .hsk-ctx-num {
	background: var(--color-accent);
	color: #fff;
	border-color: var(--color-accent);
}
.hsk-ctx-item-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.hsk-ctx-item-title {
	line-height: 1.4;
}
.hsk-ctx-item-meta {
	font-size: .72rem;
	color: var(--color-text-faint);
}
.hsk-ctx-series-item.is-current .hsk-ctx-item-meta { color: rgba(0,102,204,.6); }

/* Next article CTA */
.hsk-ctx-next {
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}
.hsk-ctx-next-link {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
	line-height: 1.45;
	margin-top: var(--space-2);
	transition: color var(--trans-fast);
}
.hsk-ctx-next-link:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* ── Search form (main) ──────────────────────────────────────── */
.hsk-search-form {
	display: flex;
	gap: var(--space-3);
	margin-bottom: var(--space-8);
}
.hsk-search-form input[type="search"] {
	flex: 1;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-base);
	color: var(--color-text);
	background: var(--color-bg-soft);
	transition: border-color var(--trans-fast);
}
.hsk-search-form input[type="search"]:focus { border-color: var(--color-accent); background: var(--color-bg); }
.hsk-search-form button {
	background: var(--color-accent);
	color: #fff;
	font-weight: 600;
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	transition: background var(--trans-fast);
}
.hsk-search-form button:hover { background: var(--color-accent-hover); }

/* ════════════════════════════════════════════════════════════════
   FRONT PAGE — cPanel-Docs style
   ════════════════════════════════════════════════════════════════ */

.hsk-fp-wrap {
	width: 100%;
	min-height: 100vh;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.hsk-fp-hero {
	background: #F5F4EF; /* warm off-white like cPanel Docs */
	text-align: center;
	padding: var(--space-16) var(--page-gutter) var(--space-12);
	border-bottom: 1px solid #E8E6DF;
}
.hsk-fp-hero__title {
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--color-text);
	margin-bottom: var(--space-4);
}
.hsk-fp-hero__sub {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	max-width: 600px;
	margin: 0 auto var(--space-8);
	line-height: 1.6;
}

/* Hero search bar */
.hsk-fp-search {
	display: flex;
	align-items: stretch;
	max-width: 560px;
	margin: 0 auto;
	border: 1.5px solid #CCCCCC;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
	transition: box-shadow var(--trans-fast), border-color var(--trans-fast);
}
.hsk-fp-search:focus-within {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(0,102,204,.12), 0 2px 8px rgba(0,0,0,.06);
}
.hsk-fp-search input[type="search"] {
	flex: 1;
	border: none;
	background: transparent;
	padding: var(--space-4) var(--space-5);
	font-size: var(--text-base);
	color: var(--color-text);
	outline: none;
}
.hsk-fp-search button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-6);
	min-height: 100%;
	background: var(--color-accent);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.2;
	border-radius: 0;
	transition: background var(--trans-fast);
}
.hsk-fp-search button:hover { background: var(--color-accent-hover); }

/* ── Two-column section ─────────────────────────────────────────── */
.hsk-fp-cols {
	background: #FFFFFF;
	border-bottom: 1px solid var(--color-border);
}
.hsk-fp-cols__inner {
	display: grid;
	/* Seritë: ngushtë si shtyllë · Artikujt: pjesë më e gjerë */
	grid-template-columns: minmax(0, 380px) 1px minmax(0, 1fr);
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--space-12) 0;
	column-gap: var(--space-10);
	align-items: start;
}
.hsk-fp-cols__divider {
	width: 1px;
	background: var(--color-border);
	align-self: stretch;
	margin: 0;
}

/* Single column */
.hsk-fp-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.hsk-fp-col__title {
	font-size: var(--text-2xl);
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-bottom: 0;
}
.hsk-fp-col__desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}

/* Column header (title + count badge) */
.hsk-fp-col__header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}
.hsk-fp-col__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 20px;
	padding: 0 var(--space-2);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	color: var(--color-text-faint);
}

/* Scrollable wrapper */
.hsk-fp-col__scroll-wrap {
	position: relative;
	flex: 1;
	margin-bottom: var(--space-5);
	min-width: 0;
}
.hsk-fp-col__list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-height: 337px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #AAAAAA #EEEEEE;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
/* Seritë & Artikujt — 5 artikuj të plotë + peek i 6-tit */
#hsk-list-clusters,
#hsk-list-articles {
	max-height: 405px;
}
.hsk-fp-col__list::-webkit-scrollbar { width: 6px; }
.hsk-fp-col__list::-webkit-scrollbar-track {
	background: #EEEEEE;
	border-radius: 3px;
}
.hsk-fp-col__list::-webkit-scrollbar-thumb {
	background: #AAAAAA;
	border-radius: 3px;
}
.hsk-fp-col__scroll-wrap.is-scrollable .hsk-fp-col__list:hover::-webkit-scrollbar-thumb {
	background: var(--color-accent);
}

/* Bottom fade — scroll affordance (Seritë + Artikujt) */
.hsk-fp-col__fade {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 8px;
	height: 72px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 50%, #FFFFFF 100%);
	pointer-events: none;
	z-index: 1;
	opacity: 1;
	transition: opacity var(--trans-base);
}
/* Seritë — i njëjti efekt, i përshtatur për kartat blu (#EEF3FB) */
.hsk-fp-col--series .hsk-fp-col__fade {
	background: linear-gradient(
		to bottom,
		rgba(238,243,251,0) 0%,
		rgba(255,255,255,.82) 45%,
		rgba(255,255,255,.96) 75%,
		#FFFFFF 100%
	);
}
.hsk-fp-col__scroll-wrap.is-scrollable .hsk-fp-col__fade {
	display: block;
}
.hsk-fp-col__scroll-wrap.is-at-bottom .hsk-fp-col__fade {
	opacity: 0;
	visibility: hidden;
}

/* Items — outer wrapper (no border, gap between cards) */
.hsk-fp-col__item { padding: 2px 0; }

/* ════════════════════════════════════════════════════════════════
   ITEM CARD — base (shared structure, no color treatment)
   ════════════════════════════════════════════════════════════════ */
.hsk-fp-item-card {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-text);
	transition: box-shadow var(--trans-base), transform var(--trans-base);
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* ── VARIANT A: Seritë — uniform soft background, no border accent ── */
.hsk-fp-item-card--series {
	background: #EEF3FB;
	border: 1px solid #D8E4F2;
}
.hsk-fp-item-card--series:hover {
	background: #E4EDF8;
	box-shadow: 0 3px 12px rgba(0,0,0,.08);
	transform: translateY(-1px);
	color: var(--color-text);
}

/* ── VARIANT B: Artikujt — clean white, no border accent ────── */
.hsk-fp-item-card--article {
	background: #FFFFFF;
	border: 1px solid var(--color-border);
}
.hsk-fp-item-card--article:hover {
	box-shadow: 0 3px 12px rgba(0,0,0,.07);
	transform: translateY(-1px);
	color: var(--color-text);
}

/* Icon circle */
.hsk-fp-item-card__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex-shrink: 0;
}
/* Series: fixed blue circle */
.hsk-fp-item-card--series .hsk-fp-item-card__icon-wrap {
	background: #D4E4F5;
	border: 1px solid #B8D0EC;
}
/* Articles: icon circle is subtle gray */
.hsk-fp-item-card--article .hsk-fp-item-card__icon-wrap {
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	margin-top: 1px;
}
.hsk-fp-item-card__icon { font-size: .95rem; line-height: 1; }

/* Text body */
.hsk-fp-item-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.hsk-fp-item-card__title {
	font-size: .83rem;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hsk-fp-item-card--series .hsk-fp-item-card__title {
	color: var(--color-text);
}
.hsk-fp-item-card__meta {
	font-size: .7rem;
	color: var(--color-text-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Arrow */
.hsk-fp-item-card__arrow {
	font-size: 1rem;
	color: var(--color-text-faint);
	opacity: .3;
	flex-shrink: 0;
	transition: opacity var(--trans-fast), color var(--trans-fast);
}
.hsk-fp-item-card:hover .hsk-fp-item-card__arrow {
	opacity: 1;
	color: var(--item-color, var(--color-accent));
}

.hsk-fp-col__empty {
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	padding: var(--space-6) 0;
}

/* Browse-all button (kept for potential reuse) */
.hsk-fp-col__btn {
	display: inline-block;
	padding: var(--space-3) var(--space-6);
	background: var(--color-accent);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: 700;
	border-radius: var(--radius-md);
	text-decoration: none;
	text-align: center;
	transition: background var(--trans-fast);
	align-self: flex-start;
}
.hsk-fp-col__btn:hover { background: var(--color-accent-hover); color: #fff; }

/* Simple text browse link */
.hsk-fp-col__browse-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
	padding: var(--space-2) 0;
	border-bottom: 1px solid transparent;
	transition: border-color var(--trans-fast), color var(--trans-fast);
}
.hsk-fp-col__browse-link:hover {
	color: var(--color-accent-hover);
	border-bottom-color: var(--color-accent-hover);
}

/* ── Category Section ───────────────────────────────────────────── */
.hsk-fp-cats {
	background: #F8F8F6;
	padding: var(--space-10) 0 var(--space-12);
	border-top: 1px solid #E8E6DF;
}
.hsk-fp-cats__heading {
	font-size: var(--text-xl);
	font-weight: 700;
	text-align: center;
	margin-bottom: var(--space-2);
	letter-spacing: -0.01em;
}
.hsk-fp-cats__sub {
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-8);
}
.hsk-fp-cats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-3);
	width: 100%;
}

/* Category card — horizontal row style */
.hsk-fp-cat-card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	background: #FFFFFF;
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--cat-color, var(--color-accent));
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-text);
	transition: box-shadow var(--trans-base), transform var(--trans-base), border-color var(--trans-fast);
}
.hsk-fp-cat-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,.08);
	transform: translateY(-2px);
	color: var(--color-text);
	border-color: var(--cat-color, var(--color-accent));
}

/* Icon circle */
.hsk-fp-cat-card__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--cat-color, #0066CC) 12%, transparent);
	flex-shrink: 0;
}
/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.hsk-fp-cat-card__icon-wrap { background: #EEF4FF; }
}
.hsk-fp-cat-card__icon {
	font-size: 1.2rem;
	line-height: 1;
}

/* Text body */
.hsk-fp-cat-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.hsk-fp-cat-card__name {
	font-size: .85rem;
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hsk-fp-cat-card__count {
	font-size: .72rem;
	color: var(--color-text-faint);
}
.hsk-fp-cat-card__arrow {
	font-size: 1rem;
	color: var(--color-text-faint);
	opacity: .4;
	transition: opacity var(--trans-fast), color var(--trans-fast);
}
.hsk-fp-cat-card:hover .hsk-fp-cat-card__arrow {
	opacity: 1;
	color: var(--cat-color, var(--color-accent));
}

/* ════════════════════════════════════════════════════════════════
   PAGE — Seritë (cPanel Docs style blocks)
   ════════════════════════════════════════════════════════════════ */
.hsk-series-page {
	--series-accent: #FF6C2C;
}

.hsk-series-page .hsk-page-header {
	margin-bottom: var(--space-8);
}
.hsk-series-page .hsk-page-header h1 {
	font-size: var(--text-2xl);
	font-weight: 700;
	margin-bottom: var(--space-2);
}
.hsk-series-page .hsk-description {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	margin: 0;
}

.hsk-series-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8) var(--space-10);
	margin-top: var(--space-6);
}

/* Block wrapper */
.hsk-series-block {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Orange heading above card */
.hsk-series-block__heading {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1.3;
}
.hsk-series-block__heading a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--series-accent);
	text-decoration: none;
	transition: opacity var(--trans-fast);
}
.hsk-series-block__heading a:hover {
	opacity: .82;
	color: var(--series-accent);
}
.hsk-series-block__chevron {
	font-size: .75em;
	line-height: 1;
	opacity: .85;
}

/* White card */
.hsk-series-block__card {
	background: #FFFFFF;
	border: 1px solid #D8D8D8;
	border-radius: 3px;
	padding: var(--space-5) var(--space-6) var(--space-4);
	min-height: 180px;
	display: flex;
	flex-direction: column;
}

/* Article list */
.hsk-series-block__list {
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1;
}
.hsk-series-block__list li {
	margin: 0;
	padding: 0;
}
.hsk-series-block__list li + li {
	margin-top: var(--space-1);
}
.hsk-series-block__list a {
	display: block;
	padding: var(--space-2) 0;
	font-size: var(--text-base);
	font-weight: 400;
	color: var(--color-text);
	text-decoration: none;
	line-height: 1.45;
	transition: color var(--trans-fast);
}
.hsk-series-block__list a:hover {
	color: var(--series-accent);
}

/* See-all footer */
.hsk-series-block__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--space-4);
	padding-top: var(--space-3);
}
.hsk-series-block__all {
	font-size: var(--text-base);
	font-weight: 400;
	color: var(--series-accent);
	text-decoration: none;
	transition: opacity var(--trans-fast);
}
.hsk-series-block__all:hover {
	opacity: .82;
	color: var(--series-accent);
}

@media (max-width: 768px) {
	.hsk-series-grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

/* ── Collections list page ──────────────────────────────────────── */
.hsk-clusters-list { display: flex; flex-direction: column; gap: var(--space-6); }
.hsk-cluster-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8);
	padding: var(--space-6) 0;
	border-bottom: 1px solid var(--color-border);
}
.hsk-cluster-row:last-child { border-bottom: none; }
.hsk-cluster-row__title {
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: var(--space-3);
}
.hsk-cluster-row__title a { text-decoration: none; color: var(--color-text); }
.hsk-cluster-row__title a:hover { color: var(--color-accent); }
.hsk-cluster-row__desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.hsk-cluster-row__meta {
	display: flex; gap: var(--space-4); flex-wrap: wrap;
	font-size: var(--text-sm); color: var(--color-text-faint);
}
.hsk-cluster-row__meta span + span::before { content: '·'; margin-right: var(--space-4); }
.hsk-cluster-row__articles {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: var(--space-2);
}
.hsk-cluster-row__articles li a {
	font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none;
}
.hsk-cluster-row__articles li a:hover { color: var(--color-accent); text-decoration: underline; }
.hsk-cluster-row__articles .is-pillar a { font-weight: 700; color: var(--color-text); }
.hsk-cluster-row__more a { font-size: var(--text-sm); color: var(--color-accent); font-weight: 600; }

/* ── Loading spinner ─────────────────────────────────────────────── */
.hsk-loading {
	display: none;
	text-align: center;
	padding: var(--space-8);
	color: var(--color-text-faint);
	font-size: var(--text-sm);
}
.hsk-loading.is-active { display: block; }