/* container */
.updates-wrapper {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* header */
.updates-header h1 { font-size: 28px; margin: 0 0 6px; margin-top: 50px; }
.updates-header p { color: #000000; margin: 0 0 18px; }

/* each card */
.update-card { margin-bottom: 40px; border-radius: 8px; overflow: hidden; background: #fff; }

/* hero container */
.update-hero { position: relative; width: 100%; overflow: hidden; }
.update-hero img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  display: block;
}


/* overlay gradient and title/time inside hero (bottom area) */
.hero-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.8) 100%);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.hero-title a { color: #fff; font-size: 20px; font-weight: 600; text-decoration: none; }
.hero-time { font-size: 12px; opacity: 0.9; }

/* summary */
.update-summary { padding: 16px 18px; color: #333; line-height: 1.6; }

/* Read-more button */
.read-more {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  background: linear-gradient(180deg,#0d6efd,#0b5ed7); /* primary */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(11,94,215,0.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  margin-top: 10px;
}

/* small arrow spacing */
.read-more::after {
  content: " →";
  margin-left: 6px;
  font-weight: 600;
}

/* hover / focus */
.read-more:hover,
.read-more:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11,94,215,0.22);
  opacity: 0.98;
  outline: none;
}

/* accessible focus ring */
.read-more:focus {
  box-shadow: 0 0 0 4px rgba(11,94,215,0.14), 0 10px 24px rgba(11,94,215,0.22);
}

/* subtle reversed/outline variant if needed */
.read-more.outline {
  background: transparent;
  color: #0b5ed7;
  border: 2px solid #0b5ed7;
  box-shadow: none;
}



/* pagination */

.page-info { color: #666; }
/* responsive sizing on small screens */






@media (max-width: 480px) {
  .read-more { padding: 8px 12px; font-size: 13px; border-radius: 7px; }
}





/* Responsive: ensure hero text is readable on mobile */
@media (max-width: 599px) {
  .hero-title a { font-size: 16px; }
  .updates-wrapper { padding: 0 10px; margin: 20px auto; }
}