/* =============================================================================
   blog-article.css — self-contained styling for a blog post page, written in
   semantic HTML on our design tokens (no elementor-element hashes). Values mirror
   the original Elementor blog design (title Poppins 30/600 #181818, body Lato
   15/26 #1F1F1F, 450px cover, recent-post cards with 20px radius on #FAFAFA).

   Loaded only by the blog article view. The shared header/footer still come from
   the layout; this file styles just the article + "Recent Post" grid.
   ============================================================================= */

.kk-article {
    max-width: var(--kk-content-max);
    margin: 0 auto;
    padding: 20px var(--kk-space-sm) 10px;
    box-sizing: border-box;
}
/* Never let an image push the page into horizontal scroll (a mobile bug on the
   original). Applies to every image in the article + cards. */
.kk-article img, .kk-recent img { max-width: 100%; }
.kk-article a:focus-visible, .kk-recent a:focus-visible {
    outline: 2px solid var(--kk-brand); outline-offset: 2px; border-radius: 2px;
}

/* -- Post ------------------------------------------------------------------- */
.kk-post__title {
    font-family: var(--kk-font-heading);
    /* Fluid: 30px on desktop (matches the original), scales down on small phones
       instead of staying oversized. */
    font-size: clamp(24px, 5vw, 30px);
    font-weight: 600;
    line-height: 1.3;
    color: #181818;
    margin: 0 0 16px;
    overflow-wrap: break-word;
}

.kk-post__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 0 0 20px;
    padding: 0;
    font-family: var(--kk-font-body);
    font-size: 14px;
    color: #555;
}
.kk-post__meta li { display: inline-flex; align-items: center; gap: 7px; }
.kk-post__meta a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.kk-post__meta a:hover { color: var(--kk-brand); }
.kk-post__meta svg { width: 15px; height: 15px; fill: var(--kk-brand); flex: 0 0 auto; }

.kk-post__cover {
    display: block;
    width: 100%;
    /* Fluid height: ~450px on desktop, shrinks on phones so the hero isn't a
       too-tall crop (the original kept a fixed 450px at every width). */
    height: clamp(200px, 40vw, 450px);
    object-fit: cover;
    object-position: center center;
    margin: 0 0 24px;
}

.kk-post__body {
    font-family: var(--kk-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.2px;
    word-spacing: 2px;
    color: #1F1F1F;
    overflow-wrap: break-word;
}
.kk-post__body p { margin: 0 0 18px; }

/* -- Prev / next post navigation -------------------------------------------- */
.kk-post__nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0 0;
    padding: 20px 0;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    font-family: var(--kk-font-heading);
}
.kk-post__nav a { display: inline-flex; align-items: center; gap: 10px; color: #181818; text-decoration: none; }
.kk-post__nav a:hover { color: var(--kk-brand); }
.kk-post__nav svg { width: 16px; height: 16px; fill: currentColor; }
.kk-post__nav-label { display: block; font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .5px; }
.kk-post__nav-title { display: block; font-size: 15px; font-weight: 500; }

/* -- "Recent Post" grid ----------------------------------------------------- */
.kk-recent {
    max-width: var(--kk-content-max);
    margin: 40px auto 0;
    padding: 0 var(--kk-space-sm);
    box-sizing: border-box;
}
.kk-recent__title {
    font-family: var(--kk-font-heading);
    font-size: clamp(24px, 4vw, 32px);   /* 32px desktop (matches live), fluid down */
    font-weight: 600;
    color: #181818;
    text-align: center;   /* matches the live site */
    margin: 0 0 24px;
}
.kk-recent__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kk-space-lg);
}

.kk-card {
    display: flex;
    flex-direction: column;
    background: #FAFAFA;
    border: 1px solid #C2C2C2;
    border-radius: 20px;
    padding-bottom: 10px;
    overflow: hidden;
    transition: background .3s, box-shadow .3s;
}
.kk-card:hover { background: #FFF; box-shadow: 0 0 17px 1px rgba(0, 0, 0, 0.06); }
.kk-card__img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: center center; border-radius: 20px 20px 0 0; }
.kk-card__title { margin: 0; padding: 12px 10px 0; }
.kk-card__title a { font-family: var(--kk-font-heading); font-size: 20px; font-weight: 600; line-height: 28px; color: #000; text-decoration: none; }
.kk-card__title a:hover { color: var(--kk-brand); }
.kk-card__excerpt { font-family: var(--kk-font-body); font-size: 16px; font-weight: 400; line-height: 25px; color: #333; margin: 6px 0 0; padding: 0 10px; }
.kk-card__date { font-family: var(--kk-font-heading); font-size: 12px; color: #000; padding: 8px 10px 0; }
.kk-card__date a { color: inherit; text-decoration: none; }

/* -- Responsive ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .kk-recent__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    /* cover height is fluid via clamp() — no fixed mobile override needed */
    .kk-recent__grid { grid-template-columns: 1fr; }
    .kk-card__excerpt { font-size: 14px; }
}