/* Page-local styles extracted from landing/blog/index.html */

/* =====================================================================
   BLOG INDEX PAGE-LOCAL STYLES
     1. Topic nav: same pill system as product / customers
     2. Post card (paper-tinted hover lift)
   ===================================================================== */


/* -- 1. Sticky topic bar: uses .nav-tabs-track / .nav-pill-link from nav.html */
.blog-nav-row {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}
/* Do not use `font: inherit` here — it overrides .nav-pill-link.is-active font-weight */
#blog-topic-nav button.nav-pill-link {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    cursor: pointer;
}


/* -- 2. Post card ----------------------------------------------- */
.blog-card {
    border: 1px solid #E3DBCD;
    border-radius: 18px;
    background: #FFFFFF;
    transition:
        transform   260ms cubic-bezier(.2, .8, .2, 1),
        box-shadow  260ms ease,
        border-color 260ms ease;
}
@media (hover: hover) {
    .blog-card:hover {
        transform: translateY(-2px);
        border-color: #C8B99E;
        box-shadow: 0 18px 40px -26px rgba(15, 61, 46, 0.30);
    }
    .blog-card:hover .blog-card-title { color: #0F3D2E; }
}
.blog-card-cover {
    border-bottom: 1px solid #E3DBCD;
    background: linear-gradient(165deg, #F4EFE6 0%, #FBF8F1 50%, #EEE6D6 100%);
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    overflow: hidden;
}
.blog-card-cover-empty { aspect-ratio: 4 / 3; }
.blog-card-title {
    transition: color 220ms ease;
}


/* -- 3. Featured (latest) post: dark editorial card -------------- */
.featured-post {
    background: var(--ink, #0B1510);
    border: 1px solid rgba(244, 239, 230, 0.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 30px 60px -28px rgba(11, 21, 16, 0.55);
    transition:
        transform   320ms cubic-bezier(.2, .8, .2, 1),
        box-shadow  320ms ease,
        border-color 320ms ease;
}
@media (hover: hover) {
    .featured-post:hover {
        transform: translateY(-2px);
        border-color: rgba(244, 239, 230, 0.18);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.05) inset,
            0 36px 72px -28px rgba(11, 21, 16, 0.7);
    }
    .featured-post:hover .featured-cta {
        background: var(--paper, #FBF8F1);
    }
}
.featured-pill {
    background: rgba(15, 61, 46, 0.55);
    border: 1px solid rgba(122, 155, 138, 0.35);
    color: rgba(244, 239, 230, 0.85);
}
.featured-cta {
    background: var(--bone, #F4EFE6);
    color: var(--ink, #0B1510);
    transition: background 220ms ease, transform 220ms ease;
}
.featured-visual {
    background: linear-gradient(165deg, #0E1C16 0%, #0B1510 50%, #142A20 100%);
    border-left: 1px solid rgba(244, 239, 230, 0.06);
}
.featured-visual-frame {
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(122, 155, 138, 0.05), transparent 60%);
    aspect-ratio: 4 / 3;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    overflow: hidden;
}
/* The cover_visual embeds are designed ~380px wide with their own
   white card + shadow. We let them render at natural size (no scale)
   and the 4:3 frame hugs that aspect so the embed sits centered with
   even padding on all sides. */
.featured-visual-frame > div {
    width: 100%;
}
.featured-visual-frame > div > div {
    max-width: 100% !important;
    border-radius: 16px !important;
}