/* FOR MULTIPLE BLOGS */

#blog-posts {
   display: flex;
    flex-direction: column;
    gap: calc(2 * var(--navbar-height));
}

#blog-posts > .blog-post {
    min-height: 324px;
    display: flex;
    flex-direction: column;
    position: relative;
}

#blog-posts > .blog-post .title-container {
    width: 100%;
    position: absolute;
    top: calc(-1 * (var(--navbar-height) + var(--padding-1)));
}

#blog-posts > .blog-post:nth-child(2n+1) .title-container::before {
    content: "";
    position: absolute;
    right: 100%;
    min-height: var(--navbar-height);
    width: 50vw;
    background-color: var(--theme-red);
}

#blog-posts > .blog-post .title-container h2 {
    color: var(--theme-red);
    line-height: var(--navbar-height);
    white-space: nowrap;
}

#blog-posts > .blog-post .post-content {
    background-color: var(--theme-white);
    padding: var(--padding-2);
    transition: border-radius 1s;
    max-width: calc(70% - var(--padding-2));
}

#blog-posts > .blog-post .post-content p {
    margin: var(--padding-0);
}

#blog-posts > .blog-post .post-content ul {
    margin: var(--padding-0) var(--padding-2);
}

#blog-posts > .blog-post .post-content .meta {
    color: var(--theme-red);
    font-weight: 500;
}

#blog-posts > .blog-post:nth-child(2n + 1) .post-content {
    align-self: flex-start;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

#blog-posts > .blog-post:nth-child(2n + 1) h2{
    height: var(--navbar-height);
    background-color: var(--theme-red);
    width: 70%;
    padding-inline: var(--padding-2);
    transition: border-radius 1s;
    margin: 0 0 var(--padding-1) 0;
    position: relative;
}

#blog-posts > .blog-post:nth-child(2n + 1) h2::before {
    content: "";
    position: absolute;
    left: 100%;
    width: var(--navbar-height);
    height: 192px;
    background-color: var(--theme-red);
    border-radius: 0 var(--border-radius) 0 var(--border-radius);
}

#blog-posts > .blog-post:nth-child(2n + 1) h2::after {
    content: "";
    position: absolute;
    top: calc(192px - var(--navbar-height));
    
    left: calc(100% + var(--navbar-height));                          /* start at element edge */
    right: calc(50% - 50vw - 3 * var(--navbar-height));             /* clamp to viewport right edge */

    height: var(--navbar-height);
    background-color: var(--theme-red);
}

#blog-posts > .blog-post:nth-child(2n + 1) .snake-left {
    position: absolute;
    bottom: 9px;
    right: calc(30% -  1px);
    width: 16px;
    height: 16px;
    background:
        radial-gradient(
            circle 10px at 100% 100%,
            transparent 16px,
            var(--theme-red) 17px);  /* + 1 px so the edge is smooth */
    transform: rotate(90deg);
}

#blog-posts > .blog-post:nth-child(2n + 1) .snake-right {
    position: absolute;
    bottom: -9px;
    right: calc(30% - 2 * var(--padding-2) + 1px);
    width: 16px;
    height: 16px;
    background:
        radial-gradient(
            circle 10px at 100% 100%,
            transparent 16px,
            var(--theme-red) 17px);  /* + 1 px so the edge is smooth */
    transform: rotate(-90deg);
}

#blog-posts > .blog-post:nth-child(2n) .post-content {
    align-self: flex-end;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

#blog-posts > .blog-post:nth-child(2n) h2 {
    height: var(--navbar-height);
    background-color: var(--theme-red);
    width: calc(50% + 1px);
    padding-inline: var(--padding-2);
    transition: border-radius 1s;
    margin: 0 0 var(--padding-1) 0;
    position: absolute;
    top: 8px;
    left: 60%;
    transform: translateX(-60%);
}

#blog-posts > .blog-post:nth-child(2n) h2::before {
    content: "";
    position: absolute;
    right: 100%;
    bottom: 0;
    border-top-left-radius: var(--border-radius);
    width: var(--navbar-height);
    height: var(--navbar-height);
    background-color: var(--theme-red);
}

#blog-posts > .blog-post:nth-child(2n) h2::after {
    content: "";
    position: absolute;
    bottom: calc(var(--navbar-height) - 1px);
    right: -1px;
    width: 16px;
    height: 16px;
    background:
        radial-gradient(
            circle 10px at 100% 100%,
            transparent 16px,
            var(--theme-red) 17px);  /* + 1 px so the edge is smooth */
    transform: rotate(180deg);
}

