/* Card components and common styling for event/news cards */

.event-card,
.news-card{
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* Media area with aspect ratio (16:9 by default) */
.media-ratio{
  position: relative;
  width: 100%;
  --aspect: 56.25%;
}
.media-ratio::before{
  content: "";
  display: block;
  padding-top: var(--aspect);
}
.media-ratio > *{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.media-image{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* prevents blurring when scaling */
  object-position: center;
}

/* Card body */
.event-card__body,
.news-card__body{
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;   /* base spacing between heading/meta/text blocks */
}

/* Let titles and text inherit global typography (H2/H4 + body text) */
.event-card__title,
.news-card__title,
.event-card__text,
.news-card__text{
  font: inherit;
}

/* Date/location/meta in event cards – slightly more compact */
.event-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: .25rem 0 .25rem 0;
}
.event-meta > div{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.event-meta img{
  width: 16px; height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* Make the entire card clickable for event and news variants */
.event-card__link,
.news-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.event-card__link article,
.news-card__link article {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.event-card__link:hover,
.news-card__link:hover {
  text-decoration: none;
  opacity: 0.92; /* subtle hover effect */
  transition: opacity 0.2s ease;
}

/* Stretched link helper for clickable cards */
.stretched-link{ position: relative; z-index: 1; }
.stretched-link::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}