/* ============================================================
   Category Post Manager — Frontend Styles
   Color Theme: Light Blue (Nagorik BD sky palette)
   --blue-sky:#c8dcf5  --blue-pale:#ddeeff  --blue-mid:#2563a8
   --blue-deep:#1a3a6b  --green-pale:#e8f5ee
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Tiro+Bangla:ital@0;1&family=Noto+Sans+Bengali:wght@400;600;700&display=swap');

:root {
  --cpm-accent:        #2563a8;       /* blue-mid — primary action  */
  --cpm-accent-hover:  #1a3a6b;       /* blue-deep — hover          */
  --cpm-dark:          #1a3a6b;       /* blue-deep — headings       */
  --cpm-gray:          #4a4a4a;
  --cpm-light:         #ddeeff;       /* blue-pale — hover bg       */
  --cpm-pale:          #e8f4ff;       /* very light blue bg         */
  --cpm-sky:           #c8dcf5;       /* blue-sky — borders, nums   */
  --cpm-border:        #a8c8ef;       /* blue-tinted border         */
  --cpm-gradient-btn:  linear-gradient(135deg, #2563a8, #1a3a6b);
  --cpm-gradient-hero: linear-gradient(160deg, #1a3a6b 0%, #2563a8 55%, #5b9bd5 100%);
  --cpm-gradient-overlay: linear-gradient(to top, rgba(26,58,107,.88) 0%, rgba(37,99,168,.32) 55%, transparent 100%);
  --cpm-shadow:        0 4px 24px rgba(26,58,107,0.12);
  --cpm-shadow-hover:  0 8px 32px rgba(26,58,107,0.22);
  --cpm-radius:        16px;
  --cpm-radius-sm:     10px;
  --cpm-radius-btn:    12px;
  --cpm-font-bn: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
  --cpm-font-en: 'Tiro Bangla', 'Noto Serif Bengali', Georgia, serif;
}

/* ── Section ─────────────────────────────────────────────── */
.cpm-section { font-family:var(--cpm-font-bn); max-width:960px; margin:2.5rem auto; padding:0 1rem; }

.cpm-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; border-bottom:2px solid var(--cpm-sky); padding-bottom:.75rem; }

.cpm-heading { display:flex; align-items:center; gap:.6rem; font-size:1.35rem; font-weight:700; color:var(--cpm-dark); font-family:var(--cpm-font-en); margin:0; }

.cpm-heading-bar { display:inline-block; width:4px; height:1.2em; background:linear-gradient(to bottom,#2563a8,#1a3a6b); border-radius:2px; flex-shrink:0; }

.cpm-view-all { font-size:.85rem; font-weight:600; color:var(--cpm-accent); text-decoration:none; letter-spacing:.02em; transition:opacity .2s; }
.cpm-view-all:hover { opacity:.7; color:var(--cpm-accent); }

/* ── Featured ────────────────────────────────────────────── */
.cpm-featured { margin-bottom:1.5rem; }

.cpm-featured-link { display:block; text-decoration:none; border-radius:var(--cpm-radius); overflow:hidden; box-shadow:var(--cpm-shadow); transition:box-shadow .22s; }
.cpm-featured-link:hover { box-shadow:var(--cpm-shadow-hover); }

.cpm-featured-image { position:relative; width:100%; padding-top:50%; background-size:cover; background-position:center; background-color:#c8dcf5; background-image:var(--cpm-gradient-hero); }

.cpm-no-image { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:.9rem; }

.cpm-featured-overlay { position:absolute; inset:0; background:var(--cpm-gradient-overlay); display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem 1.75rem; }

.cpm-cat-label { display:inline-block; background:var(--cpm-accent); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.2em .65em; border-radius:4px; margin-bottom:.65rem; width:fit-content; }

.cpm-featured-title { color:#fff; font-size:clamp(1.1rem,2.5vw,1.7rem); font-weight:700; line-height:1.3; margin:0 0 .6rem; font-family:var(--cpm-font-en); }

.cpm-featured-meta { display:flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.82); font-size:.82rem; }

.cpm-sep { opacity:.45; }

.cpm-featured-excerpt { margin:.9rem 0 0; color:var(--cpm-gray); font-size:.92rem; line-height:1.6; }

/* ── Post list ───────────────────────────────────────────── */
.cpm-post-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }

.cpm-list-item { display:flex; align-items:center; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--cpm-sky); transition:background .15s,padding .15s,margin .15s; }
.cpm-list-item:last-child { border-bottom:none; }
.cpm-list-item:hover { background:var(--cpm-light); margin:0 -.75rem; padding-left:.75rem; padding-right:.75rem; border-radius:var(--cpm-radius-sm); }

.cpm-list-num { font-size:1.4rem; font-weight:800; color:var(--cpm-sky); line-height:1; min-width:2.2rem; text-align:right; font-variant-numeric:tabular-nums; flex-shrink:0; }

.cpm-list-thumb-link { flex-shrink:0; }
.cpm-list-thumb { width:80px; height:60px; object-fit:cover; border-radius:var(--cpm-radius-sm); display:block; }

.cpm-list-info { flex:1; min-width:0; }

.cpm-list-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.97rem; font-weight:600; color:var(--cpm-dark); text-decoration:none; line-height:1.4; margin-bottom:.3rem; font-family:var(--cpm-font-en); transition:color .2s; }
.cpm-list-title:hover { color:var(--cpm-accent); }

