/* ============================================================
   COMMERCIUM BLOG — compiled stylesheet
   Ported from the Commercium design system (tokens + component
   styles) into a single static CSS file for the Django site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand core */
  --brand-ink: #1C1D21;
  --brand-azure: #008CE2;
  --brand-cyan: #0D97D5;
  --brand-blue: #0E7CBB;
  --brand-navy: #113D7E;

  /* Primary scale */
  --primary-50:  #EAF6FE;
  --primary-100: #D2ECFD;
  --primary-200: #A6D8FA;
  --primary-300: #6FBFF4;
  --primary-400: #2BA4EC;
  --primary-500: #008CE2;
  --primary-600: #0E7CBB;
  --primary-700: #135C97;
  --primary-800: #113D7E;
  --primary-900: #0E2E5C;

  /* Navy scale */
  --navy-50:  #EAEEF6;
  --navy-100: #CDD7E9;
  --navy-300: #6E84B3;
  --navy-500: #2A4F8F;
  --navy-700: #113D7E;
  --navy-900: #0B254C;

  /* Neutrals */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFBFC;
  --neutral-50:  #F4F6F8;
  --neutral-100: #ECEFF3;
  --neutral-200: #DDE3EA;
  --neutral-300: #C4CCD6;
  --neutral-400: #9AA6B4;
  --neutral-500: #6B7785;
  --neutral-600: #4D5763;
  --neutral-700: #353C46;
  --neutral-800: #232830;
  --neutral-900: #1C1D21;

  /* Semantic accents */
  --success-50:  #E7F7F0;
  --success-500: #16A571;
  --success-700: #0F7E56;
  --warning-50:  #FEF4E1;
  --warning-500: #F2A516;
  --warning-700: #B97608;
  --danger-50:   #FDECEC;
  --danger-500:  #E5484D;
  --danger-700:  #B62B30;
  --info-50:     #EAF6FE;
  --info-500:    #008CE2;

  /* Semantic aliases */
  --text-strong:    var(--neutral-900);
  --text-body:      var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --text-subtle:    var(--neutral-400);
  --text-inverse:   var(--neutral-0);
  --text-brand:     var(--primary-500);
  --text-link:      var(--primary-600);

  --surface-page:    var(--neutral-25);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-50);
  --surface-raised:  var(--neutral-0);
  --surface-inverse: var(--brand-ink);
  --surface-brand-soft: var(--primary-50);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--primary-500);

  --action-primary:        var(--primary-500);
  --action-primary-hover:  var(--primary-600);
  --action-primary-press:  var(--primary-700);
  --action-on-primary:     var(--neutral-0);

  --gradient-cart:  linear-gradient(120deg, var(--brand-cyan) 0%, var(--brand-blue) 48%, var(--brand-navy) 100%);
  --gradient-azure: linear-gradient(135deg, #2BA4EC 0%, #008CE2 100%);
  --gradient-navy:  linear-gradient(160deg, #1B5AA6 0%, #113D7E 60%, #0B254C 100%);
  --gradient-sky-wash: linear-gradient(180deg, #EAF6FE 0%, #FFFFFF 100%);

  --focus-ring: 0 0 0 3px rgba(0, 140, 226, 0.35);

  /* Typography */
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(17, 61, 126, 0.06);
  --shadow-sm: 0 2px 6px rgba(17, 61, 126, 0.07), 0 1px 2px rgba(17, 61, 126, 0.05);
  --shadow-md: 0 8px 20px rgba(17, 61, 126, 0.09), 0 2px 6px rgba(17, 61, 126, 0.06);
  --shadow-lg: 0 18px 40px rgba(17, 61, 126, 0.12), 0 6px 14px rgba(17, 61, 126, 0.07);
  --shadow-xl: 0 32px 64px rgba(11, 37, 76, 0.16), 0 12px 24px rgba(17, 61, 126, 0.08);

  --glow-azure: 0 8px 22px rgba(0, 140, 226, 0.32);
  --glow-azure-strong: 0 12px 32px rgba(0, 140, 226, 0.42);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
.page{min-height:100%;background:var(--surface-page);font-family:var(--font-body);color:var(--text-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text-strong);margin:0}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono)}

/* small flex utilities (ported from the design system's shared helpers) */
.fx{display:flex}
.ac{align-items:center}
.jc{justify-content:center}
.jb{justify-content:space-between}
.gap8{gap:8px}
.gap10{gap:10px}
.gap12{gap:12px}
.gap16{gap:16px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle)}
.nav-inner{height:70px;display:flex;align-items:center;gap:28px}
.brand-logo{height:30px;width:auto;display:block;cursor:pointer}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-link{font-family:var(--font-body);font-weight:600;font-size:14.5px;color:var(--text-body);padding:8px 13px;border-radius:var(--radius-pill);cursor:pointer;transition:background .18s,color .18s;white-space:nowrap}
.nav-link:hover{background:var(--primary-50);color:var(--primary-700)}
.nav-link.on{background:var(--primary-50);color:var(--primary-700)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--radius-pill);border:1.5px solid var(--border-subtle);background:var(--neutral-0);color:var(--text-muted);width:210px;box-shadow:var(--shadow-xs)}
.nav-search input{border:0;outline:0;background:transparent;font-family:var(--font-body);font-size:14px;color:var(--text-strong);width:100%;min-width:0}
.ic{display:inline-flex;flex:none}

