/* ============================================================
   AXERION TECHNICAL INSIGHTS — insights.css v20260621
   Supplements styles.css — do not use standalone
============================================================ */

/* --- Category filter --- */
.cat-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:36px;
}
.cat-filter-btn{
  padding:9px 18px;
  border:1px solid rgba(214,222,232,.95);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,249,253,.9));
  color:#607182;
  font-weight:700;
  font-size:.84rem;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
  font-family:inherit;
}
.cat-filter-btn:hover{
  background:rgba(31,95,153,.08);
  color:#1f5f99;
  border-color:rgba(31,95,153,.28);
}
.cat-filter-btn.active{
  background:linear-gradient(135deg,#1f5f99,#184b78);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 20px rgba(17,51,83,.22);
}

/* --- Insight card grid --- */
.insight-grid{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(3,1fr);
}
.insight-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(214,222,232,.95);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(12,27,44,.10);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
}
.insight-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(12,27,44,.15);
  border-color:#bfcbd7;
}
.insight-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  z-index:3;
  height:3px;
  background:linear-gradient(90deg,rgba(184,138,69,.9),rgba(31,95,153,.8));
}

.insight-card-img{
  height:204px;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.insight-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  display:block;
  filter:brightness(.68) saturate(1.05);
  transition:transform .42s ease,filter .42s ease;
}
.insight-card:hover .insight-card-img img{
  transform:scale(1.04);
  filter:brightness(.75) saturate(1.1);
}
.insight-card-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(13,27,42,.52) 0%,rgba(13,27,42,.04) 55%);
  pointer-events:none;
  z-index:1;
}
.insight-cat{
  position:absolute;
  bottom:12px;
  left:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(13,27,42,.72);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
  color:rgba(255,255,255,.92);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.insight-card-body{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.insight-card-body h3{
  font-size:1.05rem;
  line-height:1.24;
  letter-spacing:-.02em;
  margin:0 0 8px;
  color:#0d1b2a;
}
.insight-card-body p{
  font-size:.88rem;
  color:#607182;
  line-height:1.56;
  margin:0 0 14px;
  flex:1;
}
.insight-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.75rem;
  color:#8a9bac;
  font-weight:600;
  margin-bottom:14px;
}
.insight-meta-sep{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#c8d4de;
  flex-shrink:0;
}

/* --- Article page layout --- */
.article-section{
  padding-top:52px;
  padding-bottom:72px;
}
.article-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:44px;
  align-items:start;
}
.article-body{
  min-width:0;
}

