/* =============================================================================
   blogs.css — listing-specific tweaks for the /blogs page. The post cards
   themselves reuse blog-article.css (.kk-recent__grid + .kk-card*); this file
   only adds the page wrapper padding and the page heading. On tokens.css.
   ============================================================================= */

.kk-blogs {
    --kk-blogs-teal: #1CA1A1;      /* the "BLOGS" title (as on the original)    */
    max-width: var(--kk-content-max);
    margin: 0 auto;
    padding: 40px var(--kk-space-sm) 60px;
    box-sizing: border-box;
}

/* Centred "BLOGS" title — Montserrat 65/700 teal on the original; clamped so it
   scales down on phones instead of overflowing. */
.kk-blogs__title {
    font-family: "Montserrat", var(--kk-font-heading);
    font-size: clamp(30px, 6vw, 65px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--kk-blogs-teal);
    text-align: center;
    margin: 0 0 32px;
}

/* Never let a card image push the page into horizontal scroll. */
.kk-blogs img { max-width: 100%; }
.kk-blogs a:focus-visible {
    outline: 2px solid var(--kk-brand);
    outline-offset: 2px;
    border-radius: 2px;
}