#blog-listing .container {
    padding-top: 50px;
    padding-bottom: 100px;
}
#blog-listing .topic {
    margin-left: auto;
    margin-right: auto;
}
#blog-listing .title {
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    line-height: 50px;
    margin-top: 16px;
}
#blog-listing .toolbar {
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
#blog-listing .toolbar .search-form {
    position: relative;
    max-width: 608px;
    width: 100%;
}
#blog-listing .toolbar .search-form input {
    width: 100%;
    padding: 12px 100px 12px 15px;
    font-size: 14px;
    line-height: 20px;
    height: 48px;
    margin-top: 0;
}
#blog-listing .toolbar .search-form .btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
}
#blog-listing .toolbar .filters {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
#blog-listing .toolbar .filters .form-control {
    height: 44px;
    margin-top: 0;
    padding: 10px 40px 10px 15px;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    /* Native arrow replaced with the mock's heroicons-mini chevron-down. */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23100C0C'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
}
#blog-listing .posts {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

/* Blog card — exact spec from the Figma Card node (381:3757). */
.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-alt);
    border: 1px solid #F1F1F3;
    border-radius: 20px;
    padding: 30px;
}
.blog-card .cover {
    display: block;
    height: 254px;
    border-radius: 10px;
    overflow: hidden;
}
/* <picture> (webp + jpg fallback) is a pass-through wrapper: it must fill the
   fixed-height .cover so the img's height:100% keeps resolving against it. */
.blog-card .cover picture {
    display: block;
    width: 100%;
    height: 100%;
}
.blog-card .cover img,
.blog-card .cover .cover-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-card .cover .cover-placeholder {
    background: var(--color-bg-third);
}
.blog-card .meta {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-link);
    font-size: 14px;
    line-height: 20px;
}
.blog-card .meta .views {
    display: flex;
    align-items: center;
    gap: 5px;
}
.blog-card .meta .views .icon {
    font-size: 16px;
}
.blog-card .name {
    margin: 10px 0 10px;
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
}
.blog-card .name a {
    /* Grey/15 from the mock's card heading (rest of the site titles use #100C0C) */
    color: #262626;
    text-decoration: none;
}
.blog-card .excerpt {
    margin: 0 0 20px;
    color: var(--color-text-alt);
    font-size: 16px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}
.blog-card .read-more {
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    color: var(--color-text-secondary);
    text-decoration: unset;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
}

#blog-listing .empty {
    margin-top: 50px;
    text-align: center;
    color: var(--color-text-alt);
}
#blog-listing .more-link {
    display: block;
    width: fit-content;
    margin: 50px auto 0;
    color: var(--color-text-link);
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
}
#blog-listing .paginationContainer {
    margin-top: 40px;
}
#blog-listing .top-companies {
    margin-top: 50px;
}
#blog-listing .top-companies .topic {
    margin-left: auto;
    margin-right: auto;
}
#blog-listing .top-companies .chips {
    margin-top: 20px;
    display: flex;
    align-items: center;
    /* The mock's strip is ONE line: 4 chips + the chevron. Its 297px chips are
       sized for the mock's 1240px content width; our container is 1065px, and
       flex breaks lines by flex-basis, so fixed-width chips always wrapped.
       Nowrap + flexible chips keep the single line (names ellipsize). */
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
}
#blog-listing .top-companies .company-chip {
    flex: 1 1 0;
    /* Kill the min-content floor so all chips share the row equally (the mock's
       chips are equal-width); long names ellipsize inside. */
    min-width: 0;
    /* Cap at the mock's chip width so a short list (2-3 companies) stays a
       compact centered row instead of ballooning across the container. */
    max-width: 297px;
}
/* Desktop row = 4 chips + chevron (per the laptop mock); the 5th shows on mobile. */
#blog-listing .top-companies .company-chip:nth-child(n+5) {
    display: none;
}
#blog-listing .top-companies .chips-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0; /* the nowrap row must squeeze chips, not the chevron */
    color: var(--color-text);
    text-decoration: none;
}

@media (max-width: calc(991px + 30px)) {

    #blog-listing .title {
        font-size: 32px;
        line-height: 40px;
    }
    #blog-listing .toolbar {
        margin-top: 30px;
    }
    #blog-listing .posts {
        grid-template-columns: repeat(2, 1fr);
    }
    /* The 768px-wide container can't hold four shrinkable chips (a chip's rigid
       parts — badge, bar, paddings — are ~166px alone), so let the strip wrap
       into two rows of two here; ≤768 stacks them full-width anyway. */
    #blog-listing .top-companies .chips {
        flex-wrap: wrap;
    }
    #blog-listing .top-companies .company-chip {
        flex: 0 1 297px;
        max-width: none;
    }
    .blog-card {
        padding: 20px;
    }
    .blog-card .cover {
        height: 200px;
    }
}

@media (max-width: 768px) {

    #blog-listing .container {
        padding-top: 35px;
        padding-bottom: 50px;
    }
    #blog-listing .title {
        font-size: 32px;
        line-height: 40px;
    }
    #blog-listing .more-link {
        margin-top: 15px;
    }
    #blog-listing .paginationContainer {
        margin-top: 15px;
    }
    /* Mobile mock separates the Top-5 block from the pagination with a
       section-sized gap (50 hero bottom padding + 50 section top). */
    #blog-listing .top-companies {
        margin-top: 100px;
    }
    #blog-listing .top-companies .chips {
        margin-top: 16px;
    }
    /* Mobile mock stacks all five chips full-width, no chevron. */
    #blog-listing .top-companies .company-chip {
        flex-basis: 100%;
    }
    #blog-listing .top-companies .company-chip:nth-child(n+5) {
        display: flex;
    }
    #blog-listing .top-companies .chips-more {
        display: none;
    }
    #blog-listing .toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    #blog-listing .toolbar .search-form {
        max-width: 100%;
    }
    #blog-listing .toolbar .filters .form-control {
        flex: 1 1 50%;
        min-width: 0;
    }
    #blog-listing .posts {
        margin-top: 15px;
        grid-template-columns: 1fr;
    }
    .blog-card .cover {
        height: 220px;
    }
}

@media (max-width: 576px) {

    /* Mock mobile card (597:6728): p25, image 184 r10, heading 19/24,
       paragraph 14/20, full-width 32px button. */
    .blog-card {
        padding: 25px;
    }
    .blog-card .cover {
        height: 184px;
    }
    .blog-card .name {
        font-size: 19px;
        line-height: 24px;
    }
    .blog-card .excerpt {
        font-size: 14px;
        line-height: 20px;
    }
    .blog-card .read-more {
        padding: 6px 15px;
    }
    #blog-listing .more-link {
        font-size: 14px;
    }
    #blog-listing .toolbar .filters .form-control {
        height: 38px;
        padding: 8px 35px 8px 15px;
        font-size: 14px;
        line-height: 20px;
    }
    /* Shrunk together with the filters so the stacked toolbar rows stay
       the same height (38px, as in the mobile mock). */
    #blog-listing .toolbar .search-form input {
        height: 38px;
    }
    #blog-listing .toolbar .search-form .btn {
        padding: 8px 15px;
        font-size: 14px;
        line-height: 16px;
    }
}