/* ============================================================
   Category Post Manager v1.3.0 — Frontend CSS
   Style: Glassmorphism | Theme: Nagorik Bangladesh
   Astra + Elementor compatible
   ============================================================ */

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

/* ── CSS Variables ──────────────────────────────────────── */
:root {
  --cpm-accent:          #3b82f6;
  --cpm-accent-h:        #1d4ed8;
  --cpm-dark:            #0f172a;
  --cpm-muted:           #94a3b8;
  --cpm-font:            'Hind Siliguri','Noto Sans Bengali',sans-serif;
  --cpm-title-color:     #111827; /* Default: dark/black — overridden by inline style from settings */

  --cpm-glass:           rgba(255,255,255,0.10);
  --cpm-glass-h:         rgba(255,255,255,0.18);
  --cpm-glass-strong:    rgba(255,255,255,0.20);
  --cpm-glass-border:    rgba(255,255,255,0.22);
  --cpm-glass-border-h:  rgba(255,255,255,0.42);
  --cpm-blur:            blur(14px);
  --cpm-blur-sm:         blur(8px);

  --cpm-radius:          18px;
  --cpm-radius-sm:       10px;
  --cpm-radius-xs:       6px;

  --cpm-shadow:          0 4px 24px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.15);
  --cpm-shadow-h:        0 12px 40px rgba(15,23,42,.32), inset 0 1px 0 rgba(255,255,255,.22);
  --cpm-shadow-btn:      0 4px 16px rgba(59,130,246,.38);
  --cpm-shadow-btn-h:    0 8px 28px rgba(59,130,246,.55);

  --cpm-overlay:         linear-gradient(to top,rgba(15,23,42,.92) 0%,rgba(15,23,42,.45) 55%,transparent 100%);
  --cpm-bg:              linear-gradient(135deg,#0f172a 0%,#1a3a8a 55%,#0369a1 100%);
}

/* ── Resets ─────────────────────────────────────────────── */
.cpm-section *, .cpm-archive * { box-sizing: border-box; }
.cpm-section, .cpm-archive     { font-family: var(--cpm-font); }
.cpm-sep { color: rgba(255,255,255,.22); }

/* ══════════════════════════════════════════════════════════
   ASTRA / ELEMENTOR INTEGRATION
══════════════════════════════════════════════════════════ */

/* Elementor shortcode widget wrapper reset */
.elementor-widget-shortcode .cpm-section {
  margin: 0 !important;
  max-width: 100% !important;
}

/* Section with class "cpm-bg-section" gets the gradient bg */
.elementor-section.cpm-bg-section > .elementor-container {
  background: var(--cpm-bg) !important;
  border-radius: var(--cpm-radius);
  overflow: hidden;
  padding: 2rem 1.5rem;
}

/* Archive page full bg */
.cpm-archive-page-bg {
  background: var(--cpm-bg);
  border-radius: var(--cpm-radius);
  padding: 2rem 1.5rem;
}

/* Astra separate container reset */
.ast-separate-container .entry-content .cpm-section,
.ast-separate-container .entry-content .cpm-archive {
  box-shadow: none;
}

/* Astra typography override — prevent dark text on glass */
.cpm-card-title a,
.cpm-featured-title,
.cpm-heading,
.cpm-arc-title,
.cpm-side-title,
.cpm-list-row-title a { color: rgba(255,255,255,.92) !important; }

.cpm-card-excerpt, .cpm-card-date, .cpm-card-read,
.cpm-featured-meta, .cpm-side-meta, .cpm-list-row-meta,
.cpm-arc-count { color: rgba(255,255,255,.52) !important; }

/* Astra header always on top */
#masthead, .ast-fixed-header, .ast-above-header-wrap { z-index: 999 !important; }
.cpm-card, .cpm-section, .cpm-archive { z-index: 1; position: relative; }


/* ══════════════════════════════════════════════════════════
   SECTION WIDGET  [cpm_posts]
══════════════════════════════════════════════════════════ */
.cpm-section {
  max-width: 960px; margin: 2.5rem auto; padding: 1.5rem;
  background: var(--cpm-glass);
  backdrop-filter: var(--cpm-blur);
  -webkit-backdrop-filter: var(--cpm-blur);
  border: 1px solid var(--cpm-glass-border);
  border-radius: var(--cpm-radius);
  box-shadow: var(--cpm-shadow);
}

