@import url('blog.css');
@import url('../../../../assets/style/blog-card-engagement.css');

.blog-page--post {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--ask-header-h) + var(--ask-space-2));
}

.blog-page--post .blog-footer-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.85);
    filter: none;
    opacity: 1;
}

.blog-page--post .blog-post-main {
    padding: calc(var(--ask-header-h) + var(--ask-space-8)) 0 var(--ask-space-16);
}

.blog-page--post .blog-post-shell {
    width: min(1100px, var(--ask-container-wide));
    margin: 0 auto;
    padding: 0 var(--ask-space-6);
}

@media (max-width: 768px) {
    .blog-page--post .blog-post-main {
        padding-top: calc(var(--ask-header-h) + var(--ask-space-6));
        padding-bottom: var(--ask-space-12);
    }

    .blog-page--post .blog-post-shell {
        width: 100%;
        padding: 0 var(--ask-space-4);
    }

    .blog-page--post .blog-post-breadcrumb__current {
        max-width: 100%;
        white-space: normal;
    }

    .blog-page--post .blog-post-back {
        width: 100%;
        justify-content: center;
    }

    .blog-page--post .blog-post-share__actions {
        flex-direction: column;
    }

    .blog-page--post .blog-post-share__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .blog-page--post .blog-post-topbar__nav {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ask-space-3);
    }

    .blog-page--post .blog-post-hero__title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .blog-page--post .blog-comment-form__grid {
        grid-template-columns: 1fr;
    }

    .blog-page--post .blog-comment-form__submit {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-page--post {
        scroll-behavior: auto;
    }
}