#blog-posts > .blog-post:nth-child(2n) .snake-left {
    position: absolute;
    top: calc(var(--navbar-height) + 7px);
    right: calc(70% + 1px);
    width: var(--navbar-height);
    height: calc(3 * var(--navbar-height));
    background-color: var(--theme-red);
    border-bottom-right-radius: var(--border-radius);
}

#blog-posts > .blog-post:nth-child(2n) .snake-left .snake-extension {
    content: "";
    position: absolute;
    bottom: 0;
    right: 100%;
    min-height: var(--navbar-height);
    width: 50vw;
    background-color: var(--theme-red);
}

#blog-posts > .blog-post:nth-child(2n) .snake-left::before {
    content: "";
    position: absolute;
    bottom: calc(var(--navbar-height) - 1px);
    right: calc(100% - 1px);
    width: 16px;
    height: 16px;
    background:
        radial-gradient(
            circle 10px at 100% 100%,
            transparent 16px,
            var(--theme-red) 17px);  /* + 1 px so the edge is smooth */
            transform: rotate(180deg);
}

#blog-posts > .blog-post:nth-child(2n) .snake-left::after {
    content: "";
    position: absolute;
    top: -1px;
    left: calc(100% - 1px);
    width: 16px;
    height: 16px;
    background:
        radial-gradient(
            circle 10px at 100% 100%,
            transparent 16px,
            var(--theme-red) 17px);  /* + 1 px so the edge is smooth */
}

#blog-posts > .blog-post:nth-child(2n) .snake-right {
    position: absolute;
    top: calc(-2 * (var(--navbar-height) + 2 * var(--padding-0) + var(--padding-0)));
    left: 80%;
    right: calc(50% - 50vw);
    height: var(--navbar-height);
    background-color: var(--theme-red);
    border-top-left-radius: var(--border-radius);
}

#blog-posts > .blog-post:nth-child(2n) .snake-right::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: var(--navbar-height);
    height: calc(3 * var(--navbar-height));
    background-color: var(--theme-red);
    border-bottom-right-radius: var(--border-radius);
}

#blog-posts > .blog-post:nth-child(2n) .snake-right::after {
    content: "";
    position: absolute;
    bottom: calc(-1 * var(--padding-0) - 3px);
    right: calc(100% - 2 * var(--padding-2) + 1px);
    width: 16px;
    height: 16px;
    background:
        radial-gradient(
            circle 10px at 100% 100%,
            transparent 16px,
            var(--theme-red) 17px);  /* + 1 px so the edge is smooth */
}

/* FOR SINGLE BLOG PAGE */
.page > .blog-post {
    display: flex;
    justify-content: center;
}

.page > .blog-post .post-content {
    max-width: calc(1512px * 0.8);
    border-radius: var(--border-radius);
    transition: border-radius 1s;
    background-color: var(--theme-white);
    padding: var(--padding-2);
}

@media (max-width: 1200px) {
    #blog-posts {
        margin-top: calc(var(--navbar-height) + var(--padding-1));
    }

    #blog-posts > .blog-post h2, #blog-posts > .blog-post .post-content {
        border-radius: 0;
    }

    #blog-posts > .blog-post:nth-child(2n + 1) h2,
    #blog-posts > .blog-post:nth-child(2n) h2 {
        font-size: 0.5rem;
    }

    .page > .blog-post .post-content {
        border-radius: 0;
    }
}

@media (max-width: 600px) {
    #blog-posts > .blog-post .post-content {
        max-width: 100%;
        border-radius: 0;
    }

    #blog-posts > .blog-post:nth-child(2n + 1) h2,
    #blog-posts > .blog-post:nth-child(2n) h2 {
        width: 100%;
        text-align: center;
    }

    #blog-posts > .blog-post:nth-child(2n + 1) h2::before {
        display: none;
    }

    #blog-posts > .blog-post {
        min-height: fit-content;
    }

    #blog-posts > .blog-post * {
        width: 100%;
    }

    #blog-posts > .blog-post:nth-child(2n + 1) .post-content,
    #blog-posts > .blog-post:nth-child(2n) .post-content {
        border-radius: 0;
    }

    #blog-posts > .blog-post h2::after {
        display: none;
    }

    #blog-posts > .blog-post .snake-left,
    #blog-posts > .blog-post .snake-right {
        display: none;
    }
}