:root { --red: #102068; --dark: #1a1a1a; }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Noto Serif Bengali', serif; background: #ffffff; color: var(--dark); }
a { color: #1a56c4; text-decoration: none; }
img, .ph { display: block; }
.headline { color: var(--dark); }
.story-title { color: var(--dark); }
.story-title:hover { color: var(--red); }
.wrap { max-width: 1280px; margin: 0 auto; }
.ph { background: #d8d2c4; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #8a8375; font-size: 12px; }

/* খবরের থাম্বনেইল ছবির উপর হোভার করলে হালকা জুম — img_or_placeholder() যেখানেই ব্যবহৃত হয়
   (হোমপেজ, ক্যাটাগরি পেজ, সাইডবার, "আরও খবর" গ্রিড) সব জায়গায় একই আচরণ। overflow:hidden
   র‍্যাপারেই রাখা হয়েছে যাতে জুম করার সময় ছবিটা তার নিজের বক্সের বাইরে গিয়ে পাশের টাইটেল/কার্ডের
   উপর দিয়ে না ছড়িয়ে পড়ে; border-radius মিলিয়ে রাখা হয়েছে .ph এর সাথে যাতে কোণাগুলো জুম করা অবস্থাতেও
   এক রকম গোলাকার দেখায়। */
.img-zoom { overflow: hidden; border-radius: 4px; }
.img-zoom img { transition: transform .35s ease; }
.img-zoom:hover img { transform: scale(1.06); }

/* স্ক্রিন-রিডার/সার্চ ইঞ্জিনের জন্য থাকবে কিন্তু ভিজ্যুয়ালি লুকানো (যেমন হোমপেজের SEO <h1>, যার জায়গায়
   ভিজ্যুয়ালি লোগোই মাস্টহেড হিসেবে কাজ করে — তাই ডিজাইন অপরিবর্তিত রেখে শুধু SEO/অ্যাক্সেসিবিলিটির জন্য যোগ করা) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ticker */
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* স্ক্রল-গতি: JS (assets/js/main.js initTicker) আসল প্রস্থ মেপে --ticker-duration বসায়, যাতে খবর কম/বেশি/লম্বা হলেও গতি একই থাকে।
   JS না চললে ফলব্যাক ৪৫ সেকেন্ড (আগে ছিল ২৮ সেকেন্ড, যা বেশি দ্রুত লাগত)। */
.ticker-track { display: flex; width: max-content; animation: ticker-scroll var(--ticker-duration, 45s) linear infinite; }
.ticker-track:hover { animation-play-state: paused; }

/* section header bar */
.sec-head { display: flex; align-items: stretch; background: #f2f2f2; border-radius: 2px; overflow: hidden; }
.sec-head .bar { width: 6px; background: var(--red); }
.sec-head .name { flex: 1; padding: 14px 16px; font-size: 19px; font-weight: 700; }
.sec-head .arrow { width: 50px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* grids */
.g-hero { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 28px; align-items: start; }
.g-main-side { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
.g-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.g-2-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.g-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.g-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.g-video-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.g-video-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.g-footer { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px; }
.g-trio-lead { display: flex; gap: 18px; }
.lead-img-fixed { width: 320px; flex-shrink: 0; }

.region-bar { background: #eef2fb; border: 1px solid #dde3f5; border-radius: 6px; padding: 14px 20px; display: flex; align-items: center; gap: 16px; }
.region-fields { flex: 1; display: flex; gap: 12px; flex-wrap: wrap; }
.region-field { flex: 1; min-width: 140px; background: #fff; border: 1px solid #d0d0d0; border-radius: 4px; height: 42px; padding: 0 14px; color: #555; font-size: 14px; font-family: inherit; cursor: pointer; }
.region-field:disabled { background: #f4f5f7; color: #aaa; cursor: not-allowed; }
.region-search-btn { background: #1a56c4; color: #fff; border: none; border-radius: 4px; height: 42px; padding: 0 26px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }
.region-search-btn:hover { background: #14479e; }

.list-item { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.list-item img.ph, .list-item .ph { width: 64px; height: 64px; flex-shrink: 0; font-size: 9px; }
.list-item:last-child { border-bottom: none; }

.nat-bottom-item { display: flex; gap: 10px; align-items: flex-start; }
.nat-bottom-item .ph, .nat-bottom-item img.ph { width: 56px; height: 56px; flex-shrink: 0; font-size: 9px; }

.tab-btn { flex: 1; text-align: center; padding: 14px 0; font-weight: 700; font-size: 14px; cursor: pointer; border: none; font-family: inherit; }
.tab-btn.active { background: var(--red); color: #fff; }
.tab-btn.inactive { background: #eeeeee; color: #555; font-weight: 600; }
.tab-panel { display: none; flex-direction: column; padding: 6px 16px; }
.tab-panel.show { display: flex; max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d5d5d5 transparent; }
.tab-panel.show::-webkit-scrollbar { width: 6px; }
.tab-panel.show::-webkit-scrollbar-track { background: transparent; }
.tab-panel.show::-webkit-scrollbar-thumb { background: #d5d5d5; border-radius: 3px; }
.tab-panel.show::-webkit-scrollbar-thumb:hover { background: #bbb; }

.video-thumb { width: 100%; background: #2a2a2a; border-radius: 4px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.video-thumb .play { border-radius: 50%; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; color: #141414; }
.video-thumb .cap { position: absolute; left: 0; right: 0; bottom: 0; background: var(--red); color: #fff; font-weight: 700; text-align: center; line-height: 1.4; }

.trio-link { display: block; font-size: 14px; font-weight: 500; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.trio-link:last-child { border-bottom: none; }

.list-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #ececec; }
.list-row .ph { width: 96px; height: 72px; flex-shrink: 0; font-size: 10px; }
.list-row:last-child { border-bottom: none; }

.breadcrumb { font-size: 13px; color: #777; }
.breadcrumb a { color: #777; }
.breadcrumb a:hover { color: var(--red); }

/* নেভ বার — ক্যাটাগরি লিংক, হ্যামবার্গার বাটন, "সব বিভাগ" ড্রপডাউন প্যানেল */
.nav-link { color: #fff; font-size: 18px; white-space: nowrap; text-decoration: none; padding: 6px 8px; border-radius: 4px; opacity: 0.95; transition: background .15s ease, opacity .15s ease; }
.nav-link:hover { opacity: 1; background: rgba(255,255,255,0.18); }
.nav-link.active { font-weight: 700; opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.nav-hamburger { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; display: flex; align-items: center; flex-shrink: 0; margin-left: 16px; border-radius: 4px; font-family: inherit; transition: background .15s ease; }
.nav-hamburger:hover { background: rgba(255,255,255,0.18); }

/* মাস্টহেডের হ্যামবার্গার — শুধু মোবাইলে দেখা যায় (নিচের মোবাইল মিডিয়া-কোয়েরি দেখুন), "সব বিভাগ" ড্রয়ার খোলে */
.masthead-hamburger { display: none; background: none; border: none; color: #333; cursor: pointer; padding: 4px; align-items: center; border-radius: 4px; font-family: inherit; transition: background .15s ease; }
.masthead-hamburger:hover { background: rgba(0,0,0,0.06); }

/* মাস্টহেড — স্ক্রল করলে উপরে আটকে থাকে (sticky); নেভবার+টিকার এর নিচে চলে গেলেও লোগো/সার্চ/সোশ্যাল সবসময় দেখা যায়।
   z-index 60 ইচ্ছাকৃতভাবে "সব বিভাগ" ড্রয়ারের (100/101) চেয়ে কম রাখা হয়েছে, যাতে ড্রয়ার খুললে এটার উপরেই দেখায়। */
.site-masthead { position: sticky; top: 0; z-index: 60; transition: box-shadow .2s ease; }
.site-masthead.is-stuck { box-shadow: 0 2px 10px rgba(0,0,0,0.12); }

/* "সব বিভাগ" — ডান দিক থেকে স্লাইড-ইন ড্রয়ার + ডার্ক ওভারলে */
.cat-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; }
.cat-drawer-overlay.show { display: block; }
.cat-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 340px); background: #fff; z-index: 101; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; box-shadow: -4px 0 16px rgba(0,0,0,0.2); }
.cat-drawer.show { transform: translateX(0); }
.cat-drawer-head { background: var(--red); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font-size: 18px; font-weight: 700; position: sticky; top: 0; }
.cat-drawer-close { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; display: flex; font-family: inherit; }
.cat-drawer-body { display: flex; flex-direction: column; padding: 6px 0; }
.cat-drawer-link { color: #333; font-size: 15px; font-weight: 600; padding: 13px 20px; border-bottom: 1px solid #f0f0f0; }
.cat-drawer-link:hover { background: #f7f7f7; color: var(--red); }

/* রিপোর্টার বাইলাইন + প্রোফাইল */
.byline-chip { display: inline-flex; align-items: center; gap: 8px; color: #333; font-weight: 600; }
.byline-chip:hover { color: var(--red); }
.byline-chip .ph { flex-shrink: 0; background: #d8d2c4; }
.reporter-profile-card { display: flex; gap: 24px; align-items: center; padding: 24px; border: 1px solid #e6e6e6; border-radius: 8px; background: #fafafa; }
.reporter-profile-card .ph { flex-shrink: 0; background: #d8d2c4; }

/* আর্টিকেল মেটা কার্ড (বাইলাইন + প্রকাশের সময় + শেয়ার) */
.article-meta-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #f8f8f8; border: 1px solid #ececec; border-radius: 8px; padding: 14px 18px; flex-wrap: wrap; }
.ameta-byline { display: flex; align-items: center; gap: 12px; }
.ameta-avatar-link { flex-shrink: 0; display: block; }
.ameta-avatar-link .ph { background: #d8d2c4; }
.ameta-name { font-size: 15px; font-weight: 700; color: var(--dark); }
a.ameta-name:hover { color: var(--red); }
.ameta-date { font-size: 12.5px; color: #808080; margin-top: 3px; }
.ameta-share { display: flex; align-items: center; gap: 14px; }
.share-count-box { display: flex; flex-direction: column; align-items: center; line-height: 1.2; padding-right: 14px; border-right: 1px solid #e2e2e2; }
.share-count-box .num { font-size: 19px; font-weight: 700; color: var(--dark); }
.share-count-box .label { font-size: 11px; color: #999; }
.share-icons { display: flex; gap: 8px; }
.share-btn { width: 34px; height: 34px; border-radius: 7px; border: none; background: #ececed; color: #444; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; padding: 0; font-family: inherit; }
.share-btn:hover { background: #dedfe1; color: var(--dark); }
.share-btn.copied::after { content: 'কপি হয়েছে ✓'; position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background: var(--dark); color: #fff; font-size: 11px; padding: 4px 9px; border-radius: 4px; white-space: nowrap; }

/* আর্টিকেল ইনফিনিট-স্ক্রল — একের পর এক অটো-লোড হওয়া খবর-রো (খবর+নিজের সাইডবার) এর মাঝে ডিভাইডার + লোডিং স্পিনার */
.article-row + .article-row { margin-top: 36px; padding-top: 28px; border-top: 3px solid #e0e0e0; }
.autoload-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid #ddd; border-top-color: var(--red); border-radius: 50%; vertical-align: middle; margin-right: 8px; animation: autoload-spin .7s linear infinite; }
.autoload-loading { color: #999; font-size: 14px; vertical-align: middle; }
@keyframes autoload-spin { to { transform: rotate(360deg); } }

.cat-title { display: flex; align-items: center; gap: 12px; }
.cat-title .accent { width: 6px; height: 28px; background: var(--red); border-radius: 2px; }
.cat-title h1 { font-size: 24px; margin: 0; }

.btn-outline { display: inline-block; border: 1px solid var(--red); color: var(--red); padding: 10px 28px; border-radius: 3px; font-weight: 700; font-size: 14px; }
.btn-outline:hover { background: var(--red); color: #fff; }

footer a { color: #999; }

/* ===================== বিজ্ঞাপন স্লট (অ্যাডমিন → "📢 বিজ্ঞাপন স্লট") =====================
   includes/functions.php এর ad_slot_html()/render_ad_slot() এই কন্টেইনারটা বানায়:
     <div class="ad-slot ad-slot-{স্লট} ad-fill|ad-native ad-type-image|code no-print">
   .ad-fill   — ছবি কলামের পুরো প্রস্থ জুড়ে ছড়ায় (রেফারেন্স নিউজ-সাইটের ব্যানারের মতো)
   .ad-native — ছবি নিজের সাইজে (জায়গার চেয়ে বড় হলে ছোট হয়ে) মাঝখানে বসে
   স্লট খালি/বন্ধ থাকলে কিছুই রেন্ডার হয় না, তাই "ফাঁকা বক্স" ধরে রাখার কোনো min-height এখানে নেই।
   contain: inline-size — ভেতরের কোডের (যেমন ভুল মাপের ৭২৮px iframe) প্রস্থ যাতে গ্রিড/ফ্লেক্স কলাম ফুলিয়ে
   পুরো লেআউট ভেঙে না দেয়; প্রস্থ আসে শুধু width:100% (+ অ্যাডমিনের "সর্বোচ্চ প্রস্থ") থেকে, overflow:hidden কেটে দেয়। */
.ad-slot { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; text-align: center; overflow: hidden; contain: inline-size; }
.ad-slot:empty { display: none; }
.ad-slot a, .ad-slot picture { display: block; }
.ad-slot img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ad-slot.ad-fill img { width: 100%; }

/* হেডার ব্যানার — body এর সরাসরি সন্তান (মেনু+টিকারের পর), তাই .wrap এর মাপ (সর্বোচ্চ ১২৮০px, দুই পাশে ২৪px) নিজেই মিলিয়ে নেওয়া */
.ad-slot-top_banner { width: calc(100% - 48px); max-width: 1232px; margin-top: 14px; margin-bottom: 0; }
/* হোমপেজের মাঝের ব্যানার — .wrap (flex-column, gap 30px) এর সন্তান, তাই নিজের মার্জিন লাগে না */
.ad-slot-in_feed { margin-top: 0; margin-bottom: 0; }
.ad-slot-article_top { margin-top: 0; margin-bottom: 20px; }
.ad-slot-in_article { margin-top: 22px; margin-bottom: 22px; }
/* সাইডবার — ডেস্কটপে ডান কলামের প্রস্থ (~৩০০–৪০০px) জুড়ে ছড়ায়; ট্যাবলেটে সাইডবার যখন পুরো-প্রস্থের এক-কলামে নেমে আসে
   তখন ৩০০×২৫০ এর মতো বর্গাকার বিজ্ঞাপন ৭২০px পর্যন্ত বিশাল/ঝাপসা হয়ে না যায়, তাই সর্বোচ্চ ৪০০px (মাঝখানে) */
.ad-slot-sidebar { max-width: 400px; margin-top: 0; margin-bottom: 0; }
/* ডান-কলামের উইজেটের (সর্বশেষ/সর্বাধিক পঠিত) র‍্যাপার — বিজ্ঞাপন+উইজেট একসাথে গ্রিডের একটাই ঘরে থাকে */
.side-widget-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* স্টিকি বটম ব্যানার — স্ক্রল করলেও স্ক্রিনের নিচে লেগে থাকে (includes/footer.php), ✕ বাটনে বন্ধ করা যায়
   (assets/js/main.js: closeStickyBottomAd())। z-index ৯০ — মাস্টহেডের (৬০) উপরে, "সব বিভাগ" ড্রয়ারের (১০০/১০১)
   নিচে, যাতে ড্রয়ার খুললে এটা তার উপরে না আসে। ব্যানার দেখা গেলে body তে .has-sticky-ad ক্লাস বসে (main.js),
   যাতে ফুটারের শেষ লাইনটা ব্যানারের আড়ালে ঢাকা না পড়ে। */
.sticky-bottom-ad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: #fff; border-top: 1px solid #e0e0e0; box-shadow: 0 -2px 12px rgba(0,0,0,0.12); padding: 8px 44px 8px 12px; }
.sticky-bottom-ad-inner { width: 100%; max-width: 728px; }
.sticky-bottom-ad-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: none; background: #eee; color: #555; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; }
.sticky-bottom-ad-close:hover { background: #ddd; }
@media screen { body.has-sticky-ad { padding-bottom: var(--sticky-ad-h, 100px); } }
@media (max-width: 720px) {
  .sticky-bottom-ad { padding: 6px 40px 6px 8px; }
}
@media (max-width: 560px) {
  .ad-slot-in_article { margin-top: 16px; margin-bottom: 16px; }
}

/* responsive */
/* ব্রেকপয়েন্ট ৯০০px: মোবাইল Chrome এ "Desktop site" দিলে পেজের প্রস্থ ঠিক ৯৮০px ধরা হয় — আগে এখানে
   max-width: 980px থাকায় ওই মোডেও মোবাইল/এক-কলাম লেআউট চালু হয়ে অতি-চ্যাপ্টা ছবি আসত। এখন ৯০১px থেকে
   ডেস্কটপ লেআউট (৩-কলাম হিরো, সাইডবার ইত্যাদি) থাকে; ৯০০px ও তার নিচে ট্যাবলেট/মোবাইল লেআউট। */
@media (max-width: 900px) {
  .g-hero { grid-template-columns: 1fr; }
  .g-main-side { grid-template-columns: 1fr; }
  .g-2 { grid-template-columns: 1fr; }
  .g-2-inner { grid-template-columns: 1fr; }
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-video-2 { grid-template-columns: 1fr; }
  .g-video-3 { grid-template-columns: 1fr; }
  .g-footer { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-trio-lead { flex-direction: column; }
  .lead-img-fixed { width: 100%; height: 200px; }
  .masthead-row { grid-template-columns: 1fr !important; text-align: center; }
  .masthead-row > div { justify-content: center !important; }
  .cat-content { grid-template-columns: 1fr !important; }
  .reporter-profile-card { flex-direction: column; text-align: center; }
  .ameta-share { width: 100%; justify-content: space-between; }
}
/* ট্যাবলেট/ছোট উইন্ডো (৫৬১–৯০০px): এক/দুই-কলামে পূর্ণ-প্রস্থ কার্ডের ছবির উচ্চতা ১৫০–৩২০px ফিক্সড থাকলে
   ৭০০–৯০০px চওড়া কার্ডে ছবি অতি-চ্যাপ্টা (৪:১–৫:১) দেখাত — তাই এই রেঞ্জে ছবির উচ্চতা প্রস্থ অনুযায়ী (১৬:৯)।
   ছোট থাম্বনেইল (৬৪px/৫৬px — প্রস্থ ১০০% নয়) অপরিবর্তিত; মোবাইলে (৫৬০px ও নিচে) আগের মতোই। */
@media (min-width: 561px) and (max-width: 900px) {
  .img-zoom[style*="width:100%"], .ph[style*="width:100%"] { height: auto !important; aspect-ratio: 16 / 9; max-height: 420px; }
  .g-trio-lead .img-zoom, .g-trio-lead .ph, .lead-img-fixed .img-zoom, .lead-img-fixed .ph { width: 100%; height: auto !important; aspect-ratio: 16 / 9; max-height: 420px; }
}
@media (max-width: 560px) {
  .g-3 { grid-template-columns: 1fr; }
  .g-4 { grid-template-columns: 1fr; }
  .g-footer { grid-template-columns: 1fr; }

  /* মাস্টহেড — মোবাইলে কমপ্যাক্ট এক-সারি লেআউট (রেফারেন্স সাইটের মতো):
     হ্যামবার্গার + লোগো + ENGLISH/সার্চ একই সারিতে; তারিখ ও সোশ্যাল আইকন লুকানো (জায়গা বাঁচাতে)।
     ৫৬০px এর উপরে (ট্যাবলেট) আগের মতোই ৩-সারির স্ট্যাক লেআউট থাকবে — অপরিবর্তিত। */
  .masthead-row { grid-template-columns: auto 1fr auto !important; gap: 8px !important; padding: 10px 14px !important; }
  .masthead-row > div { justify-content: flex-start !important; }
  .masthead-row > .masthead-actions { justify-content: flex-end !important; gap: 10px !important; }
  .masthead-date { display: none; }
  .masthead-hamburger { display: flex !important; }
  .masthead-social-icon { display: none !important; }
  /* নেভ-বারের হ্যামবার্গার এখন বাহুল্য (মাস্টহেডেরটাই একই কাজ করে) — ডুপ্লিকেট আইকন এড়াতে লুকানো */
  .nav-hamburger { display: none; }

  /* হিরো সেকশন — মোবাইলে "১টা বড় হিরো কার্ড, তার নিচে ছোট টেক্সট-লিস্ট" প্যাটার্ন (রেফারেন্স ডিজাইনের
     মতো)। ডেস্কটপ/ট্যাবলেটে (৫৬০px এর উপরে) আগের ৩-কলাম লেআউটই থাকবে, অপরিবর্তিত।
     hero-primary (মাঝের, সবচেয়ে গুরুত্বপূর্ণ খবর) markup এ left এর পরে থাকলেও order:-1 দিয়ে
     ভিজ্যুয়ালি সবার উপরে তোলা হয়েছে — বাকি ৪টা (left+right) স্বাভাবিক ক্রমেই তার নিচে একটানা লিস্ট
     হিসেবে দেখাবে, প্রতিটার ছবি ও সংক্ষিপ্ত বিবরণ লুকিয়ে শুধু হেডলাইন + পাতলা ডিভাইডার রেখে। */
  .g-hero { display: flex; flex-direction: column; }
  .hero-primary { order: -1; margin-bottom: 10px; }
  .hero-primary .img-zoom, .hero-primary .ph { height: 190px !important; }
  .hero-primary .headline { font-size: 19px !important; line-height: 1.4 !important; }
  .hero-primary-cta { display: none; }
  .hero-side { gap: 0 !important; }
  .hero-side-item { gap: 0 !important; padding: 13px 0; border-bottom: 1px solid #eee; }
  .hero-side-item .img-zoom, .hero-side-item .ph { display: none; }
  .hero-side-item .headline { font-size: 15px !important; font-weight: 600 !important; line-height: 1.5 !important; }
  .hero-side-excerpt { display: none; }

  /* "আপনার এলাকার খবর" — ছোট স্ক্রিনে লেবেল+৩টা সিলেক্ট+বাটন পাশাপাশি রাখলে জায়গায় কুলোয় না,
     তাই পুরোটা এক কলামে স্ট্যাক করে দেওয়া হচ্ছে, প্রতিটা ফিল্ড ও বাটন পূর্ণ প্রস্থ জুড়ে। */
  .region-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  .region-fields { flex-wrap: wrap; }
  .region-field { min-width: 0; flex-basis: 100%; }
  .region-search-btn { width: 100%; }
}

/* প্রিন্ট-অনলি এলিমেন্ট (যেমন প্রিন্ট হেডার/ফুটার) — স্ক্রিনে লুকানো, শুধু প্রিন্ট করলে দেখা যাবে */
.print-only { display: none; }

/* প্রিন্ট — "প্রিন্ট" বাটনে ক্লিক করলে (বা ব্রাউজারের প্রিন্ট দিয়ে) আর্টিকেলটা খবরের কাগজের
   কাটিং-এর মতো দেখাবে: চারপাশে বর্ডার-বক্স, উপরে তারিখ+লোগো, লাল হেডলাইন, লেখা ২-কলামে,
   নিচে সম্পাদক/ইমেইল — হেডার/নেভ/টিকার/সাইডবার/সাইট-ফুটার/শেয়ার-বাটন/"আরও খবর" বাদ */
@media print {
  .no-print { display: none !important; }
  .cat-content { display: block !important; }
  .article-meta-card { background: none !important; border: none !important; padding: 8px 0 !important; }
  body { color: #000; border: 2px solid var(--red); border-radius: 10px; padding: 18px 24px; }
  a { color: #000; }

  .print-only { display: block; }
  .print-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--red); padding-bottom: 10px; margin-bottom: 18px; }
  .print-date { font-size: 13px; color: #555; }
  .print-logo { height: 32px; width: auto; }

  .article-block h1.headline { color: var(--red) !important; text-align: center; font-size: 22px !important; }
  .ameta-name { color: var(--red) !important; }

  /* খবরের লেখা ২-কলামে (excerpt/মেটা-কার্ড একটাই কলামে, পূর্ণ প্রস্থে থাকবে) */
  .article-content { columns: 2; column-gap: 28px; column-rule: 1px solid #ddd; }

  .print-footer { border-top: 2px solid var(--red); margin-top: 22px; padding-top: 10px; text-align: center; font-size: 12px; color: #333; }
  .print-footer div { margin: 2px 0; }
}