/*==========================================================
  RELATED ARTICLES
==========================================================*/

.lavRelatedArticles {
    position: relative;
    overflow: hidden;
    padding:
        clamp(5rem, 9vw, 8rem)
        0;
    background:
        linear-gradient(
            180deg,
            #faf8fb 0%,
            #ffffff 100%
        );
        
}

.lavRelatedArticles::before,
.lavRelatedArticles::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}

.lavRelatedArticles::before {
    top: -10rem;
    left: -8rem;
    width: 24rem;
    height: 24rem;
    background:
        rgba(191, 165, 220, 0.16);
}

.lavRelatedArticles::after {
    right: -10rem;
    bottom: -10rem;
    width: 22rem;
    height: 22rem;
    background:
        rgba(167, 215, 205, 0.14);
}


/*==========================================================
  HEADER
==========================================================*/

.lavRelatedArticlesHeader {
    
    max-width: 48rem;
    margin:
        0 auto
        clamp(3rem, 6vw, 4.5rem);
    text-align: center;
}

.lavRelatedEyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1rem;
    color: var(--lavender-primary);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.lavRelatedEyebrow::before {
    content: "";
    width: 2.5rem;
    height: 1px;
    background:
        rgba(122, 92, 164, .35);
}

.lavRelatedArticlesHeader h2 {
    margin: 0;
    color: var(--lavender-heading);
    font-family: "Newsreader", serif;
    font-size:
        clamp(2.4rem, 5vw, 4rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.03em;
}

.lavRelatedArticlesHeader p {
    max-width: 38rem;
    margin:
        1.4rem auto 0;
    color: var(--lavender-text-light);
    font-size:
        clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.85;
}


/*==========================================================
  GRID
==========================================================*/

.lavRelatedGrid {
    margin:20px;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0,1fr));
    gap:
        clamp(1.5rem, 3vw, 2.2rem);
}


/*==========================================================
  CARD
==========================================================*/

.lavRelatedCard {
    position: relative;
    border-radius: 1.8rem;
    overflow: hidden;
    background: #fff;
    border:
        1px solid
        rgba(116,86,148,.10);
    box-shadow:
        0 1.2rem 3rem
        rgba(53,40,66,.08);
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .35s ease;
}

.lavRelatedCard:hover {
    transform:
        translateY(-8px);
    border-color:
        rgba(122,92,164,.24);
    box-shadow:
        0 2rem 4.5rem
        rgba(70,50,90,.14);
}

.lavRelatedCardLink {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}


/*==========================================================
  IMAGE
==========================================================*/

.lavRelatedImage {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background:
        #f5f3f8;
}

.lavRelatedImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .45s ease;
}

.lavRelatedCard:hover
.lavRelatedImage img {
    transform: scale(1.06);
}

.lavRelatedImage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(37,27,47,.08)
        );
}


/*==========================================================
  CONTENT
==========================================================*/

.lavRelatedContent {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding:
        1.8rem
        1.7rem
        1.9rem;
}

.lavRelatedReadingTime {
    display: inline-flex;
    align-self: flex-start;
    padding:
        .45rem
        .85rem;
    margin-bottom: 1.1rem;
    border-radius: 999px;
    background:
        rgba(124,92,165,.08);
    color:
        var(--lavender-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.lavRelatedContent h3 {
    margin: 0;
    color:
        var(--lavender-heading);
    font-family:
        "Newsreader",
        serif;
    font-size:
        clamp(1.5rem,2vw,1.9rem);
    font-weight: 500;
    line-height: 1.2;
}

.lavRelatedContent p {
    flex: 1;
    margin:
        1rem 0 1.6rem;
    color:
        var(--lavender-text-light);
    font-size: 1rem;
    line-height: 1.8;
}


/*==========================================================
  READ MORE
==========================================================*/

.lavRelatedReadMore {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color:
        var(--lavender-primary);
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.lavRelatedReadMore svg {
    width: 1rem;
    height: 1rem;
    transition:
        transform .35s ease;
}

.lavRelatedCard:hover
.lavRelatedReadMore svg {
    transform:
        translateX(4px);
}


/*==========================================================
  REVEAL
==========================================================*/

.js .lavRelatedCard {
    opacity: 0;
    transform:
        translateY(2rem);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22,1,.36,1);
}

.js .lavRelatedCard.is-visible {
    opacity: 1;
    transform: none;
}


/*==========================================================
  RESPONSIVE
==========================================================*/

@media (max-width:1100px){

    .lavRelatedGrid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media (max-width:760px){

    .lavRelatedArticles{
        padding:
            4rem
            0;
    }

    .lavRelatedGrid{
        grid-template-columns:1fr;
    }

    .lavRelatedContent{
        padding:1.5rem;
    }

    .lavRelatedArticlesHeader{
        margin-bottom:3rem;
    }

}

@media (prefers-reduced-motion:reduce){

    .lavRelatedCard,
    .lavRelatedImage img,
    .lavRelatedReadMore svg{

        transition:none;

    }

    .js .lavRelatedCard{

        opacity:1;
        transform:none;

    }

}