/* =============================================================================
   FloreData — Blog hub (/blog/ posts index)
   Composed from the design system (no dedicated .ai page): floral hero +
   eyebrow + dark category pills + a grid of brand-pastel post cards.
   ============================================================================= */

.fd-page-blog-hub { background: var(--wp--preset--color--background); }

/* -----------------------------------------------------------------------------
   Hero — compact floral banner (reuses the post-hero treatment)
   -------------------------------------------------------------------------- */
.fd-bloghub-hero {
    position: relative;
    text-align: center;
    /* nav-over hero (Sandro 2026-06-26): the floating nav sits OVER the floral like
       the home hero — NO lavender band. Taller banner so the motif has room to breathe. */
    padding: clamp(156px, 13vw, 244px) 24px clamp(116px, 10vw, 176px);
    overflow: hidden;
    isolation: isolate;
}
.fd-bloghub-hero__bg {
    position: absolute;
    inset: -40px 0 0;      /* floral bleeds up behind the floating nav (no band) */
    background: url(../img/floral-motif-3.webp) center / cover no-repeat;
    z-index: -2;
}
.fd-bloghub-hero__overlay {
    position: absolute;
    inset: 0;
    /* jazz-club tint (not grape-soda) — keeps white-text AA WITHOUT turning the
       floral motif to purple mud; lets the botanical texture read. */
    background: radial-gradient(120% 92% at 50% 42%,
        rgba(40, 40, 57, 0.30), rgba(40, 40, 57, 0.46) 70%);
    z-index: -1;
}
.fd-bloghub-hero::after {
    content: none;                /* straight banner bottom — no curved ellipse (Geetha, call 2026-06-17) */
}
.fd-bloghub-hero__inner {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
    text-shadow: 0 1px 18px rgba(40, 40, 57, 0.38);
}
.fd-bloghub-hero .fd-eyebrow--blog {
    margin: 0 0 22px;
    background: rgba(249, 248, 247, 0.92);
    text-shadow: none;
}
.fd-bloghub-hero__title {
    font-weight: 700;
    font-size: clamp(40px, 5.2vw, 78px);   /* shared inner-hero title scale (Blog / Case Studies / Industries match) */
    line-height: 1.03;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--background);
    margin: 0;
}
.fd-bloghub-hero__title em { font-weight: 700; font-style: italic; }
.fd-bloghub-hero__sub {
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.7rem);
    line-height: 1.4;
    color: var(--wp--preset--color--background);
    margin: 22px auto 0;
    max-width: 46ch;
}

/* -----------------------------------------------------------------------------
   Category filter
   -------------------------------------------------------------------------- */
.fd-bloghub-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 1280px;
    margin: clamp(36px, 4vw, 56px) auto 0;
    padding: 0 24px;
}
.fd-filter-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;                 /* a11y touch target */
    box-sizing: border-box;
    border: 1.5px solid var(--wp--preset--color--line);
    background: transparent;
    color: var(--wp--preset--color--text);
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 600;
    font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
    padding: 9px 22px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;            /* pills are now <a> links (#17) */
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fd-filter-pill:visited { color: var(--wp--preset--color--text); }
.fd-filter-pill.is-active:visited { color: #fff; }
.fd-filter-pill:hover {
    background: rgba(40, 40, 57, 0.06);                 /* subtle neutral fill — hints at the dark active state */
    border-color: var(--wp--preset--color--text);
    color: var(--wp--preset--color--text);
}
.fd-filter-pill.is-active {
    background: var(--wp--preset--color--surface-dark);
    border-color: var(--wp--preset--color--surface-dark);
    color: #fff;
}
.fd-filter-pill:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 3px;
}
/* mobile: the case-studies filter has many long industry pills → left-align so
   they wrap tidily left-to-right instead of a centered zig-zag. */
@media (max-width: 600px) {
    .fd-casehub-filter { justify-content: flex-start; }
}

/* -----------------------------------------------------------------------------
   Post-card grid
   -------------------------------------------------------------------------- */
