/* ==========================================================================
   ABB News — Homepage (dense newspaper layout, matches locked mockup)
   Bands: hero · utility · sections ×2 · bottom
   ========================================================================== */

.abb-home { padding-block: var(--abb-space-5) var(--abb-space-7); }

/* Every band is a card-framed grid with a thin top border rhythm */
.abb-band { margin-bottom: var(--abb-space-6); display: grid; gap: var(--abb-space-4); }

/* Shared box chrome used across bands */
.abb-hbox, .abb-ubox, .abb-seccol, .abb-bbox {
	background: #fff;
	border: 1px solid var(--abb-border);
	border-radius: var(--abb-radius);
	padding: var(--abb-space-4);
	display: flex;
	flex-direction: column;
	min-width: 0; /* allow text truncation inside grid cells */
}
.abb-hbox__title, .abb-ubox__title, .abb-seccol__title, .abb-bbox__title {
	font-size: var(--abb-fs-md);
	margin: 0 0 var(--abb-space-3);
}
.abb-hbox__link, .abb-ubox__link, .abb-seccol__more, .abb-bbox__link {
	margin-top: auto;
	padding-top: var(--abb-space-3);
	font-family: var(--abb-font-heading);
	font-size: var(--abb-fs-sm);
	color: var(--abb-red);
}

/* =========================================================================
 * ROW 1 — HERO BAND
 * 4 columns: e-paper | latest | HERO (widest) | top-ranked
 * ========================================================================= */
.abb-band--hero {
	/* RTL fills tracks right→left: track1=آج کا اخبار(right), then تازہ ترین,
	   HERO(widest), اہم ترین(left). Sizes below are in that RTL order. */
	grid-template-columns: 0.9fr 1fr 1.9fr 1fr;
	direction: rtl;
}

/* Col A — e-paper */
.abb-hbox--epaper { align-items: stretch; text-align: center; }
.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);
	background: var(--abb-offwhite);
}
.abb-epaper-cover img { width: 100%; height: auto; }
.abb-epaper-cover__btn { display: block; margin-bottom: var(--abb-space-2); }
.abb-btn--primary.abb-epaper-cover__btn { background: var(--abb-red); color: #fff; }
.abb-btn--primary.abb-epaper-cover__btn:hover { background: var(--abb-red-dark); }
.abb-hbox--epaper .abb-hbox__link { text-align: center; }

/* Col B — تازہ ترین timed list */
.abb-timed { display: flex; flex-direction: column; }
.abb-timed__item {
	display: flex; gap: var(--abb-space-3); align-items: flex-start;
	padding: var(--abb-space-2) 0;
	border-bottom: 1px solid var(--abb-border-light);
}
.abb-timed__item:last-child { border-bottom: none; }
.abb-timed__time {
	flex: none; font-family: var(--abb-font-latin); font-weight: 700;
	font-size: var(--abb-fs-sm); color: var(--abb-red);
	min-width: 3.2em;
}
.abb-timed__title {
	font-family: var(--abb-font-heading); font-size: var(--abb-fs-sm);
	line-height: 1.8; color: var(--abb-text);
}
.abb-timed__title:hover { color: var(--abb-red); }

/* Col C — HERO */
.abb-hbox--lead { padding: 0; border: none; background: transparent; }
.abb-hero { display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--abb-border); border-radius: var(--abb-radius); overflow: hidden; }
.abb-hero__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--abb-border-light); }
.abb-hero__thumb img { width: 100%; height: 100%; object-fit: cover; }
.abb-hero__badge {
	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.3rem 0.8rem;
}
.abb-hero__body { padding: var(--abb-space-5); flex: 1; display: flex; flex-direction: column; }
.abb-hero__title { font-size: var(--abb-fs-2xl); margin: 0 0 var(--abb-space-3); }
.abb-hero__title a { color: var(--abb-text); }
.abb-hero__title a:hover { color: var(--abb-red); }
.abb-hero__excerpt { color: var(--abb-text-muted); font-size: var(--abb-fs-md); margin-bottom: var(--abb-space-4); }
.abb-hero__meta { margin-top: auto; display: flex; gap: var(--abb-space-3); align-items: center;
	font-family: var(--abb-font-latin); font-size: var(--abb-fs-sm); color: var(--abb-text-soft); }
.abb-hero__cat { font-family: var(--abb-font-heading); color: var(--abb-red); }

