/* Irantimes24 — Category/Archive (extracted 1:1 from khabarnameh-category.html) */

/* ---------- BREADCRUMB (also used here) ---------- */
.crumb{padding:16px 0 0;font-size:12.5px;color:var(--muted);
	display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.crumb a{transition:color .15s}
.crumb a:hover{color:var(--brand)}
.crumb svg{width:13px;height:13px;fill:var(--muted)}
.crumb .current{color:var(--ink-soft)}

/* ---------- CATEGORY HERO ---------- */
.cat-hero{position:relative;overflow:hidden;border-radius:var(--radius);
	margin-top:16px;padding:32px 30px;color:#fff;
	background:linear-gradient(135deg,#13141a 0%,#2a1116 55%,var(--brand-dark) 100%)}
.cat-hero::before{content:"";position:absolute;width:280px;height:280px;
	background:radial-gradient(circle,rgba(224,20,44,.45),transparent 70%);
	border-radius:50%;top:-120px;left:-60px}
.cat-hero>*{position:relative}
.cat-hero .eyebrow{display:inline-flex;align-items:center;gap:7px;
	background:rgba(255,255,255,.14);font-size:11.5px;font-weight:700;
	padding:5px 13px;border-radius:999px;margin-bottom:12px;backdrop-filter:blur(4px)}
.cat-hero .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brand)}
.cat-hero h1{font-size:34px;font-weight:900;letter-spacing:-.6px;margin-bottom:8px}
.cat-hero p{font-size:14px;opacity:.82;max-width:560px;line-height:1.8}
.cat-hero .count{margin-top:14px;font-size:12.5px;opacity:.7}
.cat-hero .count b{color:#fff;font-weight:800}

/* ---------- FILTER BAR ---------- */
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
	margin:22px 0 6px}
.subfilters{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.fchip{background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;
	padding:8px 16px;font-size:13px;font-weight:600;transition:.18s;cursor:pointer}
.fchip:hover{border-color:var(--brand);color:var(--brand)}
.fchip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.sortbox{display:flex;align-items:center;gap:7px;background:var(--bg-soft);
	border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px}
.sortbox svg{width:14px;height:14px;fill:var(--muted)}
.sortbox select{border:0;background:transparent;outline:0;font-family:inherit;
	font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}

/* ---------- FEATURED (top of category) ---------- */
.cat-featured{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-bottom:8px}
.feat-main{position:relative;border-radius:var(--radius);overflow:hidden;
	aspect-ratio:4/3;background:#1a1a1f;box-shadow:var(--shadow-lg)}
.feat-main img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.feat-main:hover img{transform:scale(1.05)}
.feat-main .ov{position:absolute;inset:0;
	background:linear-gradient(to top,rgba(8,8,11,.94),rgba(8,8,11,.2) 60%,transparent);
	display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.feat-main h3{color:#fff;font-size:22px;font-weight:900;line-height:1.45;
	text-shadow:0 2px 14px rgba(0,0,0,.5)}
.feat-main .meta{color:#cdd0d7;font-size:12px;margin-top:9px}
.feat-side{display:flex;flex-direction:column;gap:14px}
.feat-sm{display:flex;gap:13px;background:#fff;border:1px solid var(--line);
	border-radius:14px;padding:10px;transition:.2s;flex:1}
.feat-sm:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:transparent}
.feat-sm .thumb{width:104px;flex-shrink:0;border-radius:10px;overflow:hidden;background:#ddd}
.feat-sm .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.feat-sm:hover .thumb img{transform:scale(1.08)}
.feat-sm .kicker{font-size:10.5px;font-weight:800;color:var(--brand)}
.feat-sm h4{font-size:13.5px;font-weight:700;line-height:1.55;margin-top:3px}
.feat-sm .meta{font-size:10.5px;color:var(--muted);margin-top:6px}

/* ---------- ARTICLE GRID ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
	overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.gcard:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent}
.gcard .thumb{aspect-ratio:16/10;overflow:hidden;background:#ddd;position:relative}
.gcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gcard:hover .thumb img{transform:scale(1.07)}
.gcard .thumb .pin{position:absolute;top:10px;right:10px;
	background:var(--brand);color:#fff;font-size:10px;font-weight:800;
	padding:4px 10px;border-radius:6px}
.gcard .body{padding:15px;flex:1;display:flex;flex-direction:column}
.gcard .kicker{font-size:10.5px;font-weight:800;color:var(--brand)}
.gcard h3{font-size:16px;font-weight:800;line-height:1.5;margin-top:6px;letter-spacing:-.2px}
.gcard:hover h3{color:var(--brand)}
.gcard p{font-size:13px;color:var(--ink-soft);margin-top:7px;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .meta{font-size:11px;color:var(--muted);margin-top:auto;padding-top:11px;
	display:flex;align-items:center;gap:6px}
.gcard .meta svg{width:12px;height:12px;fill:var(--muted)}

/* ---------- LOAD MORE / PAGINATION ---------- */
.loadmore{display:flex;justify-content:center;margin-top:24px}
.loadmore button{background:var(--ink);color:#fff;border-radius:999px;
	padding:13px 32px;font-size:14px;font-weight:700;transition:.2s;
	display:flex;align-items:center;gap:8px}
.loadmore button:hover{background:var(--brand)}
.loadmore button:disabled{opacity:.5;cursor:not-allowed}
.loadmore button svg{width:16px;height:16px;fill:#fff}
.pagination{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:24px;flex-wrap:wrap}
.pagination a,.pagination span,.pagination .page-numbers{min-width:40px;height:40px;border-radius:11px;
	display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
	border:1px solid var(--line);background:#fff;transition:.18s;padding:0 6px;color:var(--ink)}
.pagination a:hover,.pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.pagination .current,.pagination .page-numbers.current{background:var(--brand);color:#fff;border-color:var(--brand)}
.pagination .nav-a svg,.pagination .page-numbers svg{width:15px;height:15px;fill:currentColor}
.pagination .dots,.pagination .page-numbers.dots{border:0;background:transparent;min-width:24px}

.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tcloud{background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;
	padding:7px 14px;font-size:12.5px;font-weight:600;transition:.18s}
.tcloud:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-2px)}

.sticky-side{position:sticky;top:70px}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
	.sticky-side{position:static}
	.cat-featured{grid-template-columns:1fr}
}
@media(max-width:680px){
	.cat-hero{padding:24px 20px}
	.cat-hero h1{font-size:25px}
	.cat-hero p{font-size:13px}
	.filterbar{flex-direction:column;align-items:stretch}
	.subfilters{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px}
	.subfilters::-webkit-scrollbar{display:none}
	.fchip{flex-shrink:0}
	.sortbox{justify-content:space-between}
	.feat-main{aspect-ratio:16/11}
	.feat-main h3{font-size:17px}
	.feat-sm .thumb{width:96px}
	.cat-grid{grid-template-columns:1fr;gap:14px}
	/* Mobile: stack cards vertically (thumb on top, text below, centered) */
	.gcard{flex-direction:column}
	.gcard .thumb{width:100%;flex-shrink:1;aspect-ratio:16/9}
	.gcard h3{font-size:16px;line-height:1.5;text-align:center;
		-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
	.gcard .kicker{text-align:center;display:block}
	.gcard p{display:-webkit-box;text-align:center;font-size:13px;
		-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
	.gcard .body{padding:14px;text-align:center;align-items:center}
	.gcard .meta{justify-content:center;text-align:center}
	.pagination a,.pagination span,.pagination .page-numbers{min-width:36px;height:36px;font-size:13px}
}