/* ====================================================================
   BigEV — Left Newsfeed (complete stylesheet)
   File: assets/src/css/bev-newsfeed.css
   ==================================================================== */

/* ====== tokens ====== */
:root{
  --bev-rail-width: 250px;        /* compact rail */
  --bev-gap: 20px;                /* space between rail and main content */
  --bev-left-pad: 80px;           /* space from browser edge */
  --bev-right-pad: 30px;          /* right gutter before snap */
  --bev-strap-offset: 120px;      /* sticky offset under gray strap */

  --bev-rail-radius: 10px;
  --bev-rail-border: rgba(0,0,0,.08);
  --bev-rail-shadow: 0 4px 18px rgba(0,0,0,.06);
  --bev-rail-orange: #ff6a00;
  --bev-muted: #6b7280;
  --bev-bg: #fff;
}

/* ====== optional shell (only affects the wrapper that includes the rail) ======
   If your template wraps the rail + content in .bev-shell, this ensures the
   rail sits as a real column with a fixed 20px gap. If you’re injecting the
   rail alongside existing layout, this block is harmless. */
.bev-shell{
  display: grid;
  grid-template-columns: var(--bev-rail-width) minmax(0,1fr);
  gap: var(--bev-gap);
  align-items: start;

  width: 100%;
  max-width: 1800px;
  margin-inline: auto;
  padding-left: var(--bev-left-pad);
  padding-right: var(--bev-right-pad);
}
.bev-main{
  grid-column: 2;
  min-width: 0;
}

/* ====== left rail column ====== */
.bev-left-rail{
  grid-column: 1;
  width: var(--bev-rail-width);
  position: sticky;
  top: var(--bev-strap-offset);   /* sits just below the gray strap */
  align-self: start;
  z-index: 2;                     /* above article bg, below header */
}

/* ====== feed card ====== */
.bev-newsfeed{
  background: var(--bev-bg);
  border: 1px solid var(--bev-rail-border);
  border-radius: var(--bev-rail-radius);
  box-shadow: var(--bev-rail-shadow);
  overflow: hidden;
}

/* header */
.bev-newsfeed__head{
  padding: 10px 14px 8px;
  font: 800 12px/1 poppins,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bev-rail-orange);
  border-bottom: 1px solid var(--bev-rail-border);
  background: var(--bev-bg);
}

/* list & items */
.bev-newsfeed__list{ margin:0; padding:0; list-style:none; }
.bev-newsfeed__item{
  margin:0;
  padding:10px 14px;             /* baseline compact padding */
  border-bottom:1px solid var(--bev-rail-border);
  background:var(--bev-bg);
  will-change: transform,opacity;
}
.bev-newsfeed__item:last-child{ border-bottom:0; }

/* links */
.bev-newsfeed__link{
  display:block;
  text-decoration:none;
  color:#111;
}
.bev-newsfeed__title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-weight:700;
  font-size:13px;                /* ~50% of card titles */
  line-height:1.35;
}
.bev-newsfeed__link:hover .bev-newsfeed__title{ text-decoration:underline; }

/* time badge — hidden by default; JS adds .is-visible for <=2h */
.bev-newsfeed__time{
  display:none;                  /* collapses the extra line when absent */
  margin-top:4px;
  font-weight:700;
  font-size:11px;
  color:var(--bev-rail-orange);
  opacity:1;
  transition:opacity .2s ease;
}
.bev-newsfeed__time.is-visible{ display:inline-block; }

/* ====== animations for live updates ====== */
@keyframes bevFadeSlideIn { from{opacity:0;transform:translateY(-12px);} to{opacity:1;transform:translateY(0);} }
@keyframes bevFadeSlideOut{ from{opacity:1;transform:translateY(0);}     to{opacity:0;transform:translateY(12px);} }

.bev-newsfeed__item.is-new  { animation: bevFadeSlideIn .28s ease-out both; }
.bev-newsfeed__item.is-gone { animation: bevFadeSlideOut .35s ease-in forwards; }

/* ====== responsive snap rules ====== */
/* Keep 3 columns until the viewport is actually tight.
   At <=1500px, hide the rail entirely. */
@media (max-width: 1500px){
  .bev-left-rail{ display:none !important; }
  .bev-shell{ grid-template-columns: minmax(0,1fr); padding-left: var(--bev-right-pad); }
}

/* Safety for very narrow pages or single-post templates */
@media (max-width: 1250px){
  .bev-left-rail{ display:none !important; }
}

/* print */
@media print{
  .bev-left-rail{ display:none !important; }
}