#single {

    .post-content {
        margin-bottom: 3rem;
        display: flex;
        align-items: flex-start;
        gap: 2rem 3rem;
        flex-direction: column;
        justify-content: space-between;

        .left {
            width: 100%;
            height: 100%;

            img, figure {
                width: 100%;
                aspect-ratio: 654 / 818;
                height: auto;
                display: block;
                object-fit: cover;
            }
        }

        .right {
            min-height: 80%;
            max-height: 100%;

            .title {
                font-size: 1.8rem;
                margin-bottom: 0.5rem;
            }

            /* .description {} */

            .included {
                margin: 1.2rem 0;

                h3 {
                    font-size: var(--small-font-size);
                    margin-bottom: 0.6rem;
                }

                .list {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 0.5rem;

                    li {
                        padding: 0.3rem 0.7rem;
                        display: flex;
                        align-items: center;
                        gap: 0.35rem;
                        background-color: #f5f5f5;
                        border: var(--border);
                        border-radius: 999px;
                    }

                    .icon {
                        width: 0.9rem;
                        height: 0.9rem;
                        stroke: #1e8e3e;
                    }

                    .text {
                        font-size: var(--very-small-font-size);
                    }
                }
            }

            .dwn-btns {
                display: flex;
                justify-content: space-between;
                gap: 1.5rem;
                align-items: center;

                .text, .download-btn {
                    display: inline-flex !important;
                    align-items: center;
                    gap: 0.5rem;
                    font-size: var(--very-small-font-size);

                    .icon {
                        width: 1rem;
                        stroke: var(--primary-color);
                    }
                }

                .download-btn {
                    padding: 0.4rem 0.7rem;
                    color: #fff;
                    display: inline-block;
                    background-color: var(--primary-color);
                    border-radius: var(--bd-rad-sm);

                    .icon {
                        stroke: var(--fg-color);
                    }
                }
            }
        }
    }

    .related-posts {
        width: 100%;
        position: relative;

        & > .title {
            font-size: var(--normal-font-size);
        }

        .buttons {
            display: none;
        }

        .list {
            padding: 1rem 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
            gap: 1rem;
            overflow-y: hidden;

            &::-webkit-scrollbar {
                display: none;
            }


            .item {
                max-width: 10rem;
                min-width: 8rem;

                a {
                    width: 100%;
                    display: block;
                }

                img {
                    height: 8rem;
                    width: 100%;
                    object-fit: cover;
                    border-radius: var(--bd-rad-md);
                    background-color: #f5f5f5;
                    border: 1px solid rgba(0,0,0,0.08);
                    box-shadow: 0 0.15rem 0.5rem rgba(0,0,0,0.06);
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                }

                a:hover img {
                    transform: scale(1.03);
                    box-shadow: 0 0.6rem 1.2rem rgba(0,0,0,0.15);
                }
    
                .title {
                    padding: 0.5rem 0;
                    font-size: var(--small-font-size);
                    text-align: center;
                }
            }
        }
    }
}

@media only screen and (min-width: 770px) {

    #single {

        .post-content {
            /* height: 65vh; */
            flex-direction: row;

            .left {
                width: 55%;
                min-height: 65vh;
                max-height: 65vh;
                background-color: #f7f7f7;
                border-radius: var(--bd-rad-md);
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;

                .gallery,
                .main-image {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                img, figure {
                    width: auto;
                    height: auto;
                    max-width: 100%;
                    max-height: 65vh;
                    aspect-ratio: auto;
                    object-fit: contain;
                    border-radius: 0;
                }
            }

            .right {
                width: 45%;
            }
        }
        
        .related-posts {

            .buttons {
                width: 100%;
                /* display: flex; */
                justify-content: space-between;
                position: absolute;
                top: 40%;
                
                button {
                    width: 2rem;
                    height: 2rem;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: var(--bd-rad-md);
                    color: #fff;
                    font-size: 1rem;
                    background-color: var(--primary-color);
                    cursor: pointer;
                    position: absolute;
                }

                
                button.hidden {
                    display: none;
                }

                #prev {
                    left: -2.5rem;
                }

                #next {
                    right: -2.5rem;
                }
            }

            .list {
                display: flex;
                gap: 1rem;

                .item {
                    max-width: 15rem;
                    min-width: 10rem;

                    img {
                        height: 12rem;
                    }

                    .title {
                        font-size: var(--small-font-size);
                    }
                }

            }

        }
    }
}

@media only screen and (min-width: 968px) {
    #single {
        
        .related-posts {
            
            .buttons {
                display: none;
            }
        }
    }
}
/* ============ Template Gallery, Badges, Info Box ============ */

