/* See ./articles.md for design notes and rationale. */

.articles__root {
  padding-block: var(--ll-space-9);
}

@media (width >= 768px) {
  .articles__root {
    padding-block: var(--ll-space-15);
  }
}

/* Header */

.articles__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ll-space-5);
  margin-block-end: var(--ll-space-8);
}

@media (width >= 768px) {
  .articles__header {
    margin-block-end: var(--ll-space-11);
  }
}

.articles__title {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-h5-family);
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
  font-weight: var(--ds-font-weight-medium);
}

@media (width >= 768px) {
  .articles__title {
    font-family: var(--ll-text-h3-family);
    font-size: var(--ll-text-h3-size);
    line-height: var(--ll-text-h3-line-height);
    letter-spacing: var(--ll-text-h3-letter-spacing);
    font-weight: var(--ll-text-h3-weight);
  }
}

.articles__see-all {
  display: inline-flex;
  align-items: center;
  gap: var(--ll-space-2);
  color: var(--ll-color-text-link);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ds-font-weight-medium);
  text-underline-offset: 4px;
  padding-block-end: var(--ll-space-1);
}

.articles__see-all:hover {
  color: var(--ll-color-text-link-hover);
}

@media (width >= 768px) {
  .articles__see-all {
    font-family: var(--ll-text-body-base-family);
    font-size: var(--ll-text-body-base-size);
    line-height: var(--ll-text-body-base-line-height);
    letter-spacing: var(--ll-text-body-base-letter-spacing);
    padding-block-end: var(--ll-space-3);
  }
}

/* Icon */

.articles__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: none;
  background-color: currentcolor;
  mask: var(--articles-icon-url) center / contain no-repeat;

  /* stylelint-disable-next-line property-no-vendor-prefix --
     Safari < 15.4 still requires the -webkit-mask shorthand. */
  -webkit-mask: var(--articles-icon-url) center / contain no-repeat;
}

.articles__see-all .articles__icon {
  width: 16px;
  height: 16px;
}

@media (width >= 768px) {
  .articles__see-all .articles__icon {
    width: 20px;
    height: 20px;
  }
}

.articles__icon > img {
  display: none;
}

.articles__read-time .articles__icon {
  display: none;
}

@media (width >= 1024px) {
  .articles__read-time .articles__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
  }
}

/* Card grid */

.articles__list {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (width >= 768px) {
  .articles__list {
    gap: var(--ll-space-7);
  }
}

@media (width >= 1024px) {
  .articles__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ll-space-7);
  }
}

@media (width >= 1440px) {
  .articles__list {
    gap: var(--ll-space-8);
  }
}

.articles__item {
  margin: 0;
  padding: 0;
  border-radius: var(--ll-radius-md-mobile);
}

.articles__item:has(.articles__card-link) {
  transition:
    box-shadow var(--ll-motion-enter-duration) ease,
    transform var(--ll-motion-enter-duration) ease;
}

@media (width >= 1024px) {
  .articles__item:has(.articles__card-link) {
    box-shadow: var(--ll-shadow-resting);
  }
}

@media (hover: hover) {
  .articles__item:has(.articles__card-link):hover {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ll-color-text-primary) 12%, transparent);
    transform: translateY(-4px);
  }
}

/* Card */

.articles__card {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  background: var(--ll-color-bg-secondary);
}

@media (width >= 1024px) {
  .articles__card {
    background: transparent;
    height: 312px;
  }
}

/* Card hit */

.articles__card-link {
  color: inherit;
}

.articles__card-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

.articles__card:has(.articles__card-link:focus-visible) .articles__card-hit {
  visibility: hidden;
}

/* Card text */

.articles__card-text {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-3);
  padding: var(--ll-space-5);
}

.articles__card-text-top,
.articles__card-text-bottom {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.articles__card-text-top {
  gap: var(--ll-space-3);
}

.articles__card-text-bottom {
  gap: var(--ll-space-5);
}

@media (width >= 768px) {
  .articles__card-text {
    padding: var(--ll-space-7);
  }
}

@media (width >= 1024px) {
  .articles__card-text {
    height: 100%;
    padding: 0;
    gap: 0;
    color: var(--ll-color-text-inverse);
  }

  .articles__card-text-top {
    flex: 1 1 0;
    align-items: flex-end;
    gap: var(--ll-space-3);
    padding: var(--ll-space-4);
  }

  .articles__card-text-bottom {
    position: relative;
    z-index: 0;
    flex: 0 0 156px;
    box-sizing: border-box;
    justify-content: flex-end;
    gap: var(--ll-space-5);
    padding: var(--ll-space-6);
    background: linear-gradient(
      180deg,
      rgb(68 68 68 / 0%) 0%,
      rgb(68 68 68 / 20%) 45.99%,
      var(--ll-color-text-secondary) 91.99%
    );
  }

  .articles__card-text-bottom::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    mask: linear-gradient(to bottom, transparent 0%, black 12%);
    /* stylelint-disable-next-line property-no-vendor-prefix --
       Safari still requires the -webkit-mask shorthand. */
    -webkit-mask: linear-gradient(to bottom, transparent 0%, black 12%);
    backdrop-filter: blur(6px);
    /* stylelint-disable-next-line property-no-vendor-prefix --
       Safari < 18 still requires the -webkit-backdrop-filter prefix. */
    -webkit-backdrop-filter: blur(6px);
  }
}

