/* =========================================================
   Articles Dashboard — palette aligned with site header
   Colors: #3396D3, #EEEEEE, #FFFFFF, #000000 (+ rgba)
   ========================================================= */
:root{
  --blue:#3396D3; --gray:#EEEEEE; --white:#FFFFFF; --ink:#000000;
  --r-sm:10px; --r-md:14px; --r-lg:18px;
  --shadow-1:0 8px 22px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  --border:1px solid #EEEEEE;
}

/* Welcome hero (distinct from sample: blue tint bar + subtle divider) */
.hero-welcome{
  background: var(--gray);
  border-bottom: 1px solid #EEEEEE;
}
.hero-inner{
  width:min(1200px, 92vw);
  margin-inline:auto;
  padding: 26px 16px;
  text-align:center;
}
.eyebrow{
  margin:0 0 6px;
  color:#1f2937;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size: clamp(.82rem, .75rem + .25vw, 1rem);
}
.brand-line{
  margin:0 0 6px;
  color:#0b1220;
  font-weight:700;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 2rem);
}
.brand-title{
  margin:0 0 8px;
  color:#0b1220;
  font-weight:900;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 3rem);
  line-height:1.05;
  /* Different underline: gradient bar behind text, not text-decoration */
  position:relative;
  display:inline-block;
  padding-inline: 10px;
}
.brand-title::after{
  content:"";
  position:absolute; left:8px; right:8px; bottom:-6px; height:6px; border-radius:999px;
  background: linear-gradient(90deg, #b3d8ef 0%, #3396D3 60%, #b3d8ef 100%);
  opacity:.9;
}
.hero-sub{
  margin:.35rem 0 0;
  color: rgba(0,0,0,.78);
  font-size: clamp(.95rem, .9rem + .25vw, 1.05rem);
}

/* Metrics */
.metrics-wrap{
  width:min(1200px, 92vw);
  margin: 18px auto 56px;
}
.metrics-grid{
  --gap: clamp(18px, 3vw, 28px);
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: var(--gap);
  place-items: stretch;
}
@media (max-width: 900px){ .metrics-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .metrics-grid{ grid-template-columns: 1fr; } }


.metric{
  background: transparent;
  border: 0;                 
  border-radius: 0;
  box-shadow: none;  
  padding: 18px 16px;
  text-align:center;
}
.metric-label{
  color:#1f2937;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.95rem;
  margin-bottom: 8px;
}
.metric-value{
  margin:0;
  font-weight:900;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  line-height:1.05;
  color:#000; /* readable solid (not gradient) */
  position:relative;
}
.metric-value::after{
  /* Different reveal: thin blue underline that grows from left */
  content:"";
  position:absolute; left:50%; transform: translateX(-50%) scaleX(0);
  bottom:-10px; width: 90px; height: 4px; border-radius: 999px;
  background: #3396D3;
  transition: transform .9s cubic-bezier(.22,.8,.2,1);
  transform-origin: left;
}
.metric-value.reveal::after{
  transform: translateX(-50%) scaleX(1);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .metric-value::after{ transition:none; }
}