/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Node Teaser specific styles.
 */

.node--view-mode-teaser .node-meta {
  margin-block-end: var(--sp);
}

.node--view-mode-teaser .node-meta a {
  color: var(--color-text-primary-medium);
  font-weight: bold;
}

.teaser {
  position: relative; /* Anchor after pseudo-element. */
    padding-block-end: var(--sp1-5);
}

.teaser figure {
  margin: 0;
}

.teaser::after {
  position: absolute;
  inset-block-end: 0;
  width: var(--sp3);
  height: 0;
  content: "";
  /* Intentionally not using CSS logical properties. */
  border-top: solid 2px var(--color--gray-95);
}

@media (min-width: 62.5rem) {
  .teaser {
    padding-block-end: var(--sp3);
  }
}

.teaser-content {
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--sp);
}

.teaser-content .field:not(:last-child) {
  margin-block-end: 0;
}

@media (min-width: 62.5rem) {
  .teaser-content {
    gap: var(--sp2);
  }
}

.teaser-image {
  flex-shrink: 0;
  margin: 0;
}

.teaser-image:empty {
  display: none;
}

.teaser-image:empty + .teaser-title {
  flex-basis: auto;
}

.teaser-image a {
  display: block;
}

.teaser-image img {
  width: var(--sp3-5);
  height: var(--sp3-5);
  object-fit: cover;
  border-radius: 50%;
}

@media (min-width: 62.5rem) {
  .teaser-image img {
    width: var(--grid-col-width);
    height: var(--grid-col-width);
  }
}

@media (min-width: 62.5rem) {
  .teaser-image {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
    margin: 0;
  }
}

.teaser-title {
  margin-block: 0;
  flex-basis: calc(100% - var(--sp4-5));
  color: var(--color-text-neutral-loud);
  font-size: 1.5rem;
  line-height: var(--line-height-base);
}

@media (min-width: 62.5rem) {
  .teaser-title {
    flex-basis: auto;
    font-size: var(--sp2);
    line-height: var(--sp3);
  }
}

.teaser-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  gap: var(--sp1);
  margin-block-end: var(--sp1);
}

@media (min-width: 62.5rem) {
  .teaser-top {
    position: relative; /* Anchor the image */
  }
}

/*BUTOON*/
.teaser-footer {
  margin-block-start: var(--sp1-5);
}

.teaser-footer a {
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--color--primary-60);
    padding-block-end: 0.1rem;
    box-shadow: inset 0 -2px 0 0 var(--color--primary-60);
    transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.teaser-footer a:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    color: var(--color--black);
    box-shadow: inset 0 -2em 0 0 var(--color--primary-80);
    text-decoration-color: var(--color--primary-80);
}


/*MAIN PARENT BOOK*/
.main-parent-book-teaser {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-l);
  margin-block-start: var(--sp0-5);
}

.main-parent-book-teaser a {
  text-decoration: none;
  color: var(--color-text-neutral-soft);
  position: relative;
  padding-block: var(--sp0-5);
}

.main-parent-book-teaser a::after {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 0;
  content: "";
  transition: transform 0.2s;
  transform: scaleX(0);
  transform-origin: left;
  border-top: solid 3px var(--color--primary-50);
}

.main-parent-book-teaser a:hover {
  color: var(--color-text-neutral-loud);
}

.main-parent-book-teaser a:hover:after {
  transform: scaleX(1);
}

/*BLOCK LIST*/
.block-list {
  margin-block-start: var(--sp0-5);
}

.block-list .icon-inline {
  align-items: start;
}

.block-list .icon-inline svg {
  color: var(--color--green);
  height: var(--sp1-5);
  margin-inline-end: var(--sp0-25);
}

.codes-list,
.node--view-mode-teaser .field--name-field-terms {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp0-5);
}

.node--view-mode-teaser .text-content.field--name-field-terms {
  line-height: var(--line-height-base);
}

.codes-list span,
.node--view-mode-teaser .field--name-field-terms .field__item {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--color-text-neutral-loud);
}

.codes-list span:nth-last-child(n+2)::after,
.node--view-mode-teaser .field--name-field-terms .field__item:nth-last-child(n+2)::after {
  content: ',';
  color: currentColor;
}

/**PREMIUM**/
.premium-node {
    border-block: var(--sp0-25) solid var(--color--primary-60);
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
}

.premium-node .teaser-image img {
    border-radius: 0;
}

.premium-node .top-metadata-node-teaser {
    color: var(--color-text-neutral-loud);
}

.premium-node .bundle-name,
.premium-node .verified .icon {
    color: var(--color--green);
}

.premium-node .verified span {
    font-weight: var(--font-weight-bold);
}