/**
 * @file
 * Styles for the Ionis Featured News Content component.
 */

.ionis-featured-news-content {
  width: 100%;
}

/* Mobile layout - Both variants use same single column layout */
.ionis-featured-news-content--primary,
.ionis-featured-news-content--secondary .ionis-featured-news-content__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ionis-featured-news-content--primary .ionis-featured-news-content__image,
.ionis-featured-news-content--secondary .ionis-featured-news-content__image {
  width: 100%;
  order: 1;
}

.ionis-featured-news-content--primary .ionis-featured-news-content__text,
.ionis-featured-news-content--secondary .ionis-featured-news-content__text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  order: 2;
}

.ionis-featured-news-content .ionis-featured-news-content__eyebrow,
.ionis-featured-news-content .ionis-featured-news-content__eyebrow a {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-pink);
  text-decoration: none;
}

.ionis-featured-news-content .ionis-featured-news-content__title {
  font-size: var(--fs-headingxsm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-gray-dark);
}

.ionis-featured-news-content .ionis-featured-news-content__summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-headingxxs);
  line-height: 1.5;
  font-weight: 325;
  color: var(--color-black);
}

.ionis-featured-news-content__image img {
  border-bottom-right-radius: 50px;
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 4px 4px 10px 0px #2d39401f;
}

/* Desktop styles for secondary variant - two columns at 1024px and above */
@media (min-width: 1024px) {
  .ionis-featured-news-content--secondary
    .ionis-featured-news-content__content {
    flex-direction: row;
    gap: 2rem;
    align-items: flex-start;
  }

  .ionis-featured-news-content--secondary .ionis-featured-news-content__text {
    flex: 1;
    order: 1;
  }

  .ionis-featured-news-content--secondary .ionis-featured-news-content__image {
    flex: 1;
    order: 2;
  }
}

.ionis-featured-news-content {
  position: relative;
}

.ionis-featured-news-content__title a {
  text-decoration: none;
  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

.ionis-featured-news-content {
  a::after {
    position: absolute;
    inset: 0;
    content: '';
  }
}