/* =============================================================
   Flowfinity Blog index — scoped, editorial layout
   Loaded ONLY by /blog/index*.aspx. Does not touch the shared
   lg.css / mobile.css. All rules are namespaced under .blogx and
   use 2+ class selectors so they win over the legacy global
   element rules regardless of stylesheet load order.
   Single file, no JS, no web fonts -> HTTP/1.1 friendly.
   ============================================================= */

.blogx {
    --ink: #0f172a;          /* headlines */
    --body: #475569;         /* excerpts  */
    --muted: #64748b;        /* meta      */
    --brand: #cd0e00;        /* Flowfinity red */
    --brand-2: #ff6600;      /* accent orange  */
    --hair: rgb(15 23 42 / .09);
    --surface: #f1f5f9;

    max-width: 960px;
    margin-inline: auto;
    /* room so the sticky nav never overlaps a scrolled-to heading */
    scroll-padding-block-start: 100px;
}

/* ---------- Hero ------------------------------------------------ */
.blogx .blog-hero {
    max-width: 800px;
    margin: 0 auto clamp(1.5rem, 4vw, 2.75rem);
    text-align: center;
}
.blogx .blog-hero h1 {
    text-wrap: balance;          /* tidy, symmetrical heading lines */
    margin-block: .2em .35em;
}
.blogx .blog-lead {
    text-wrap: pretty;
    max-width: 64ch !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem) !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* ---------- Stream + post row ----------------------------------- */
.blogx .blog-stream {
    display: flex;
    flex-direction: column;
}

.blogx .post {
    display: grid;
    grid-template-columns: 248px 1fr;
    gap: clamp(1.1rem, 3vw, 2rem);
    align-items: start;
    padding-block: clamp(2rem, 4.5vw, 3.25rem);
    border-block-end: 1px solid var(--hair);
}
.blogx .post:last-child { border-block-end: 0; }

/* Thumbnail — uniform aspect ratio kills layout shift and gives the
   mismatched legacy images a consistent, intentional look. */
.blogx .post__media {
    display: block;
    overflow: clip;
    border-radius: 14px;
    aspect-ratio: 16 / 10;
    background: var(--surface);
    box-shadow: 0 4px 16px rgb(2 6 23 / .07);
}
.blogx .post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.blogx .post:hover .post__media img { transform: scale(1.045); }

.blogx .post__body { min-inline-size: 0; }   /* allow text to shrink/wrap */

/* Title — fluid, balanced, animated underline that grows on hover */
.blogx .post__title {
    margin: 0 0 .45rem !important;
    font-size: clamp(1.15rem, 1rem + .85vw, 1.6rem) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    text-align: left !important;   /* beat global mobile h2{text-align:center} */
    text-wrap: balance;
}
.blogx .post__title a {
    color: var(--ink) !important;
    text-decoration: none !important;
    background-image: linear-gradient(var(--brand), var(--brand));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: color .25s ease, background-size .35s ease;
}
.blogx .post:hover .post__title a,
.blogx .post__title a:hover,
.blogx .post__title a:focus-visible {
    color: var(--brand) !important;
    background-size: 100% 2px;
}

/* Excerpt — full text shown (no truncation); pretty wrapping avoids runts */
.blogx .post__excerpt {
    margin: 0 0 .9rem !important;
    padding: 0 !important;
    color: var(--body) !important;
    font-size: clamp(.95rem, .92rem + .2vw, 1.05rem) !important;
    line-height: 1.6 !important;
    text-align: left !important;
    text-wrap: pretty;
}

/* Read more */
.blogx .post__more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--brand) !important;
    text-decoration: none !important;
}
.blogx .post__arrow { transition: transform .25s ease; }
.blogx .post:hover .post__arrow,
.blogx .post__more:hover .post__arrow { transform: translateX(4px); }

/* ---------- Featured (lead) story ------------------------------- */
.blogx .post--featured {
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding-block: clamp(.5rem, 2vw, 1rem) clamp(1.6rem, 3.5vw, 2.4rem);
}
.blogx .post--featured .post__media {
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    box-shadow: 0 22px 48px -22px rgb(2 6 23 / .4);
}
.blogx .post--featured .post__title {
    font-size: clamp(1.55rem, 1.1rem + 2vw, 2.4rem) !important;
    line-height: 1.15 !important;
}
.blogx .post--featured .post__excerpt {
    font-size: clamp(1rem, .95rem + .3vw, 1.15rem) !important;
}

/* ---------- Pagination ------------------------------------------ */
.blogx .blog-pager {
    display: flex;
    justify-content: center;
    margin: clamp(2rem, 5vw, 3rem) 0 1rem;
}
.blogx .blog-pager a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--brand) !important;
    text-decoration: none !important;
    border: 1px solid rgb(205 14 0 / .25);
    background: linear-gradient(135deg, rgb(205 14 0 / .04), rgb(255 102 0 / .04));
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.blogx .blog-pager a:hover {
    background: linear-gradient(135deg, rgb(205 14 0 / .1), rgb(255 102 0 / .1));
    border-color: rgb(205 14 0 / .45);
    transform: translateX(3px);
}
/* "Previous" links read right-to-left, so nudge the other way on hover */
.blogx .blog-pager a.is-prev:hover { transform: translateX(-3px); }
.blogx .blog-pager a.is-prev .post__arrow { transition: transform .25s ease; }
.blogx .blog-pager a.is-prev:hover .post__arrow { transform: translateX(-4px); }

/* ---------- Responsive ------------------------------------------ */
@media (max-width: 760px) {
    .blogx { --hair: rgb(15 23 42 / .07); }

    .blogx .post,
    .blogx .post--featured {
        grid-template-columns: 1fr;     /* image stacks above text */
        gap: 1.6rem;                    /* space between image and headline below it */
        align-items: start;
        padding-block: 2.5rem;          /* more air between stories */
    }
    .blogx .post__media { aspect-ratio: 16 / 9; }

    /* Legible, left-aligned headlines with comfortable leading
       (overrides the global mobile h2 centering + tight line-height) */
    .blogx .post__title {
        font-size: 1.2rem !important;
        line-height: 1.32 !important;
        letter-spacing: normal;
        padding: 0 !important;          /* drop stray global h2 side padding */
    }
    .blogx .post--featured .post__title {
        font-size: 1.5rem !important;
        line-height: 1.22 !important;
    }

    /* Full descriptions shown; the extra row spacing keeps it breathable */
    .blogx .post__excerpt {
        margin-bottom: .75rem !important;
    }
}

/* ---------- Scroll-reveal entry (progressive enhancement) --------
   Decorative only: lives entirely inside @supports so browsers
   without scroll-driven animations (e.g. Firefox) simply render the
   posts normally — no hidden content, no JS fallback required. */
@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        @keyframes blogx-reveal {
            from { opacity: 0; transform: translateY(26px); }
            to   { opacity: 1; transform: none; }
        }
        .blogx .reveal {
            animation: blogx-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 32%;
        }
    }
}

/* Honour reduced-motion for the hover micro-interactions too. */
@media (prefers-reduced-motion: reduce) {
    .blogx .post__media img,
    .blogx .post__arrow,
    .blogx .post__title a,
    .blogx .blog-pager a { transition: none; }
    .blogx .post:hover .post__media img { transform: none; }
}