/* buttons (ported from CommerciumDesignSystem Button component) */
.cmm-btn{font-family:var(--font-display);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;font-size:15px;border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1;letter-spacing:-.01em;transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),color var(--dur-base)}
.cmm-btn:active{transform:translateY(1px) scale(.985)}
.cmm-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.cmm-btn--sm{height:36px;padding:0 16px;font-size:14px}
.cmm-btn--lg{height:54px;padding:0 28px;font-size:17px}
.cmm-btn--block{display:flex;width:100%}
.cmm-btn--primary{background:var(--action-primary);color:var(--action-on-primary);box-shadow:var(--glow-azure)}
.cmm-btn--primary:hover{background:var(--action-primary-hover);box-shadow:var(--glow-azure-strong);transform:translateY(-1px)}
.cmm-btn--gradient{background:var(--gradient-cart);color:#fff;box-shadow:var(--glow-azure)}
.cmm-btn--gradient:hover{box-shadow:var(--glow-azure-strong);transform:translateY(-1px);filter:saturate(1.08)}
.cmm-btn--secondary{background:var(--neutral-0);color:var(--text-strong);border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.cmm-btn--secondary:hover{border-color:var(--primary-400);color:var(--primary-600)}
.cmm-btn--ghost{background:transparent;color:var(--primary-600)}
.cmm-btn--ghost:hover{background:var(--primary-50)}

/* badge (ported from Badge component, tone=soft variant) */
.cmm-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:700;font-size:12px;line-height:1;padding:5px 10px;border-radius:var(--radius-pill);letter-spacing:.01em;border:1px solid transparent}
.cmm-badge--neutral{background:var(--neutral-100);color:var(--neutral-700)}
.cmm-badge--brand{background:var(--primary-50);color:var(--primary-700)}
.cmm-badge--success{background:var(--success-50);color:var(--success-700)}
.cmm-badge--warning{background:var(--warning-50);color:var(--warning-700)}
.cmm-badge--danger{background:var(--danger-50);color:var(--danger-700)}
.cmm-badge--navy{background:var(--navy-50);color:var(--navy-700)}

/* avatar (ported from Avatar component) */
.cmm-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;background:var(--gradient-azure);color:#fff;font-family:var(--font-display);font-weight:700;flex:none}
.cmm-avatar img{width:100%;height:100%;object-fit:cover}

/* hero */
.hero{padding:56px 0 8px}
.hero-eye{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-700);background:var(--primary-50);padding:6px 13px;border-radius:var(--radius-pill)}
.hero h1{font-size:clamp(34px,4.6vw,52px);line-height:1.04;margin:20px 0 0;max-width:15ch}
.grad-text{background:var(--gradient-cart);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:18px;line-height:1.6;color:var(--text-muted);margin:0}
.hero .lead{margin-top:18px;max-width:60ch}

