/**
 * Article Listing page (category & tag) — everything below the
 * leaderboard ad: page title, lead story, card list + Load More,
 * sidebar (Most Read + ad rail), and the full-width "More Like This"
 * grid. Values confirmed from Design Refrance's TSI Article Listing.html.
 *
 * .ui-lb-wrap / .ui-lb / .ui-rect / .ad-label / .ui-art base rules and the
 * placeholder ad styling all already live in article-card.css (shared with
 * the homepage) — this file only adds what's specific to the listing
 * layout, plus the couple of .ui-art size overrides where this page's
 * cards render slightly larger than the homepage's.
 */

.page-title {
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: 56px;
	line-height: 1;
	letter-spacing: -1.6px;
	color: var(--color-ink);
	margin-bottom: 22px;
}

.cat-sub {
	font-family: var(--font-secondary);
	font-style: italic;
	font-size: 21px;
	color: var(--color-ink-mid);
	margin-top: -8px;
	margin-bottom: 22px;
	max-width: 680px;
	line-height: 1.4;
}

.list-kick {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	padding-bottom: 14px;
	border-bottom: 2px solid var(--color-line);
	margin-bottom: 0;
}

/* two-column shell: content + sidebar rail */
.cat-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 328px;
	gap: 56px;
	padding: var(--spacing-listing_shell-top) var(--spacing-listing_shell-side) var(--spacing-listing_shell-bottom);
	align-items: start;
	/* Content max-width (matches https://smartinvestor.com.my/ reference —
	   every content row caps on large screens instead of stretching
	   edge-to-edge). No background here to preserve, so capped directly. */
	max-width: var(--container-max);
	margin-inline: auto;
}

.cat-main {
	min-width: 0;
}

/* Article Listing/Search cards use a larger thumb than the homepage's
   shared .ui-art .thumb base rule (article-card.css) — confirmed from
   Design Refrance's TSI Article Listing.html. Was missing entirely, so
   this page silently inherited the homepage's 120x88 size instead of its
   own 150x104. Mobile override (104x76) already exists further below and
   already matched the reference. */
.cat-main .ui-art .thumb {
	width: 150px;
	height: 104px;
}

.cat-side {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

/* lead story */
.lead-story {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 32px;
	padding: 32px 0;
	border-bottom: 1px solid var(--color-line);
	align-items: center;
	color: inherit;
}

.lead-story,
.lead-story:visited,
.lead-story:hover,
.lead-story:focus {
	color: inherit;
	text-decoration: none;
}

.lead-story .limg {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-thumb);
	overflow: hidden;
	background: var(--color-primary-wash);
	aspect-ratio: 16 / 10;
}

.lead-story .limg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lead-story .cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-primary);
}

.lead-story h2 {
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: 38px;
	line-height: 1.08;
	letter-spacing: -.8px;
	color: var(--color-ink);
	margin: 12px 0 14px;
	/* Same reasoning as .ui-art h3 — real headlines can run far longer
	   than Design Refrance's short demo text; clamped so the lead story
	   can't grow tall enough to overwhelm the layout next to it. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.lead-story p {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--color-ink-mid);
	margin-bottom: 16px;
	/* An excerpt is meant to be a brief teaser, not a full paragraph —
	   2 lines (shorter than the 3-line cap used for headlines elsewhere
	   on this page) keeps it reading like one, however long the post's
	   actual excerpt text runs. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.lead-story .amt {
	font-size: 12.5px;
	color: var(--color-ink-soft);
}

.lead-story .amt b {
	color: var(--color-ink);
	font-weight: 700;
}

/* Listing cards render slightly larger than the homepage's — matches
   Design Refrance exactly (150×104 thumb, 22px heading) rather than
   reusing the homepage's 120×88 / 21px values as-is. */
.cat-main .ui-art .thumb {
	width: 150px;
	height: 104px;
}

.cat-main .ui-art h3 {
	font-size: 22px;
}

.load-more {
	display: block;
	width: max-content;
	margin: 36px 0 0;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	background: transparent;
	color: var(--color-primary-deep);
	border: 1.5px solid var(--color-primary-deep);
	border-radius: var(--radius-pill);
	padding: 13px 34px;
	cursor: pointer;
	transition: .15s;
}

.load-more:hover,
.load-more:focus-visible {
	background: var(--color-primary-deep);
	color: var(--color-white);
}

.load-more.is-loading {
	opacity: .7;
	pointer-events: none;
}

/* sidebar — Most Read */
.side-box {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.side-h {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	padding: 15px 20px;
	border-bottom: 1px solid var(--color-line);
	background: var(--color-wash);
}

.mr {
	display: flex;
	gap: 15px;
	padding: 15px 20px;
	border-top: 1px solid var(--color-line);
	color: inherit;
}

.mr,
.mr:visited,
.mr:hover,
.mr:focus {
	color: inherit;
	text-decoration: none;
}

.mr:first-of-type {
	border-top: 0;
}

.mr .rn {
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: 28px;
	color: var(--color-line-mid);
	line-height: .9;
	flex: none;
	width: 26px;
}

.mr .rc {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-primary);
	display: block;
	margin-bottom: 4px;
}

.mr .rt {
	font-size: 14px;
	line-height: 1.35;
	color: var(--color-ink);
	font-weight: 600;
	transition: .15s;
	/* Narrower sidebar column than the other listing cards — 2 lines
	   (not 3) keeps a long title from pushing the rank number/category
	   label out of visual alignment with the row below it. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.mr:hover .rt,
.mr:focus .rt {
	color: var(--color-primary-deep);
}

/* sidebar — vertical ad rail: see assets/css/components/ad-rail.css
   (shared with Article Details' left/right skyscraper rails, Phase 4) */

/* full-width "More Like This" below the two-column grid */
.more-wrap {
	padding: var(--spacing-listing_more-top) var(--spacing-listing_more-side) var(--spacing-listing_more-bottom);
	/* Content max-width (matches https://smartinvestor.com.my/ reference —
	   every content row caps on large screens instead of stretching
	   edge-to-edge). No background here to preserve, so capped directly. */
	max-width: var(--container-max);
	margin-inline: auto;
}

.more-kick {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	padding-bottom: 14px;
	border-bottom: 2px solid var(--color-line);
	margin-bottom: 24px;
}

.more-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.more-card {
	color: inherit;
}

.more-card,
.more-card:visited,
.more-card:hover,
.more-card:focus {
	color: inherit;
	text-decoration: none;
}

.more-card .mimg {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-thumb);
	overflow: hidden;
	background: var(--color-primary-wash);
	aspect-ratio: 4 / 3;
	margin-bottom: 12px;
}

.more-card .mimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.more-card .cat {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--color-primary);
}

