/*
  @file Theming the teaser view mode, and lists that render teasers.
*/

.lgd-teaser__image img {
  width: 100%;
  border-radius: 6px;
}

.lgd-teaser__content+.lgd-teaser__image {
  margin-top: var(--spacing);
}

.lgd-teaser {
  display: flex;
  /*border-bottom: 2px solid #DADADA;*/
  margin-bottom: 1rem;
  /*padding-bottom: 30px;*/
}

.lgd-teaser h3 a:hover {
  background-color: var(--color-yellow);
}

.newsroom__featured-news .lgd-teaser__image {
  width: 100%;
}

.view-id-localgov_news_search h4,
.newsroom__featured-news .lgd-teaser h4 {
  color: var(--color-accent);
  font-size: 22px;
  font-weight: bold;
}

.newsroom__featured-news h3 {
  padding-top: 30px;
  color: var(--color-accent);
  font-size: 28px;
}

.newsroom__featured-news .lgd-teaser {
  flex-direction: column;
  margin-left: -2rem;
  margin-right: -2rem;
  background-color: var(--teaser-featured-background--color);
  padding-left: 1rem;
  padding-right: 1rem;
}

@media screen and (min-width: 48rem) {
  .newsroom__featured-news .lgd-teaser {
    flex-direction: row;
    margin: 0;
    padding: 0;
  }

  .lgd-teaser h3 {
    margin-bottom: 0.5rem;
  }

  .lgd-teaser .field--name-body {
    font-size: var(--font-size-summary);
    color: var(--color-black);
  }

  .lgd-teaser__image {
    flex-shrink: 0;
    width: var(--teaser-image-with);
  }

  .lgd-teaser__image+.lgd-teaser__content {
    margin-left: 1rem;
  }

  .lgd-teaser__content+.lgd-teaser__image {
    margin-top: 0;
    margin-left: auto;
    padding-left: 1rem;
  }

  /*
    This featured news section should really be its own (card) view mode.
    We shouldn't need overrides like this in our theme.
  */
  .newsroom__featured-news .lgd-teaser {
    display: block;
    background-color: var(--teaser-featured-background--color);
    border-radius: 3px;
    padding: 25px;
  }

  .newsroom__featured-news .lgd-teaser .lgd-teaser__content--localgov-news-article .lgd-teaser__content--blogs-article {
    padding: 0;
  }

  .newsroom__featured-news .lgd-teaser__content {
    padding: var(--teaser-featured-content-padding);
  }

  .newsroom__featured-news .lgd-teaser__image+.lgd-teaser__content {
    margin-left: 0;
  }
}

@media screen and (max-width: 48rem) {
  .lgd-teaser {
    display: flex;
    flex-direction: column;
  }

  .lgd-teaser__image,
  .lgd-teaser__content {
    width: 100%;
  }
}

/*
  .lgd-teaser-list is a class that we can use as a container when we
  render teasers, for example:
    - services list on services landing page
    - news listing page
    - events listing page
*/
.lgd-teaser-list .views-row,
.view-blogs-search .views-row,
.lgd-teaser-list .service-landing-page__service,
.lgd-teaser-list .lgd-topic-list-builder__service,
.news-article .field--name-localgov-news-related>.field__item {
  margin-bottom: var(--vertical-rhythm-spacing);
  padding-bottom: var(--vertical-rhythm-spacing);
  border-bottom: none;
}

.lgd-teaser-list--grid .view-content,
.lgd-teaser-list--grid .lgd-teaser-list__content {
  display: flex;
}

.lgd-teaser-list .lgd-topic-list-builder__service,
.service-landing-page__service.destination-landing-page__services--item {
  border-bottom: 0;
  padding: 0;
  margin-bottom: 0;
}

.lgd-teaser>a:focus,
.lgd-teaser>a:hover,
.section-teaser>a:focus,
.section-teaser>a:hover {
  position: relative;
  background: var(--color-yellow);
  outline: none;
  z-index: 1;
}

.lgd-teaser>a:focus::before,
.lgd-teaser>a:hover::before,
.section-teaser>a:focus::before,
.section-teaser>a:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -35px;
  height: 100%;
  width: 35px;
  background: var(--color-yellow);
  z-index: -1;
}

.lgd-topic-list-builder__service .lgd-topic-list-builder__service-icon,
.destination-landing-page__services--item .service-landing-page__service-icon {
  padding-top: 8px;
  color: var(--color-accent-hover);
}

.lgd-topic-list-builder__service .lgd-topic-list-builder__service-icon path,
.destination-landing-page__services--item .service-landing-page__service-icon path {
  fill: var(--color-accent-hover);
}

.lgd-teaser>a,
.lgd-teaser--localgov-services-landing a,
.section-teaser>a {
  text-decoration: none;
  display: block;
}

.lgd-teaser>a {
  margin-left: 1rem;
}

.lgd-teaser>a:hover,
.section-teaser>a:hover {
  text-decoration: none;
}

.lgd-teaser--localgov-services-landing h2,
.lgd-teaser__content--localgov-step-by-step-overview h2,
.lgd-teaser.lgd-teaser--localgov-directory h2,
.node.node--type-localgov-directory.node--view-mode-teaser h2,
.section-teaser .node__title {
  font-size: var(--font-size-large);
  color: var(--color-accent);
  text-decoration: underline;
  margin-bottom: 10px;
}

.lgd-teaser--localgov-services-landing .lgd-teaser__content,
.lgd-teaser--localgov-services-landing .field--name-body,
.section-teaser .node__content,
.section-teaser .field--name-body {
  text-decoration: none;
  color: var(--color-black);
}

.field--name-localgov-news-date {
  font-size: var(--font-size-medium);
}

@media screen and (min-width: 48em) {

  .lgd-teaser__content--localgov-step-by-step-overview h2,
  .section-teaser .node__title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .lgd-topic-list-builder__service .lgd-topic-list-builder__service-icon,
  .destination-landing-page__services--item .service-landing-page__service-icon {
    padding-top: 12px;
    color: var(--color-accent-hover);
    position: relative;
    z-index: 10;
  }

  .lgd-teaser-list .lgd-topic-list-builder__service,
  .service-landing-page__service.destination-landing-page__services--item {
    border-bottom: 0;
    padding: 10px;
  }

  .lgd-topic-list-builder__service-item {
    width: 100%;
  }
}

.service-landing-page__services {
  .destination-landing-page__services--item:hover,
  .destination-landing-page__services--item:focus,
  .destination-landing-page__services--item:focus-within {
    background-color: var(--color-yellow);
  }
}

.localgov-services-sublanding__content {
  .lgd-topic-list-builder__service:hover,
  .lgd-topic-list-builder__service:focus,
  .lgd-topic-list-builder__service:focus-within {
    background-color: var(--color-yellow);
  }
}