/* =========================================
   BASE & VARIABLES
   ========================================= */
:root{
  --site-primary:#12628d;
  --site-on-primary:#fff;
  --site-secondary:#e8f3f8;
  --site-on-secondary:#173b50;
  --site-background:#f4f7f9;
  --site-on-background:#182b36;
  --surface:#fff;
  --surface-muted:#f7fafc;
  --text-muted:#627581;
  --border:#dbe4e9;
  --shadow:0 2px 10px rgba(19,54,73,.06)
}
html,body{background:var(--site-background)}
body{color:var(--site-on-background)}
h1,h2,h3,p{margin-top:0}
select{font:inherit}
.page-wrap{max-width:1260px;margin:auto;padding:26px 10px 38px}

/* =========================================
   BREADCRUMBS & INTRO
   ========================================= */
.breadcrumb{color:var(--text-muted);font-size:13px;margin-bottom:14px}
.breadcrumb a{color:var(--site-primary)}
.page-intro{margin-bottom:18px}
.page-intro h1{font-size:30px;line-height:1.2;font-weight:800;letter-spacing:-.3px;margin-bottom:8px;color: #0f172a;}
.page-intro p{color:var(--text-muted);margin-bottom:0;max-width:750px;font-size:14px}

/* =========================================
   ADS
   ========================================= */
.top-ad{min-height:90px;margin:18px 0 25px}
.ad-slot{border:1px dashed #b6c7d0;background:#f0f4f6;color:var(--text-muted);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;gap:2px}
.ad-970{max-width:970px;min-height:90px;margin-inline:auto}
.inline-ad{grid-column:1/-1;min-height:110px}
.sidebar-ad{min-height:250px}
.bottom-ad{margin-top:28px;min-height:100px}
.grid-ad{grid-column:1/-1;background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:12px;display:flex;align-items:center;justify-content:center;height:120px;color:#94a3b8;font-size:14px;font-weight:600;margin:8px 0}

/* =========================================
   MAIN LIST VIEW LAYOUT
   ========================================= */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}
.dtoolbar{display:flex;gap:10px;margin-bottom:16px}
.search{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--border);border-radius:8px;color:var(--site-on-background);background:var(--surface);outline-offset:2px}
.category-select{max-width:190px;border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--surface);color:var(--site-on-background)}
.listing-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.paper-card{min-width:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:17px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.paper-card h2{font-size:19px;line-height:1.35;font-weight:800;margin:0;color:var(--site-primary)}
.category-tag{display:inline-flex;width:fit-content;background:var(--site-secondary);color:var(--site-on-secondary);border-radius:4px;padding:3px 8px;font-size:11px;font-weight:600}
.paper-body{display:flex;gap:13px;align-items:flex-start}
.logo-box{flex:0 0 82px;width:82px;height:82px;border:1px solid var(--border);border-radius:7px;display:grid;place-items:center;background:var(--surface-muted);overflow:hidden}
.logo-box img{max-width:70px;max-height:70px;width:auto;height:auto;object-fit:contain}
.logo-box.noimg{background:var(--surface-muted)}
.paper-description{margin:0;font-size:13px;color:var(--text-muted);line-height:1.6}
.paper-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:3px;font-size:12px;font-weight:600;color:var(--site-primary)}
.paper-links a:hover{text-decoration:underline}

/* =========================================
   SIDEBAR WIDGETS
   ========================================= */
.sidebar{display:grid;gap:18px}
.widget{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.widget-title{background:var(--site-primary);color:#fff;padding:12px 15px;font-size:16px;font-weight:800;margin:0}
.widget-body{padding:14px}
.category-list{list-style:none;display:grid;gap:3px}
.category-list a{display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:6px;padding:9px 8px}
.category-list a:hover,.category-list a.selected{background:var(--site-secondary);color:var(--site-on-secondary)}
.count{color:var(--text-muted);font-size:12px}
.recent-list{display:grid;gap:14px}
.recent-item{display:flex;align-items:flex-start;gap:10px}
.recent-item .logo-box{width:48px;height:48px;flex-basis:48px;border-radius:5px}
.recent-item .logo-box img{max-width:40px;max-height:40px}
.recent-name{display:block;font-size:13px;font-weight:600;line-height:1.35;margin-bottom:4px}
.recent-cat{display:block;color:var(--text-muted);font-size:11px}

/* =========================================
   PAGINATION
   ========================================= */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:25px}
.pg{min-width:38px;text-align:center;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--site-on-background);padding:8px 11px}
a.pg:hover{border-color:var(--site-primary)}
.pg.active{background:var(--site-primary);color:#fff;border-color:var(--site-primary)}
.pg.disabled{opacity:.45}
.empty{grid-column:1/-1;padding:30px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text-muted)}

/* ===== REFERENCE IMAGE STYLE GRID ===== */
.cat-grid {
    display: grid;
    /* স্ক্রিনে ৬টি কার্ড রাখার জন্য ১৮০ পিক্সেল */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}

.cat-card {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    text-align: center;
    transition: .2s;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
}

.cat-card:hover {
    border-color: #12628d;
    box-shadow: 0 4px 12px rgba(18,98,141,0.08);
}

/* লোগোর বক্স - অনেক বড় */
.cat-logo {
    width: 100%;
    height: 80px; /* লোগোর উচ্চতা */
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #cbd5e1; /* লোগো ও টেক্সটের মাঝে দাগ */
}

.cat-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* নামের বক্স */
.cat-name-bn {
    display: none; /* ছবিতে বাংলা নাম নেই, তাই হাইড করা হলো */
}

.cat-name-en {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.2;
    padding: 8px 4px; /* টেক্সটের চারপাশে প্যাডিং */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* মোবাইলের জন্য */
@media(max-width: 700px) {
    .cat-grid {
        grid-template-columns: repeat(2, 1fr); /* মোবাইলে ২টি */
        gap: 8px;
    }
    .cat-logo {
        height: 60px;
        padding: 6px;
    }
    .cat-name-en {
        font-size: 11px;
        padding: 6px 2px;
    }
}

/* =========================================
   SEO CONTENT BLOCK
   ========================================= */
.seo-block { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 32px; margin-top: 40px; }
.seo-block h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; color: #0f172a; }
.seo-block p { color: #475569; line-height: 1.7; font-size: 15px; margin-bottom: 16px; }

/* =========================================
   RESPONSIVE DESIGN
   ========================================= */
@media(max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr) 260px;gap:18px}
  .listing-list{grid-template-columns:1fr}
}
@media(max-width:680px){
  .page-wrap{padding:20px 10px 30px}
  .page-intro h1{font-size:25px}
  .layout{grid-template-columns:1fr}
  .dtoolbar{flex-direction:column}
  .category-select{max-width:none;width:100%}
  .top-ad{min-height:80px}
  .ad-970{min-height:80px}
  .sidebar-ad{min-height:180px}
}
@media(max-width:600px){
  .page-wrap{padding:20px 7px 30px}
}