/**
 * @file
 * Content card component serves articles and events types of content.
 */

.content-card {
  background-color: var(--white);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);

  /* Using display flex to allow us to position the date field to the bottom
  of the card for consistency in position of date field. */
  display: flex;
  flex-direction: column;
  flex: 1 1 var(--size-44);
  height: auto;
  max-width: var(--size-80);
  overflow: hidden;
}

.content-card__image {
  position: relative;
}

.content-card__image .date-badge {
  position: absolute;
  left: 0;
  top: 0;
}

/* In Drupal some of the image wrappers may have margin which adds unnecesssary
  space in the card display. */

.content-card__image .field {
  margin: 0;
}

/* Using flex-grow to allow date to be positioned at the bottom of the card by
using margin-top: auto in the date wrapper field below. */

.content-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--size-4);
}

/* For consistent top/bottom spacing for all fields in the card. */

.content-card__content > * {
  -webkit-margin-after: var(--size-3);
  margin-block-end: var(--size-3);
}

.content-card__content .date {
  -webkit-margin-end: var(--size-4);
  margin-inline-end: var(--size-4);
}

.content-card__title {
  color: var(--ucla-blue);
  font-family: var(--font-heading);
  font-size: var(--font-size-2);
  line-height: var(--leading-normal);
}

.content-card__title:hover {
  color: var(--gray-900);
}

.content-card__organization {
  align-items: center;
  display: flex;
}

.content-card__organization a {
  color: var(--ucla-blue);
  display: flex;
}

.content-card__organization svg {
  color: var(--ucla-blue);
  font-size: inherit;
  display: inline-block;
  height: 1em;
  -webkit-margin-end: var(--size-1);
  margin-inline-end: var(--size-1);
  vertical-align: -0.125em;
  width: 1em;
}

.content-card__organization span {
  display: inline-block;
  font-size: inherit;
  line-height: var(--leading-tight);
  -webkit-margin-start: 0;
  margin-inline-start: 0;
}

.content-card__date--wrapper {
  align-items: center;
  color: inherit;
  display: flex;

  /* Margin auto allows for the date to always be placed at the bottom
  of the card for position consistency when multiple cards are grouped together . */
  -webkit-margin-before: auto;
  margin-block-start: auto;
}

/* We need to know if there are upcoming dates to be able to show
  the '+ more dates' link/label on cards, however,   we don't need
  to display them. */

.content-card__date--wrapper .recurring-output--wrapper details {
  display: none;
}

.content-card__date {
  align-items: center;
  display: flex;
  font-weight: var(--font-weight-600);
}

.content-card__date .date {
  font-weight: var(--font-weight-600);
}

.content-card__date .date svg {
  -webkit-margin-end: var(--size-2);
  margin-inline-end: var(--size-2);
}

/* For events, show the label '+ more dates' when an event is recurring. */

.content-card__more-dates {
  color: var(--gray-500);
  font-size: var(--font-size-0);
  font-weight: normal;
}

.content-card__more-dates:hover {
  color: var(--ucla-blue);
}