/*
|--------------------------------------------------------------------------
| Word Intelligence Related Posts
|--------------------------------------------------------------------------
|
| Dedicated class names are used so these rules do not alter
| category cards on the homepage, category pages or search pages.
|
*/

.related-posts,
.related-posts * {
    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| Section
|--------------------------------------------------------------------------
*/

.related-posts {
    width: 100%;

    margin-top:
        clamp(54px, 7vw, 88px);
}

/*
|--------------------------------------------------------------------------
| Heading row
|--------------------------------------------------------------------------
*/

.related-posts__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 22px;
    padding-bottom: 14px;

    border-bottom:
        1px solid
        var(--border-line);
}

.related-posts__header h2 {
    margin: 0;

    color:
        var(--text-color);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        clamp(1.35rem, 2vw, 1.75rem);

    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.related-posts__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;

    padding: 6px 0;

    color:
        #707070;

    font-family:
        "Inter",
        sans-serif;

    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    transition:
        color 180ms ease;
}

.related-posts__more i {
    position: static;

    font-size: 0.65rem;

    transition:
        transform 180ms ease;
}

.related-posts__more:hover {
    color:
        var(--accent-color);
}

.related-posts__more:hover i {
    transform:
        translate(
            2px,
            -2px
        );
}

.related-posts__more:focus-visible {
    outline:
        3px solid
        rgba(255, 181, 52, 0.42);

    outline-offset: 4px;
}

/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.related-posts__grid {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        clamp(13px, 1.8vw, 10px);
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.related-post-card {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;

    overflow: hidden;
    border-radius: 14px;

    background:
        var(--card-bg);

    color:
        var(--text-color);

    text-decoration: none;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.related-post-card:hover {
    border-color:
        rgba(255, 181, 52, 0.58);

    /* box-shadow:
        0 15px 36px
        rgba(23, 32, 25, 0.11); */

    transform:
        translateY(-5px);
}

.related-post-card:focus-visible {
    outline:
        3px solid
        rgba(255, 181, 52, 0.42);

    outline-offset: 4px;
}

/*
|--------------------------------------------------------------------------
| Image
|--------------------------------------------------------------------------
*/

.related-post-card__media {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:
        var(--bg-color);
}

.related-post-card__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 300ms ease;
}

.related-post-card:hover
.related-post-card__image {
    transform:
        scale(1.045);
}

/*
|--------------------------------------------------------------------------
| Card body
|--------------------------------------------------------------------------
*/

.related-post-card__body {
    display: flex;
    min-height: 118px;
    flex: 1;
    flex-direction: column;

    padding:
        17px
        18px
        20px;
}

.related-post-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        4px
        5px;

    margin-bottom: 13px;
}

/*
|--------------------------------------------------------------------------
| Category
|--------------------------------------------------------------------------
*/

.related-post-card__category {
    color:
        #777777;

    font-family:
        "Inter",
        sans-serif;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.3;
    text-transform: uppercase;
}

/*
|--------------------------------------------------------------------------
| Read time
|--------------------------------------------------------------------------
*/

.related-post-card__read-time {
    display: inline-flex;
    min-height: 15px;
    align-items: center;
    justify-content: center;

    padding:
        3px
        3px;

    border-radius: 3px;

    background:
        var(--duration-bg);

    color:
        var(--tag-text);

    font-family:
        "Inter",
        sans-serif;

    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.025em;
    line-height: 1;
    text-transform: uppercase;
}

/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.related-post-card__title {
    display: -webkit-box;

    margin: 0;

    overflow: hidden;

    color:
        var(--text-color);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        clamp(
            0.4rem,
            1.5vw,
            1.15rem
        );

    font-weight: 650;
    letter-spacing: -0.018em;
    line-height: 1.28;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/*
|--------------------------------------------------------------------------
| Dark mode
|--------------------------------------------------------------------------
*/

body.dark-mode
.related-post-card {
    box-shadow:
        0 9px 28px
        rgba(0, 0, 0, 0.24);
}

body.dark-mode
.related-post-card:hover {
    border-color:
        rgba(255, 181, 52, 0.52);

    box-shadow:
        0 17px 40px
        rgba(0, 0, 0, 0.38);
}

body.dark-mode
.related-post-card__category {
    color: #969696;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {
    .related-posts__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .related-post-card__body {
        min-height: 112px;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 560px) {
    .related-posts {
        margin-top: 52px;
    }

    .related-posts__header {
        align-items: center;

        margin-bottom: 17px;
    }

    .related-posts__header h2 {
        font-size: 1.35rem;
    }

    .related-posts__more {
        font-size: 0.69rem;
    }

    .related-posts__grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .related-post-card {
        display: grid;
        grid-template-columns:
            minmax(125px, 0.8fr)
            minmax(0, 1.2fr);

        align-items: stretch;
    }

    .related-post-card__media {
        height: 100%;
        min-height: 128px;

        aspect-ratio: auto;
    }

    .related-post-card__body {
        min-height: 128px;

        justify-content: center;

        padding:
            16px
            15px;
    }

    .related-post-card__meta {
        margin-bottom: 10px;
    }

    .related-post-card__title {
        font-size: 0.91rem;
    }
}

/*
|--------------------------------------------------------------------------
| Very small phones
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {
    .related-post-card {
        grid-template-columns:
            112px
            minmax(0, 1fr);
    }

    .related-post-card__media,
    .related-post-card__body {
        min-height: 118px;
    }

    .related-post-card__body {
        padding:
            13px
            12px;
    }

    .related-post-card__category {
        font-size: 0.55rem;
    }

    .related-post-card__read-time {
        font-size: 0.49rem;
    }

    .related-post-card__title {
        font-size: 0.84rem;
    }
}

/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .related-posts *,
    .related-posts *::before,
    .related-posts *::after {
        transition: none !important;
    }
}