/* Tech BD — public stylesheet. Hand-written, no framework. Mobile-first, light theme. */

@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/noto-sans-bengali-400.woff2") format("woff2");
  unicode-range: U+0980-09FF, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/noto-sans-bengali-700.woff2") format("woff2");
  unicode-range: U+0980-09FF, U+200C-200D, U+25CC;
}

:root {
  --bg: #ffffff;
  --surface: #f6f8fb;
  --border: #e3e8ef;
  --text: #16213a;
  --muted: #5b6b85;
  --brand: #0f172a;
  --accent: #1d4ed8;
  --accent-soft: #e8efff;
  --ok: #15803d;
  --err: #b91c1c;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .18);
  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Bengali", sans-serif;
  --font-bn: "Noto Sans Bengali", "Nirmala UI", "Bangla Sangam MN", "Vrinda", -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.65 var(--font); -webkit-font-smoothing: antialiased;
}
body.lang-bn { font-family: var(--font-bn); font-size: 17px; line-height: 1.8; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; color: var(--brand); letter-spacing: -.01em; }
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.container.narrow { max-width: 860px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--brand); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip-link:focus { left: 8px; }
.btn { display: inline-block; background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 8px; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { background: #1e40af; text-decoration: none; }

/* ---------- header ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.brand img { height: 48px; width: auto; }
.nav-toggle { margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--border); background: #fff; border-radius: 8px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--brand); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-nav { display: none; width: 100%; padding-bottom: 12px; }
.site-nav.open { display: block; }
.site-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-nav > ul > li > a { display: block; padding: 10px 8px; color: var(--brand); font-weight: 600; border-radius: 6px; }
.site-nav > ul > li > a:hover { background: var(--surface); text-decoration: none; }
.site-nav ul ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.site-nav ul ul a { display: block; padding: 6px 8px; color: var(--muted); }
.nav-tools { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.search-form { display: flex; flex: 1; min-width: 0; }
.search-form input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px 0 0 8px; font: inherit; }
.search-form button { padding: 9px 12px; border: 1px solid var(--border); border-left: 0; background: var(--surface); border-radius: 0 8px 8px 0; cursor: pointer; font: inherit; }
.lang-switch { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--brand); font-weight: 600; white-space: nowrap; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; align-items: center; flex: 1; width: auto; padding: 0; gap: 12px; }
  .site-nav > ul { flex-direction: row; align-items: center; gap: 0; flex: 1; flex-wrap: wrap; }
  .site-nav > ul > li { position: relative; }
  .site-nav > ul > li > a { padding: 22px 12px; border-radius: 0; }
  .site-nav > ul > li > a:hover { background: none; color: var(--accent); }
  .site-nav ul ul { position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: 0 0 10px 10px; box-shadow: var(--shadow); padding: 6px 0; display: none; }
  .site-nav ul ul a { padding: 8px 16px; color: var(--text); }
  .site-nav ul ul a:hover { background: var(--surface); text-decoration: none; }
  .site-nav li.has-children:hover > ul, .site-nav li.has-children:focus-within > ul { display: block; }
  .nav-tools { margin: 0; }
  .search-form { width: 220px; flex: none; }
}

/* ---------- home ---------- */
main { padding: 24px 0 48px; }
.featured { display: grid; gap: 16px; margin-bottom: 32px; }
/* Featured tiles are the card art and the category chip, nothing else. tools/make-card.php already
   draws the kicker, headline, summary and wordmark into the picture, so printing the title over it
   again only made the two collide. The headline stays in the markup as .feat-title.sr-only. */
.feat { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--brand); color: #fff; }
.feat img, .feat .img-placeholder { display: block; width: 100%; aspect-ratio: 750 / 415; object-fit: cover; }
/* top-RIGHT on purpose: make-card.php already puts the story's own kicker in the top-left corner
   of the art, so a chip on that side stacks two labels on top of each other. */
.feat .card-cat { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
/* the only link in a tile is visually hidden, so the tile itself has to show the focus ring */
.feat:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.feat:hover img { transform: scale(1.02); }
.feat img { transition: transform .25s ease; }
@media (min-width: 700px) {
  .featured { grid-template-columns: repeat(2, 1fr); }
  .feat-main { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .featured { grid-template-columns: repeat(4, 1fr); }
  /* main tile covers two columns and both rows; the small tiles set the row height, and the hero
     art is close enough to that ratio that cover trims only a few pixels. */
  .feat-main { grid-column: 1 / 3; grid-row: 1 / 3; }
  .feat-main img { height: 100%; aspect-ratio: auto; }
}

.section-title { font-size: 1.35rem; padding-bottom: 10px; border-bottom: 2px solid var(--brand); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ""; width: 6px; height: 22px; background: var(--accent); border-radius: 3px; }
.with-sidebar { display: grid; gap: 32px; }
@media (min-width: 1000px) { .with-sidebar { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } .grid.grid-4 { grid-template-columns: repeat(4, 1fr); } .content .grid { grid-template-columns: repeat(2, 1fr); } .content .grid.grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- cards ---------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-media img, .img-placeholder { width: 100%; aspect-ratio: 750 / 415; object-fit: cover; background: var(--surface); }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-cat { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 4px; align-self: flex-start; }
.card-cat:hover { text-decoration: none; background: var(--accent); color: #fff; }
.card-title { font-size: 1.08rem; margin: 0; }
.card-title a { color: var(--brand); }
.card-summary { color: var(--muted); font-size: .93rem; margin: 0; }
.card-meta { color: var(--muted); font-size: .82rem; margin: auto 0 0; padding-top: 4px; }
.card-compact .card-title { font-size: .98rem; }
.empty { color: var(--muted); padding: 24px; background: var(--surface); border-radius: var(--radius); }

/* ---------- sidebar ---------- */
.widget { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; }
.widget-title { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--brand); }
.popular-list { list-style: none; margin: 0; padding: 0; counter-reset: pop; }
.popular-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.popular-list li:last-child { border: 0; }
.popular-list a { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; color: var(--brand); font-weight: 600; font-size: .93rem; line-height: 1.35; }
.popular-list img, .popular-list .img-placeholder { width: 88px; aspect-ratio: 16 / 9; border-radius: 6px; object-fit: cover; }
.cat-list, .cat-list ul { list-style: none; margin: 0; padding: 0; }
.cat-list > li { border-bottom: 1px solid var(--border); }
.cat-list > li:last-child { border: 0; }
.cat-list a { display: flex; justify-content: space-between; padding: 8px 0; color: var(--text); }
.cat-list a span { color: var(--muted); font-size: .85rem; background: var(--surface); padding: 0 8px; border-radius: 10px; }
.cat-list ul { padding-left: 14px; }
.cat-list ul a { padding: 5px 0; color: var(--muted); font-size: .93rem; }

/* ---------- ads ---------- */
.ad { margin: 24px 0; text-align: center; }
.ad-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #6b7a90; margin-bottom: 4px; }
.ad-sidebar { margin: 0 0 20px; }

/* ---------- breadcrumb / page head ---------- */
.breadcrumb ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .85rem; color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin: 0 6px 0 2px; color: #9aa6ba; }
.breadcrumb a { color: var(--muted); }
.page-head { margin-bottom: 22px; }
.page-desc { color: var(--muted); }
.author-card { display: flex; gap: 18px; align-items: flex-start; background: var(--surface); border-radius: var(--radius); padding: 18px; }
.author-card p { margin: 0 0 6px; }

/* ---------- single post ---------- */
.post-head { margin-bottom: 20px; }
.post-title { font-size: 1.9rem; margin: 10px 0 8px; }
@media (min-width: 700px) { .post-title { font-size: 2.4rem; } }
.post-summary { font-size: 1.12rem; color: var(--muted); }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: .88rem; color: var(--muted); }
.byline-author { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 600; }
.avatar { border-radius: 50%; object-fit: cover; flex: none; }
.avatar-initial { display: inline-flex; align-items: center; justify-content: center; width: var(--s, 40px); height: var(--s, 40px); background: var(--accent); color: #fff; font-weight: 700; font-size: calc(var(--s, 40px) * .45); }
.translation-link { margin: 10px 0 0; font-weight: 600; }
.post-hero { margin: 0 0 24px; }
/* The hero now has a srcset, and the 750px file is a 750x415 crop while the 1200px one is 1200x630.
   Without a fixed ratio the box would resize when the chosen file loaded, so pin it to the same
   750/415 the cards use and let object-fit do the cropping. Keeps CLS at 0 whichever file wins. */
.post-hero img { width: 100%; aspect-ratio: 750 / 415; object-fit: cover; border-radius: var(--radius); }
.post-body { font-size: 1.08rem; line-height: 1.8; max-width: 760px; }
body.lang-bn .post-body { font-size: 1.13rem; line-height: 1.95; }
.post-body img { border-radius: 8px; margin: 8px auto; }
.post-body img { max-width: 100%; height: auto; }
.post-body figure { margin: 26px 0; }
.post-body figure img { display: block; width: 100%; margin: 0; }
.post-body figcaption { margin-top: 8px; font-size: .9rem; line-height: 1.5; color: #5b6676; }
@media (prefers-color-scheme: dark) { .post-body figcaption { color: #98a4b8; } }
.post-body h2 { margin-top: 1.6em; font-size: 1.5rem; }
.post-body h3 { margin-top: 1.4em; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; color: var(--muted); }
.post-body pre { background: #0f172a; color: #e2e8f0; padding: 16px; border-radius: 8px; overflow: auto; font-size: .9rem; }
.post-body code { background: var(--surface); padding: 2px 5px; border-radius: 4px; font-size: .92em; }
.post-body pre code { background: none; padding: 0; }
.post-body table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: .95rem; }
.post-body td, .post-body th { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.post-body iframe { max-width: 100%; }
.post-source { font-size: .9rem; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 10px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 18px 0; font-size: .9rem; }
.post-tags span { color: var(--muted); }
.post-tags a { background: var(--surface); border: 1px solid var(--border); padding: 3px 10px; border-radius: 20px; color: var(--text); }
.post-tags a:hover { background: var(--accent-soft); text-decoration: none; }
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 26px; font-size: .9rem; }
.share span { color: var(--muted); }
.share a, .share button { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: var(--brand); font: inherit; font-size: .88rem; cursor: pointer; }
.share a:hover, .share button:hover { background: var(--surface); text-decoration: none; }
.author-box { display: flex; gap: 18px; background: var(--surface); border-radius: var(--radius); padding: 20px; margin: 26px 0; }
.author-box-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0; }
.author-box-name { font-size: 1.15rem; margin: 2px 0 6px; }
.author-links a { margin-right: 10px; font-size: .9rem; }
.related { margin-top: 32px; }

/* ---------- forms / contact ---------- */
.contact-form { max-width: 640px; margin-top: 28px; background: var(--surface); padding: 22px; border-radius: var(--radius); }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .92rem; }
.form-row input, .form-row textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff; }
.form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.hp { position: absolute; left: -9999px; }
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.alert-ok { background: #ecfdf5; color: var(--ok); border: 1px solid #a7f3d0; }
.alert-err { background: #fef2f2; color: var(--err); border: 1px solid #fecaca; }

/* ---------- pagination ---------- */
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; font-weight: 600; }
.pagination a { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.page-info { color: var(--muted); font-weight: 400; font-size: .9rem; margin: 0 auto; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 40px 0; }
.notfound-code { font-size: 5rem; font-weight: 800; color: var(--border); margin: 0; line-height: 1; }
.notfound .search-form { max-width: 420px; margin: 20px auto; }

/* ---------- footer ---------- */
.site-footer { background: var(--brand); color: #c8d1e0; margin-top: 40px; font-size: .93rem; }
.site-footer a { color: #e6ebf3; }
.footer-grid { display: grid; gap: 28px; padding: 40px 16px 24px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-about img { height: 40px; width: auto; background: #fff; padding: 6px 10px; border-radius: 8px; margin-bottom: 14px; }
.footer-contact { color: #98a4b8; }
.footer-altname { color: #98a4b8; font-size: .9rem; margin: 2px 0 6px; }
.footer-title { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 6px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 16px; border-top: 1px solid rgba(255, 255, 255, .12); color: #98a4b8; font-size: .85rem; }
.footer-bottom p { margin: 0; }

/* Numbered pagination window — deep archive pages need a crawlable link, not just "next". */
.page-nums { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; margin: 0 auto; font-weight: 500; }
.page-nums a, .page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: .92rem; }
.page-nums a:hover { background: #f1f5f9; }
.page-num.is-current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.page-gap { padding: 0 2px; color: var(--muted); }
@media (max-width: 560px) { .pagination { flex-wrap: wrap; } .page-nums { order: 3; width: 100%; margin-top: 10px; } }

/* A tag used by fewer than three posts is not linked: its page is noindex and would be a dead end. */
.post-tags .tag-plain { color: var(--muted); }