/* ====================================================================
   FTS Articles - Clean, shadowless listing with equal-height cards
   ==================================================================== */

.fts-articles-root {
	background: var(--v2-bg-page, #f8f7f4) !important;
	font-family: var(--v2-font-body, 'Inter', sans-serif) !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	min-height: 60vh !important;
}

/* ── Page Header ─────────────────────────────────────────── */

.fts-articles-header {
	position: relative !important;
	background-color: var(--v2-bg, #ffffff) !important;
	border-bottom: 1px solid var(--v2-border, #e9ecef) !important;
}

/* When a featured image is set, use it as a cover background */
.fts-articles-header.has-bg {
	background-color: var(--v2-dark, #1a1a2e) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	border-bottom: none !important;
}

/* Left-to-right overlay for legible text over the image */
.fts-articles-header__overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	background: linear-gradient(
		to right,
		rgba(15, 23, 42, 0.88) 0%,
		rgba(15, 23, 42, 0.62) 45%,
		rgba(15, 23, 42, 0.18) 100%
	) !important;
}

.fts-articles-header__inner {
	position: relative !important;
	z-index: 2 !important;
	max-width: 1180px !important;
	margin: 0 auto !important;
	padding: 44px 24px 38px !important;
}

.fts-articles-header.has-bg .fts-articles-header__inner {
	padding-top: 72px !important;
	padding-bottom: 64px !important;
}

/* White text variants over the image */
.fts-articles-header.has-bg .fts-articles-breadcrumbs,
.fts-articles-header.has-bg .fts-articles-breadcrumbs a,
.fts-articles-header.has-bg .fts-articles-breadcrumbs .sep,
.fts-articles-header.has-bg .fts-articles-breadcrumbs .current {
	color: rgba(255, 255, 255, 0.85) !important;
}

.fts-articles-header.has-bg .fts-articles-breadcrumbs a:hover {
	color: #ffffff !important;
}

.fts-articles-header.has-bg .fts-articles-title {
	color: #ffffff !important;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25) !important;
}

.fts-articles-header.has-bg .fts-articles-desc {
	color: rgba(255, 255, 255, 0.9) !important;
}

.fts-articles-header.has-bg .fts-articles-count {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.16) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
}

.fts-articles-breadcrumbs {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: var(--v2-text-light, #636e72) !important;
	margin-bottom: 14px !important;
}

.fts-articles-breadcrumbs a {
	color: var(--v2-text-light, #636e72) !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

.fts-articles-breadcrumbs a:hover {
	color: var(--v2-primary, #ff6b35) !important;
}

.fts-articles-breadcrumbs .sep {
	color: var(--v2-text-muted, #b2bec3) !important;
}

.fts-articles-breadcrumbs .current {
	color: var(--v2-text, #2d3436) !important;
}

.fts-articles-title {
	font-family: var(--v2-font-heading, 'Outfit', sans-serif) !important;
	font-size: 38px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	color: var(--v2-dark, #1a1a2e) !important;
	margin: 0 !important;
}

.fts-articles-desc {
	margin: 12px 0 0 !important;
	max-width: 640px !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--v2-text-light, #636e72) !important;
}

.fts-articles-count {
	display: inline-block !important;
	margin-top: 16px !important;
	padding: 6px 14px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--v2-primary-dark, #e55a28) !important;
	background: var(--v2-primary-light, #fff3ee) !important;
	border-radius: 50px !important;
}

/* ── Container & Grid ────────────────────────────────────── */

.fts-articles-container {
	max-width: 1180px !important;
	margin: 0 auto !important;
	padding: 40px 24px 72px !important;
}

.fts-articles-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	grid-auto-rows: 1fr !important; /* every card equal height */
	gap: 24px !important;
}

/* ── Card (no shadow, soft) ──────────────────────────────── */

.fts-articles-card {
	display: flex !important;
	height: 100% !important;
	background: var(--v2-bg, #ffffff) !important;
	border: 1px solid var(--v2-border, #e9ecef) !important;
	border-radius: var(--v2-radius-lg, 16px) !important;
	overflow: hidden !important;
	box-shadow: none !important;
	transition: border-color 0.25s ease, transform 0.25s ease !important;
}

.fts-articles-card:hover {
	border-color: var(--v2-primary, #ff6b35) !important;
	transform: translateY(-4px) !important;
}

.fts-articles-card__link {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	height: 100% !important;
	text-decoration: none !important;
	color: inherit !important;
}

.fts-articles-card__thumb {
	position: relative !important;
	aspect-ratio: 16 / 10 !important;
	overflow: hidden !important;
	background: var(--v2-bg-gray, #f8f9fa) !important;
	flex-shrink: 0 !important;
}

.fts-articles-card__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.5s ease !important;
}

.fts-articles-card:hover .fts-articles-card__thumb img {
	transform: scale(1.05) !important;
}

.fts-articles-card__thumb-fallback {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(135deg, #eef1f4 0%, #e2e8f0 100%) !important;
}

.fts-articles-card__cat {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	padding: 5px 12px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	background: rgba(15, 23, 42, 0.72) !important;
	border-radius: 50px !important;
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
}

/* ── Card Body ───────────────────────────────────────────── */

.fts-articles-card__body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important; /* fill remaining height → equal cards */
	padding: 20px 22px 22px !important;
}

.fts-articles-card__title {
	font-family: var(--v2-font-heading, 'Outfit', sans-serif) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.32 !important;
	color: var(--v2-dark, #1a1a2e) !important;
	margin: 0 0 10px !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.fts-articles-card:hover .fts-articles-card__title {
	color: var(--v2-primary-dark, #e55a28) !important;
}

.fts-articles-card__excerpt {
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--v2-text-light, #636e72) !important;
	margin: 0 0 16px !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.fts-articles-card__footer {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-top: auto !important; /* pin footer to the bottom → equal cards */
	padding-top: 14px !important;
	border-top: 1px solid var(--v2-border, #e9ecef) !important;
}

.fts-articles-card__meta {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 12.5px !important;
	color: var(--v2-text-muted, #b2bec3) !important;
}

.fts-articles-card__dot {
	color: var(--v2-text-muted, #b2bec3) !important;
}

.fts-articles-card__more {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	flex-shrink: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--v2-primary-dark, #e55a28) !important;
	white-space: nowrap !important;
}

.fts-articles-card__more svg {
	transition: transform 0.25s ease !important;
}

.fts-articles-card:hover .fts-articles-card__more svg {
	transform: translateX(3px) !important;
}

/* ── Empty State ─────────────────────────────────────────── */

.fts-articles-empty {
	text-align: center !important;
	padding: 80px 24px !important;
	color: var(--v2-text-light, #636e72) !important;
	font-size: 16px !important;
}

/* ── Pagination (numbered, soft pills) ───────────────────── */

.fts-articles-pagination {
	margin-top: 48px !important;
}

.fts-articles-pagination .page-numbers {
	list-style: none !important;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.fts-articles-pagination .page-numbers li {
	margin: 0 !important;
}

.fts-articles-pagination .page-numbers a,
.fts-articles-pagination .page-numbers span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 42px !important;
	height: 42px !important;
	padding: 0 14px !important;
	font-family: var(--v2-font-body, 'Inter', sans-serif) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--v2-text, #2d3436) !important;
	background: var(--v2-bg, #ffffff) !important;
	border: 1px solid var(--v2-border, #e9ecef) !important;
	border-radius: 50px !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important;
}

.fts-articles-pagination .page-numbers a:hover {
	border-color: var(--v2-primary, #ff6b35) !important;
	color: var(--v2-primary-dark, #e55a28) !important;
}

.fts-articles-pagination .page-numbers .current {
	background: var(--v2-primary, #ff6b35) !important;
	border-color: var(--v2-primary, #ff6b35) !important;
	color: #ffffff !important;
}

.fts-articles-pagination .page-numbers .dots {
	border-color: transparent !important;
	background: transparent !important;
	min-width: auto !important;
	padding: 0 4px !important;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
	.fts-articles-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px !important;
	}

	.fts-articles-title {
		font-size: 32px !important;
	}
}

@media (max-width: 640px) {
	.fts-articles-grid {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}

	.fts-articles-header__inner {
		padding: 32px 18px 28px !important;
	}

	.fts-articles-container {
		padding: 28px 18px 56px !important;
	}

	.fts-articles-title {
		font-size: 27px !important;
	}
}