/* Col D — اہم ترین ranked */
.abb-ranked { display: flex; flex-direction: column; }
.abb-ranked__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--abb-space-3); align-items: center;
	padding: var(--abb-space-3) 0;
	border-bottom: 1px solid var(--abb-border-light);
}
.abb-ranked__item:last-child { border-bottom: none; }
.abb-ranked__num {
	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-ranked__title { font-family: var(--abb-font-heading); font-size: var(--abb-fs-sm); line-height: 1.75; margin: 0; }
.abb-ranked__title a { color: var(--abb-text); }
.abb-ranked__title a:hover { color: var(--abb-red); }
.abb-ranked__thumb { flex: none; width: 54px; aspect-ratio: 1; border-radius: var(--abb-radius-sm); overflow: hidden; background: var(--abb-border-light); }
.abb-ranked__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
 * ROW 2 — UTILITY BAND (5 columns)
 * ========================================================================= */
.abb-band--utility { grid-template-columns: repeat(5, 1fr); }

/* Weather */
.abb-wx__now { display: flex; align-items: baseline; gap: var(--abb-space-2); margin-bottom: var(--abb-space-3); }
.abb-wx__temp { font-family: var(--abb-font-latin); font-weight: 700; font-size: var(--abb-fs-3xl); color: var(--abb-text); }
.abb-wx__cond { color: var(--abb-text-muted); font-size: var(--abb-fs-sm); }
.abb-wx__forecast { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--abb-space-2); }
.abb-wx__forecast li { text-align: center; font-size: var(--abb-fs-xs); color: var(--abb-text-muted); }
.abb-wx__day { display: block; }
.abb-wx__hi { display: block; font-family: var(--abb-font-latin); font-weight: 600; color: var(--abb-text); }

/* City list / generic dense list rows */
.abb-listrow {
	display: flex; gap: var(--abb-space-3); align-items: flex-start;
	padding: var(--abb-space-2) 0; border-bottom: 1px solid var(--abb-border-light);
}
.abb-listrow:last-child { border-bottom: none; }
.abb-listrow__body { flex: 1; min-width: 0; }
.abb-listrow__title { font-family: var(--abb-font-heading); font-size: var(--abb-fs-sm); line-height: 1.8; margin: 0; }
.abb-listrow__title a { color: var(--abb-text); }
.abb-listrow__title a:hover { color: var(--abb-red); }
.abb-listrow__thumb { flex: none; width: 64px; aspect-ratio: 4/3; border-radius: var(--abb-radius-sm); overflow: hidden; background: var(--abb-border-light); }
.abb-listrow__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Video card */
.abb-videocard { display: block; }
.abb-videocard__thumb { position: relative; display: block; aspect-ratio: 16/10; border-radius: var(--abb-radius-sm); overflow: hidden; background: var(--abb-border-light); margin-bottom: var(--abb-space-2); }
.abb-videocard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.abb-videocard__play, .abb-vidlist__play {
	position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(50%, -50%);
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(131,4,11,0.85);
}
.abb-videocard__play::after, .abb-vidlist__play::after {
	content: ""; position: absolute; top: 50%; inset-inline-start: 50%;
	transform: translate(-30%, -50%);
	border-inline-start: 12px solid #fff; border-block: 7px solid transparent;
}
.abb-videocard__title { font-family: var(--abb-font-heading); font-size: var(--abb-fs-sm); line-height: 1.7; color: var(--abb-text); }

/* Market — rates */
.abb-rates { display: flex; flex-direction: column; }
.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-rate:last-child { border-bottom: none; }
.abb-rate__code { flex: 1; font-size: var(--abb-fs-xs); color: var(--abb-text-muted); }
.abb-rate__val { font-family: var(--abb-font-latin); font-weight: 600; font-size: var(--abb-fs-sm); }
.abb-rate__chg { flex: none; width: 0; height: 0; }
.abb-rate__chg--up { border-inline: 4px solid transparent; border-bottom: 7px solid var(--abb-success); }
.abb-rate__chg--down { border-inline: 4px solid transparent; border-top: 7px solid var(--abb-red); }
.abb-rate--gold { margin-top: var(--abb-space-1); border-top: 1px solid var(--abb-border); padding-top: var(--abb-space-2); }
.abb-rates__attribution { margin: var(--abb-space-2) 0 0; font-family: var(--abb-font-latin); font-size: 0.65rem; color: var(--abb-text-soft); }

