/* News Stories styles */

section.news-stories-wrapper {
  padding-block: 6rem;

  @media (min-width: 50rem) {
    padding-block: 8rem;
  }
}

.news-stories-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;

  .content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    max-width: 39.5rem;
  }

  @media (min-width: 64rem) {
    flex-direction: row;
    align-items: flex-end;
  }
}

.news-stories-slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 4rem;

  .news-stories-slider {
    .slick-list {
      overflow: visible;

      .slick-track {
        display: flex;
        gap: 1.5rem;

        &::before, &::after {
          display: none;
        }
      }

      .slick-slide {
        height: inherit !important;

        &> div {
          height: 100%;

          .post-meta {
            margin-top: auto;
          }
        }
      }
    }
  }

  .news-stories-slider-nav {
    position: relative;
    padding: 0 5rem;
    margin: 0 auto;
    max-width: 100%;

    .slick-dots {
      list-style-type: none;
      display: flex;
      align-items: center;
      flex-direction: row;
      gap: 0.75rem;
      margin: 0;
      padding: 0;
      height: 3.5rem;
      
      li {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        max-width: 2rem;
        aspect-ratio: 1;
    
        button {
          position: relative;
          width: 100%; height: 100%;
          aspect-ratio: initial;
          text-indent: -999rem;
          border: none;
          border-radius: 0;
          background-color: transparent;
          transition: all .3s ease;
          cursor: pointer;

          &::before {
            content: "";
            position: absolute;
            inset: 50% 0 auto;
            height: 3px;
            border-radius: var(--wp--custom--border-radius--xs);
            background-color: var(--wp--custom--color--neutral--400);
            transform: translateY(-50%);
          }
    
          .slick-dot-icon {
            visibility: hidden;
            display: none;
          }
    
          .slick-sr-only {
            display: none;
          }
        }
    
        &.slick-active {
          flex: 1.5;

          button {
            scale: 1;

            &::before {
              background-color: var(--wp--preset--color--fg-action);
            }
          }
        }
      }
    }

    .slick-arrow {
      position: absolute;
      top: 50%; right: 0;
      border: 1px solid var(--wp--preset--color--border-05);
      width: 3.5rem;
      aspect-ratio: 1;
      border-radius: var(--wp--custom--border-radius--full);
      text-indent: -999rem;
      background: var(--wp--preset--color--bg-01) url(../../assets/images/icons/slider-arrow.svg) no-repeat center;
      transform: translateY(-50%);
      cursor: pointer;
      transition: transform .3s ease;

      &:hover {
        transform: translateY(-50%) scale(1.1);
      }

      &.slick-prev {
        left: 0; right: auto;
        transform: translateY(-50%) rotate(180deg);

        &:hover {
          transform: translateY(-50%) rotate(180deg) scale(1.1);
        }
      }

      &.slick-disabled {
        pointer-events: none;
        opacity: .25;
      }
      
    }
  }
}