@use "../_layout/mixins";

.mediaObject {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1em;
}
.mediaObject--vertical {
  --mediaObjectImgMaxWidth: 100%;
  flex-direction: column;
  flex-wrap: nowrap;

  .mediaObject__img {
    width: 100%;
  }
}
.mediaObject__img {
  order: -1;
  flex: 1;
  width: 25%;
  max-width: var(--mediaObjectImgMaxWidth, 325px);
  min-width: var(--mediaObjectImgMinWidth, 230px);
  height: auto;
}
.mediaObject__body {
  flex: 1 1 50%;
}
.mediaObject__header {
  display: flex;
  flex-direction: column;
}
.mediaObject__postDate {
  order: -1;
  margin: 0;
}
.mediaObject__title {
  font-size: var(--step-3);
  font-weight: var(--bold-weight);
  line-height: 1.2;
  display: block;
  margin-block: 0;
}
.mediaObject__link {
  background-image: none;
  --color: var(--blue);
  --hoverColor: var(--blue--dark);
  text-decoration: underline;
  text-decoration-thickness: 3px;

  &:hover, &:focus {
    --color: var(--hoverColor);
  }
}
.mediaObject__header + p,
.mediaObject__excerpt {
  margin-block: 0.5em;
}
.mediaObject--selectableContent {
  .mediaObject__postDate,
  .mediaObject__header ~ p,
  .mediaObject__excerpt {
    position: relative;
  }
}
.mediaObject__pseudoLink {
  @include mixins.link();
  @include mixins.blockLink();
  display: inline-block;
}

.mediaObject--cta {
  position: relative;

  .mediaObject__link {
    transition: color 0.2s ease-out;
    &:after {
      content: "";
      @include mixins.fillParent();
    }
  }
  .mediaObject__pseudoLink {
    transition: color 0.2s ease-out;
  }

  // Change the link color but not if 'selectable content' is being hovered
  // see https://stackoverflow.com/a/73798067/1231466
  &:hover, &:focus {
    &:not(
      :has(
        :is(
          .mediaObject__postDate,
          .mediaObject__header ~ p,
          .mediaObject__excerpt
        ):hover
      )
    ) {
      .mediaObject__link {
        --color: var(--hoverColor);
      }

      .mediaObject__pseudoLink {
        --color: var(--hoverColor);
      }
    }
  }
}