/* Columnist photo-rows */
.abb-ubox__collist { display: flex; flex-direction: column; }
.abb-colrow {
	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-colrow:last-child { border-bottom: none; }
.abb-colrow__body { flex: 1; min-width: 0; }
.abb-colrow__name { display: block; font-family: var(--abb-font-heading); font-size: var(--abb-fs-sm); color: var(--abb-text); }
.abb-colrow__role { display: block; font-size: var(--abb-fs-xs); color: var(--abb-text-soft); }
.abb-colrow__photo { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--abb-border-light); border: 1px solid var(--abb-border); }
.abb-colrow__photo img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
 * ROW 3 & 4 — SECTION COLUMNS (5 per row)
 * ========================================================================= */
.abb-band--sections { grid-template-columns: repeat(5, 1fr); }
.abb-seccol__list { display: flex; flex-direction: column; }
.abb-seccol__lead { margin-bottom: var(--abb-space-2); }
.abb-seccol__lead-thumb { display: block; aspect-ratio: 16/10; border-radius: var(--abb-radius-sm); overflow: hidden; background: var(--abb-border-light); margin-bottom: var(--abb-space-2); }
.abb-seccol__lead-thumb img { width: 100%; height: 100%; object-fit: cover; }
.abb-seccol__lead-title { font-family: var(--abb-font-heading); font-size: var(--abb-fs-base); line-height: 1.8; margin: 0; }
.abb-seccol__lead-title a { color: var(--abb-text); }
.abb-seccol__lead-title a:hover { color: var(--abb-red); }

/* =========================================================================
 * ROW 5 — BOTTOM BAND (3 columns)
 * ========================================================================= */
.abb-band--bottom { grid-template-columns: 1fr 1fr 1.1fr; }
.abb-vidlist { display: flex; flex-direction: column; }
.abb-vidlist__item { display: flex; gap: var(--abb-space-3); align-items: center; padding: var(--abb-space-2) 0; border-bottom: 1px solid var(--abb-border-light); }
.abb-vidlist__item:last-child { border-bottom: none; }
.abb-vidlist__thumb { position: relative; flex: none; width: 84px; aspect-ratio: 16/10; border-radius: var(--abb-radius-sm); overflow: hidden; background: var(--abb-border-light); }
.abb-vidlist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.abb-vidlist__play { width: 26px; height: 26px; }
.abb-vidlist__title { font-family: var(--abb-font-heading); font-size: var(--abb-fs-sm); line-height: 1.7; color: var(--abb-text); }

/* Newsletter box */
.abb-bbox--newsletter { background: var(--abb-red-soft); border-color: #F0D8D8; }
.abb-bbox__text { font-size: var(--abb-fs-sm); color: var(--abb-text-muted); margin-bottom: var(--abb-space-3); }
.abb-nl-form { display: flex; flex-direction: column; gap: var(--abb-space-2); }
.abb-nl-form input { padding: 0.7rem 1rem; border: 1px solid var(--abb-border); border-radius: var(--abb-radius); font-family: var(--abb-font-body); background: #fff; }
.abb-nl-form input:focus { outline: none; border-color: var(--abb-red); }
.abb-nl-form button { padding: 0.7rem 1rem; background: var(--abb-red); color: #fff; border: none; border-radius: var(--abb-radius); font-family: var(--abb-font-heading); font-size: var(--abb-fs-base); }
.abb-nl-form button:hover { background: var(--abb-red-dark); }

/* Placeholder dimming for empty live-data */
[data-status="placeholder"] .abb-rate__val,
[data-status="placeholder"] .abb-wx__temp { opacity: 0.45; }

/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */
@media (max-width: 1200px) {
	.abb-band--hero { grid-template-columns: 1fr 1fr; }
	.abb-hbox--lead { grid-column: 1 / -1; order: -1; }
	.abb-band--utility { grid-template-columns: repeat(3, 1fr); }
	.abb-band--sections { grid-template-columns: repeat(3, 1fr); }
	.abb-band--bottom { grid-template-columns: 1fr 1fr; }
	.abb-bbox--newsletter { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
	.abb-band--hero { grid-template-columns: 1fr; }
	.abb-band--utility { grid-template-columns: 1fr 1fr; }
	.abb-band--sections { grid-template-columns: 1fr 1fr; }
	.abb-band--bottom { grid-template-columns: 1fr; }
	.abb-hero__title { font-size: var(--abb-fs-xl); }
}
@media (max-width: 480px) {
	.abb-band--utility, .abb-band--sections { grid-template-columns: 1fr; }
}