/* ═══════════════════════════════════════════════════════════════════════
   archive.css — Category & archive pages (Precision Data design)
   Requires: style.css with --ls-* tokens
   ═══════════════════════════════════════════════════════════════════════ */

/* ── GP layout reset — full-bleed archive ───────────────────────────── */
/*
 * GP uses CSS grid on #page.grid-container (content + sidebar columns).
 * We override to display:block so .site-content stretches to 100% width.
 */
.category #page.grid-container,
.archive  #page.grid-container {
	display:       block !important;
	max-width:     none !important;
	padding-left:  0 !important;
	padding-right: 0 !important;
}
.category .site-content,
.archive  .site-content {
	display:   block !important;
	width:     100% !important;
	max-width: none !important;
	padding:   0 !important;
}
/* Remove GP's card box from the content area when our template is active */
.category .ls-arc-wrap .inside-article,
.archive  .ls-arc-wrap .inside-article {
	background:    transparent !important;
	border:        none !important;
	box-shadow:    none !important;
	padding:       0 !important;
	margin:        0 !important;
	border-radius: 0 !important;
}

/* ── Shared inner container (also defined in home.css for front page) ── */
.ls-inner {
	max-width: 1100px;
	margin:    0 auto;
	padding:   0 var(--ls-space-page);
}

/* ════════════════════════════════════════════════════════════════════════
   HERO BAND
   ════════════════════════════════════════════════════════════════════════ */
.ls-arc-hero {
	background:    var(--ls-bg-card);
	border-bottom: 1px solid var(--ls-border);
	padding:       28px 0 24px;
}
.ls-arc-hero__eyebrow {
	font-family:     var(--ls-font-mono);
	font-size:       var(--ls-text-mono);
	color:           var(--ls-accent);
	letter-spacing:  var(--ls-tracking-caps);
	text-transform:  uppercase;
	margin:          0 0 8px;
}
.ls-arc-hero__title {
	font-size:   var(--ls-text-h1);
	font-weight: var(--ls-weight-semi);
	color:       var(--ls-ink);
	line-height: var(--ls-leading-tight);
	margin:      0;
}

/* ════════════════════════════════════════════════════════════════════════
   FILTER TABS BAR
   ════════════════════════════════════════════════════════════════════════ */
.ls-arc-tabs-bar {
	background:    var(--ls-bg-card);
	border-bottom: 1px solid var(--ls-border);
	position:      sticky;
	top:           var(--ls-nav-height); /* 52px — sticky header height */
	z-index:       90;
}
.ls-arc-tabs {
	display:        flex;
	align-items:    center;
	gap:            6px;
	padding:        10px 0;
	overflow-x:     auto;
	scrollbar-width: none;
}
.ls-arc-tabs::-webkit-scrollbar { display: none; }

.ls-arc-tab {
	font-family:     var(--ls-font-mono);
	font-size:       var(--ls-text-small);
	font-weight:     var(--ls-weight-medium);
	color:           var(--ls-muted);
	background:      transparent;
	border:          1px solid var(--ls-border);
	border-radius:   var(--ls-radius-pill);
	padding:         4px 14px;
	text-decoration: none;
	white-space:     nowrap;
	transition:      color .15s, background .15s, border-color .15s;
	line-height:     1.8;
}
.ls-arc-tab:hover {
	color:        var(--ls-accent);
	border-color: var(--ls-accent);
	background:   var(--ls-accent-light);
	text-decoration: none;
}
.ls-arc-tab--active {
	color:        var(--ls-accent) !important;
	border-color: var(--ls-accent) !important;
	background:   var(--ls-accent-light) !important;
	font-weight:  var(--ls-weight-semi);
}
.ls-arc-tab--back {
	color:        var(--ls-faint);
	border-color: transparent;
	padding-left: 4px;
}
.ls-arc-tab--back:hover {
	color:        var(--ls-muted);
	background:   transparent;
	border-color: transparent;
}
.ls-arc-tabs-sep {
	width:      1px;
	height:     18px;
	background: var(--ls-border);
	flex-shrink: 0;
	margin:     0 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   POSTS AREA
   ════════════════════════════════════════════════════════════════════════ */
.ls-arc-body {
	background: var(--ls-bg);
	padding:    36px 0 64px;
}

/* ── Article card (horizontal) ──────────────────────────────────────── */
.ls-arc-list {
	display:        flex;
	flex-direction: column;
	gap:            14px;
}

.ls-arc-card {
	background:    var(--ls-bg-card);
	border:        1px solid var(--ls-border);
	border-radius: var(--ls-radius-xl);
	box-shadow:    var(--ls-shadow-card);
	display:       flex;
	flex-direction: row;
	overflow:      hidden;
	transition:    box-shadow .2s, border-color .2s;
}
.ls-arc-card:hover {
	box-shadow:   var(--ls-shadow-card-hover);
	border-color: #d1d5db;
}

.ls-arc-card__img {
	flex-shrink: 0;
	width:       220px;
	display:     block;
	overflow:    hidden;
}
.ls-arc-card__img img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
	transition:  transform .3s;
}
.ls-arc-card:hover .ls-arc-card__img img {
	transform: scale(1.03);
}

