/* Blog archive and single post: desktop values first, responsive adjustments below. */

/* Archive */
.p-blog {
    box-sizing: border-box;
    width: 1100px;
    max-width: calc(100% - 48px);
    padding: 60px 0 120px;
}

.p-blog__filter {
    display: grid;
    grid-template-columns: repeat(3, 345px);
    justify-content: center;
    gap: 32px;
    margin-bottom: 100px;
}

.p-blog__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
}

.p-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 60px;
}

.p-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-text);
    border-radius: 0;
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1;
}

.p-pagination .page-numbers.current,
.p-pagination .page-numbers:hover {
    border-color: var(--color-navy);
    color: var(--color-white);
    background: var(--color-navy);
    opacity: 1;
}

/* Single post: Figma node 2034:1175. */
.p-single {
    box-sizing: border-box;
    width: 1100px;
    max-width: calc(100% - 48px);
    padding: 200px 0;
}

.p-single__article {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
}

.p-single__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.p-single__meta {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 35px;
}

.p-single__title {
    margin: 0;
    color: var(--color-text);
    font-size: 20px;
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: 1.6px;
}

.p-single__thumb {
    width: 100%;
    aspect-ratio: 1100 / 619;
    overflow: hidden;
}

.p-single__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-single__thumb-default {
    background: var(--color-bg-light);
}

.p-single__content {
    color: var(--color-text);
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 2;
    letter-spacing: 1.28px;
}

.p-single__content p {
    margin: 0 0 32px;
}

.p-single__content > :last-child {
    margin-bottom: 0;
}

.p-single__divider {
    width: 100%;
    border-top: 1px solid var(--color-text);
}

.p-single__nav {
    display: grid;
    grid-template-columns: 90px 350px 90px;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 590px;
    max-width: 100%;
    height: 90px;
    margin: 99px auto 0;
}

.p-single__nav-prev {
    justify-self: start;
}

.p-single__nav-next {
    justify-self: end;
}

.p-single__nav-back {
    width: 350px;
}

.p-single__nav-back .c-round-button {
    width: 100%;
}

.p-single__nav > div:not(.p-single__nav-back) a {
    color: var(--color-text);
    font-size: 20px;
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: 1.6px;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .p-blog {
        max-width: calc(100% - 40px);
        padding: clamp(88px, 14vw, 140px) 0 100px;
    }

    .p-blog__filter {
        grid-auto-flow: column;
        grid-auto-columns: min(78vw, 345px);
        grid-template-columns: none;
        justify-content: start;
        gap: 16px;
        margin-bottom: clamp(58px, 10vw, 88px);
        padding-bottom: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .p-blog__filter .c-template-button {
        width: 100%;
        scroll-snap-align: start;
    }

    .p-blog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 52px 24px;
    }
}

@media (max-width: 768px) {
    .p-blog__grid {
        grid-template-columns: 1fr;
    }

    .p-single {
        max-width: calc(100% - 40px);
        padding: 100px 0 120px;
    }

    .p-single__article {
        gap: 40px;
    }

    .p-single__header {
        gap: 24px;
    }

    .p-single__title {
        font-size: 18px;
        line-height: 1.6;
        letter-spacing: 1.44px;
    }

    .p-single__content {
        font-size: 15px;
        letter-spacing: 1.2px;
    }

    .p-single__content p {
        margin-bottom: 30px;
    }

    .p-single__nav {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 30px 20px;
        width: 100%;
        height: auto;
        margin-top: 60px;
    }

    .p-single__nav-prev {
        grid-column: 1;
        grid-row: 1;
    }

    .p-single__nav-next {
        grid-column: 2;
        grid-row: 1;
    }

    .p-single__nav-back {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        width: min(100%, 350px);
    }

    .p-single__nav > div:not(.p-single__nav-back) a {
        font-size: 16px;
        letter-spacing: 1.28px;
    }
}