/*
  @file Theming the teaser view mode, and lists that render teasers.
*/
.lgd-teaser {
  display: flex;
  border-top: 3px solid var(--color-green);
  padding: var(--spacing);
  flex-direction: column;
  background-color: var(--teaser-transparency);
}

.lgd-teaser.node--view-mode-teaser-large-format {
  flex-direction: row;
  gap: 1rem;
  width: 100%;
}

.lgd-teaser.node--view-mode-teaser-large-format .lgd-teaser__image img {
  max-width: 220px;
}

.lgd-teaser.article-type-chirp {
  background-color: transparent;
  border-top: 0;
}

.lgd-teaser a {
  --color-link: inherit;
  text-decoration: none;
}

.lgd-teaser a:hover {
  --color-link: var(--color-white);
  background-color: var(--color-black);
  color: white;
}

.lgd-teaser:has(a:hover) {
  --color-link: var(--color-black);
  background-color: var(--teaser-background);
}

@media (prefers-color-scheme: dark) {
  .lgd-teaser a:hover {
    background-color: var(--color-green);
    color: var(--color-link);
  }

  .lgd-teaser:has(a:hover) {
    background-color: transparent;
  }
}


.lgd-teaser h3 {
  margin-bottom: 0;
}

.lgd-teaser__image img {
  width: 100%;
}


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

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

/*
  .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 {
  margin-block-end: var(--vertical-rhythm-spacing);
  padding-block-end: var(--vertical-rhythm-spacing);
  border-block-end: var(--border);
}

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

.views-row {
  display: flex;
}

.view-header {
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: clamp(2.2rem, 2vw, 3rem);
  font-weight: 600;
  letter-spacing: 2px;
  max-width: 55ch;
  margin-bottom: 2rem;
}