/* Home blog cards: restore the theme's overlapping image/card composition. */
#blog .home-blog-posts {
    row-gap: 30px;
}

#blog .blog-style-three-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 0;
}

#blog .blog-style-three-item .thumb {
    position: relative;
    z-index: 1;
    bottom: auto;
    margin: 0 80px 0 0;
    flex: none;
}

#blog .blog-style-three-item .thumb a { display: block; }

#blog .blog-style-three-item .thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 10px;
}

#blog .blog-style-three-item .content {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    min-width: 0;
    /* Reserve the same overlap as the image so no text can sit underneath it. */
    margin: -135px 0 0 70px;
    padding: 165px 30px 30px;
}

#blog .blog-style-three-item .info {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

#blog .blog-style-three-item .date {
    position: absolute;
    top: 30px;
    right: 25px;
    display: block;
}

#blog .blog-style-three-item .date time {
    display: block;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

#blog .home-blog-author {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    margin-bottom: 20px;
}

#blog .home-blog-author__icon {
    display: inline-grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #c2c2c2;
    border-radius: 50%;
    color: var(--color-paragraph);
}

#blog .home-blog-author__name {
    min-width: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 23px;
    border: 1px solid #c2c2c2;
    border-radius: 25px;
    color: var(--color-paragraph);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

#blog .blog-style-three-item h3 { overflow-wrap: anywhere; }
#blog .blog-style-three-item .button { margin-top: auto; padding-top: 20px; }
#blog .blog-style-three-item h3 a,
#blog a.btn-simple { color: var(--color-heading); }
#blog .blog-style-three-item h3 a:hover,
#blog a.btn-simple:hover { color: var(--color-primary); }
#blog .blog-style-three-item a:focus-visible,
#blog a.btn-simple:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 3px;
}

/* On tablet/mobile, stack the cover and card instead of overlapping them. */
@media (max-width: 991px) {
    #blog .blog-style-three-item .thumb { margin: 0; }
    #blog .blog-style-three-item .thumb img { border-radius: 10px 10px 0 0; }
    #blog .blog-style-three-item .content {
        margin: 0;
        padding: 30px;
    }
    #blog .blog-style-three-item .date {
        position: static;
        margin-bottom: 16px;
    }
    #blog .blog-style-three-item .date time {
        writing-mode: horizontal-tb;
        transform: none;
    }
}