/* featured */
.feat{display:grid;grid-template-columns:1.05fr 1fr;gap:0;margin-top:40px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .22s var(--ease-out),box-shadow .22s}
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.thumb{position:relative;overflow:hidden;display:block}
.feat-thumb{min-height:340px}
.th-kicker{position:absolute;top:20px;left:22px;z-index:2;color:#fff;font-weight:600;font-size:11.5px;letter-spacing:.16em}
.th-ic{position:absolute;right:-14px;bottom:-22px;color:#fff;opacity:.24;line-height:0}
.th-glow{position:absolute;inset:0;background:radial-gradient(120% 90% at 15% 15%,rgba(255,255,255,.28),transparent 55%)}
.th-guide{background:var(--gradient-azure)}
.th-update{background:var(--gradient-navy)}
.th-strategy{background:var(--gradient-cart)}
.th-news{background:linear-gradient(135deg,#12A6D8 0%,#0E7CBB 55%,#113D7E 100%)}
.feat-body{padding:40px 42px;display:flex;flex-direction:column;justify-content:center}
.feat-flag{font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--primary-600)}
.feat-title{font-size:29px;line-height:1.14;margin:16px 0 0;text-wrap:balance}
.feat-ex{margin-top:14px;font-size:16.5px}
.meta{display:flex;align-items:center;gap:10px;margin-top:24px;font-family:var(--font-body);font-size:13.5px;color:var(--text-muted)}
.meta-name{font-weight:700;color:var(--text-strong)}
.meta-dot{width:3px;height:3px;border-radius:50%;background:var(--neutral-300)}
.meta .ic{color:var(--text-subtle)}

/* toolbar */
.toolbar{display:flex;align-items:center;gap:16px;margin:60px 0 26px;flex-wrap:wrap}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--text-body);background:var(--neutral-0);border:1.5px solid var(--border-subtle);padding:8px 15px;border-radius:var(--radius-pill);cursor:pointer;box-shadow:var(--shadow-xs);transition:all .18s}
.tab:hover{border-color:var(--primary-300);color:var(--primary-700)}
.tab.on{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
.tab.on .ic{color:#fff}
.tool-count{font-size:13.5px;color:var(--text-muted)}

/* layout */
.layout{display:grid;grid-template-columns:1fr 316px;gap:44px;padding-bottom:20px;align-items:start}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.card2{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .22s var(--ease-out),box-shadow .22s;display:flex;flex-direction:column}
.card2:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-thumb{height:172px}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card-title{font-size:19px;line-height:1.22;margin:13px 0 0;text-wrap:balance}
.card2:hover .card-title{color:var(--primary-700)}
.card-ex{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--text-muted)}
.card-meta{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-muted)}
.empty{grid-column:1/-1;padding:60px 20px;text-align:center;color:var(--text-muted);border:1.5px dashed var(--border-subtle);border-radius:var(--radius-lg)}

/* sidebar */
.side{display:flex;flex-direction:column;gap:24px;position:sticky;top:94px}
.side-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.side-h{font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);font-family:var(--font-body);margin:0 0 4px}
.trend{display:flex;gap:15px;padding:15px 0;border-top:1px solid var(--border-subtle);cursor:pointer}
.trend:hover .trend-t{color:var(--primary-700)}
.trend-num{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1;background:var(--gradient-cart);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none;width:22px}
.trend-t{font-family:var(--font-display);font-weight:600;font-size:14.5px;line-height:1.3;color:var(--text-strong);letter-spacing:-.01em}
.trend-m{font-size:12px;color:var(--text-subtle);margin-top:5px}
.topic{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border-subtle);cursor:pointer}
.topic:hover .topic-n{color:var(--primary-700)}
.topic-ic{width:38px;height:38px;border-radius:11px;background:var(--primary-50);color:var(--primary-600);display:flex;align-items:center;justify-content:center;flex:none}
.topic-n{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text-strong)}
.topic-c{margin-left:auto;font-family:var(--font-mono);font-size:12.5px;color:var(--text-subtle)}
.nlmini{background:var(--gradient-navy);color:#fff;border:none}
.nlmini .side-h{color:rgba(255,255,255,.66)}
.nlmini p{margin:8px 0 16px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.86)}

