/*--------------------------------------------------------------------
 File: cat-landing.css
 Purpose: Category-Landing template  (Phases 5-10 + refined pager)
 -------------------------------------------------------------------- */

/* ----------  Design tokens  ---------- */
:root{
	--card-gap:2rem;
	--card-radius:16px;
	--card-border:#f0f0f0;
	--card-shadow:0 2px 8px rgba(0,0,0,.04);
	--card-shadow-hover:0 12px 24px rgba(0,0,0,.08);
	--focus-ring:3px solid #3b82f6;
	--accent:#005eb8;               /* ◀ blue brand colour */
	--transition-base:0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-fast:0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body.is-dark{
	--card-border:#2a2a2a;
	--card-shadow:0 2px 8px rgba(0,0,0,.3);
	--card-shadow-hover:0 12px 24px rgba(0,0,0,.5);
}

/* ----------  Layout wrappers  ---------- */
.cat-landing__archive{max-width:1290px;margin:0 auto;padding:0 1rem;}
.cat-landing__intro{max-width:70ch;margin:1rem auto 1.5rem;font-size:1.125rem;text-align:center;color:#555;}

/* ----------  Breadcrumb trail  ---------- */
.breadcrumb{
	display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
	margin:1.5rem 0 2rem;padding:0;font-size:1rem;line-height:1.4;
	color:#6c6c6c;letter-spacing:.015em;
}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:inherit;gap:inherit;}
.breadcrumb li{display:inline-flex;align-items:center;}
.breadcrumb li+li::before{
	content:"";display:inline-block;width:6px;height:6px;
	border-top:2px solid currentColor;border-right:2px solid currentColor;
	transform:rotate(45deg);margin:0 .5rem;opacity:.45;
}
.breadcrumb a{color:inherit;text-decoration:none;transition:color .15s ease;}
.breadcrumb a:hover,.breadcrumb a:focus{color:#222;text-decoration:underline;}
.breadcrumb a:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.breadcrumb [aria-current="page"]{color:#222;font-weight:600;cursor:default;}
[dir="rtl"] .breadcrumb li+li::before{transform:rotate(-135deg);}
@media(max-width:480px){.breadcrumb{row-gap:.35rem;}}

/* ----------  Responsive grid  ---------- */
.post-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
	gap:var(--card-gap);
	margin:3rem 0;
	animation:fadeInUp 0.6s ease-out;
}
@media(min-width:1280px){
	.post-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:1023px){
	.post-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
}
@media(max-width:767px){
	.post-grid{
		grid-template-columns:1fr;
		gap:1.25rem;
	}
}
@supports not (grid-template-columns:repeat(4,1fr)){
	.post-grid{display:flex;flex-wrap:wrap;margin:calc(var(--card-gap)*-0.5);}
	.post-card{width:100%;max-width:320px;margin:calc(var(--card-gap)*0.5);}
}

/* Stagger animation for cards */
.post-card{
	animation:fadeInUp 0.5s ease-out backwards;
}
.post-card:nth-child(1){animation-delay:0.05s;}
.post-card:nth-child(2){animation-delay:0.1s;}
.post-card:nth-child(3){animation-delay:0.15s;}
.post-card:nth-child(4){animation-delay:0.2s;}
.post-card:nth-child(5){animation-delay:0.25s;}
.post-card:nth-child(6){animation-delay:0.3s;}
.post-card:nth-child(7){animation-delay:0.35s;}
.post-card:nth-child(8){animation-delay:0.4s;}

@keyframes fadeInUp{
	from{
		opacity:0;
		transform:translateY(20px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	}
}

/* ----------  Card shell  ---------- */
.post-card{
	display:flex;flex-direction:column;background:#fff;
	border-radius:var(--card-radius);
	box-shadow:var(--card-shadow), inset 0 0 0 1px var(--card-border);
	transition:all var(--transition-base);
	contain:content;content-visibility:auto;contain-intrinsic-size:400px 600px;
	position:relative;
	cursor:pointer;
	outline:none;
	overflow:hidden;
	align-items:stretch;
}
.post-card::before{
	content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(59,130,246,0.05) 100%);
	opacity:0;transition:opacity var(--transition-fast);
}
.post-card:hover,.post-card:focus-within,.post-card:focus{
	box-shadow:var(--card-shadow-hover), inset 0 0 0 1px #e0e0e0;transform:translateY(-4px) scale(1.02);
}
.post-card:focus-visible{
	outline:var(--focus-ring);
	outline-offset:4px;
}
.post-card:hover::before{opacity:1;}
a.post-card__thumb{position:relative;overflow:hidden;aspect-ratio:16/9;z-index:2;display:block;}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--transition-base);margin:0 !important;}
.post-card:hover .post-card__thumb img{transform:scale(1.05);}
.post-card__body{padding:1.5rem;display:flex;flex-direction:column;flex:1;}
.post-card__title{font-size:1.125rem;margin:0 0 .75rem;line-height:1.4;font-weight:600;}
.post-card__title a{text-decoration:none;outline:none;color:#1a1a1a;transition:color var(--transition-fast);}
.post-card__title a:hover{color:var(--accent);}
.post-card__title a:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:4px;}
/* Stretched link technique for full card clickability */
.post-card__link::after{
	content:'';
	position:absolute;
	inset:0;
	z-index:1;
}
.post-card__excerpt{font-size:.9375rem;margin:0 0 1rem;color:#6b6b6b;line-height:1.6;}
.post-card__date{font-size:.8125rem;color:#9ca3af;margin-top:auto;font-weight:500;}
.post-card__reviewer{display:flex;align-items:center;gap:.625rem;font-size:.8125rem;margin-top:1rem;padding-top:1rem;border-top:1px solid #f3f4f6;position:relative;z-index:2;text-decoration:none;color:inherit;transition:color var(--transition-fast);}
.post-card__reviewer:hover{color:var(--accent);}
.post-card__reviewer-avatar{width:32px;height:32px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.1);}

/* ----------  Pagination nav  ---------- */
nav.pagination{
	text-align:center;
	margin:3rem auto;
	display:flex;
	justify-content:center;
}

.pagination{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	gap:0.375rem;
	margin:0 auto;
	padding:0.75rem;
	background:#f8fafc;
	border:none;
}

/* All pagination links and spans */
.pagination a,
.pagination span.page-numbers,
.pagination .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	padding:0 0.75rem;
	border-radius:8px;
	background:#ffffff;
	border:none;
	color:#374151;
	font-weight:500;
	font-size:0.9375rem;
	text-decoration:none;
	transition:all var(--transition-fast);
	box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* Current/active page - always circular */
.pagination span.current,
.pagination .page-numbers.current,
.pagination .current{
	background:#4a7dd7;
	color:#ffffff !important;
	border:none;
	border-radius:50% !important;
	box-shadow:0 2px 8px rgba(74,125,215,.3);
	font-weight:600;
}

/* Hover state for links */
.pagination a:hover:not(.prev):not(.next){
	background:#4a7dd7;
	color:#ffffff !important;
	border:none;
	border-radius:50% !important;
	transform:translateY(-1px);
	box-shadow:0 3px 10px rgba(74,125,215,.2);
}

/* Focus state */
.pagination a:focus-visible{
	outline:2px solid #4a7dd7;
	outline-offset:2px;
}

/* Prev/Next buttons */
.pagination a.prev,
.pagination a.next,
.pagination .prev,
.pagination .next{
	padding:0 1rem;
	background:#ffffff;
	border:none;
	color:#1f2937;
	font-weight:500;
}

.pagination a.prev:hover,
.pagination a.next:hover{
	background:#f3f4f6;
	border:none;
	color:#1f2937 !important;
	transform:none;
	border-radius:8px !important;
}

/* Directional hover animations */
.pagination a.prev:hover{
	transform:translateX(-2px);
}

.pagination a.next:hover{
	transform:translateX(2px);
}

/* Dots/ellipsis */
.pagination span.dots,
.pagination .page-numbers.dots,
.pagination .dots{
	min-width:30px;
	padding:0;
	border:none;
	background:transparent;
	color:#9ca3af;
	cursor:default;
	box-shadow:none;
}

/* Fix for empty page numbers */
.pagination a:empty,
.pagination span:empty{
	min-width:40px;
}

/* Force text color for all states */
.pagination a{
	color:#374151 !important;
}

.pagination a:hover{
	color:#ffffff !important;
}

/* Counter-based page numbers for empty elements */
.pagination{
	counter-reset:pagination-counter;
}

.pagination .page-numbers:not(.prev):not(.next):not(.dots):not(.current){
	counter-increment:pagination-counter;
}

.pagination a.page-numbers:not(.prev):not(.next):not(.dots):empty::after{
	content:counter(pagination-counter);
}

/* Specific fixes for page 2-5 */
.pagination a[href*="/page/2/"]:empty::after{
	content:"2";
}

.pagination a[href*="/page/3/"]:empty::after{
	content:"3";
}

.pagination a[href*="/page/4/"]:empty::after{
	content:"4";
}

.pagination a[href*="/page/5/"]:empty::after{
	content:"5";
}

/* WordPress specific fixes */
.pagination .page-numbers:not(.dots):not(.prev):not(.next){
	min-width:40px;
	text-align:center;
}

/* Ensure proper display for WordPress output */
.pagination > *{
	display:inline-flex !important;
}

/* Responsive adjustments */
@media(max-width:640px){
	.pagination{
		gap:0.25rem;
		padding:0.5rem;
	}
	
	.pagination a,
	.pagination span.page-numbers,
	.pagination .page-numbers{
		min-width:36px;
		height:36px;
		font-size:0.875rem;
		padding:0 0.5rem;
	}
}

/* ----------  Collapse Kadence default wrapper on landing pages  ---------- */
.cat-landing #primary.content-area{
	padding:0!important;margin:0!important;border:0!important;height:0!important;
	min-height:0!important;overflow:hidden!important;
}
.cat-landing #primary.content-area>*{display:none!important;}

/* ----------  Additional Professional Enhancements  ---------- */

/* Enhanced dark mode support */
body.is-dark .post-card{
	background:#1a1a1a;
	border-color:var(--card-border);
}
body.is-dark .post-card__title a{color:#f3f4f6;}
body.is-dark .post-card__excerpt{color:#9ca3af;}
body.is-dark .post-card__date{color:#6b7280;}
body.is-dark .post-card__reviewer{border-top-color:#374151;}
body.is-dark .pagination{
	background:#1f2937;
	border:none;
}
body.is-dark .pagination a,
body.is-dark .pagination span{
	background:#111827;
	color:#d1d5db;
	border:none;
}
body.is-dark .pagination .prev,
body.is-dark .pagination .next{
	background:#111827;
	border:none;
	color:#9ca3af;
}
body.is-dark .pagination .current{
	background:#4a7dd7;
	color:#ffffff !important;
	border:none;
}

/* Loading skeleton animation */
@keyframes shimmer{
	0%{background-position:-1000px 0;}
	100%{background-position:1000px 0;}
}
.post-card.is-loading{
	pointer-events:none;
}
.post-card.is-loading::after{
	content:'';
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
	animation:shimmer 2s infinite;
}

/* Smooth scroll behavior */
html{scroll-behavior:smooth;}

/* Focus visible improvements */
:focus-visible{
	outline:var(--focus-ring);
	outline-offset:3px;
	border-radius:4px;
}

/* Card image loading optimization */
.post-card__thumb img{
	background:#f3f4f6;
}
body.is-dark .post-card__thumb img{
	background:#374151;
}

/* Responsive font sizing */
@media(max-width:767px){
	.post-card__title{font-size:1rem;}
	.post-card__excerpt{font-size:.875rem;}
	.post-card__body{padding:1.25rem;}
	.pagination a,
	.pagination span{
		min-width:40px;
		height:40px;
		font-size:.875rem;
	}
}

/* Print styles */
@media print{
	.post-card{
		box-shadow:none;
		border:1px solid #000;
		break-inside:avoid;
	}
	.pagination{display:none;}
}