/* Header */
.cpm-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: .85rem;
  border-bottom: 1px solid var(--cpm-glass-border);
}
.cpm-heading {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.25rem; font-weight: 700; color: var(--cpm-title-color, #111827) !important; margin: 0;
  text-shadow: none;
}
.cpm-heading-bar {
  display: inline-block; width: 4px; height: 1.15em;
  background: linear-gradient(180deg,#60a5fa,#3b82f6);
  border-radius: 2px; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(96,165,250,.6);
}
.cpm-view-all {
  font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.78);
  text-decoration: none; transition: color .2s;
}
.cpm-view-all:hover { color: #fff; }

/* Featured */
.cpm-featured { margin-bottom: 1.25rem; }
.cpm-featured-link {
  display: block; text-decoration: none;
  border-radius: var(--cpm-radius); overflow: hidden;
  border: 1px solid var(--cpm-glass-border);
  box-shadow: var(--cpm-shadow);
  transition: box-shadow .25s, transform .25s;
}
.cpm-featured-link:hover { box-shadow: var(--cpm-shadow-h); transform: translateY(-3px); }

.cpm-featured-image {
  position: relative; width: 100%; padding-top: 48%;
  background-size: cover; background-position: center; background-color: #1e3a8a;
}
.cpm-no-image {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 3rem;
}
.cpm-featured-overlay {
  position: absolute; inset: 0; background: var(--cpm-overlay);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem 1.6rem;
}
.cpm-cat-label {
  display: inline-block;
  background: rgba(59,130,246,.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .25em .75em; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.25);
  margin-bottom: .6rem; width: fit-content;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.cpm-featured-title {
  color: #fff; font-size: clamp(1rem,2.5vw,1.6rem);
  font-weight: 700; line-height: 1.3; margin: 0 0 .55rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.cpm-featured-meta {
  display: flex; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.75); font-size: .78rem;
}
.cpm-featured-excerpt {
  margin: .85rem 0 0; color: rgba(255,255,255,.68);
  font-size: .9rem; line-height: 1.6;
}

/* Side list */
.cpm-sidelist { display: flex; flex-direction: column; }
.cpm-side-item {
  display: flex; align-items: center; gap: .9rem;
  padding: .8rem .6rem; margin-bottom: 2px;
  border-bottom: 1px solid var(--cpm-glass-border);
  border-radius: var(--cpm-radius-sm);
  transition: background .18s;
}
.cpm-side-item:last-child { border-bottom: none; }
.cpm-side-item:hover {
  background: var(--cpm-glass-h);
  backdrop-filter: var(--cpm-blur-sm); -webkit-backdrop-filter: var(--cpm-blur-sm);
}
.cpm-side-num {
  font-size: 1.5rem; font-weight: 800; color: rgba(96,165,250,.55);
  min-width: 2.2rem; text-align: right; line-height: 1; flex-shrink: 0;
}
.cpm-side-img { width: 76px; height: 56px; object-fit: cover; border-radius: var(--cpm-radius-sm); display: block; border: 1px solid var(--cpm-glass-border); }
.cpm-side-img-link { flex-shrink: 0; }
.cpm-side-info { flex: 1; min-width: 0; }
.cpm-side-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.88);
  text-decoration: none; line-height: 1.4; margin-bottom: .3rem; transition: color .18s;
}
.cpm-side-title:hover { color: #fff; }
.cpm-side-meta { display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: rgba(255,255,255,.48); }

/* View more */
.cpm-view-more-wrap { display: flex; justify-content: center; padding: 1.5rem 0 .25rem; }
.cpm-view-more-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: rgba(59,130,246,.72);
  backdrop-filter: var(--cpm-blur-sm); -webkit-backdrop-filter: var(--cpm-blur-sm);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; text-decoration: none;
  font-size: .86rem; font-weight: 700; letter-spacing: .03em;
  padding: .7rem 1.8rem; border-radius: 50px;
  transition: all .22s; box-shadow: var(--cpm-shadow-btn);
}
.cpm-view-more-btn:hover {
  background: rgba(59,130,246,.95); border-color: rgba(255,255,255,.48);
  transform: translateY(-2px); box-shadow: var(--cpm-shadow-btn-h); color: #fff;
}
.cpm-view-more-btn svg { transition: transform .2s; }
.cpm-view-more-btn:hover svg { transform: translateX(4px); }


/* ══════════════════════════════════════════════════════════
   ARCHIVE PAGE  [cpm_archive]
══════════════════════════════════════════════════════════ */
.cpm-archive { max-width: 1120px; margin: 2rem auto; padding: 1.5rem 1.25rem; }

.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: 1px solid var(--cpm-glass-border);
}
.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(180deg,#60a5fa,#3b82f6);
  border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 10px rgba(96,165,250,.5);
}
.cpm-arc-title { font-size: 1.75rem; font-weight: 800; color: var(--cpm-title-color, #111827) !important; margin: 0 0 .15rem; line-height: 1.1; text-shadow: none; }
.cpm-arc-count { font-size: .8rem; color: rgba(255,255,255,.48); margin: 0; }
.cpm-arc-controls { display: flex; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap; }
.cpm-ctrl-label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.48); margin-bottom: .4rem; }

