/* Responsive compositions */

@media (max-width: 900px) {
    .blog-archive__featured {
        gap: 2.5rem;
        grid-template-columns: 1fr;
    }

    .blog-archive__featured-content {
        max-width: 42rem;
    }

    .blog-single__related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .blog-archive__shell,
    .blog-single__shell,
    .blog-single__footer {
        padding-inline: 1.25rem;
    }

    .blog-archive__toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
        padding-block: 1rem;
    }

    .blog-archive__search {
        flex-basis: auto;
        width: min(100%, 22rem);
    }

    .blog-archive__grid {
        grid-template-columns: 1fr;
    }

    .blog-single__introduction {
        gap: 2rem;
        grid-template-columns: 1fr;
    }

    .blog-single__introduction--brief-only {
        justify-content: stretch;
    }

    .blog-single__brief-card {
        border-left: 0;
        border-top: 1px solid var(--df-line);
        padding-left: 0;
        padding-top: 1.5rem;
    }

    .blog-single__brief {
        gap: 1.25rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blog-single__layout {
        max-width: none;
        padding-inline: 1.25rem;
        width: 100%;
    }

    .blog-archive__cta,
    .blog-single__cta {
        align-items: start;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .blog-archive__shell {
        padding-block: 3.5rem 4.5rem;
    }

    .blog-archive__title {
        font-size: clamp(3.6rem, 19vw, 5rem);
    }

    .blog-archive__filters {
        gap-inline: 1.1rem;
    }

    .blog-archive__featured {
        padding-block: 3rem;
    }

    .blog-archive__grid {
        gap: 3.5rem;
        padding-top: 3.5rem;
    }

    .blog-single__shell {
        padding-block: 3.25rem;
    }

    .blog-single__back {
        margin-bottom: 2rem;
    }

    .blog-single__title {
        font-size: clamp(2.55rem, 13vw, 3.5rem);
    }

    .blog-single__brief {
        grid-template-columns: 1fr;
    }

    .blog-single__layout {
        padding-block: 3.25rem 4rem;
    }

    .blog-single__content {
        font-size: 1.1rem;
        line-height: 1.72;
    }

    .blog-single__related-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-archive *,
    .blog-single * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .blog-archive__filter-track,
    .blog-archive__filter-label,
    .blog-archive__filter-caret {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}