.fd-bloghub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 26px;
    max-width: 1280px;
    margin: clamp(20px, 2vw, 28px) auto 0;   /* pills hug the grid they filter */
    padding: 0 24px;
}
/* small categories (2 or 4 posts): centred 2-col so a 3-col grid doesn't strand
   a lone card / leave a void (visual-critic 2026-06-25) */
.fd-bloghub-grid--balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 880px;
}
@media (max-width: 700px) {
    .fd-bloghub-grid--balanced { grid-template-columns: 1fr; }
}
/* Geetha 2026-06-18 card redesign: floral-imagery background + dark gradient
   overlay + white italic title + byline + Explore button. */
.fd-postcard {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 2px rgba(40, 40, 57, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fd-postcard[hidden] { display: none; }
.fd-postcard::before {                       /* legibility overlay */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(40,40,57,0.12) 0%, rgba(40,40,57,0.34) 46%, rgba(40,40,57,0.80) 100%);
}
.fd-postcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 40px -26px rgba(40, 40, 57, 0.55);
}
.fd-postcard__link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 300px;
    padding: clamp(22px, 2.2vw, 32px);
    text-decoration: none;
    color: #ffffff;
}
.fd-postcard__title {
    font-weight: 700;
    font-style: italic;                      /* card title = Bold Italic (mockup) */
    font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.65rem);
    line-height: 1.16;
    color: #ffffff;
    margin: auto 0 0;                        /* push title + meta + button to the bottom */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fd-postcard__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.fd-postcard__dot { opacity: 0.7; }
.fd-postcard__explore { align-self: flex-start; margin-top: 18px; }

/* floral-imagery backgrounds (rotation) */
.fd-postcard--bg1 { background-image: url(../img/value-card-2.webp); }
.fd-postcard--bg2 { background-image: url(../img/industries-bg.webp); }
.fd-postcard--bg3 { background-image: url(../img/value-card-4.webp); }
.fd-postcard--bg4 { background-image: url(../img/floral-motif-3.webp); }
.fd-postcard--bg5 { background-image: url(../img/value-card-1.webp); }
.fd-postcard--bg6 { background-image: url(../img/value-card-3.webp); }

.fd-bloghub-empty,
.fd-bloghub-noresults {
    text-align: center;
    font-size: 1.1rem;
    color: var(--wp--preset--color--text-muted);
    margin: 48px auto;
    max-width: 1280px;
}

/* -----------------------------------------------------------------------------
   Pagination + CTA
   -------------------------------------------------------------------------- */
.fd-bloghub-pagination {
    max-width: 1280px;
    margin: clamp(40px, 5vw, 64px) auto 0;
    padding: 0 24px;
    text-align: center;
}
.fd-bloghub-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    margin: 0 4px;
    border-radius: 999px;
    border: 1.5px solid var(--wp--preset--color--line);
    color: var(--wp--preset--color--text);
    font-weight: 600;
    text-decoration: none;
}
.fd-bloghub-pagination .page-numbers.current {
    background: var(--wp--preset--color--surface-dark);
    border-color: var(--wp--preset--color--surface-dark);
    color: #fff;
}
.fd-bloghub-pagination .page-numbers:hover:not(.current) {
    border-color: var(--wp--preset--color--primary-soft);
}

.fd-page-blog-hub .fd-post-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: clamp(64px, 8vw, 110px) auto;
    padding: 0 24px;
}

@media (max-width: 600px) {
    .fd-bloghub-hero { padding-top: clamp(150px, 30vw, 190px); padding-bottom: clamp(90px, 18vw, 130px); }
    .fd-bloghub-grid { grid-template-columns: 1fr; gap: 18px; }
    .fd-postcard__link { min-height: 0; }

    /* CTA pair → equal width + centered, and trim the dead band around it */
    .fd-page-blog-hub .fd-post-cta { flex-direction: column; align-items: center; gap: 12px; margin: clamp(40px, 7vw, 64px) auto; }
    .fd-page-blog-hub .fd-post-cta a { width: 100%; max-width: 300px; box-sizing: border-box; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .fd-postcard,
    .fd-postcard__arrow { transition: none; }
    .fd-postcard:hover { transform: none; }
    .fd-postcard:hover .fd-postcard__arrow { transform: none; }
}