@media (width >= 1440px) {
  .articles__card-text-bottom::after {
    backdrop-filter: blur(8px);
    /* stylelint-disable-next-line property-no-vendor-prefix --
       Safari < 18 still requires the -webkit-backdrop-filter prefix. */
    -webkit-backdrop-filter: blur(8px);
  }
}

.articles__category {
  margin: 0;
  color: var(--ll-color-highlight-iota);
  font-family: var(--ll-text-label-family);
  font-size: var(--ll-text-label-size);
  line-height: var(--ll-text-label-line-height);
  letter-spacing: var(--ll-text-label-letter-spacing);
  font-weight: var(--ds-font-weight-medium);
}

@media (width >= 768px) {
  .articles__category {
    font-family: var(--ll-text-button-sm-family);
    font-size: var(--ll-text-button-sm-size);
    line-height: var(--ll-text-button-sm-line-height);
    letter-spacing: var(--ll-text-button-sm-letter-spacing);
    font-weight: var(--ll-text-button-sm-weight);
  }
}

@media (width >= 1024px) {
  .articles__category {
    padding: var(--ll-space-2) var(--ll-space-3);
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: var(--ll-radius-s);
    background: rgb(0 0 0 / 30%);
    color: var(--ll-color-text-inverse);
    backdrop-filter: blur(10px);
  }
}

.articles__card-title {
  margin: 0;
  color: var(--ll-color-text-link);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ds-font-weight-semibold);
}

@media (width >= 768px) {
  .articles__card-title {
    font-family: var(--ll-text-h7-family);
    font-size: var(--ll-text-h7-size);
    line-height: var(--ll-text-h7-line-height);
    letter-spacing: 0.44px;
  }
}

.articles__card-title .articles__card-link {
  text-underline-offset: 3px;
}

@media (width >= 1024px) {
  .articles__card-title,
  .articles__card-title .articles__card-link {
    color: var(--ll-color-text-inverse);
    text-decoration: none;
  }
}

.articles__read-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ll-space-3);
  margin: 0;
  color: var(--ll-color-highlight-iota);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
}

@media (width >= 768px) {
  .articles__read-time {
    font-family: var(--ll-text-body-sm-family);
    font-size: var(--ll-text-body-sm-size);
    line-height: var(--ll-text-body-sm-line-height);
    letter-spacing: var(--ll-text-body-sm-letter-spacing);
    font-weight: var(--ll-text-body-sm-weight);
  }
}

@media (width >= 1024px) {
  .articles__read-time {
    color: var(--ll-color-highlight-brand-light);
  }
}

/* Media */

.articles__card .l-tmlayout__media img {
  position: relative;
  width: 100%;
}

/* LG/XL overlay */

@media (width >= 1024px) {
  .articles__root .articles__layout[data-layout-lg='overlay'] > .l-tmlayout__content {
    grid-template-areas: 'stack';
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
  }

  .articles__root .articles__layout[data-layout-lg='overlay'] > .l-tmlayout__content > .l-tmlayout__text-section,
  .articles__root .articles__layout[data-layout-lg='overlay'] > .l-tmlayout__content > .l-tmlayout__media-section {
    grid-area: stack;
    width: 100%;
    height: 100%;
    justify-self: stretch;
  }

  .articles__root .articles__layout[data-height-driver-lg='media']
    > .l-tmlayout__content
    > .l-tmlayout__media-section {
    aspect-ratio: auto;
    align-self: stretch;
    align-items: stretch;
  }

  .articles__root .articles__layout[data-layout-lg='overlay'] .l-tmlayout__media {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 100%;
  }

  .articles__root .articles__layout[data-layout-lg='overlay'] .l-tmlayout__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
    object-fit: cover;
    object-position: center;
  }

  .articles__layout {
    isolation: isolate;
  }
}

/* No-media */

.articles__card--no-media {
  min-height: 120px;
}