.teaser {
  @include all-headings {
    font-family: $font-base;
    font-size: $font-size-l;
    font-weight: bold;
    letter-spacing: unset;
    line-height: 1.4;
  }
}

h1.teaser,
h2.teaser,
h3.teaser,
h4.teaser,
h5.teaser,
h6.teaser {
  font-family: $font-base;
  font-size: $font-size-l;
  font-weight: bold;
  letter-spacing: unset;
  line-height: 1.4;
}


.universal-teaser {
  margin: $grid-gutter 0;

  .field {
    margin: .5rem 0;
  }

  .teaser--top {
    margin-bottom: .625rem;
  }

  .field--name-field-mood-image {
    display: block;
    //max-width: 100%;

    .field {
      margin: 0;
    }

    img {
      max-width: 100%;
      height: auto;
      vertical-align: bottom;
    }
  }

  .field--name-field-subtitle {
    font-weight: bold;
  }

  &.view-mode-compact {
    .field--name-field-subtitle {
      font-weight: normal;
      margin: 0;
    }
  }

  footer {
    margin-top: 1rem;

    @include breakpoint(m) {
      margin-top: 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
  }

  .teaser--author {

    .field__items {
      float: left;
      display: flex;
      flex-flow: row wrap;
      gap: 0 (2 * $grid-gutter);

      .profile-teaser {
        margin-top: (0.5 * $grid-gutter);
        margin-bottom: 0;
      }

    }

    .teaser,
    .teaser a {
      color: $color-text;
      font-size: 1rem;
      font-weight: normal;
      margin: 0;

      &:hover {
        color: $color-text-inverted;
      }
    }

    .profile--picture {
      height: 3rem;
      width: 3rem;
      min-width: 3rem;

      &:before {
        font-size: 1.5rem;
        //top: .75rem;
      }
    }

    .field--name-field-subtitle {
      font-weight: normal;
    }
  }

  .teaser--date {
    margin-top: 1.333rem;
    margin-left: $grid-gutter;
    text-align: right;

  }

  // broken image fallback
  img.image-style-teaser {
    display: inline-block;
    aspect-ratio: 16/9;
    min-width: 240px;
    min-height: 146px;
    background: var(--color-bg-slight-contrast);
  }

}

// changed in 1.3.1: teaser grid layout

.universal-teaser {
  display: flex;
  flex-flow: column;
  @include breakpoint(m) {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: auto;
    column-gap: $grid-gutter;
    grid-template-areas:
      "text text text text text text image image image image"
      "foot foot foot foot foot foot foot foot foot foot";

    .teaser--top {
      grid-area: image;
      justify-self: end;
    }
    .teaser--body {
      grid-area: text;
    }
    .teaser--footer {
      grid-area: foot;
    }
  }
}

// Teaser big too verbose for small screens

.view-mode-teaser-big .field--name-body {
  display: none;
  @include breakpoint(m) {
    display: block;
  }
}

// side-by-side teasers

.grid-2-m,
.grid-3-l {
  .universal-teaser {
    @include breakpoint(m) {
      display: flex;
      flex-flow: column;
    }
  }
}

// following 2 types of teaser clickable area extension
// see ../js/openculturas-base.js, l 172 resp. 203
// set class correspondingly (teaser-fully-linked or teaser-image-linked)
// in universal-teaser.html.twig, teaser-unified.html.twig,
// node--teaser-big.html.twig, and date views

// 1. fully linked teasers

.teaser-fully-linked {
  border: 1px solid transparent;

  &:focus-within,
  &:hover {
    background-color: var(--color-bg-link-translucent);
    border-color: var(--color-link);
    cursor: pointer;
    margin: calc(-0.5 * $grid-gutter) calc(-1 * $grid-gutter);
    padding: calc(0.5 * $grid-gutter) $grid-gutter;

    .views-row:first-child & {
      //  margin: $grid-gutter 0; // inherited from .universal-teaser
      margin: calc(0.5 * $grid-gutter) calc(-1 * $grid-gutter) calc(-0.5 * $grid-gutter);
    }
  }
}

.calendar {
  .universal-teaser.teaser-fully-linked {
    &:focus-within,
    &:hover {
      border-color: transparent;
      outline: 1px solid var(--color-link);
      outline-offset: calc(0.5 * $grid-gutter);
      margin: $grid-gutter 0;
      padding: 0;
    }
    .teaser--date {
      margin: 0;
    }
    .views-row:first-child & {
      margin: 0;
    }
  }
}

// 2. teaser images linked via js

.teaser-image-linked {
  .field--name-field-mood-image {
     .field__items {
       display: inline-block;
       overflow: hidden;
       .field__items {
         overflow: unset;
       }
    }
    img {
      transition: transform 300ms ease;
      @media (prefers-reduced-motion: reduce) {
        transition-duration: 10ms;
      }
    }
  }
  &:focus-within,
  &:hover {
    .field--name-field-mood-image {
       .field__items {
         outline: 2px solid var(--color-link);
         outline-offset: 0;
         cursor: pointer;
         .field__items {
           outline: unset;
         }
        }
      img {
        transform: scale(1.2);
        @media (prefers-reduced-motion: reduce) {
          transform: scale(1);
        }
      }
    }
  }
}

.calendar {
  .universal-teaser.teaser-image-linked {
    margin: 0;
    .teaser--date {
      margin: 0;
      text-align: left;
    }
  }
}