.cpm-list-meta { display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--cpm-gray); flex-wrap:wrap; }

.cpm-list-excerpt { font-size:.83rem; color:var(--cpm-gray); line-height:1.55; margin:.4rem 0 .55rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.cpm-read-more { display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:700; color:var(--cpm-accent); text-decoration:none; letter-spacing:.03em; transition:gap .18s,opacity .18s; }
.cpm-read-more:hover { gap:.55rem; opacity:.8; color:var(--cpm-accent); }
.cpm-read-more svg { transition:transform .18s; }
.cpm-read-more:hover svg { transform:translateX(3px); }

/* ── View More button ────────────────────────────────────── */
.cpm-view-more-wrap { display:flex; justify-content:center; padding:1.5rem 0 .5rem; }

.cpm-view-more-btn { display:inline-flex; align-items:center; gap:.6rem; background:var(--cpm-gradient-btn); color:#fff; text-decoration:none; font-size:.88rem; font-weight:700; letter-spacing:.04em; padding:.75rem 2rem; border-radius:var(--cpm-radius-btn); transition:transform .22s,box-shadow .22s,opacity .22s; box-shadow:0 4px 14px rgba(37,99,168,.28); }
.cpm-view-more-btn:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(26,58,107,.36); opacity:.92; color:#fff; text-decoration:none; }
.cpm-view-more-btn svg { transition:transform .2s; }
.cpm-view-more-btn:hover svg { transform:translateX(4px); }

/* ═══════════════════════════════════════════════════════════
   ARCHIVE PAGE
═══════════════════════════════════════════════════════════ */
.cpm-archive { max-width:1100px; margin:2rem auto; padding:0 1rem; font-family:var(--cpm-font-bn); }

.cpm-arc-header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:1.25rem; margin-bottom:1.75rem; padding-bottom:1.25rem; border-bottom:2px solid var(--cpm-sky); }

.cpm-arc-title-wrap { display:flex; align-items:center; gap:.75rem; }

.cpm-arc-bar { display:inline-block; width:5px; height:2.8rem; background:linear-gradient(to bottom,#2563a8,#1a3a6b); border-radius:3px; flex-shrink:0; }

.cpm-arc-title { font-size:1.8rem; font-weight:800; color:var(--cpm-dark); font-family:var(--cpm-font-en); margin:0 0 .15rem; line-height:1.1; }
.cpm-arc-count { font-size:.82rem; color:var(--cpm-gray); margin:0; }

.cpm-arc-controls { display:flex; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; }

.cpm-ctrl-label { display:block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cpm-gray); margin-bottom:.4rem; }

/* Order tabs */
.cpm-order-tabs { display:flex; gap:.3rem; background:var(--cpm-pale); border:1px solid var(--cpm-sky); border-radius:var(--cpm-radius-sm); padding:3px; }

.cpm-order-tab { font-size:.78rem; font-weight:600; color:var(--cpm-gray); text-decoration:none; padding:.35rem .75rem; border-radius:7px; transition:all .18s; white-space:nowrap; }
.cpm-order-tab.active,.cpm-order-tab:hover { background:#fff; color:var(--cpm-accent); box-shadow:0 1px 4px rgba(26,58,107,.12); text-decoration:none; }

/* View toggle */
.cpm-toggle-btns { display:flex; gap:.3rem; background:var(--cpm-pale); border:1px solid var(--cpm-sky); border-radius:var(--cpm-radius-sm); padding:3px; }

.cpm-toggle-btn { background:none; border:none; cursor:pointer; padding:.4rem .55rem; color:var(--cpm-gray); border-radius:7px; display:flex; align-items:center; transition:all .18s; line-height:1; }
.cpm-toggle-btn.active,.cpm-toggle-btn:hover { background:#fff; color:var(--cpm-accent); box-shadow:0 1px 4px rgba(26,58,107,.12); }

/* Grid */
.cpm-arc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }

.cpm-grid-card { background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border:1px solid var(--cpm-sky); border-radius:var(--cpm-radius); overflow:hidden; box-shadow:var(--cpm-shadow); transition:transform .22s,box-shadow .22s; }
.cpm-grid-card:hover { transform:translateY(-5px); box-shadow:var(--cpm-shadow-hover); }

.cpm-grid-card-img { position:relative; padding-top:58%; background-size:cover; background-position:center; background-color:#c8dcf5; background-image:var(--cpm-gradient-hero); }
.cpm-grid-no-img { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:.8rem; }

.cpm-grid-cat-badge { position:absolute; top:.6rem; left:.6rem; background:var(--cpm-accent); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:.2em .6em; border-radius:4px; }

.cpm-grid-card-body { padding:1rem 1.1rem 1.2rem; }

.cpm-grid-card-title { font-size:.97rem; font-weight:700; line-height:1.4; margin:0 0 .5rem; font-family:var(--cpm-font-en); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cpm-grid-card-title a { color:var(--cpm-dark); text-decoration:none; transition:color .18s; }
.cpm-grid-card-title a:hover { color:var(--cpm-accent); }

.cpm-grid-card-excerpt { font-size:.83rem; color:var(--cpm-gray); line-height:1.55; margin:0 0 .75rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cpm-grid-card-meta { font-size:.75rem; color:#9ca3af; display:flex; align-items:center; gap:.35rem; }

/* List */
.cpm-arc-list { display:flex; flex-direction:column; }

.cpm-list-row { display:flex; align-items:flex-start; gap:1.1rem; padding:1.1rem 0; border-bottom:1px solid var(--cpm-sky); transition:background .15s,padding .15s,margin .15s; }
.cpm-list-row:last-child { border-bottom:none; }
.cpm-list-row:hover { background:var(--cpm-light); margin:0 -.75rem; padding-left:.75rem; padding-right:.75rem; border-radius:var(--cpm-radius-sm); }

.cpm-list-row-num { font-size:1.5rem; font-weight:800; color:var(--cpm-sky); min-width:2.4rem; text-align:right; line-height:1; flex-shrink:0; padding-top:.15rem; }
.cpm-list-row-img { width:110px; height:78px; object-fit:cover; border-radius:var(--cpm-radius-sm); display:block; flex-shrink:0; }
.cpm-list-row-body { flex:1; min-width:0; }
.cpm-list-row-cat { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cpm-accent); margin-bottom:.3rem; }
.cpm-list-row-title { font-size:1.02rem; font-weight:700; line-height:1.35; margin:0 0 .4rem; font-family:var(--cpm-font-en); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cpm-list-row-title a { color:var(--cpm-dark); text-decoration:none; transition:color .18s; }
.cpm-list-row-title a:hover { color:var(--cpm-accent); }
.cpm-list-row-excerpt { font-size:.84rem; color:var(--cpm-gray); line-height:1.55; margin:0 0 .5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cpm-list-row-meta { font-size:.76rem; color:#9ca3af; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }

/* Load More */
.cpm-load-more-wrap { padding:2.5rem 0 1rem; display:flex; flex-direction:column; align-items:center; gap:1rem; }

.cpm-load-more-btn { display:flex; flex-direction:column; align-items:center; gap:.2rem; background:#fff; border:2px solid var(--cpm-accent); color:var(--cpm-accent); font-family:var(--cpm-font-bn); font-size:.9rem; font-weight:700; letter-spacing:.04em; padding:.8rem 2.5rem; border-radius:50px; cursor:pointer; transition:all .2s; }
.cpm-load-more-btn:hover { background:var(--cpm-gradient-btn); color:#fff; transform:translateY(-2px); box-shadow:0 6px 18px rgba(37,99,168,.30); border-color:transparent; }
.cpm-load-more-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.cpm-lm-text { font-size:.9rem; }
.cpm-lm-count { font-size:.72rem; font-weight:500; opacity:.6; }

.cpm-lm-progress { width:200px; height:4px; background:var(--cpm-sky); border-radius:2px; overflow:hidden; }
.cpm-lm-bar { height:100%; background:linear-gradient(to right,#2563a8,#1a3a6b); border-radius:2px; transition:width .4s ease; }

/* Skeleton */
@keyframes cpm-shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
.cpm-skeleton { background:linear-gradient(90deg,#ddeeff 25%,#c8dcf5 50%,#ddeeff 75%); background-size:600px 100%; animation:cpm-shimmer 1.4s infinite linear; border-radius:6px; }

.cpm-arc-posts { transition:opacity .25s; }
.cpm-arc-posts.switching { opacity:0; pointer-events:none; }

/* Responsive */
@media(max-width:768px){ .cpm-arc-header{flex-direction:column} .cpm-arc-controls{flex-direction:column;align-items:flex-start} .cpm-arc-grid{grid-template-columns:repeat(2,1fr);gap:1rem} .cpm-list-row-img{width:85px;height:62px} }
@media(max-width:480px){ .cpm-arc-grid{grid-template-columns:1fr} .cpm-arc-title{font-size:1.4rem} .cpm-order-tabs{flex-wrap:wrap} }
@media(max-width:600px){ .cpm-featured-overlay{padding:1rem 1.1rem} .cpm-featured-title{font-size:1.05rem} .cpm-list-thumb{width:64px;height:48px} .cpm-list-num{font-size:1.1rem;min-width:1.8rem} }

.cpm-no-posts,.cpm-error { color:var(--cpm-gray); font-size:.9rem; padding:1rem 0; }
.cpm-error { color:#c0392b; }