/* =============================================================
   BOBELS INTERNATIONAL & ASSOCIATES
   News / Blog Feed Styles  ·  news.css
   Used on: index.html (widget) + news.html (full page)
   ============================================================= */

/* ============ GRID ============ */
.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
@media (max-width:960px){.news-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:580px){.news-grid{grid-template-columns:1fr;}}

/* ============ CARD ============ */
.news-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.news-card:hover{
  transform:translateY(-6px);
  border-color:var(--steel);
  box-shadow:var(--shadow-md);
}

/* Image area */
.news-img-link{display:block;text-decoration:none;}
.news-img-wrap{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--bg-raised);
}
.news-img-wrap img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.news-card:hover .news-img-wrap img{transform:scale(1.06);}
.news-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(8,20,32,.55) 100%);
  transition:opacity .3s;
}
/* Fallback when no featured image */
.news-no-img{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bg-raised),var(--bg-card));
  color:var(--ink-faint);
}
.news-no-img svg{width:48px;height:48px;opacity:.4;}

/* Card body */
.news-body{
  padding:24px 26px 28px;
  display:flex;flex-direction:column;flex:1;
}
.news-meta{
  display:flex;align-items:center;gap:14px;
  margin-bottom:14px;flex-wrap:wrap;
}
.news-cat{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);
  background:rgba(242,169,59,.1);
  border:1px solid rgba(242,169,59,.2);
  border-radius:20px;padding:4px 12px;
  white-space:nowrap;
}
.news-meta time{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-faint);
}
.news-title{
  font-family:var(--font-display);font-size:18px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.2;margin-bottom:12px;
}
.news-title a{
  color:var(--ink);text-decoration:none;
  transition:color .2s;
}
.news-title a:hover{color:var(--amber);}
.news-card:hover .news-title a{color:var(--amber);}
.news-excerpt{
  font-size:14px;color:var(--ink-dim);line-height:1.7;
  flex:1;margin-bottom:20px;
}
.news-read-more{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--amber);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:gap .25s var(--ease),border-color .25s var(--ease);
  text-decoration:none;margin-top:auto;
}
.news-read-more svg{width:14px;height:14px;transition:transform .25s var(--ease);}
.news-read-more:hover{gap:14px;border-color:var(--amber);}
.news-read-more:hover svg{transform:translateX(3px);}

/* ============ SKELETON LOADER ============ */
.news-skeleton{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  min-height:360px;
  position:relative;
}
.news-skeleton::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);
  background-size:200% 100%;
  animation:skelShimmer 1.6s ease-in-out infinite;
}
@keyframes skelShimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* ============ ERROR / EMPTY STATE ============ */
.news-error{
  border:1px dashed var(--line);border-radius:var(--radius-lg);
  padding:48px 24px;text-align:center;
}
.news-error p{font-size:15px;color:var(--ink-dim);}
.news-error a{color:var(--amber);border-bottom:1px solid var(--amber);}

/* ============ LOAD MORE BUTTON ============ */
.news-load-more-wrap{
  display:flex;justify-content:center;
  margin-top:52px;
}
#newsLoadMore{
  font-family:var(--font-display);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  padding:16px 44px;border-radius:var(--radius);
  border:1px solid var(--steel);color:var(--ink);background:transparent;
  cursor:pointer;
  transition:border-color .25s,color .25s,transform .25s,background .25s;
}
#newsLoadMore:hover:not(:disabled){border-color:var(--amber);color:var(--amber);transform:translateY(-2px);}
#newsLoadMore:disabled{opacity:.45;cursor:not-allowed;}

/* ============ FEATURED POST (news page hero card) ============ */
.news-featured{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bg-card);margin-bottom:56px;
  transition:box-shadow .35s var(--ease),border-color .35s;
}
.news-featured:hover{border-color:var(--steel);box-shadow:var(--shadow-md);}
@media (max-width:820px){.news-featured{grid-template-columns:1fr;}}
.news-featured .news-img-wrap{
  aspect-ratio:unset;min-height:340px;height:100%;
  border-radius:0;
}
@media (max-width:820px){.news-featured .news-img-wrap{min-height:240px;}}
.news-featured .news-body{padding:48px 44px;justify-content:center;}
@media (max-width:820px){.news-featured .news-body{padding:32px 28px;}}
.news-featured .news-title{font-size:clamp(22px,2.4vw,30px);}
.news-featured .news-excerpt{font-size:15px;}