/*
	Trade Cars Blog
	blog.css
	Last modified - 08 Apr 2025
*/
.blogs {
    --blog-sidebar: 330px;
    --blog-grid-gap: 60px;
    display: grid;
    grid-template-columns: 1fr var(--blog-sidebar);
    gap: var(--blog-grid-gap);
    padding-block: var(--section-bp-30) var(--section-bp-80);
}
.blogs .page__title {
    color: var(--clr-brand-red);
    font-size: clamp(24px, 3vw, 32px);
}
.blog__list__item {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr;
    gap: 30px;
}
.blog__list__item img {
    border-radius: var(--rounded-10);
}
.blog__list__item h2 {
    font-size: clamp(22px, 3vw, 26px);
    color: var(--clr-brand-blue);
}
.blog__list__item .blog--date {
    color: rgba(0, 0, 0, 0.5);
    font-size: var(--text-14);
}
.blog__list__item p {
    line-height: 1.7;
    color: var(--clr-333);
    letter-spacing: 0.2px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    display: -webkit-box;
}
@media (hover: hover) and (pointer: fine) {
    .blog__list__item:hover h2 {
        text-decoration: underline;
        color: var(--clr-brand-red);
    }
}
.blogs aside {
    padding-block-start: var(--space-20);
}

@media (max-width: 1200px) {
    .blog__list__item {
        grid-template-columns: auto;
        gap: 20px;
    }
}
@media (max-width: 960px) {
    .blogs {
        --blog-sidebar: 100%;
        grid-template-columns: auto;
    }
}


/* ----------------------- Blog Details -----------------------*/

.blog__details h1 {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.4;
}
.blog__details .date--author span {
    color: rgba(0, 0, 0, 0.5);
}
.blog__details .blog--cms p,
.blog__details .blog--cms li {
    line-height: 1.7;
    font-size: 17px;
    color: var(--clr-333);
    letter-spacing: 0.2px;
}
.blog__details .blog--cms p strong,
.blog__details .blog--cms strong {
    font-weight: var(--fw-700);
    color: var(--clr-black);
}
.blog__details .blog--cms ul,
.blog__details .blog--cms ol {
    display: grid;
    gap: var(--space-10);
}
.blog__details .blog--cms ul,
.blog__details .blog--cms ol,
.blog__details .blog--cms ul li,
.blog__details .blog--cms ol li {
    list-style: revert;
}
.blog__details .blog--cms ul,
.blog__details .blog--cms ol {
    padding-inline-start: 20px;
}
.blog__details .blog--cms ul li,
.blog__details .blog--cms ol li {
    padding-inline-start: 10px;
}
.blog__details .blog--cms p a {
    text-decoration: underline;
    color: var(--clr-brand-red);
}

.blog__details .blog--cms :where(h2, h3, h4, h5, h6, ul, ol) {
    padding-block-start: 20px;
}

@media (max-width: 640px) {
    .blog__content {
        gap: var(--space-20);
    }
    .blog__details .blog--cms p,
    .blog__details .blog--cms li {
        font-size: 16px;
    }
    .blog__details .date--author span {
        font-size: var(--text-14);
    }
    .blog__details .blog--cms :where(h2, h3, h4, h5, h6, ul, ol) {
        padding-block-start: 10px;
    }
}