/* Hero additions for articles */
.article-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  color:rgba(255,255,255,.58);
  margin-bottom:16px;
  flex-wrap:wrap;
}
.article-breadcrumb a{
  color:rgba(255,255,255,.58);
  transition:color .2s;
}
.article-breadcrumb a:hover{color:#fff;}
.article-breadcrumb-sep{opacity:.4;}
.article-hero-meta{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:18px;
  font-size:.81rem;
  color:rgba(255,255,255,.68);
  font-weight:600;
}

/* Article body typography */
.article-intro{
  font-size:1.06rem;
  color:#354558;
  line-height:1.76;
  margin-bottom:36px;
  padding-bottom:30px;
  border-bottom:1px solid rgba(214,222,232,.7);
}
.article-content h2{
  font-size:1.42rem;
  line-height:1.14;
  letter-spacing:-.03em;
  color:#0d1b2a;
  margin:42px 0 14px;
}
.article-content>h2:first-child{margin-top:0;}
.article-content h3{
  font-size:1.06rem;
  line-height:1.24;
  letter-spacing:-.02em;
  color:#16263a;
  margin:28px 0 9px;
  font-weight:700;
}
.article-content p{
  color:#354558;
  line-height:1.76;
  margin:0 0 18px;
}
.article-content ul,.article-content ol{
  padding-left:22px;
  color:#354558;
  line-height:1.68;
  margin:0 0 18px;
}
.article-content li{margin-bottom:7px;}
.article-content strong{color:#0d1b2a;font-weight:700;}
.article-content a{color:#1f5f99;text-decoration:underline;}
.article-content hr{
  border:none;
  border-top:1px solid rgba(214,222,232,.7);
  margin:36px 0;
}

/* Info boxes */
.info-box{
  padding:16px 18px;
  border-radius:12px;
  border-left:4px solid;
  margin:24px 0;
}
.info-box p{margin:0;font-size:.9rem;line-height:1.6;color:inherit;}
.info-box p+p{margin-top:8px;}
.info-box-label{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:6px;
  display:block;
}
.info-box.note{background:rgba(31,95,153,.06);border-color:#1f5f99;color:#1a3a5c;}
.info-box.note .info-box-label{color:#1f5f99;}
.info-box.warning{background:rgba(184,138,69,.08);border-color:#b88a45;color:#5a3c0f;}
.info-box.warning .info-box-label{color:#b88a45;}
.info-box.critical{background:rgba(186,48,48,.05);border-color:rgba(186,48,48,.65);color:#5c1a1a;}
.info-box.critical .info-box-label{color:rgba(186,48,48,.8);}

/* Checklist */
.checklist{list-style:none;padding:0;margin:0 0 20px;}
.checklist li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid rgba(214,222,232,.55);
  color:#354558;
  font-size:.9rem;
  line-height:1.52;
}
.checklist li:last-child{border-bottom:none;}
.checklist li::before{
  content:"";
  display:block;
  width:17px;
  height:17px;
  min-width:17px;
  border:1.5px solid rgba(31,95,153,.35);
  border-radius:4px;
  margin-top:1px;
}

/* Data table */
.data-table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0;
  font-size:.87rem;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(12,27,44,.07);
}
.data-table th{
  background:linear-gradient(180deg,#1a3050,#0d1b2a);
  color:rgba(255,255,255,.92);
  padding:11px 14px;
  text-align:left;
  font-weight:700;
  font-size:.77rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.data-table td{
  padding:10px 14px;
  border-bottom:1px solid rgba(214,222,232,.7);
  color:#354558;
  vertical-align:top;
  line-height:1.5;
}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:nth-child(even) td{background:rgba(231,237,244,.35);}
.data-table tr:hover td{background:rgba(31,95,153,.04);}

/* Sidebar */
.article-sidebar{
  position:sticky;
  top:90px;
}
.sidebar-widget{
  background:linear-gradient(180deg,#fff,#f8fbfd);
  border:1px solid rgba(214,222,232,.95);
  border-radius:16px;
  padding:20px 22px;
  margin-bottom:18px;
  box-shadow:0 12px 30px rgba(12,27,44,.07);
}
.sidebar-widget-title{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8a9bac;
  margin:0 0 14px;
}
.sidebar-related-link{
  display:block;
  padding:9px 0;
  border-bottom:1px solid rgba(214,222,232,.6);
  color:#16263a;
  font-weight:600;
  font-size:.86rem;
  line-height:1.32;
  transition:color .2s;
}
.sidebar-related-link:last-child{border-bottom:none;padding-bottom:0;}
.sidebar-related-link:hover{color:#1f5f99;background:rgba(31,95,153,.06);}
.sidebar-rel-cat{
  display:block;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#1f5f99;
  margin-bottom:2px;
}
.sidebar-cta{
  background:linear-gradient(135deg,#0d1b2a,#194166);
  border-color:rgba(255,255,255,.1);
  color:#fff;
}
.sidebar-cta .sidebar-widget-title{color:rgba(255,255,255,.5);}
.sidebar-cta p{font-size:.86rem;color:rgba(255,255,255,.76);margin:0 0 16px;line-height:1.55;}

/* "You are reading" orientation widget */
.sidebar-you-are-reading{
  background:linear-gradient(135deg,rgba(184,138,69,.07) 0%,rgba(255,255,255,.98) 100%);
  border-color:rgba(184,138,69,.28);
  border-left:3px solid #b88a45;
  padding-left:19px;
}
.sidebar-you-are-reading .sidebar-widget-title{color:#b88a45;}
.sidebar-current-title{
  font-size:.93rem;
  font-weight:700;
  color:#0d1b2a;
  line-height:1.34;
  margin:0;
  letter-spacing:-.01em;
}

/* Article prev/next nav */
.article-nav{
  display:flex;
  gap:14px;
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid rgba(214,222,232,.7);
}
.article-nav-link{
  flex:1;
  display:block;
  padding:16px 18px;
  border:1px solid rgba(214,222,232,.9);
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#f8fbfd);
  box-shadow:0 8px 20px rgba(12,27,44,.06);
  transition:transform .2s,box-shadow .2s,border-color .2s;
  text-decoration:none;
}
.article-nav-link:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(12,27,44,.1);
  border-color:#bfcbd7;
}
.article-nav-dir{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8a9bac;
  margin-bottom:4px;
  display:block;
}
.article-nav-title{
  font-size:.9rem;
  font-weight:700;
  color:#16263a;
  line-height:1.3;
  display:block;
}

/* Responsive */
@media(max-width:1100px){
  .insight-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .article-layout{grid-template-columns:1fr;}
  .article-sidebar{
    position:static;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:0;
  }
  .sidebar-widget{margin-bottom:0;}
}
@media(max-width:640px){
  .insight-grid{grid-template-columns:1fr;}
  .article-sidebar{grid-template-columns:1fr;}
  .article-nav{flex-direction:column;}
}