/* article */
.art{max-width:760px;margin:0 auto;padding:48px 0 8px}
.back{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--text-muted);cursor:pointer;padding:8px 0}
.back:hover{color:var(--primary-700)}
.art h1{font-size:clamp(30px,4vw,44px);line-height:1.08;margin:20px 0 0;text-wrap:balance}
.art-lead{font-size:19px;line-height:1.55;color:var(--text-muted);margin:20px 0 0}
.byline{display:flex;align-items:center;gap:13px;margin-top:28px;padding-bottom:30px;border-bottom:1px solid var(--border-subtle)}
.by-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-strong)}
.by-sub{font-size:13px;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:8px}
.art-hero{height:300px;border-radius:var(--radius-xl);margin-top:30px}
.art-hero .th-ic{opacity:.22;right:24px;bottom:-10px}
.art-hero-img{height:300px;width:100%;border-radius:var(--radius-xl);margin-top:30px;object-fit:cover;display:block}
.prose{margin-top:8px}
.prose h2{font-size:25px;line-height:1.2;margin:40px 0 0}
.prose p{font-size:17.5px;line-height:1.75;color:var(--neutral-700);margin:18px 0 0}
.prose blockquote{margin:38px 0 8px;padding:6px 0 6px 26px;border-left:3px solid var(--primary-400);font-family:var(--font-display);font-weight:600;font-size:23px;line-height:1.34;letter-spacing:-.01em;color:var(--text-strong)}
.callout{margin-top:40px;background:var(--gradient-cart);color:#fff;border-radius:var(--radius-xl);padding:34px 36px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.callout h3{color:#fff;font-size:23px;line-height:1.2}
.callout p{color:rgba(255,255,255,.9);margin:8px 0 0;font-size:15.5px;max-width:46ch}
.callout .cta-wrap{margin-left:auto}
.callout .cmm-btn--secondary{background:#fff;border-color:#fff}
.tagrow{display:flex;flex-wrap:wrap;gap:9px;margin-top:38px;padding-top:28px;border-top:1px solid var(--border-subtle)}
.mtag{font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--text-body);background:var(--neutral-50);border:1px solid var(--border-subtle);padding:6px 13px;border-radius:var(--radius-pill)}

/* related + section head */
.sec-head{display:flex;align-items:end;justify-content:space-between;margin:0 0 26px;gap:16px}
.sec-head h2{font-size:27px;line-height:1.12}
.related{padding:66px 0 0}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}

/* category hero */
.cat-hero{border-radius:var(--radius-2xl);padding:52px 48px;color:#fff;margin-top:26px;position:relative;overflow:hidden}
.cat-hero .th-ic{opacity:.16;right:20px;bottom:-30px}
.cat-eye{font-weight:600;font-size:11.5px;letter-spacing:.18em;color:rgba(255,255,255,.8)}
.cat-hero h1{color:#fff;font-size:clamp(32px,4vw,46px);line-height:1.06;margin:14px 0 0;max-width:16ch}
.cat-hero .lead{color:rgba(255,255,255,.9);margin-top:16px;max-width:56ch}
.cat-count{font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,.82);margin-top:22px}

/* newsletter band */
.nl-band{margin-top:88px;background:var(--brand-ink);color:#fff;position:relative;overflow:hidden}
.nl-band .th-glow{background:radial-gradient(60% 120% at 85% 20%,rgba(0,140,226,.35),transparent 60%)}
.nl-in{padding:76px 0;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;position:relative}
.nl-in h2{color:#fff;font-size:34px;line-height:1.1;max-width:16ch}
.nl-in .lead{color:rgba(255,255,255,.76);margin-top:16px;max-width:44ch}
.nl-form{display:flex;gap:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:12px;border-radius:var(--radius-pill)}
.nl-form input{flex:1;border:0;outline:0;background:transparent;color:#fff;font-family:var(--font-body);font-size:15.5px;padding:0 16px;min-width:0}
.nl-form input::placeholder{color:rgba(255,255,255,.5)}
.nl-note{font-size:13px;color:rgba(255,255,255,.55);margin-top:14px;display:flex;align-items:center;gap:8px}
.nl-ok{display:flex;align-items:center;gap:13px;background:rgba(22,165,113,.16);border:1px solid rgba(22,165,113,.4);padding:20px 22px;border-radius:var(--radius-lg)}
.nl-ok-ic{width:40px;height:40px;border-radius:50%;background:var(--success-500);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.nl-ok b{color:#fff;font-family:var(--font-display);font-size:16px}
.nl-ok span{color:rgba(255,255,255,.7);font-size:13.5px}

/* footer */
.footer{background:var(--brand-ink);border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
.foot-in{padding:40px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-logo{height:26px;opacity:.95}
.foot-links{display:flex;gap:22px;font-size:13.5px}
.foot-links a{color:rgba(255,255,255,.62)}
.foot-links a:hover{color:#fff}
.foot-copy{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.4)}

/* pager (new — Django pagination, not present in the original prototype) */
.pager{display:flex;align-items:center;justify-content:center;gap:20px;padding:36px 0 60px;font-family:var(--font-body);font-size:14px;color:var(--text-muted)}
.pager-link{font-weight:700;color:var(--primary-700);background:var(--primary-50);padding:9px 16px;border-radius:var(--radius-pill)}
.pager-link:hover{background:var(--primary-100)}

@media(max-width:1120px){.nav-search{width:150px}}
@media(max-width:1000px){.nav-search{display:none}}
@media(max-width:900px){.feat{grid-template-columns:1fr}.feat-thumb{min-height:200px}.layout{grid-template-columns:1fr}.side{position:static}.grid{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.nl-in{grid-template-columns:1fr}.nav-links{display:none}}