/* ============================================================================
   আগে বাংলাদেশ, প্রকাশনা তালিকা (publications listing)
   ----------------------------------------------------------------------------
   Written to sit inside the site's existing design rather than beside it. The
   site is deliberately monochrome: near-black blocks (#1f1f20), an off-white
   that reads as white on them (#eef1f5), and no accent colour anywhere. The
   palette below follows that, and the type is the site's own Bangla face,
   loaded by the theme through the Use Any Font plugin as "psb". Everything is
   scoped under .abl-page or .abl, so nothing here can leak into the theme.
   ========================================================================= */

.abl-page,
.abl {
	--abl-black:  #141420;
	--abl-white:  #ffffff;
	--abl-accent: #1f1f20;
	--abl-accent-light: #eef1f5;
	--abl-accent-dark:  #141420;
	--abl-gray:   #f5f7f8;
	--abl-text:   #373739;
	--abl-muted:  #717175;
	--abl-border: #dfe3e8;
	/* The site's own face first. It is served from this domain by the theme,
	   so nothing here asks a font host for anything. */
	--abl-font: 'psb', 'Noto Sans Bengali', 'SolaimanLipi', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

.abl-page { font-family: var(--abl-font); color: var(--abl-text); background: var(--abl-white); }
.abl-page *, .abl *, .abl *::before, .abl *::after { box-sizing: border-box; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.abl-hero {
	background: linear-gradient(135deg, #1f1f20 0%, #353b3e 52%, #1f1f20 100%);
	padding: 64px 40px 58px;
	position: relative;
	overflow: hidden;
}
.abl-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23eef1f5' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.abl-hero-inner { max-width: 1180px; margin: 0 auto; position: relative; }
.abl-hero-label {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(238,241,245,0.62);
}
.abl-hero-label a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(238,241,245,0.35); }
.abl-hero-label a:hover { color: #eef1f5; }
.abl-hero-title {
	margin: 0 0 20px;
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #eef1f5;
}
.abl-hero-intro,
.abl-hero-intro p {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(238,241,245,0.72);
	max-width: 640px;
}

/* ── Layout ──────────────────────────────────────────────────────────── */

.abl-main { max-width: 1180px; margin: 0 auto; padding: 56px 40px 80px; }
.abl-heading {
	margin: 0 0 28px;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ── Filters ─────────────────────────────────────────────────────────── */

.abl-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	padding-bottom: 22px;
	margin-bottom: 34px;
	border-bottom: 1px solid var(--abl-border);
}
.abl-searchwrap { position: relative; flex: 1 1 260px; max-width: 380px; }
.abl-searchicon {
	position: absolute;
	left: 12px; top: 50%;
	transform: translateY(-50%);
	width: 17px; height: 17px;
	color: var(--abl-muted);
	pointer-events: none;
}
.abl-search {
	width: 100%;
	padding: 11px 12px 11px 38px;
	font-family: inherit;
	font-size: 15px;
	color: var(--abl-text);
	background: var(--abl-white);
	border: 1px solid var(--abl-border);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
.abl-search:focus { outline: none; border-color: var(--abl-accent); box-shadow: 0 0 0 3px rgba(31,31,32,0.12); }

.abl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.abl-chip {
	padding: 7px 14px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--abl-muted);
	background: transparent;
	border: 1px solid var(--abl-border);
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s;
}
.abl-chip:hover { color: var(--abl-accent-dark); border-color: var(--abl-accent); }
.abl-chip.is-on {
	color: #eef1f5;
	background: var(--abl-accent);
	border-color: var(--abl-accent);
}
.abl-count { margin: 0; font-size: 13px; color: var(--abl-muted); flex: 1 1 100%; }
.abl-count:empty { display: none; }

/* ── The grid ────────────────────────────────────────────────────────── */

.abl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px 30px;
}
.abl[data-cols="2"] .abl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abl[data-cols="4"] .abl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.abl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--abl-white);
	transition: transform .18s ease, box-shadow .18s ease;
}
.abl-card.is-hidden { display: none; }
.abl-card:hover { transform: translateY(-3px); }

/* One link over the whole card keeps the markup honest for screen readers:
   a single destination, announced once, rather than a title link and an image
   link and a "read more" link all going to the same place. */