/* Order tabs */
.cpm-order-tabs {
  display: flex; gap: .25rem;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--cpm-glass-border);
  border-radius: var(--cpm-radius-sm); padding: 3px;
  backdrop-filter: var(--cpm-blur-sm); -webkit-backdrop-filter: var(--cpm-blur-sm);
}
.cpm-order-tab { font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.58); text-decoration: none; padding: .32rem .72rem; border-radius: 7px; transition: all .18s; white-space: nowrap; }
.cpm-order-tab.active, .cpm-order-tab:hover { background: rgba(255,255,255,.15); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); text-decoration: none; }

/* View toggle */
.cpm-toggle-btns {
  display: flex; gap: .25rem;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--cpm-glass-border);
  border-radius: var(--cpm-radius-sm); padding: 3px;
  backdrop-filter: var(--cpm-blur-sm); -webkit-backdrop-filter: var(--cpm-blur-sm);
}
.cpm-toggle-btn { background: none; border: none; cursor: pointer; padding: .38rem .5rem; color: rgba(255,255,255,.52); border-radius: 7px; display: flex; align-items: center; transition: all .18s; line-height: 1; }
.cpm-toggle-btn.active, .cpm-toggle-btn:hover { background: rgba(255,255,255,.15); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }

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

.cpm-card {
  background: var(--cpm-glass);
  backdrop-filter: var(--cpm-blur); -webkit-backdrop-filter: var(--cpm-blur);
  border: 1px solid var(--cpm-glass-border);
  border-radius: var(--cpm-radius); overflow: hidden;
  box-shadow: var(--cpm-shadow);
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
  display: flex; flex-direction: column;
}
.cpm-card:hover { transform: translateY(-6px); box-shadow: var(--cpm-shadow-h); background: var(--cpm-glass-strong); border-color: var(--cpm-glass-border-h); }

.cpm-card-img-wrap { position: relative; display: block; text-decoration: none; flex-shrink: 0; }
.cpm-card-img { width: 100%; padding-top: 56%; background-size: cover; background-position: center; background-color: #1e3a8a; position: relative; }
.cpm-card-no-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.cpm-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(15,23,42,.32) 0%,transparent 55%); transition: background .25s; }
.cpm-card:hover .cpm-card-overlay { background: linear-gradient(to top,rgba(15,23,42,.55) 0%,transparent 65%); }
.cpm-card-badge {
  position: absolute; top: .65rem; left: .65rem;
  background: rgba(59,130,246,.80); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: .22em .65em; border-radius: 50px; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 2px 8px rgba(0,0,0,.22);
}

