/* News card styles scoped to the news grid (#newsGrid / .news-grid)
   Provides cover image, body, hover zoom, subtle overlay and responsive layout
*/

:root{
  --news-card-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --news-card-border: rgba(255,255,255,0.04);
  --news-text: #eaf6ff;
  --news-muted: #9fb0c8;
  --news-accent: #1fa2ff;
}

/* Grid layout for news cards (responsive) */
.news-grid, #newsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  align-items: start;
}

/* Individual card container */
#newsGrid .card, .news-grid .card {
  background: var(--news-card-bg);
  border: 1px solid var(--news-card-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(3,12,30,0.45);
}

#newsGrid .card:focus, #newsGrid .card:hover, .news-grid .card:focus, .news-grid .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(6,18,48,0.6);
  border-color: rgba(31,162,255,0.18);
}

/* Cover image area uses inline background-image set by JS */
#newsGrid .card .cover, .news-grid .card .cover {
  height: 160px;
  background-size: cover;
  background-position: center center;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), filter 280ms ease;
  will-change: transform;
}

#newsGrid .card:hover .cover, .news-grid .card:hover .cover {
  transform: scale(1.06);
  filter: brightness(1.02) saturate(1.03);
}

/* Card body */
#newsGrid .card .body, .news-grid .card .body {
  padding: 14px 14px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

#newsGrid .card .title, .news-grid .card .title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--news-text);
  line-height: 1.25;
}

#newsGrid .card .desc, .news-grid .card .desc {
  margin: 0;
  color: var(--news-muted);
  font-size: 0.92rem;
  line-height: 1.4;
  min-height: 42px;
}

#newsGrid .card .meta, .news-grid .card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--news-muted);
}

#newsGrid .card .meta .date, .news-grid .card .meta .date {
  font-style: italic;
  color: var(--news-muted);
}

/* Subtle overlay stripe that slides in on hover */
#newsGrid .card::after, .news-grid .card::after {
  content: '';
  position: absolute;
  left: -30%;
  top: -30%;
  width: 40%;
  height: 160%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.07) 52%, transparent 70%);
  transform: rotate(18deg);
  transition: transform 420ms ease, left 420ms ease, opacity 300ms ease;
  opacity: 0;
  pointer-events: none;
}

#newsGrid .card:hover::after, .news-grid .card:hover::after {
  left: 120%;
  opacity: 1;
}

/* Accessible focus outline */
#newsGrid .card:focus-visible, .news-grid .card:focus-visible {
  outline: 3px solid rgba(31,162,255,0.2);
  outline-offset: 3px;
}

/* Color accent styling - applied when data-accent-color attribute is set */
#newsGrid .card[data-accent-color], .news-grid .card[data-accent-color] {
  position: relative;
}

/* Orange accent */
#newsGrid .card[data-accent-color="orange"], .news-grid .card[data-accent-color="orange"] {
  border-left: 4px solid #ff8c42;
  background: linear-gradient(135deg, rgba(255, 140, 66, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
}

#newsGrid .card[data-accent-color="orange"]:hover, .news-grid .card[data-accent-color="orange"]:hover {
  border-color: #ff8c42;
  box-shadow: 0 22px 44px rgba(255, 140, 66, 0.2), 0 0 0 1px rgba(255, 140, 66, 0.15);
}

#newsGrid .card[data-accent-color="orange"] .title, .news-grid .card[data-accent-color="orange"] .title {
  color: #ffb380;
}

/* Blue accent */
#newsGrid .card[data-accent-color="blue"], .news-grid .card[data-accent-color="blue"] {
  border-left: 4px solid #42a5ff;
  background: linear-gradient(135deg, rgba(66, 165, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
}

#newsGrid .card[data-accent-color="blue"]:hover, .news-grid .card[data-accent-color="blue"]:hover {
  border-color: #42a5ff;
  box-shadow: 0 22px 44px rgba(66, 165, 255, 0.2), 0 0 0 1px rgba(66, 165, 255, 0.15);
}

#newsGrid .card[data-accent-color="blue"] .title, .news-grid .card[data-accent-color="blue"] .title {
  color: #80c7ff;
}

/* Green accent */
#newsGrid .card[data-accent-color="green"], .news-grid .card[data-accent-color="green"] {
  border-left: 4px solid #42ff8c;
  background: linear-gradient(135deg, rgba(66, 255, 140, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
}

#newsGrid .card[data-accent-color="green"]:hover, .news-grid .card[data-accent-color="green"]:hover {
  border-color: #42ff8c;
  box-shadow: 0 22px 44px rgba(66, 255, 140, 0.2), 0 0 0 1px rgba(66, 255, 140, 0.15);
}

#newsGrid .card[data-accent-color="green"] .title, .news-grid .card[data-accent-color="green"] .title {
  color: #80ffb3;
}

/* Purple accent */
#newsGrid .card[data-accent-color="purple"], .news-grid .card[data-accent-color="purple"] {
  border-left: 4px solid #a542ff;
  background: linear-gradient(135deg, rgba(165, 66, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
}

#newsGrid .card[data-accent-color="purple"]:hover, .news-grid .card[data-accent-color="purple"]:hover {
  border-color: #a542ff;
  box-shadow: 0 22px 44px rgba(165, 66, 255, 0.2), 0 0 0 1px rgba(165, 66, 255, 0.15);
}

#newsGrid .card[data-accent-color="purple"] .title, .news-grid .card[data-accent-color="purple"] .title {
  color: #c780ff;
}

/* Red accent */
#newsGrid .card[data-accent-color="red"], .news-grid .card[data-accent-color="red"] {
  border-left: 4px solid #ff4242;
  background: linear-gradient(135deg, rgba(255, 66, 66, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
}

#newsGrid .card[data-accent-color="red"]:hover, .news-grid .card[data-accent-color="red"]:hover {
  border-color: #ff4242;
  box-shadow: 0 22px 44px rgba(255, 66, 66, 0.2), 0 0 0 1px rgba(255, 66, 66, 0.15);
}

#newsGrid .card[data-accent-color="red"] .title, .news-grid .card[data-accent-color="red"] .title {
  color: #ff8080;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  #newsGrid .card, .news-grid .card { min-height: 260px; }
  #newsGrid .card .cover, .news-grid .card .cover { height: 140px; }
}

@media (max-width: 520px) {
  #newsGrid .card { min-height: 220px; }
  #newsGrid .card .cover { height: 120px; }
  #newsGrid .card .body { padding: 10px; }
  #newsGrid .card .title { font-size: 1.05rem }
}