#single .post-content .right .badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

#single .post-content .right .badges .badge {
    font-size: var(--very-small-font-size);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-weight: 600;
}

#single .post-content .right .badges .badge.free {
    background-color: #e7f8ec;
    color: #1e8e3e;
}

#single .post-content .right .badges .badge.editable {
    background-color: #eef1ff;
    color: #4353ff;
}

#single .post-content .right .dwn-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
}

#single .post-content .right .canva-edit-note {
    font-size: var(--very-small-font-size);
    color: var(--txt-faded, #777);
    line-height: 1.4;
    margin-top: 0.6rem;
}

#single .post-content .right .dwn-btns .file-type-tag {
    font-size: var(--very-small-font-size);
    color: #666;
    font-weight: 600;
}

#single .post-content .right .dwn-btns .download-btn {
    justify-content: center;
    text-align: center;
    padding: 0.7rem 1rem;
}

/* Real software logos (Photoshop, Illustrator, Word, PowerPoint,
   Canva) on the download/edit button — sized consistently regardless
   of each logo file's own original dimensions (some are square app
   icons, some are wider wordmarks). Falls back to the generic
   download icon (unaffected, untouched) for any file type with no
   logo set — currently just Publisher. */
#single .post-content .right .dwn-btns .download-btn .software-logo-icon {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

#single .post-content .right .dwn-btns .pin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border: 1px solid #E60023;
    border-radius: var(--bd-rad-sm);
    color: #E60023;
    background-color: #fff;
    font-size: var(--very-small-font-size);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#single .post-content .right .dwn-btns .pin-btn .text {
    color: #E60023;
    transition: color 0.15s ease;
}

#single .post-content .right .dwn-btns .pin-btn .icon {
    width: 1rem;
    height: 1rem;
    fill: #E60023;
    transition: fill 0.15s ease;
}

#single .post-content .right .dwn-btns .pin-btn:hover,
#single .post-content .right .dwn-btns .pin-btn:focus,
#single .post-content .right .dwn-btns .pin-btn:active {
    background-color: #E60023;
    color: #fff;
}

#single .post-content .right .dwn-btns .pin-btn:hover .text,
#single .post-content .right .dwn-btns .pin-btn:focus .text,
#single .post-content .right .dwn-btns .pin-btn:active .text {
    color: #fff !important;
}

#single .post-content .right .dwn-btns .pin-btn:hover .icon,
#single .post-content .right .dwn-btns .pin-btn:focus .icon,
#single .post-content .right .dwn-btns .pin-btn:active .icon {
    fill: #fff !important;
}

.extra-info-section {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 3rem;
}

.extra-info-section .info-box,
.extra-info-section .how-to-edit-box {
    flex: 1;
    border: var(--border);
    border-radius: var(--bd-rad-sm);
    padding: 1rem;
}

.extra-info-section .info-box h3,
.extra-info-section .how-to-edit-box h3 {
    font-size: var(--small-font-size);
    margin-bottom: 0.7rem;
}

.extra-info-section .info-box ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.extra-info-section .info-box li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--very-small-font-size);
    color: #444;
    background-color: #f5f5f5;
    border: var(--border);
    border-radius: var(--bd-rad-sm);
    padding: 0.35rem 0.7rem;
}

.extra-info-section .info-box li span:first-child {
    color: #888;
}

.extra-info-section .info-box li span:first-child::after {
    content: ":";
    margin-right: 0.2rem;
}

.extra-info-section .how-to-edit-box ul.steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    list-style: none;
    padding: 0;
}

.extra-info-section .how-to-edit-box ul.steps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #f5f5f5;
    border: var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.8rem 0.35rem 0.35rem;
    font-size: var(--very-small-font-size);
    color: #444;
}

.extra-info-section .how-to-edit-box .step-num {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

@media only screen and (min-width: 770px) {
    .extra-info-section {
        flex-direction: row;
    }
}

/* Homepage: file type badge on thumbnail */
.posts-container .post {
    position: relative;
}

.posts-container .post .file-type-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    border-radius: 0.35rem;
    color: #fff;
    box-shadow: 0 0.15rem 0.4rem rgba(0,0,0,0.25);
}

.posts-container .post .file-type-badge.psd-badge {
    background-color: #1473E6;
}

.posts-container .post .file-type-badge.ai-badge {
    background-color: #FF9A00;
    color: #2b1400;
}

/* File type badge on "You May Also Like" thumbnails */
.related-posts .list .item .thumb-wrap {
    position: relative;
}