.cpm-card-body { padding: 1rem 1.1rem 1.15rem; flex: 1; display: flex; flex-direction: column; }
.cpm-card-title { font-size: .96rem; font-weight: 700; line-height: 1.4; margin: 0 0 .5rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cpm-card-title a { color: rgba(255,255,255,.92); text-decoration: none; transition: color .18s; }
.cpm-card-title a:hover { color: #fff; }
.cpm-card-excerpt { font-size: .82rem; color: rgba(255,255,255,.52); line-height: 1.55; margin: 0 0 .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cpm-card-footer { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: .65rem; border-top: 1px solid var(--cpm-glass-border); }
.cpm-card-date, .cpm-card-read { display: flex; align-items: center; gap: .3rem; font-size: .73rem; color: rgba(255,255,255,.48); }
.cpm-card-date svg, .cpm-card-read svg { opacity: .55; flex-shrink: 0; }

/* ── List ───────────────────────────────────────────────── */
.cpm-arc-list { display: flex; flex-direction: column; }
.cpm-list-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem .75rem; margin-bottom: 2px;
  border-bottom: 1px solid var(--cpm-glass-border);
  border-radius: var(--cpm-radius-sm);
  transition: background .18s;
}
.cpm-list-row:last-child { border-bottom: none; }
.cpm-list-row:hover { background: var(--cpm-glass-h); backdrop-filter: var(--cpm-blur-sm); -webkit-backdrop-filter: var(--cpm-blur-sm); }
.cpm-list-row-img-link { flex-shrink: 0; }
.cpm-list-row-img { width: 110px; height: 78px; object-fit: cover; border-radius: var(--cpm-radius-sm); display: block; border: 1px solid var(--cpm-glass-border); }
.cpm-list-no-img { width: 110px; height: 78px; background: var(--cpm-glass); border-radius: var(--cpm-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; border: 1px solid var(--cpm-glass-border); }
.cpm-list-row-body { flex: 1; min-width: 0; }
.cpm-list-row-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.cpm-list-row-cat { font-size: .67rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(96,165,250,.9); }
.cpm-list-row-num { font-size: 1.3rem; font-weight: 800; color: rgba(96,165,250,.42); line-height: 1; }
.cpm-list-row-title { font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0 0 .4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cpm-list-row-title a { color: rgba(255,255,255,.9); text-decoration: none; transition: color .18s; }
.cpm-list-row-title a:hover { color: #fff; }
.cpm-list-row-excerpt { font-size: .83rem; color: rgba(255,255,255,.5); 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 { display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: rgba(255,255,255,.44); flex-wrap: wrap; }
.cpm-list-row-meta svg { opacity: .5; flex-shrink: 0; }

/* ── Load More ──────────────────────────────────────────── */
/* Archive: View More button (shown after initial posts, before Load More) */
.cpm-archive #cpm-view-more-wrap { display: flex; justify-content: center; padding: 2rem 0 .5rem; }
.cpm-archive #cpm-view-more {
  display: inline-flex; align-items: center; gap: .6rem;
  background: rgba(59,130,246,.18);
  backdrop-filter: var(--cpm-blur-sm); -webkit-backdrop-filter: var(--cpm-blur-sm);
  border: 1.5px solid rgba(59,130,246,.55);
  color: #93c5fd; cursor: pointer;
  font-size: .88rem; font-weight: 700; letter-spacing: .03em;
  padding: .75rem 2rem; border-radius: 50px;
  transition: all .22s; box-shadow: 0 2px 12px rgba(59,130,246,.12);
}
.cpm-archive #cpm-view-more:hover {
  background: rgba(59,130,246,.75); border-color: rgba(255,255,255,.4);
  color: #fff; transform: translateY(-2px); box-shadow: var(--cpm-shadow-btn-h);
}
.cpm-archive #cpm-view-more:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cpm-archive #cpm-view-more svg { transition: transform .2s; }
.cpm-archive #cpm-view-more:hover svg { transform: translateX(4px); }

.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: rgba(255,255,255,.10);
  backdrop-filter: var(--cpm-blur-sm); -webkit-backdrop-filter: var(--cpm-blur-sm);
  border: 1px solid var(--cpm-glass-border);
  color: rgba(255,255,255,.85); font-family: var(--cpm-font);
  font-size: .88rem; font-weight: 700; letter-spacing: .03em;
  padding: .75rem 2.25rem; border-radius: 50px; cursor: pointer;
  transition: all .22s; box-shadow: var(--cpm-shadow);
}
.cpm-load-more-btn:hover { background: rgba(59,130,246,.75); border-color: rgba(255,255,255,.4); color: #fff; transform: translateY(-2px); box-shadow: var(--cpm-shadow-btn-h); }
.cpm-load-more-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.cpm-lm-text  { font-size: .88rem; }
.cpm-lm-count { font-size: .7rem; font-weight: 500; opacity: .5; }
.cpm-lm-progress { width: 200px; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.cpm-lm-bar { height: 100%; background: linear-gradient(90deg,#60a5fa,#3b82f6); border-radius: 2px; transition: width .4s ease; box-shadow: 0 0 6px rgba(96,165,250,.5); }

/* ── Skeleton ───────────────────────────────────────────── */
@keyframes cpm-shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
.cpm-skeleton { background: linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.06) 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; }

/* ── Misc ───────────────────────────────────────────────── */
.cpm-no-posts { color: rgba(255,255,255,.5); font-size: .9rem; padding: 1rem 0; }
.cpm-error    { color: #f87171; font-size: .9rem; padding: 1rem 0; }

/* ── 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: .9rem; }
  .cpm-list-row-img { width: 88px; height: 64px; }
  .cpm-list-no-img  { width: 88px; height: 64px; }
  #ast-mobile-popup, .ast-mobile-menu-trigger { z-index: 9999 !important; }
}
@media (max-width: 480px) {
  .cpm-arc-grid   { grid-template-columns: 1fr; }
  .cpm-arc-title  { font-size: 1.4rem; }
  .cpm-order-tabs { flex-wrap: wrap; }
  .cpm-section    { border-radius: 12px; padding: 1rem !important; }
  .cpm-archive    { border-radius: 12px; padding: 1rem .75rem !important; }
}
@media (max-width: 600px) {
  .cpm-featured-overlay { padding: 1rem 1.1rem; }
  .cpm-featured-title   { font-size: 1rem; }
  .cpm-side-img         { width: 64px; height: 48px; }
  .cpm-side-num         { font-size: 1.1rem; min-width: 1.8rem; }
}