/**
 * @file
 * Content highlight component which is used by Article and Event
 * content types.
 */

/* Data attributes to change component's background based on theme. */

:where([data-theme="surface"]) {
  --content-highlight-bg: var(--ucla-blue);
}

:where([data-theme="dgsom"]) {
  --content-highlight-bg: var(--midnight-joshua-tree);
}

:where([data-theme="labs"]) {
  --content-highlight-bg: var(--malibu-dolphin);
  --button-bg: var(--ucla-blue);
  --button-color: var(--white);
  --button-bg-hover: var(--silver-lake-reservoir);
}

:where([data-theme="labs-dynamic"]) {
  --content-highlight-bg: var(--malibu-dolphin);
  --button-bg: var(--ucla-blue);
  --button-color: var(--white);
  --button-bg-hover: var(--silver-lake-reservoir);
}

/* Based on the production site (medschool.ucla.edu), the main content section
  max-width is 1376px.  Setting the same here for when component is viewed in Patternlab. */

.pl .content-highlight {
  margin: 0 auto;
  max-width: var(--size-max-content-width);
}

.content-highlight__container {
  background-color: var(--white);
  padding: var(--size-10);
}

/* If component is added in a one column layout, add blue background. */

.layout--onecol .content-highlight__container {
  background-color: var(--ucla-blue);
  background-color: var(--content-highlight-bg, var(--ucla-blue));
  -webkit-margin-before: -1px;
  margin-block-start: -1px;
}

.content-highlight__featured {
  -webkit-margin-before: var(--size-8);
  margin-block-start: var(--size-8);
}

.content-highlight__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .content-highlight__header {
    align-items: center;
    flex-direction: row;
  }
}

@media (--tablet) {
  .content-highlight__header {
    align-items: center;
    flex-direction: row;
  }
}

.content-highlight__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-8);
  font-weight: var(--font-weight-600);
}

.layout--onecol .content-highlight__heading {
  color: var(--white);
}

.content-highlight__link {
  color: var(--ucla-blue);
  font-size: var(--font-size-3);

  /* If a highlight title is not provided, we still want the link to display
  on the right side.  Flexbox's margin auto lets us do this. */
  -webkit-margin-start: auto;
  margin-inline-start: auto;
}

.layout--onecol .content-highlight__link {
  color: var(--white);
}

/* Create grid for component cards. */

.content-highlight__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-8);
  justify-content: center;
  padding-block: var(--size-8);
}

@media (min-width: 640px) {
  .content-highlight__items {
    justify-content: flex-start;
  }
}

@media (--mobile) {
  .content-highlight__items {
    justify-content: flex-start;
  }
}

/* Changes text size of '+ more dates' inside the cards. */

.content-highlight__items .event-card__more-dates {
  font-size: var(--font-size-sm);
}

.content-highlight__items .content-card {
  flex: 1 1 var(--size-50);
  max-width: var(--size-80);
}

/* Hides the 4th card when the content highlight is added to a two column
  layout with a split of 70/30 or 30/70. */

.layout--twocol-30-70 .content-highlight__items > article:nth-child(4),
.layout--twocol-70-30 .content-highlight__items > article:nth-child(4) {
  display: none;
}

.content-card__event .content-card__date--wrapper {
  align-items: initial;
  flex-direction: column;
}

.content-card__event .readtime {
  -webkit-margin-before: var(--size-3);
  margin-block-start: var(--size-3);
}

.content-highlight__wave {
  display: none;
}

@media (min-width: 768px) {
  .layout--onecol .content-highlight__wave {
    display: block;
    width: 100%;
  }
}

@media (--tablet) {
  .layout--onecol .content-highlight__wave {
    display: block;
    width: 100%;
  }
}