.ls-arc-card__body {
	flex:           1;
	padding:        20px 24px;
	display:        flex;
	flex-direction: column;
	gap:            6px;
	min-width:      0;
}

.ls-arc-card__cats {
	font-family:    var(--ls-font-mono);
	font-size:      var(--ls-text-mono);
	font-weight:    var(--ls-weight-medium);
	color:          var(--ls-accent);
	letter-spacing: var(--ls-tracking-caps);
	margin:         0;
}

.ls-arc-card__title {
	font-size:   1.25rem;
	font-weight: var(--ls-weight-semi);
	line-height: 1.3;
	margin:      0;
}
.ls-arc-card__title a {
	color:           var(--ls-ink);
	text-decoration: none;
}
.ls-arc-card__title a:hover { color: var(--ls-accent); }

.ls-arc-card__excerpt {
	color:             var(--ls-muted);
	font-size:         var(--ls-text-body);
	line-height:       var(--ls-leading-normal);
	margin:            0;
	flex:              1;
	display:           -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:          hidden;
}

.ls-arc-card__foot {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	padding-top:     12px;
	border-top:      1px solid var(--ls-border-light);
	margin-top:      auto;
}

.ls-arc-card__date {
	font-family: var(--ls-font-mono);
	font-size:   var(--ls-text-mono);
	color:       var(--ls-faint);
}

.ls-arc-card__more {
	font-size:       var(--ls-text-small);
	font-weight:     var(--ls-weight-medium);
	color:           var(--ls-accent);
	text-decoration: none;
}
.ls-arc-card__more:hover {
	color:           var(--ls-accent-mid);
	text-decoration: none;
}

/* ── Pagination ──────────────────────────────────────────────────────── */
.ls-arc-pagination {
	margin-top:      40px;
	display:         flex;
	justify-content: center;
}
.ls-arc-pagination .nav-links {
	display:     flex;
	align-items: center;
	gap:         4px;
}
.ls-arc-pagination .page-numbers {
	font-family:     var(--ls-font-mono);
	font-size:       var(--ls-text-small);
	min-width:       36px;
	height:          36px;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	border:          1px solid var(--ls-border);
	border-radius:   var(--ls-radius-sm);
	color:           var(--ls-muted);
	text-decoration: none;
	padding:         0 10px;
	transition:      all .15s;
}
.ls-arc-pagination .page-numbers:hover {
	color:        var(--ls-accent);
	border-color: var(--ls-accent);
	background:   var(--ls-accent-light);
	text-decoration: none;
}
.ls-arc-pagination .page-numbers.current {
	background:   var(--ls-accent);
	border-color: var(--ls-accent);
	color:        #fff;
}
.ls-arc-pagination .page-numbers.dots {
	border-color: transparent;
	background:   transparent;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.ls-arc-empty {
	color:       var(--ls-muted);
	text-align:  center;
	padding:     80px 0;
	font-size:   var(--ls-text-body);
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
	.ls-arc-hero   { padding: 20px 0 18px; }
	.ls-arc-hero__title { font-size: var(--ls-text-h2); }

	.ls-arc-card {
		flex-direction: column;
	}
	.ls-arc-card__img {
		width:  100%;
		height: 180px;
	}
	.ls-arc-card__body {
		padding: 16px;
	}
}

@media (max-width: 480px) {
	.ls-arc-card__excerpt {
		-webkit-line-clamp: 2;
	}
}