/* FAQ: Used on homepage for "User Updates" and "Upcoming Training" */
/* SEE: https://dev.tup.tacc.utexas.edu/ */

/* A list of preview content for articles, documents, or pages. */



/* Settings */

:root {
  --global-space--unnamed: 50px;
}



/* Block */

.c-feed-list {
  display: flex;
  flex-direction: column;

  font-size: var(--global-font-size--small);
}



/* Elements */

/* Elements: Title */

.c-feed-list > :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  margin-bottom: 10px;

  /* TODO: When migrated to core-styles, use @extend instead */
  /* @extend .x-truncate--one-line; */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* To style "Update" pill in title */
.c-feed-list .c-pill {
  margin-left: 0.5ch;
  vertical-align: middle;
  transform: translateY(-0.125em);
}

/* Elements: Items */

/* NOTE: `p:has(time)` styles CMS markup, but templates use `time` sans `<p>` */

.c-feed-list > :is(div, article) {
  flex-grow: 1; /* to shrink feed title */

  display: grid;
  grid-template-areas:
    'time link'
    'name link'
    'desc link';
  grid-template-columns: 1fr auto; /* to not let short desc make short column */

  padding-block: 10px;
  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
}
.c-feed-list > :is(div, article):last-of-type {
  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--xx-dark);
}
.c-feed-list > :is(div, article) > time,
.c-feed-list > :is(div, article) > p:has(time) { grid-area: time; }
.c-feed-list > :is(div, article) > :is(h1, h2, h3, h4, h5, h6) { grid-area: name; }
.c-feed-list > :is(div, article) > p:not(:has(time, a:only-child)) { grid-area: desc; }
.c-feed-list > :is(div, article) > p:has(a:only-child) { grid-area: link; }

.c-feed-list > :is(div, article) > :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 10px;
  margin-bottom: 5px;
}

/* TODO: Share styles between c-news and c-feed-list (`time:not(…)`) */
.c-feed-list > :is(div, article) > time:not(:is(h1, h2, h3, h4, h5, h6) *),
.c-feed-list > :is(div, article) > p:has(time):not(:is(h1, h2, h3, h4, h5, h6) *) {
  color: var(--global-color-secondary--normal);
  font-weight: var(--medium);
  text-transform: uppercase;
}
.c-feed-list > :is(div, article) > p:has(time):not(:is(h1, h2, h3, h4, h5, h6) *) {
  margin-bottom: unset;
}

.c-feed-list > :is(div, article) > p:not(:has(time, a:only-child)) {
  /* WARNING: Value is guess-n-check; prevents unexplained visibile 3rd line */
  margin-bottom: 1.15rem;

  /* TODO: When migrated to core-styles, use @extend instead */
  /* @extend .x-truncate--many-lines; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: var(--lines, 2);
}
.c-feed-list > :is(div, article) > p:has(a:only-child) {
  padding-inline: var(--global-space--unnamed);
  margin-bottom: unset;

  /* To vertically center content */
  display: flex;
  align-items: center;
}

/* Elements: Link */

/* NOTE: `p:has(a:only-child)` is used, but `a:last-child` is desired, but not used until "Link" plugin instance supports an icon before the text. */

.c-feed-list > a:last-child,
.c-feed-list > p:has(a:only-child) {
  padding-top: 15px;

  /* TODO: When migrated to core-styles, use @extend instead */
  /* @extend .x-truncate--one-line; */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  /* max-width: 100%; /* SEE: https://stackoverflow.com/a/44521595 */

  font-weight: var(--bold);
  font-size: var(--global-font-size--medium)
}
.o-section--style-dark .c-feed-list > a:last-child,
.o-section--style-light .c-feed-list > p:has(a:only-child) {
  color: var(--global-color-primary--xx-light);
}
.o-section--style-light .c-feed-list > a:last-child,
.o-section--style-light .c-feed-list > p:has(a:only-child) {
  color: var(--global-color-primary--xx-dark);
}