.abl-card-link { position: absolute; inset: 0; z-index: 3; }
.abl-card-link:focus-visible { outline: 3px solid var(--abl-accent); outline-offset: 3px; }

/* The whole-card link carries its own label. Most themes define
   .screen-reader-text, but this page must not depend on a theme class it does
   not control, and Silverstorm is a page-builder theme whose class names can
   change under it. Without this rule the label prints across the top of a card. */
.abl .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Cover */
.abl-cover {
	position: relative;
	aspect-ratio: 1 / 1.294;
	background: var(--abl-gray);
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(20,20,32,0.14), 0 1px 3px rgba(20,20,32,0.10);
	transition: box-shadow .18s ease;
}
.abl-card:hover .abl-cover { box-shadow: 0 18px 40px rgba(20,20,32,0.22), 0 2px 5px rgba(20,20,32,0.12); }
.abl-cover img,
.abl-cover canvas {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #fff;
}
.abl-cover canvas:not([data-drawn]) { opacity: 0; }

/* The typographic cover, shown until a real one is drawn - and kept for good
   on papers with no cover image and no readable first page. */
.abl-cover-fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 26px 22px 22px;
	background: linear-gradient(160deg, #1f1f20 0%, #353b3e 100%);
}
.abl-cover-mark {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: rgba(238,241,245,0.55);
}
.abl-cover-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #eef1f5;
}
/* The spine: a thin darker strip down the left edge, so a flat rectangle
   reads as a document rather than as a photograph. */
.abl-cover-spine {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 9px;
	z-index: 4;
	background: linear-gradient(to right, rgba(0,0,0,0.22), rgba(0,0,0,0.05) 55%, rgba(0,0,0,0));
	pointer-events: none;
}

/* Body */
.abl-body { padding: 18px 2px 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.abl-topics { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.abl-topic {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--abl-accent-dark);
	background: var(--abl-accent-light);
	padding: 3px 8px;
}
.abl-title {
	margin: 0 0 9px;
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--abl-text);
}
.abl-card:hover .abl-title { color: var(--abl-accent-dark); }
.abl-summary {
	margin: 0 0 14px;
	font-size: 0.94rem;
	font-weight: 300;
	line-height: 1.65;
	color: var(--abl-muted);
}
.abl-meta {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--abl-border);
	font-size: 12px;
	color: var(--abl-muted);
	display: flex;
	align-items: center;
	gap: 7px;
}
.abl-read {
	display: inline-block;
	margin-top: 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--abl-accent-dark);
}
.abl-card:hover .abl-read span { display: inline-block; transform: translateX(4px); transition: transform .18s; }

/* ── Empty and pagination ────────────────────────────────────────────── */

.abl-none, .abl--empty {
	padding: 60px 40px;
	text-align: center;
	border: 1px dashed var(--abl-border);
}
.abl-none h2 { margin: 0 0 10px; font-size: 1.5rem; font-weight: 700; }
.abl-none p, .abl-empty-note { margin: 0; font-size: 1rem; font-weight: 300; color: var(--abl-muted); }

.abl-page .pagination,
.abl-page .nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 50px;
	flex-wrap: wrap;
}
.abl-page .page-numbers {
	display: inline-block;
	padding: 9px 15px;
	font-size: 13px;
	font-weight: 700;
	color: var(--abl-muted);
	text-decoration: none;
	border: 1px solid var(--abl-border);
}
.abl-page .page-numbers:hover { color: var(--abl-accent-dark); border-color: var(--abl-accent); }
.abl-page .page-numbers.current { color: #eef1f5; background: var(--abl-accent); border-color: var(--abl-accent); }

/* ── Narrow screens ──────────────────────────────────────────────────── */

@media (max-width: 980px) {
	.abl-grid,
	.abl[data-cols="4"] .abl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.abl-hero { padding: 46px 20px 42px; }
	.abl-main { padding: 36px 20px 60px; }
	.abl-grid,
	.abl[data-cols="2"] .abl-grid,
	.abl[data-cols="4"] .abl-grid { grid-template-columns: 1fr; gap: 30px; }
	.abl-searchwrap { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.abl-card, .abl-cover, .abl-read span { transition: none !important; }
	.abl-card:hover { transform: none; }
}