/* ==========================================================================
   ABB News — Single article + sidebar
   ========================================================================== */

.abb-single { padding-block: var(--abb-space-6) var(--abb-space-7); }
.abb-single__grid {
	display: grid;
	grid-template-columns: 1fr 340px; /* main + sidebar; RTL: main on right */
	gap: var(--abb-space-7);
	align-items: start;
}

/* ---------- Article ---------- */
.abb-article { background: #fff; border: 1px solid var(--abb-border); border-radius: var(--abb-radius); padding: var(--abb-space-6); }
.abb-article__cat {
	display: inline-block; font-family: var(--abb-font-heading);
	color: var(--abb-red); font-size: var(--abb-fs-sm); margin-bottom: var(--abb-space-3);
}
.abb-article__title { font-size: var(--abb-fs-3xl); line-height: 1.9; margin: 0 0 var(--abb-space-3); }
.abb-article__subtitle { font-size: var(--abb-fs-lg); color: var(--abb-text-muted); line-height: 1.9; margin: 0 0 var(--abb-space-5); }

.abb-article__byline {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
	gap: var(--abb-space-3); padding-block: var(--abb-space-4);
	border-block: 1px solid var(--abb-border-light);
}
.abb-article__author { display: flex; align-items: center; gap: var(--abb-space-3); }
.abb-article__author-photo img { width: 48px; height: 48px; border-radius: 50%; }
.abb-article__author-info { display: flex; flex-direction: column; }
.abb-article__author-name { font-family: var(--abb-font-heading); color: var(--abb-text); font-size: var(--abb-fs-md); }
.abb-article__author-name:hover { color: var(--abb-red); }
.abb-article__author-role { font-size: var(--abb-fs-xs); color: var(--abb-text-soft); }
.abb-article__meta { display: flex; gap: var(--abb-space-2); align-items: center; font-family: var(--abb-font-latin); font-size: var(--abb-fs-xs); color: var(--abb-text-soft); }

/* Share row */
.abb-share { display: flex; align-items: center; gap: var(--abb-space-2); padding-block: var(--abb-space-3); flex-wrap: wrap; }
.abb-share__label { font-family: var(--abb-font-heading); font-size: var(--abb-fs-sm); color: var(--abb-text-muted); margin-inline-end: var(--abb-space-2); }
.abb-share__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	border: none; color: #fff; transition: opacity var(--abb-transition);
}
.abb-share__btn:hover { opacity: 0.85; }
.abb-share__btn--wa { background: #25D366; }
.abb-share__btn--x { background: #000; }
.abb-share__btn--fb { background: #1877F2; }
.abb-share__btn--in { background: #0A66C2; }
.abb-share__btn--print { background: var(--abb-text-muted); }

.abb-article__figure { margin: var(--abb-space-5) 0; }
.abb-article__figure img { width: 100%; border-radius: var(--abb-radius); }
.abb-article__caption { font-size: var(--abb-fs-sm); color: var(--abb-text-soft); padding: var(--abb-space-2) var(--abb-space-3); background: var(--abb-offwhite); text-align: center; }

/* Content typography — Naskh body, generous line height */
.abb-article__content { font-size: var(--abb-fs-md); line-height: 2.0; color: var(--abb-text); }
.abb-article__content p { margin: 0 0 var(--abb-space-5); }
.abb-article__content h2, .abb-article__content h3 { margin: var(--abb-space-6) 0 var(--abb-space-3); }
.abb-article__content img { border-radius: var(--abb-radius); margin: var(--abb-space-4) 0; }
.abb-article__content a { color: var(--abb-red); text-decoration: underline; }
.abb-article__content blockquote {
	border-inline-start: 4px solid var(--abb-red);
	background: var(--abb-red-soft);
	margin: var(--abb-space-5) 0; padding: var(--abb-space-4) var(--abb-space-5);
	font-family: var(--abb-font-heading); color: var(--abb-red-dark);
}

.abb-article__tags { display: flex; flex-wrap: wrap; gap: var(--abb-space-2); align-items: center; margin: var(--abb-space-5) 0; }
.abb-article__tags-label { font-family: var(--abb-font-heading); color: var(--abb-text-muted); }
.abb-article__tags a { background: var(--abb-offwhite); border: 1px solid var(--abb-border); border-radius: var(--abb-radius-sm); padding: 0.3rem 0.8rem; font-size: var(--abb-fs-sm); color: var(--abb-text-muted); }
.abb-article__tags a:hover { border-color: var(--abb-red); color: var(--abb-red); }

.abb-article__authorbox { display: flex; gap: var(--abb-space-4); padding: var(--abb-space-5); background: var(--abb-offwhite); border-radius: var(--abb-radius); margin: var(--abb-space-5) 0; }
.abb-article__authorbox-photo img { width: 72px; height: 72px; border-radius: 50%; }
.abb-article__authorbox-name { font-family: var(--abb-font-heading); font-size: var(--abb-fs-lg); color: var(--abb-text); }
.abb-article__authorbox-bio { font-size: var(--abb-fs-sm); color: var(--abb-text-muted); margin: var(--abb-space-2) 0 0; }

.abb-related { margin-top: var(--abb-space-7); }

/* ---------- Sidebar ---------- */
.abb-sidebar { display: flex; flex-direction: column; gap: var(--abb-space-5); }
.abb-widget { background: #fff; border: 1px solid var(--abb-border); border-radius: var(--abb-radius); padding: var(--abb-space-4); }
.abb-widget__title { font-size: var(--abb-fs-md); margin: 0 0 var(--abb-space-3); }
.abb-widget--epaper { text-align: center; }
.abb-widget--epaper .abb-epaper-cover { display: block; border: 1px solid var(--abb-border); border-radius: var(--abb-radius-sm); overflow: hidden; margin-bottom: var(--abb-space-3); }
.abb-widget--epaper .abb-btn--primary { display: block; background: var(--abb-red); color: #fff; }
.abb-widget--epaper .abb-btn--primary:hover { background: var(--abb-red-dark); }
.abb-ad-slot { display: grid; place-items: center; min-height: 90px; background: var(--abb-offwhite); border: 1px dashed var(--abb-border); border-radius: var(--abb-radius-sm); color: var(--abb-text-soft); font-family: var(--abb-font-latin); }

@media (max-width: 1024px) {
	.abb-single__grid { grid-template-columns: 1fr; }
	.abb-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abb-space-4); }
	.abb-widget--ad { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.abb-sidebar { grid-template-columns: 1fr; }
	.abb-article { padding: var(--abb-space-4); }
	.abb-article__title { font-size: var(--abb-fs-2xl); }
}

/* ==========================================================================
   Archive / Category pages
   ========================================================================== */
.abb-archive { padding-block: var(--abb-space-5) var(--abb-space-7); }

.abb-breadcrumb { display: flex; gap: var(--abb-space-2); align-items: center; font-size: var(--abb-fs-sm); color: var(--abb-text-soft); margin-bottom: var(--abb-space-4); }
.abb-breadcrumb a { color: var(--abb-red); }
.abb-breadcrumb__current { color: var(--abb-text-muted); }

.abb-archive__head { border-bottom: 3px solid var(--abb-red); padding-bottom: var(--abb-space-4); margin-bottom: var(--abb-space-5); }
.abb-archive__title { font-size: var(--abb-fs-3xl); color: var(--abb-red); margin: 0 0 var(--abb-space-2); }
.abb-archive__desc { color: var(--abb-text-muted); font-size: var(--abb-fs-md); line-height: 1.9; max-width: 60ch; }
.abb-archive__stats { display: flex; gap: var(--abb-space-4); margin-top: var(--abb-space-3); font-family: var(--abb-font-latin); font-size: var(--abb-fs-sm); color: var(--abb-text-soft); }

.abb-archive__grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--abb-space-7); align-items: start; }

/* Lead story */
.abb-archive__lead { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--abb-space-5); background: #fff; border: 1px solid var(--abb-border); border-radius: var(--abb-radius); overflow: hidden; margin-bottom: var(--abb-space-5); }
.abb-archive__lead-thumb { display: block; aspect-ratio: 16/11; overflow: hidden; background: var(--abb-border-light); }
.abb-archive__lead-thumb img { width: 100%; height: 100%; object-fit: cover; }
.abb-archive__lead-body { padding: var(--abb-space-5) var(--abb-space-5) var(--abb-space-5) 0; display: flex; flex-direction: column; justify-content: center; }
.abb-archive__lead-title { font-size: var(--abb-fs-2xl); line-height: 1.85; margin: 0 0 var(--abb-space-3); }
.abb-archive__lead-title a { color: var(--abb-text); }
.abb-archive__lead-title a:hover { color: var(--abb-red); }
.abb-archive__lead-excerpt { color: var(--abb-text-muted); font-size: var(--abb-fs-md); line-height: 1.9; margin: 0 0 var(--abb-space-3); }
.abb-archive__lead-meta { display: flex; gap: var(--abb-space-2); align-items: center; font-family: var(--abb-font-latin); font-size: var(--abb-fs-xs); color: var(--abb-text-soft); }

/* Grid helper */
.abb-grid { display: grid; gap: var(--abb-space-4); }
.abb-grid--2 { grid-template-columns: 1fr 1fr; }
.abb-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Pagination */
.abb-pagination { display: flex; justify-content: center; gap: var(--abb-space-2); margin-top: var(--abb-space-6); flex-wrap: wrap; }
.abb-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 var(--abb-space-2); border: 1px solid var(--abb-border); border-radius: var(--abb-radius-sm); font-family: var(--abb-font-latin); color: var(--abb-text); background: #fff; }
.abb-pagination .page-numbers.current { background: var(--abb-red); color: #fff; border-color: var(--abb-red); }
.abb-pagination .page-numbers:hover:not(.current) { border-color: var(--abb-red); color: var(--abb-red); }

/* Empty state */
.abb-empty { text-align: center; padding: var(--abb-space-8) var(--abb-space-4); background: #fff; border: 1px solid var(--abb-border); border-radius: var(--abb-radius); }
.abb-empty p { color: var(--abb-text-muted); margin-bottom: var(--abb-space-4); }

@media (max-width: 1024px) {
	.abb-archive__grid { grid-template-columns: 1fr; }
	.abb-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.abb-archive__lead { grid-template-columns: 1fr; }
	.abb-archive__lead-body { padding: var(--abb-space-4); }
	.abb-grid--2, .abb-grid--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Sidebar ranked list (اہم ترین) + timed list (تازہ ترین)
   home.css isn't loaded here, so these need their own rules.
   ========================================================================== */
.abb-sidebar .abb-ranked { display: flex; flex-direction: column; }
.abb-sidebar .abb-ranked__item {
	display: grid;
	/* RTL right→left: number, thumbnail, then title fills the rest */
	grid-template-columns: auto auto 1fr;
	gap: var(--abb-space-3); align-items: center;
	padding: var(--abb-space-3) 0; border-bottom: 1px solid var(--abb-border-light);
}
.abb-sidebar .abb-ranked__item:last-child { border-bottom: none; }
.abb-sidebar .abb-ranked__num {
	order: 1; flex: none; width: 24px; height: 24px;
	background: var(--abb-red); color: #fff; border-radius: var(--abb-radius-sm);
	display: grid; place-items: center;
	font-family: var(--abb-font-latin); font-weight: 700; font-size: var(--abb-fs-sm);
}
.abb-sidebar .abb-ranked__thumb {
	order: 2; flex: none; width: 48px; aspect-ratio: 1;
	border-radius: var(--abb-radius-sm); overflow: hidden; background: var(--abb-border-light);
}
.abb-sidebar .abb-ranked__thumb img { width: 100%; height: 100%; object-fit: cover; }
.abb-sidebar .abb-ranked__title { order: 3; font-family: var(--abb-font-heading); font-size: var(--abb-fs-sm); line-height: 1.7; margin: 0; }
.abb-sidebar .abb-ranked__title a { color: var(--abb-text); }
.abb-sidebar .abb-ranked__title a:hover { color: var(--abb-red); }

.abb-sidebar .abb-timed { display: flex; flex-direction: column; }
.abb-sidebar .abb-timed__item { display: flex; gap: var(--abb-space-2); align-items: flex-start; padding: var(--abb-space-2) 0; border-bottom: 1px solid var(--abb-border-light); }
.abb-sidebar .abb-timed__item:last-child { border-bottom: none; }
.abb-sidebar .abb-timed__time { flex: none; font-family: var(--abb-font-latin); font-weight: 700; font-size: var(--abb-fs-xs); color: var(--abb-red); min-width: 3em; }
.abb-sidebar .abb-timed__title { font-family: var(--abb-font-heading); font-size: var(--abb-fs-sm); line-height: 1.7; color: var(--abb-text); }
.abb-sidebar .abb-timed__title:hover { color: var(--abb-red); }

/* Sidebar rates + weather (also from home.css, not loaded here) */
.abb-sidebar .abb-rates { display: flex; flex-direction: column; }
.abb-sidebar .abb-rate { display: flex; align-items: center; gap: var(--abb-space-2); padding: var(--abb-space-2) 0; border-bottom: 1px solid var(--abb-border-light); }
.abb-sidebar .abb-rate:last-child { border-bottom: none; }
.abb-sidebar .abb-rate__code { flex: 1; font-size: var(--abb-fs-xs); color: var(--abb-text-muted); }
.abb-sidebar .abb-rate__val { font-family: var(--abb-font-latin); font-weight: 600; font-size: var(--abb-fs-sm); }
.abb-sidebar .abb-wx__now { display: flex; align-items: baseline; gap: var(--abb-space-2); }
.abb-sidebar .abb-wx__temp { font-family: var(--abb-font-latin); font-weight: 700; font-size: var(--abb-fs-2xl); }
.abb-sidebar .abb-wx__cond { color: var(--abb-text-muted); font-size: var(--abb-fs-sm); }

/* ==========================================================================
   Archive dense list (listcard): small RTL thumb + headline + excerpt
   ========================================================================== */
.abb-archive__list { display: flex; flex-direction: column; }
.abb-listcard {
	display: grid;
	/* RTL right→left: thumbnail first (right), body fills left */
	grid-template-columns: 150px 1fr;
	gap: var(--abb-space-4);
	padding: var(--abb-space-4) 0;
	border-bottom: 1px solid var(--abb-border-light);
}
.abb-listcard:first-child { padding-top: 0; }
.abb-listcard:last-child { border-bottom: none; }
.abb-listcard__thumb { position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--abb-radius-sm); overflow: hidden; background: var(--abb-border-light); }
.abb-listcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.abb-listcard__cat { position: absolute; top: 0; inset-inline-start: 0; background: var(--abb-red); color: #fff; font-family: var(--abb-font-heading); font-size: var(--abb-fs-xs); padding: 0.2rem 0.6rem; }
.abb-listcard__body { min-width: 0; display: flex; flex-direction: column; }
.abb-listcard__title { font-size: var(--abb-fs-lg); line-height: 1.8; margin: 0 0 var(--abb-space-2); }
.abb-listcard__title a { color: var(--abb-text); }
.abb-listcard__title a:hover { color: var(--abb-red); }
.abb-listcard__excerpt { color: var(--abb-text-muted); font-size: var(--abb-fs-sm); line-height: 1.85; margin: 0 0 var(--abb-space-2); }
.abb-listcard__meta { margin-top: auto; display: flex; gap: var(--abb-space-2); align-items: center; font-family: var(--abb-font-latin); font-size: var(--abb-fs-xs); color: var(--abb-text-soft); }

@media (max-width: 640px) {
	.abb-listcard { grid-template-columns: 110px 1fr; gap: var(--abb-space-3); }
	.abb-listcard__title { font-size: var(--abb-fs-base); }
	.abb-listcard__excerpt { display: none; } /* headline-only on small phones for density */
}

/* ==========================================================================
   Search no-results, 404, static page, comments
   ========================================================================== */
.abb-noresults { background: #fff; border: 1px solid var(--abb-border); border-radius: var(--abb-radius); padding: var(--abb-space-7) var(--abb-space-5); text-align: center; }
.abb-noresults__title { font-size: var(--abb-fs-2xl); color: var(--abb-red); margin: 0 0 var(--abb-space-3); }
.abb-noresults__text { color: var(--abb-text-muted); margin: 0 auto var(--abb-space-5); max-width: 46ch; line-height: 1.9; }
.abb-noresults__search { max-width: 420px; margin: 0 auto var(--abb-space-5); }
.abb-noresults__links { display: flex; flex-wrap: wrap; gap: var(--abb-space-3); justify-content: center; align-items: center; }
.abb-noresults__links a { color: var(--abb-red); border: 1px solid var(--abb-border); border-radius: var(--abb-radius-sm); padding: 0.3rem 0.9rem; }
.abb-noresults__links a:hover { background: var(--abb-red-soft); }

.abb-404 { padding-block: var(--abb-space-8) var(--abb-space-7); }
.abb-404__inner { max-width: 800px; margin: 0 auto; text-align: center; }
.abb-404__code { font-family: var(--abb-font-latin); font-weight: 800; font-size: 6rem; line-height: 1; color: var(--abb-red); display: block; }
.abb-404__title { font-size: var(--abb-fs-2xl); margin: var(--abb-space-3) 0; }
.abb-404__text { color: var(--abb-text-muted); margin-bottom: var(--abb-space-5); line-height: 1.9; }
.abb-404__search { max-width: 420px; margin: 0 auto var(--abb-space-4); }
.abb-404__actions { margin-bottom: var(--abb-space-7); }
.abb-404__latest { text-align: start; margin-top: var(--abb-space-6); }

.abb-page { padding-block: var(--abb-space-6) var(--abb-space-7); max-width: 860px; }
.abb-page__article { background: #fff; border: 1px solid var(--abb-border); border-radius: var(--abb-radius); padding: var(--abb-space-6); }
.abb-page__title { font-size: var(--abb-fs-3xl); margin: 0 0 var(--abb-space-5); padding-bottom: var(--abb-space-3); border-bottom: 3px solid var(--abb-red); }
.abb-page__figure { margin: 0 0 var(--abb-space-5); }
.abb-page__figure img { width: 100%; border-radius: var(--abb-radius); }
.abb-page__content { font-size: var(--abb-fs-md); line-height: 2.0; color: var(--abb-text); }
.abb-page__content p { margin: 0 0 var(--abb-space-5); }
.abb-page__content h2, .abb-page__content h3 { margin: var(--abb-space-6) 0 var(--abb-space-3); }
.abb-page__content a { color: var(--abb-red); text-decoration: underline; }
.abb-page__content ul, .abb-page__content ol { margin: 0 var(--abb-space-5) var(--abb-space-5) 0; padding-inline-start: var(--abb-space-5); }
.abb-page__content li { margin-bottom: var(--abb-space-2); }

.abb-comments { background: #fff; border: 1px solid var(--abb-border); border-radius: var(--abb-radius); padding: var(--abb-space-5); margin-top: var(--abb-space-5); }
.abb-comments__title { font-size: var(--abb-fs-lg); margin: 0 0 var(--abb-space-4); }
.abb-comments__list { list-style: none; margin: 0 0 var(--abb-space-5); padding: 0; }
.abb-comments__list .comment { padding: var(--abb-space-4) 0; border-bottom: 1px solid var(--abb-border-light); }
.abb-comments__list .children { list-style: none; margin-inline-start: var(--abb-space-5); padding-inline-start: var(--abb-space-4); border-inline-start: 2px solid var(--abb-border-light); }
.abb-comments .comment-author { display: flex; align-items: center; gap: var(--abb-space-3); margin-bottom: var(--abb-space-2); }
.abb-comments .comment-author img { border-radius: 50%; }
.abb-comments .comment-author .fn { font-family: var(--abb-font-heading); color: var(--abb-text); font-style: normal; }
.abb-comments .comment-meta { font-size: var(--abb-fs-xs); color: var(--abb-text-soft); margin-bottom: var(--abb-space-2); }
.abb-comments .comment-content { line-height: 1.9; color: var(--abb-text); }
.abb-comments__closed { color: var(--abb-text-soft); font-size: var(--abb-fs-sm); }
.abb-comments .comment-respond { margin-top: var(--abb-space-5); }
.abb-comments .comment-form label { display: block; font-family: var(--abb-font-heading); font-size: var(--abb-fs-sm); margin-bottom: var(--abb-space-1); }
.abb-comments .comment-form input[type="text"], .abb-comments .comment-form input[type="email"], .abb-comments .comment-form input[type="url"], .abb-comments .comment-form textarea { width: 100%; padding: 0.7rem 1rem; border: 1px solid var(--abb-border); border-radius: var(--abb-radius); font-family: var(--abb-font-body); margin-bottom: var(--abb-space-3); }
.abb-comments .comment-form textarea:focus, .abb-comments .comment-form input:focus { outline: none; border-color: var(--abb-red); }

/* In-article "most read" box (BBC-style, injected ~500 words in) */
.abb-inline-mostread { background: var(--abb-red-soft); border-inline-start: 4px solid var(--abb-red); border-radius: var(--abb-radius-sm); padding: var(--abb-space-4) var(--abb-space-5); margin: var(--abb-space-6) 0; }
.abb-inline-mostread__title { font-family: var(--abb-font-heading); font-size: var(--abb-fs-lg); color: var(--abb-red-dark); margin: 0 0 var(--abb-space-3); }
.abb-inline-mostread__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.abb-inline-mostread__item { display: flex; align-items: flex-start; gap: var(--abb-space-3); padding: var(--abb-space-2) 0; border-bottom: 1px solid rgba(131,4,11,0.15); }
.abb-inline-mostread__item:last-child { border-bottom: none; }
.abb-inline-mostread__num { flex: none; font-family: var(--abb-font-latin); font-weight: 800; color: var(--abb-red); font-size: var(--abb-fs-lg); min-width: 1.4em; }
.abb-inline-mostread__item a { font-family: var(--abb-font-heading); color: var(--abb-text); line-height: 1.8; }
.abb-inline-mostread__item a:hover { color: var(--abb-red); }