.more-card h4 {
	font-family: var(--font-secondary);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.28;
	margin-top: 6px;
	color: var(--color-ink);
	transition: .15s;
	/* Same reasoning as .ui-art h3 — this is the smallest headline size
	   on the page, so an uncapped long title here would look worst of
	   all against its 3 fixed-height grid neighbors. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.more-card:hover h4,
.more-card:focus h4 {
	color: var(--color-primary-deep);
}

/* Tablet fix: the desktop 2-column grid's 328px fixed sidebar leaves the
   main column uncomfortably cramped at tablet widths (769–1024px) — no
   dedicated tablet design exists, so this stacks the same way the phone
   breakpoint below already does. */
@media (max-width: 1024px) {
	.cat-shell {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.cat-side {
		position: static;
		order: 2;
	}
}

@media (max-width: 768px) {
	.page-title {
		font-size: 38px;
		letter-spacing: -1px;
	}

	.cat-sub {
		font-size: 17px;
	}

	.cat-shell {
		padding-top: var(--spacing-listing_shell-top);
		padding-inline: 16px;
		padding-bottom: var(--spacing-listing_shell-bottom);
	}

	.more-wrap {
		padding-top: var(--spacing-listing_more-top);
		padding-inline: 16px;
		padding-bottom: var(--spacing-listing_more-bottom);
	}

	.lead-story {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.lead-story h2 {
		font-size: 28px;
	}

	.cat-main .ui-art .thumb {
		width: 104px;
		height: 76px;
	}

	.cat-main .ui-art h3 {
		font-size: 18px;
	}

	.more-grid {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}

/**
 * "No results" empty state — shared by Search Results and empty Category/
 * Tag listings (template-parts/content-none.php, always rendered inside
 * .cat-main). Previously completely unstyled (bare browser defaults);
 * polished using only existing theme tokens, no new colors/sizes invented
 * outside this file's own conventions.
 */
.cat-main .no-results {
	text-align: center;
	padding: var(--space-6) var(--space-2);
}

.cat-main .no-results .page-title {
	font-size: 36px;
	margin-bottom: var(--space-2);
}

.cat-main .no-results .page-content p {
	font-family: var(--font-primary);
	font-size: 16px;
	color: var(--color-ink-mid);
	max-width: 480px;
	margin: 0 auto var(--space-3);
}

.cat-main .no-results .search-form {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 420px;
	margin: 0 auto;
}

.cat-main .no-results .search-form .search-form-label,
.cat-main .no-results .search-form label {
	flex: 1;
	margin: 0;
}

.cat-main .no-results .search-field {
	width: 100%;
	font-family: var(--font-primary);
	font-size: 15px;
	color: var(--color-ink);
	background: var(--color-white);
	border: 1.5px solid var(--color-line);
	border-radius: var(--radius-button);
	padding: 12px 16px;
	outline: 0;
}

.cat-main .no-results .search-field:focus-visible {
	border-color: var(--color-primary);
}

.cat-main .no-results .search-submit {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	background: var(--color-primary-deep);
	color: var(--color-white);
	border: 1.5px solid var(--color-primary-deep);
	border-radius: var(--radius-pill);
	padding: 13px 28px;
	cursor: pointer;
	transition: .15s;
	white-space: nowrap;
}

.cat-main .no-results .search-submit:hover,
.cat-main .no-results .search-submit:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

@media (max-width: 768px) {
	.cat-main .no-results {
		padding: var(--space-4) var(--gutter-mobile);
	}

	.cat-main .no-results .page-title {
		font-size: 26px;
	}

	.cat-main .no-results .search-form {
		flex-direction: column;
		align-items: stretch;
	}

	.cat-main .no-results .search-submit {
		width: 100%;
	}
}