.related-posts .list .item .thumb-wrap .file-type-badge {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    border-radius: 0.3rem;
    color: #fff;
    box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.25);
}

.related-posts .list .item .thumb-wrap .file-type-badge.psd-badge {
    background-color: #1473E6;
}

.related-posts .list .item .thumb-wrap .file-type-badge.ai-badge {
    background-color: #FF9A00;
    color: #2b1400;
}

/* Additional file-type badge colors: Word, PowerPoint, Publisher */
.posts-container .post .file-type-badge.doc-badge,
.related-posts .list .item .thumb-wrap .file-type-badge.doc-badge {
    background-color: #2B579A;
}

.posts-container .post .file-type-badge.ppt-badge,
.related-posts .list .item .thumb-wrap .file-type-badge.ppt-badge {
    background-color: #C43E1C;
}

.posts-container .post .file-type-badge.pub-badge,
.related-posts .list .item .thumb-wrap .file-type-badge.pub-badge {
    background-color: #036C70;
}

.posts-container .post .file-type-badge.canva-badge,
.related-posts .list .item .thumb-wrap .file-type-badge.canva-badge {
    background-color: #8B3DFF;
}

/* When a real software logo image is available (Photoshop, Illustrator,
   Word, PowerPoint, Canva), show it larger and with no background box
   — just the logo itself, no white padding/box around it. Publisher
   has no logo yet, so it keeps the original colored-letter badge as a
   fallback — same pattern used on the individual template page's
   download button.

   The badge is a plain transparent box (no background/shadow of its
   own) — the logo image just sits inside it at a small, consistent
   size, matching exactly between the homepage grid and "You May Also
   Like" so a software logo looks the same wherever it appears. A
   small padding on the image (not a crop/clip) gently shrinks it
   inward within its frame, keeping any soft edge on the source image
   itself from crowding right up to the badge's own edge — no cropping
   or clipping applied, so nothing is ever cut off. */
.posts-container .post .file-type-badge.has-logo,
.related-posts .list .item .thumb-wrap .file-type-badge.has-logo {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
}

.file-type-badge.has-logo img,
.file-type-badge.has-logo svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 0.15rem;
}

/* "From Our Blog" — cross-links to relevant blog posts, shown
   under "You May Also Like". Same visual card as blog.css's
   "Related reads"/"Related Templates" (kept in sync, not shared,
   since blog.css isn't loaded on template pages at all — see
   functions.php's conditional enqueue). */
.blog-related {
    margin-bottom: 2.5rem;
}

.blog-related-title {
    font-size: var(--medium-font-size);
    font-weight: 500;
    margin-bottom: 0.8rem;
}

.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Homepage "Latest from the Blog" — a clean 3-across row on
   desktop/tablet (a variant of the 2-column .blog-related-grid used
   elsewhere), but on mobile it switches to the same horizontal list
   shape as the /blog/ archive page (small thumbnail left, title +
   date/read-time right) for visual consistency between the two. */
.homepage-latest-blog {
    margin-top: 2.5rem;
    margin-bottom: 3rem; /* explicit, generous gap before the footer — this is the last section on the homepage */
}

/* Extra safety net specifically for the homepage wrapper (unique #front
   ID, doesn't affect any other page) — guarantees clearance before the
   footer regardless of how many blog posts/templates end up rendering
   above it. */
#front {
    padding-bottom: 2rem;
}

.homepage-latest-blog .blog-related-grid {
    grid-template-columns: repeat(3, 1fr);
}

.homepage-blog-meta {
    display: none; /* only shown in the mobile list layout below */
}

@media only screen and (max-width: 639px) {

    .homepage-latest-blog .blog-related-grid {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
    }

    .homepage-latest-blog .blog-related-card {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .homepage-latest-blog .blog-related-card img {
        width: 6rem;
        flex-shrink: 0;
        aspect-ratio: 1 / 1;
        margin-bottom: 0;
    }

    .homepage-blog-content {
        flex: 1;
        min-width: 0; /* lets the title/meta text wrap and truncate properly instead of forcing the row wider */
    }

    .homepage-latest-blog .blog-related-card p {
        font-size: var(--small-font-size);
        margin: 0.1rem 0 0.2rem;
        -webkit-line-clamp: 2;
    }

    .homepage-blog-meta {
        display: block;
        font-size: var(--very-small-font-size);
        color: var(--txt-faded);
    }
}

.blog-related-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--bd-rad-md);
    margin-bottom: 0.5rem;
    display: block;
}

.blog-related-card p {
    font-size: var(--small-font-size);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.blog-related-card {
    color: inherit;
    text-decoration: none;
    display: block;
}