/* Story cards — reuses the coalition-cards grid/card design (coalition-cards.css
   is enqueued first). Only the deltas from the Figma "ACHs in action" layout
   live here: a light header/angle and the category pills. */

/* Featured image should fill the frame (coalition logos are contained). */
.story-card {
  border: none;
}

.story-card__media {
  position: relative;
}

.story-card__media img {
  width: 100%;
  object-fit: cover;
}

/* Light diagonal wedge + white header, per the Figma. */
.story-card__angle {
  background-color: #c6e6e3;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.story-card__header {
  /* background-color: #fff;
  gap: 0.75rem; */
}

/* Category pills. */
.story-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.story-card__tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-family: Assistant;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  background-color: var(--deep-blue);
}

.story-card__excerpt {
  color: var(--off-black, #0e162b);
  border-bottom: 1px solid #c8c8c7;
  padding-bottom: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

.story-card__link span {
  margin-left: 0.25rem;
}